Skip to content

Commit e0a0084

Browse files
padmajabholpadmajabhol
authored
Merge pull request #189 from padmajabhol/useContext
useContext hook for state-management
2 parents 1b5fbc5 + dadf300 commit e0a0084

File tree

11 files changed

+430
-367
lines changed

11 files changed

+430
-367
lines changed

‎data/db.json‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -223,22 +223,6 @@
223223
"datashared": false,
224224
"peerreview": true,
225225
"enforced": "Yes - before application"
226-
},
227-
{
228-
"id": 15,
229-
"title": "Integer Programming, Second Edition",
230-
"authors": "Sm Zobaed, Sameer Seth",
231-
"journaltype": "RESEARCH ARTICLE",
232-
"topic": "General Computing",
233-
"published": "12 July 2022",
234-
"issn": "issn-615-682543",
235-
"updated": "16th Aug 2022",
236-
"link": "https://doi.org/10.1002/agg2.20287",
237-
"policy": "Policy 1",
238-
"dataavail": true,
239-
"datashared": false,
240-
"peerreview": true,
241-
"enforced": "Yes - before application"
242226
}
243227
]
244228
}

‎src/App.js‎

Lines changed: 33 additions & 271 deletions
Original file line numberDiff line numberDiff line change
@@ -13,281 +13,43 @@ import { Journal, Contact, Manifesto, Home } from './pages';
1313
import { Footer, Auth, Header, Login, JournalDetails, AddJournal } from './components';
1414
import Navbar from './components/marginals/Navbar/Navbar';
1515
import Edit from './components/EditJournal/Edit';
16+
import useAxiosFetch from './hooks/useAxiosFetch';
17+
import { DataProvider } from './context/DataContext';
1618

