Skip to content

Commit 44f0bee

Browse files
padmajabholpadmajabhol
committed
fix journalList and edit page
1 parent 5f6b56f commit 44f0bee

File tree

2 files changed

+67
-98
lines changed

2 files changed

+67
-98
lines changed

‎src/components/EditJournal/Edit.js

+51-73
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ import { SectionLayout, PolicyContainer } from '../marginals';
3232

3333
const Edit = () => {
3434
const [post, setPost] = useState([]);
35-
const [plicies, setPlicies] = useState([]);
3635

3736
const { issn } = useParams();
3837

@@ -43,18 +42,34 @@ const Edit = () => {
4342
useEffect(() => {
4443
if (data) {
4544
setPost(data?.getJournalByISSN);
46-
}
47-
if (data) {
48-
setPlicies(data?.getJournalByISSN?.policies);
45+
46+
console.log({ data });
47+
setTitle(data.getJournalByISSN.policies.title);
48+
setPolicyType(data.getJournalByISSN.policies.policyType);
49+
setEnforced(data.getJournalByISSN.policies.enforced);
50+
setEnforcedEvidence(data.getJournalByISSN.policies.enforcedEvidence);
51+
setIsDataAvailabilityStatementPublished(
52+
data.getJournalByISSN.policies.isDataAvailabilityStatementPublished,
53+
);
54+
setIsDataShared(data.getJournalByISSN.policies.isDataShared);
55+
setIsDataPeerReviewed(data.getJournalByISSN.policies.isDataPeerReviewed);
56+
setFirstYear(data.getJournalByISSN.policies.firstYear);
4957
}
5058
}, [data?.getJournalByISSN, data, data?.getJournalByISSN?.policies]);
5159

5260
const setPost2 = (key, value) => setPost((current) => ({ ...current, [key]: value }));
5361

54-
// const setPost3 = (key, value) => setPlicies((current) => ({ ...current, [key]: value }));
62+
const [title, setTitle] = useState('');
63+
const [policyType, setPolicyType] = useState('');
64+
const [enforced, setEnforced] = useState('');
65+
const [enforcedEvidence, setEnforcedEvidence] = useState('');
66+
const [isDataAvailabilityStatementPublished, setIsDataAvailabilityStatementPublished] =
67+
useState(false);
68+
const [isDataShared, setIsDataShared] = useState(false);
69+
const [isDataPeerReviewed, setIsDataPeerReviewed] = useState(false);
70+
const [firstYear, setFirstYear] = useState(9999);
5571

5672
const [updateJournal, { data1, error1 }] = useMutation(UPDATE_JOURNAL);
57-
5873
const editJournal = async (event) => {
5974
event.preventDefault();
6075
const response = await updateJournal({
@@ -66,35 +81,20 @@ const Edit = () => {
6681
issn: post.issn,
6782
domainName: post.domainName,
6883
policies: {
69-
title: post?.policies?.title,
70-
policyType: post.policies.policyType,
71-
enforced: post?.policies?.enforced,
72-
enforcedEvidence: post?.policies?.enforcedEvidence,
73-
isDataAvailabilityStatementPublished:
74-
post?.policies?.isDataAvailabilityStatementPublished,
75-
isDataShared: post?.policies?.isDataShared,
76-
isDataPeerReviewed: post?.policies?.isDataPeerReviewed,
77-
firstYear: post?.policies?.firstYear,
84+
title,
85+
policyType,
86+
enforced,
87+
enforcedEvidence,
88+
isDataAvailabilityStatementPublished,
89+
isDataShared,
90+
isDataPeerReviewed,
91+
firstYear,
7892
},
7993
},
8094
},
8195
});
82-
console.log({ response });
8396
};
8497

85-
// console.log({
86-
// policies: {
87-
// title: post?.policies?.title,
88-
// policyType: post?.policies?.policyType,
89-
// enforced: post?.policies?.enforced,
90-
// enforcedEvidence: post?.policies?.enforcedEvidence,
91-
// isDataAvailabilityStatementPublished: post?.policies?.isDataAvailabilityStatementPublished,
92-
// isDataShared: post?.policies?.isDataShared,
93-
// isDataPeerReviewed: post?.policies?.isDataPeerReviewed,
94-
// firstYear: post?.policies?.firstYear,
95-
// },
96-
// });
97-
9898
if (!post) return <div>Loading</div>;
9999

100100
return (
@@ -140,9 +140,21 @@ const Edit = () => {
140140
<Input
141141
type='text'
142142
required
143-
value={post?.policies?.enforcedEvidence}
143+
value={enforcedEvidence}
144144
onChange={(e) => {
145-
setPost2('policies?.enforcedEvidence', e.target.value);
145+
setEnforcedEvidence(e.target.value);
146+
}}
147+
/>
148+
</div>
149+
150+
<div>
151+
<Label>policy title</Label>
152+
<Input
153+
type='text'
154+
required
155+
value={title}
156+
onChange={(e) => {
157+
setTitle(e.target.value);
146158
}}
147159
/>
148160
</div>
@@ -170,20 +182,6 @@ const Edit = () => {
170182
}}
171183
/>
172184
</div>
173-
{/* <div>
174-
<Label>Authors</Label>
175-
<Input
176-
type='text'
177-
required
178-
value={editA}
179-
onChange={(e) =>
180-
dispatch({
181-
type: 'EDIT_AUTHORS',
182-
payload: e.target.value,
183-
})
184-
}
185-
/>
186-
</div> */}
187185
</FirstDiv>
188186
<Subhead>
189187
<Icon>
@@ -195,25 +193,15 @@ const Edit = () => {
195193
<SecondDiv>
196194
<div>
197195
<Label>Policy Type:</Label>
198-
<Select
199-
value={post?.policies?.policyType}
200-
onChange={(e) => {
201-
setPost2('policies.policyType', e.target.value);
202-
}}
203-
>
196+
<Select value={policyType} onChange={(e) => setPolicyType(e.target.value)}>
204197
<option value='NUMBER_ONE'>NUMBER_ONE</option>
205198
<option value='NUMBER_TWO'>NUMBER_TWO</option>
206199
<option value='NUMBER_THREE'>NUMBER_THREE</option>
207200
</Select>
208201
</div>
209202
<div>
210203
<Label>Enforced:</Label>
211-
<Select
212-
value={post?.policies?.enforced}
213-
onChange={(e) => {
214-
setPost2('policies.enforced', e.target.value);
215-
}}
216-
>
204+
<Select value={enforced} onChange={(e) => setEnforced(e.target.value)}>
217205
<option value='YES'>Yes - before publication</option>
218206
<option value='NO'>Option 2</option>
219207
</Select>
@@ -227,9 +215,9 @@ const Edit = () => {
227215
<Toggle>
228216
<Switch
229217
onChange={(nextChecked) =>
230-
setPost2('policies.isDataAvailabilityStatementPublished', nextChecked)
218+
setIsDataAvailabilityStatementPublished(nextChecked)
231219
}
232-
checked={post?.policies?.isDataAvailabilityStatementPublished}
220+
checked={isDataAvailabilityStatementPublished}
233221
onColor='#ef9c38'
234222
onHandleColor='#'
235223
handleDiameter={22}
@@ -250,10 +238,8 @@ const Edit = () => {
250238
<Label htmlFor='material-switch'>
251239
<Toggle>
252240
<Switch
253-
onChange={(nextChecked) =>
254-
setPost2('policies.isDataPeerReviewed', nextChecked)
255-
}
256-
checked={post?.policies?.isDataPeerReviewed}
241+
onChange={(nextChecked) => setIsDataPeerReviewed(nextChecked)}
242+
checked={isDataPeerReviewed}
257243
onColor='#ef9c38'
258244
onHandleColor='#'
259245
handleDiameter={22}
@@ -274,8 +260,8 @@ const Edit = () => {
274260
<Label htmlFor='material-switch'>
275261
<Toggle>
276262
<Switch
277-
onChange={(nextChecked) => setPost2('policies.isDataShared')}
278-
checked={post?.policies?.isDataShared}
263+
onChange={(nextChecked) => setIsDataShared(nextChecked)}
264+
checked={isDataShared}
279265
onColor='#ef9c38'
280266
onHandleColor='#'
281267
handleDiameter={22}
@@ -300,17 +286,9 @@ const Edit = () => {
300286
</FormInputBtn>
301287
</Form>
302288
</>
303-
{/* )} */}
304289
</PolicyContainer>
305290
</SectionLayout>
306291
);
307292
};
308293

309294
export default Edit;
310-
311-
/**
312-
* fetch post details via graphql query (useQuery query)
313-
* set these details in local state (useState, useEffect)
314-
* use this state to give values to input and update via onChange
315-
* onClick for save, use post state
316-
*/

‎src/components/Journals/JournalList.js

+16-25
Original file line numberDiff line numberDiff line change
@@ -24,44 +24,35 @@ import GET_ALL_JOURNALS from '../../graphql/queries/getAllJournals';
2424
import reducer from '../../useReducer/Journals/reducer';
2525

2626
const JournalList = () => {
27-
const initialState = {
28-
posts: [],
29-
};
30-
3127
const [searchResults, setSearchResults] = useState([]);
3228
const [search, setSearch] = useState('');
3329

30+
// Pagination Values
3431
const [currentPage, setCurrentPage] = useState(1);
3532
const [postsPerPage] = useState(5);
3633

3734
const paginate = (pageNumber) => setCurrentPage(pageNumber);
3835

39-
const [state, dispatch] = useReducer(reducer, initialState);
40-
4136
const { data, loading } = useQuery(GET_ALL_JOURNALS, {
4237
variables: { currentPageNumber: currentPage, limitValue: postsPerPage },
43-
fetchPolicy: 'network-only',
38+
// fetchPolicy: 'network-only',
4439
});
4540

46-
let journalsOnCurrentPage;
47-
48-
if (data) {
49-
journalsOnCurrentPage = data?.getAllJournals?.journals;
50-
}
51-
52-
// useEffect(() => {
53-
// const filteredResults = journalsOnCurrentPage.filter(
54-
// (post) =>
55-
// post.issn.includes(search) || post.title.toLowerCase().includes(search.toLowerCase()),
56-
// );
57-
// setSearchResults(filteredResults.reverse());
58-
// }, [journalsOnCurrentPage, search]);
41+
useEffect(() => {
42+
console.log({ data });
43+
if (data) {
44+
const filteredResults = data.getAllJournals.journals.filter(
45+
(post) =>
46+
post.issn.includes(search) || post.title.toLowerCase().includes(search.toLowerCase()),
47+
);
48+
setSearchResults(filteredResults.reverse());
49+
}
50+
}, [data, search]);
5951

60-
// console.log(currentPage);
52+
console.log(currentPage);
6153

62-
// const indexOfLastPost = currentPage * postsPerPage;
63-
// const indexOfFirstPost = indexOfLastPost - postsPerPage;
64-
// const currentPost = searchResults.slice(indexOfFirstPost, indexOfLastPost);
54+
const indexOfLastPost = currentPage * postsPerPage;
55+
const indexOfFirstPost = indexOfLastPost - postsPerPage;
6556

6657
if (loading) {
6758
return <h2>loading...</h2>;
@@ -83,7 +74,7 @@ const JournalList = () => {
8374
</Search>
8475
</form>
8576
<Box>
86-
{journalsOnCurrentPage.map((blog) => (
77+
{searchResults.map((blog) => (
8778
<Preview key={blog.id}>
8879
<Head2 primary>{blog.domainName}</Head2>
8980
<Link to={`/policy/${blog.issn}`}>

0 commit comments

Comments
 (0)