Skip to content

Commit e3a1964

Browse files
padmajabholpadmajabhol
authored
Merge pull request #193 from padmajabhol/integrate-journals
integrate graphql backend for journal component
2 parents c189b2e + 3547a1b commit e3a1964

File tree

33 files changed

+1238
-629
lines changed

33 files changed

+1238
-629
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"react-router-dom": "^5.3.3",
3030
"react-scripts": "4.0.3",
3131
"react-switch": "^7.0.0",
32+
"react-user-profile": "^1.0.3",
3233
"styled-components": "^5.3.5",
3334
"web-vitals": "^1.0.1"
3435
},

‎src/App.js

+12-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import './index.css';
1212
import 'bootstrap/dist/css/bootstrap.min.css';
1313
import { BrowserRouter as Router, Switch, Route, Redirect, useHistory } from 'react-router-dom';
1414
import { format } from 'date-fns';
15+
import Profile from './components/Authentication/User-Profile/useprofile';
1516
import { api } from './api/posts';
1617
import { Journal, Contact, Manifesto, Home } from './pages';
1718
import { Footer, Auth, Header, Login, JournalDetails, AddJournal, Layout } from './components';
@@ -28,10 +29,14 @@ const errorLink = onError(({ graphqlErrors, networkError }) => {
2829
}
2930
});
3031

31-
const link = from([errorLink, new HttpLink({ uri: 'http://localhost:4000/graphql' })]);
32+
const link = from([
33+
errorLink,
34+
new HttpLink({ uri: 'http://localhost:4000/graphql', credentials: 'include' }),
35+
]);
3236

3337
const client = new ApolloClient({
3438
cache: new InMemoryCache(),
39+
// credentials: 'include',
3540
link,
3641
});
3742