1719
function App() {
18-
const [posts, setPosts] = useState([]);
19-
const [loading, setLoading] = useState(false);
20-
const [currentPage, setCurrentPage] = useState(1);
21-
const [postsPerPage] = useState(5);
22-
const [search, setSearch] = useState('');
23-
const [searchResults, setSearchResults] = useState([]);
24-
25-
const [title, setTitle] = useState('');
26-
const [editTitle, setEditTitle] = useState('');
27-
const [authors, setAuthors] = useState('');
28-
const [editAuthors, setEditAuthors] = useState('');
29-
const [journaltype, setJournaltype] = useState('');
30-
const [editJournaltype, setEditJournaltype] = useState('');
31-
const [topic, setTopic] = useState('');
32-
const [editTopic, setEditTopic] = useState('');
33-
const [published, setPublished] = useState('');
34-
const [issn, setIssn] = useState();
35-
const [editIssn, setEditIssn] = useState();
36-
const [updated, setUpdated] = useState(format(new Date(), 'MMMM dd, yyyyy pp'));
37-
const [link, setLink] = useState('');
38-
const [editLink, setEditLink] = useState('');
39-
const [policy, setPolicy] = useState('policy 1');
40-
const [editPolicy, setEditPolicy] = useState('policy 1');
41-
const [dataavail, setDataavail] = useState(false);
42-
const [editDataavail, setEditDataavail] = useState(false);
43-
const handleChangeData = (nextChecked) => {
44-
setDataavail(nextChecked);
45-
};
46-
const [datashared, setDatashared] = useState(false);
47-
const [editDatashared, setEditDatashared] = useState(false);
48-
const handleChangeData2 = (nextChecked) => {
49-
setDatashared(nextChecked);
50-
};
51-
const [peerreview, setPeerreview] = useState(false);
52-
const [editPeerreview, setEditPeerreview] = useState(false);
53-
const handleChangePeer = (nextChecked) => {
54-
setPeerreview(nextChecked);
55-
};
56-
const [enforced, setEnforced] = useState('');
57-
const [editEnforced, setEditEnforced] = useState('');
58-
const [evidence, setEvidence] = useState('');
59-
const [editEvidence, setEditEvidence] = useState('');
60-
const [isPending, setIsPending] = useState(false);
61-
62-
const [filteredData, setFilteredData] = useState([]);
63-
const [wordEntered, setWordEntered] = useState('');
64-
65-
const handleFilter = (event) => {
66-
const searchWord = event.target.value;
67-
setWordEntered(searchWord);
68-
const newFilter = posts.filter((value) => {
69-
return value.title.toLowerCase().includes(searchWord.toLowerCase());
70-
});
71-
72-
if (searchWord === '') {
73-
setFilteredData([]);
74-
} else {
75-
setFilteredData(newFilter);
76-
}
77-
};
78-
79-
const history = useHistory();
80-
81-
useEffect(() => {
82-
const fetchPosts = async () => {
83-
try {
84-
setLoading(true);
85-
const response = await api.get('/journals');
86-
setPosts(response.data);
87-
setLoading(false);
88-
} catch (err) {
89-
if (err.response) {
90-
console.log(err.response.data);
91-
console.log(err.response.status);
92-
console.log(err.response.headers);
93-
} else {
94-
console.log(`Error: ${err.message}`);
95-
}
96-
}
97-
};
98-
fetchPosts();
99-
}, []);
100-
101-
useEffect(() => {
102-
const filteredResults = posts.filter(
103-
(post) =>
104-
post.issn.includes(search) || post.title.toLowerCase().includes(search.toLowerCase()),
105-
);
106-
107-
setSearchResults(filteredResults.reverse());
108-
}, [posts, search]);
109-
110-
const indexOfLastPost = currentPage * postsPerPage;
111-
const indexOfFirstPost = indexOfLastPost - postsPerPage;
112-
const currentPost = searchResults.slice(indexOfFirstPost, indexOfLastPost);
113-
const paginate = (pageNumber) => setCurrentPage(pageNumber);
114-
115-
const handleSubmit = async (e) => {
116-
e.preventDefault();
117-
const id = posts.length ? posts[posts.length - 1].id + 1 : 1;
118-
const datetime = format(new Date(), 'MMMM dd, yyyyy pp');
119-
const newPost = {
120-
title,
121-
authors,
122-
journaltype,
123-
topic,
124-
published: datetime,
125-
issn,
126-
updated,
127-
link,
128-
policy,
129-
dataavail,
130-
datashared,
131-
peerreview,
132-
enforced,
133-
evidence,
134-
};
135-
try {
136-
const response = await api.post('/journals', newPost);
137-
const allPosts = [...posts, response.data];
138-
setPosts(allPosts);
139-
history.push('/');
140-
} catch (err) {
141-
console.log(`Error: ${err.message}`);
142-
}
143-
};
144-
145-
const handleEdit = async (id) => {
146-
const datetime = format(new Date(), 'MMMM dd, yyyyy pp');
147-
const updatedPost = {
148-
title: editTitle,
149-
authors: editAuthors,
150-
journaltype: editJournaltype,
151-
topic: editTopic,
152-
issn: editIssn,
153-
updated: datetime,
154-
link: editLink,
155-
policy: editPolicy,
156-
dataavail: editDataavail,
157-
datashared: editDatashared,
158-
peerreview: editPeerreview,
159-
enforced: editEnforced,
160-
evidence: editEvidence,
161-
};
162-
try {
163-
const response = await api.put(`/journals/${id}`, updatedPost);
164-
setPosts(posts.map((post) => (post.id === id ? { ...response.data } : post)));
165-
history.push('/');
166-
} catch (err) {
167-
console.log(`Error: ${err.message}`);
168-
}
169-
};
170-
171-
const handleDelete = async (id) => {
172-
try {
173-
await api.delete(`/journals/${id}`);
174-
const postsList = posts.filter((post) => post.id !== id);
175-
setPosts(postsList);
176-
history.push('/');
177-
} catch (err) {
178-
console.log(`Error: ${err.message}`);
179-
}
180-
};
181-
18220
return (
18321
<div className='App'>
184-
<Switch>
185-
<Route exact path='/'>
186-
<Home
187-
search={search}
188-
setSearch={setSearch}
189-
posts={posts}
190-
searchResults={searchResults}
191-
filteredData={filteredData}
192-
setFilteredData={setFilteredData}
193-
wordEntered={wordEntered}
194-
setWordEntered={setWordEntered}
195-
handleFilter={handleFilter}
196-
/>
197-
</Route>
198-
<Route path='/manifesto'>
199-
<Manifesto />
200-
</Route>
201-
<Route path='/journal'>
202-
<Journal
203-
search={search}
204-
setSearch={setSearch}
205-
posts={currentPost}
206-
loading={loading}
207-
postsPerPage={postsPerPage}
208-
totalPosts={posts.length}
209-
paginate={paginate}
210-
/>
211-
</Route>
212-
<Route exact path='/addjournal'>
213-
<AddJournal
214-
title={title}
215-
setTitle={setTitle}
216-
authors={authors}
217-
setAuthors={setAuthors}
218-
journaltype={journaltype}
219-
setJournaltype={setJournaltype}
220-
topic={topic}
221-
setTopic={setTopic}
222-
issn={issn}
223-
setIssn={setIssn}
224-
link={link}
225-
setLink={setLink}
226-
policy={policy}
227-
setPolicy={setPolicy}
228-
dataavail={dataavail}
229-
setDataavail={setDataavail}
230-
handleChangeData={handleChangeData}
231-
datashared={datashared}
232-
setDatashared={setDatashared}
233-
handleChangeData2={handleChangeData2}
234-
peerreview={peerreview}
235-
setPeerreview={setPeerreview}
236-
handleChangePeer={handleChangePeer}
237-
enforced={enforced}
238-
setEnforced={setEnforced}
239-
evidence={evidence}
240-
setEvidence={setEvidence}
241-
isPending={isPending}
242-
setIsPending={setIsPending}
243-
handleSubmit={handleSubmit}
244-
/>
245-
</Route>
246-
<Route path='/edit/:id'>
247-
<Edit
248-
posts={posts}
249-
editTitle={editTitle}
250-
setEditTitle={setEditTitle}
251-
editAuthors={editAuthors}
252-
setEditAuthors={setEditAuthors}
253-
editJournaltype={editJournaltype}
254-
setEditJournaltype={setEditJournaltype}
255-
editTopic={editTopic}
256-
setEditTopic={setEditTopic}
257-
editIssn={editIssn}
258-
setEditIssn={setEditIssn}
259-
editLink={editLink}
260-
setEditLink={setEditLink}
261-
editPolicy={editPolicy}
262-
setEditPolicy={setEditPolicy}
263-
editDataavail={editDataavail}
264-
setEditDataavail={setEditDataavail}
265-
editDatashared={editDatashared}
266-
setEditDatashared={setEditDatashared}
267-
editPeerreview={editPeerreview}
268-
setEditPeerreview={setEditPeerreview}
269-
editEnforced={editEnforced}
270-
setEditEnforced={setEditEnforced}
271-
editEvidence={editEvidence}
272-
setEditEvidence={setEditEvidence}
273-
isPending={isPending}
274-
setIsPending={setIsPending}
275-
handleEdit={handleEdit}
276-
/>
277-
</Route>
278-
<Route path='/policy/:id'>
279-
<JournalDetails posts={posts} handleDelete={handleDelete} />
280-
</Route>
281-
<Route path='/Signup'>
282-
<Auth />
283-
</Route>
284-
<Route path='/Login'>
285-
<Login />
286-
</Route>
287-
<Redirect to='/' />
288-
</Switch>
289-
<Navbar search={search} setSearch={setSearch} />
290-
<Footer />
22+
<DataProvider>
23+
<Switch>
24+
<Route exact path='/'>
25+
<Home />
26+
</Route>
27+
<Route path='/manifesto'>
28+
<Manifesto />
29+
</Route>
30+
<Route path='/journal'>
31+
<Journal />
32+
</Route>
33+
<Route exact path='/addjournal'>
34+
<AddJournal />
35+
</Route>
36+
<Route path='/edit/:id'>
37+
<Edit />
38+
</Route>
39+
<Route path='/policy/:id'>
40+
<JournalDetails />
41+
</Route>
42+
<Route path='/Signup'>
43+
<Auth />
44+
</Route>
45+
<Route path='/Login'>
46+
<Login />
47+
</Route>
48+
<Redirect to='/' />
49+
</Switch>
50+
<Navbar />
51+
<Footer />
52+
</DataProvider>
29153
</div>
29254
);
29355
}

0 commit comments

Comments
 (0)