integrate edit page

Author: padmajabhol

package.json

@@ -29,6 +29,7 @@
     "react-router-dom": "^5.3.3",
     "react-scripts": "4.0.3",
     "react-switch": "^7.0.0",
+    "react-user-profile": "^1.0.3",
     "styled-components": "^5.3.5",
     "web-vitals": "^1.0.1"
   },

src/App.js

@@ -12,6 +12,7 @@ import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Switch, Route, Redirect, useHistory } from 'react-router-dom';
 import { format } from 'date-fns';
+import Profile from './components/Authentication/User-Profile/useprofile';
 import { api } from './api/posts';
 import { Journal, Contact, Manifesto, Home } from './pages';
 import { Footer, Auth, Header, Login, JournalDetails, AddJournal, Layout } from './components';
@@ -69,6 +70,10 @@ function App() {
             <Route path='/Login'>
               <Login />
             </Route>
+            <Route path='/profile'>
+              <Profile />
+            </Route>
+
             <Redirect to='/' />
           </Switch>
           <Footer />

src/components/AddJournal/AddJournal.js

@@ -40,15 +40,16 @@ const AddJournal = () => {
   const [dataavail, setDataavail] = useState(false);
   const [datashared, setDatashared] = useState(false);
   const [peerreview, setPeerreview] = useState(false);
-  const [enforced, setEnforced] = useState('');
+  const [enforced, setEnforced] = useState('YES');
   const [evidence, setEvidence] = useState('');
   const [policyTitle, setPolicyTitle] = useState('');
-  // const [firstYear] = useState(2000);
+  const [firstYear, setFirstYear] = useState();
 
   const [createJournal, { data, error }] = useMutation(CREATE_JOURNAL);
 
   console.log({ data });
   // console.log(createJournal);
+  const history = useHistory();
 
   const addJournal = async (event) => {
     event.preventDefault();
@@ -67,11 +68,12 @@ const AddJournal = () => {
             isDataAvailabilityStatementPublished: dataavail,
             isDataShared: datashared,
             isDataPeerReviewed: peerreview,
-            firstYear: 2000,
+            firstYear,
           },
         },
       },
     });
+    history.push('/journal');
   };
 
   const handleChangeData = (nextChecked) => {
@@ -117,28 +119,10 @@ const AddJournal = () => {
             </div>
           </FirstDiv>
           <FirstDiv>
-            {/* <div>
-              <Label>Domain</Label>
-              <Input
-                type='text'
-                required
-                value={topic}
-                onChange={(e) => setTopic(e.target.value)}
-              />
-            </div> */}
             <div>
               <Label>Source</Label>
               <Input type='text' required value={link} onChange={(e) => setLink(e.target.value)} />
             </div>
-            {/* <div>
-              <Label>Authors</Label>
-              <Input
-                type='text'
-                required
-                value={authors}
-                onChange={(e) => setAuthors(e.target.value)}
-              />
-            </div> */}
           </FirstDiv>
           <Subhead>
             <Icon>
@@ -148,15 +132,15 @@ const AddJournal = () => {
           </Subhead>
           <Div>
             <SecondDiv>
-              {/* <div>
+              <div>
                 <Label>First Year</Label>
                 <Input
-                  type='text'
+                  type='number'
                   required
-                  value={policyTitle}
-                  onChange={(e) => setPolicyTitle(e.target.value)}
+                  value={firstYear}
+                  onChange={(e) => setFirstYear(parseInt(e.target.value, 10))}
                 />
-              </div> */}
+              </div>
               <div>
                 <Label>Policy Title</Label>
                 <Input

src/components/Authentication/User-Profile/Logout.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useMutation } from '@apollo/client';
+import LOGOUT from '../../../graphql/mutation/LOGOUT';
+
+function Logout() {
+    const [logout, { data, error }] = useMutation(CREATE_JOURNAL);
+
+    logoutUser
+  return (
+    <>
+      <div>Logout</div>
+      <button onClick={}>Logout</button>
+    </>
+  );
+}
+
+export default Logout;

src/components/Authentication/User-Profile/useprofile.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import UserProfile from 'react-user-profile';
+import { useQuery } from '@apollo/client';
+import GET_USER from '../../../graphql/queries/GET_USER';
+
+function Profile() {
+  const { data } = useQuery(GET_USER);
+
+  console.log(data);
+
+  const photo =
+    // eslint-disable-next-line max-len
+    'https://api-cdn.spott.tv/rest/v004/image/images/e91f9cad-a70c-4f75-9db4-6508c37cd3c0?width=587&height=599';
+  const userName = 'Harvey Specter';
+  const location = 'New York, USA';
+  return (
+    <div style={{ width: '100%', marginTop: '5rem' }}>
+      <UserProfile photo={photo} userName={userName} location={location} />
+    </div>
+  );
+}
+
+export default Profile;