@@ -53,10 +58,10 @@ function App() {
5358
<Route exact path='/addjournal'>
5459
<AddJournal />
5560
</Route>
56-
<Route path='/edit/:id'>
61+
<Route path='/edit/:issn'>
5762
<Edit />
5863
</Route>
59-
<Route path='/policy/:id'>
64+
<Route path='/policy/:issn'>
6065
<JournalDetails />
6166
</Route>
6267
<Route path='/Signup'>
@@ -65,6 +70,10 @@ function App() {
6570
<Route path='/Login'>
6671
<Login />
6772
</Route>
73+
<Route path='/profile'>
74+
<Profile />
75+
</Route>
76+
6877
<Redirect to='/' />
6978
</Switch>
7079
<Footer />

‎src/components/AddJournal/AddJournal.js

+95-123
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { useHistory } from 'react-router-dom';
99
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1010
import { faBookmark } from '@fortawesome/free-solid-svg-icons';
1111
import Switch from 'react-switch';
12+
import { useMutation } from '@apollo/client';
13+
import CREATE_JOURNAL from '../../graphql/mutation/createJournal';
1214
import {
1315
Container,
1416
Head,
@@ -30,129 +32,96 @@ import { useGlobalContext } from '../../context/DataContext';
3032
import { SectionLayout, PolicyContainer } from '../marginals';
3133

3234
const AddJournal = () => {
33-
const {
34-
title,
35-
authors,
36-
journaltype,
37-
topic,
38-
issn,
39-
link,
40-
policy,
41-
dataavail,
42-
handleChangeData,
43-
datashared,
44-
handleChangeData2,
45-
peerreview,
46-
handleChangePeer,
47-
enforced,
48-
evidence,
49-
isPending,
50-
handleSubmit,
51-
dispatch,
52-
} = useGlobalContext();
35+
const [title, setTitile] = useState('');
36+
const [topic, setTopic] = useState('');
37+
const [issn, setIssn] = useState('');
38+
const [link, setLink] = useState('');
39+
const [policy, setPolicy] = useState('');
40+
const [dataavail, setDataavail] = useState(false);
41+
const [datashared, setDatashared] = useState(false);
42+
const [peerreview, setPeerreview] = useState(false);
43+
const [enforced, setEnforced] = useState('YES');
44+
const [evidence, setEvidence] = useState('');
45+
const [policyTitle, setPolicyTitle] = useState('');
46+
const [firstYear, setFirstYear] = useState();
47+
48+
const [createJournal, { data, error }] = useMutation(CREATE_JOURNAL);
49+
50+
console.log({ data });
51+
// console.log(createJournal);
52+
const history = useHistory();
53+
54+
const addJournal = async (event) => {
55+
event.preventDefault();
56+
const response = await createJournal({
57+
variables: {
58+
journalToCreate: {
59+
title,
60+
url: link,
61+
issn,
62+
domainName: topic,
63+
policies: {
64+
title: policyTitle,
65+
policyType: policy,
66+
enforced,
67+
enforcedEvidence: evidence,
68+
isDataAvailabilityStatementPublished: dataavail,
69+
isDataShared: datashared,
70+
isDataPeerReviewed: peerreview,
71+
firstYear,
72+
},
73+
},
74+
},
75+
});
76+
history.push('/journal');
77+
};
78+
79+
const handleChangeData = (nextChecked) => {
80+
setDataavail(nextChecked);
81+
};
82+
const handleChangeData2 = (nextChecked) => {
83+
setDatashared(nextChecked);
84+
};
85+
const handleChangePeer = (nextChecked) => {
86+
setPeerreview(nextChecked);
87+
};
88+
const [isPending, setIsPending] = useState(false);
89+
5390
return (
5491
<SectionLayout>
5592
<PolicyContainer>
5693
<Head>Create Journal Policies</Head>
57-
<Form onSubmit={handleSubmit}>
94+
<Form onSubmit={addJournal}>
5895
<Label>Journal titile</Label>
59-
<Input
60-
type='text'
61-
required
62-
value={title}
63-
onChange={(e) =>
64-
dispatch({
65-
type: 'SET_TITLE',
66-
payload: e.target.value,
67-
})
68-
}
69-
/>
96+
<Input type='text' required value={title} onChange={(e) => setTitile(e.target.value)} />
7097
<FirstDiv>
7198
<div>
7299
<Label>Journal Type</Label>
73100
<Input
74101
type='text'
75102
required
76-
value={journaltype}
77-
onChange={(e) =>
78-
dispatch({
79-
type: 'SET_JOURNALTYPE',
80-
payload: e.target.value,
81-
})
82-
}
103+
value={topic}
104+
onChange={(e) => setTopic(e.target.value)}
83105
/>
84106
</div>
85107
<div>
86108
<Label>ISSN Number</Label>
87-
<Input
88-
type='text'
89-
required
90-
value={issn}
91-
onChange={(e) =>
92-
dispatch({
93-
type: 'SET_ISSN',
94-
payload: e.target.value,
95-
})
96-
}
97-
/>
109+
<Input type='text' required value={issn} onChange={(e) => setIssn(e.target.value)} />
98110
</div>
99111
<div>
100112
<Label>Enforced Evidence</Label>
101113
<Input
102114
type='text'
103115
required
104116
value={evidence}
105-
onChange={(e) =>
106-
dispatch({
107-
type: 'SET_EVIDENCE',
108-
payload: e.target.value,
109-
})
110-
}
117+
onChange={(e) => setEvidence(e.target.value)}
111118
/>
112119
</div>
113120
</FirstDiv>
114121
<FirstDiv>
115-
<div>
116-
<Label>Domain</Label>
117-
<Input
118-
type='text'
119-
required
120-
value={topic}
121-
onChange={(e) =>
122-
dispatch({
123-
type: 'SET_TOPIC',
124-
payload: e.target.value,
125-
})
126-
}
127-
/>
128-
</div>
129122
<div>
130123
<Label>Source</Label>
131-
<Input
132-
type='text'
133-
required
134-
value={link}
135-
onChange={(e) =>
136-
dispatch({
137-
type: 'SET_LINK',
138-
payload: e.target.value,
139-
})
140-
}
141-
/>
142-
</div>
143-
<div>
144-
<Label>Authors</Label>
145-
<Input
146-
type='text'
147-
required
148-
value={authors}
149-
onChange={(e) =>
150-
dispatch({
151-
type: 'SET_AUTHORS',
152-
payload: e.target.value,
153-
})
154-
}
155-
/>
124+
<Input type='text' required value={link} onChange={(e) => setLink(e.target.value)} />
156125
</div>
157126
</FirstDiv>
158127
<Subhead>
@@ -163,35 +132,37 @@ const AddJournal = () => {
163132
</Subhead>
164133
<Div>
165134
<SecondDiv>
135+
<div>
136+
<Label>First Year</Label>
137+
<Input
138+
type='number'
139+
required
140+
value={firstYear}
141+
onChange={(e) => setFirstYear(parseInt(e.target.value, 10))}
142+
/>
143+
</div>
144+
<div>
145+
<Label>Policy Title</Label>
146+
<Input
147+
type='text'
148+
required
149+
value={policyTitle}
150+
onChange={(e) => setPolicyTitle(e.target.value)}
151+
/>
152+
</div>
166153
<div>
167154
<Label>Policy Type:</Label>
168-
<Select
169-
value={policy}
170-
onChange={(e) =>
171-
dispatch({
172-
type: 'SET_POLICY',
173-
payload: e.target.value,
174-
})
175-
}
176-
>
177-
<option value='policy 1'>Policy 1</option>
178-
<option value='policy 2'>Policy 2</option>
179-
<option value='policy 3'>Policy 3</option>
155+
<Select value={policy} onChange={(e) => setPolicy(e.target.value)}>
156+
<option value='NUMBER_ONE'>NUMBER_ONE</option>
157+
<option value='NUMBER_TWO'>NUMBER_TWO</option>
158+
<option value='NUMBER_THREE'>NUMBER_THREE</option>
180159
</Select>
181160
</div>
182161
<div>
183162
<Label>Enforced:</Label>
184-
<Select
185-
value={enforced}
186-
onChange={(e) =>
187-
dispatch({
188-
type: 'ENFORCED',
189-
payload: e.target.value,
190-
})
191-
}
192-
>
193-
<option value='Yes - before publication'>Yes - before publication</option>
194-
<option value='option 2'>Option 2</option>
163+
<Select value={enforced} onChange={(e) => setEnforced(e.target.value)}>
164+
<option value='YES'>Yes - before publication</option>
165+
<option value='NO'>Option 2</option>
195166
</Select>
196167
</div>
197168
</SecondDiv>
@@ -205,7 +176,7 @@ const AddJournal = () => {
205176
onChange={handleChangeData}
206177
checked={dataavail}
207178
onColor='#ef9c38'
208-
onHandleColor='#'
179+
// onHandleColor='#'
209180
handleDiameter={22}
210181
uncheckedIcon={false}
211182
checkedIcon={false}
@@ -227,7 +198,7 @@ const AddJournal = () => {
227198
onChange={handleChangePeer}
228199
checked={peerreview}
229200
onColor='#ef9c38'
230-
onHandleColor='#'
201+
// onHandleColor='#'
231202
handleDiameter={22}
232203
uncheckedIcon={false}
233204
checkedIcon={false}
@@ -249,7 +220,7 @@ const AddJournal = () => {
249220
onChange={handleChangeData2}
250221
checked={datashared}
251222
onColor='#ef9c38'
252-
onHandleColor='#'
223+
// onHandleColor='#'
253224
handleDiameter={22}
254225
uncheckedIcon={false}
255226
checkedIcon={false}
@@ -266,8 +237,9 @@ const AddJournal = () => {
266237
</ToggleContainer>
267238
</SecondDiv>
268239
</Div>
269-
{!isPending && <FormInputBtn>Add blog</FormInputBtn>}
270-
{isPending && <FormInputBtn>Adding blog...</FormInputBtn>}
240+
<FormInputBtn>Add blog</FormInputBtn>
241+
{/* {!isPending && <FormInputBtn>Add blog</FormInputBtn>}
242+
{isPending && <FormInputBtn>Adding blog...</FormInputBtn>} */}
271243
</Form>
272244
</PolicyContainer>
273245
</SectionLayout>

0 commit comments

Comments
 (0)