Progress with authentication tolen

client/src/components/App.js

@@ -4,6 +4,7 @@ import Header from './Header';
 import { Switch, Route } from 'react-router-dom';
 // import ProductList from './ProductList';
 import AppointmentList from './AppointmentList';
+import Login from './Login';
 
 const App = () => {
   return (
@@ -14,6 +15,7 @@ const App = () => {
           {/* <Route exact path="/" component={ProductList} /> */}
           <Route exact path="/" component={AppointmentList} />
           <Route exact path="/create" component={CreateAppointment} />
+          <Route exact path="/login" component={Login} />
         </Switch>
       </div>
     </div>

client/src/components/CreateAppointment.js

@@ -10,8 +10,10 @@ const CREATE_APPOINTMENT_MUTATION = gql`
   mutation CreateAppointmentMutation(
     $title: String!
     $description: String!
+    $timeStart: String!
+    $timeEnd: String!
   ) {
-    createAppointment(title: $title, description: $description) {
+    createAppointment(title: $title, description: $description, timeStart: $timeStart, timeEnd: $timeEnd) {
       id
       title
       description

client/src/components/Header.js

@@ -1,23 +1,30 @@
 import React from 'react';
-// import { useHistory } from 'react-router';
+import { useHistory } from 'react-router';
 import { Link, withRouter } from 'react-router-dom';
+import { AUTH_TOKEN } from '../constants';
 
 const Header = () => {
-    // const history = useHistory();
+    const history = useHistory();
+    const authToken = localStorage.getItem(AUTH_TOKEN);
     return (
         <div className="flex pa1 justify-between nowrap orange">
             <div className="flex flex-fixed black">
                 <div className="fw7 mr1">Store!</div>
-                <Link to="/" className="ml1 no-underline black">
-                    Top list
-        </Link>
+                <Link to="/" className="ml1 no-underline black">Top list</Link>
                 <div className="ml1"> --- </div>
-                <Link
-                    to="/create"
-                    className="ml1 no-underline black"
-                >
-                    Create new
-        </Link>
+                <Link to="/create" className="ml1 no-underline black">Create new</Link>
+            </div>
+            <div className="flex flex-fixed">
+                {authToken ? (
+                    <div className="ml1 pointer black"
+                        onClick={() => {
+                            localStorage.removeItem(AUTH_TOKEN);
+                            history.push(`/`);
+                        }}
+                    >Logout</div>
+                ) : (
+                        <Link to="/login" className="ml1 no-underline black">Login</Link>
+                    )}
             </div>
         </div>
     );

client/src/components/Login.js

@@ -12,7 +12,7 @@ const SIGNUP_MUTATION = gql`
     signup(
       email: $email
       password: $password
-      name: $name
+      username: $name
     ) {
       token
     }

client/src/index.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './styles/index.css';
+import { AUTH_TOKEN } from './constants';
 import App from './components/App';
 import { BrowserRouter } from 'react-router-dom';
+import { setContext } from '@apollo/client/link/context';
 // import * as serviceWorker from './serviceWorker';
 
 import {
@@ -16,8 +18,19 @@ const httpLink = createHttpLink({
   uri: 'http://localhost:4000/graphql'
 });
 
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem(AUTH_TOKEN);
+  return {
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : ''
+    }
+  };
+});
+
 const client = new ApolloClient({
-  link: httpLink,
+  link: authLink.concat(httpLink),
+  // link: httpLink,
   cache: new InMemoryCache()
 });