refactor: add signout and actual link to server

README.md

@@ -1 +1,14 @@
 # graasp-compose
+
+## How to use the api
+
+- add following hosts using `sudo vim /etc/hosts` with
+  - `127.0.01 web.graasp.org`
+  - `128.178.242.202 api.graasp.org`
+- add in your `.env.local` file
+
+```
+REACT_APP_API_HOST=http://api.graasp.org:3111
+PORT=3111
+HOST=web.graasp.org
+```

src/api/authentication.js

@@ -1,26 +1,5 @@
 import { API_HOST } from '../config/constants';
 
-// payload = {email}
-export const getOwnItems = async () => {
-  const req = await fetch(`${API_HOST}/own`, {
-    method: 'GET',
-    credentials: 'include',
-    headers: { 'Content-Type': 'application/json' },
-  });
-  console.log(req)
-};
-
-// payload = {email}
-export const createItem = async () => {
-  const req = await fetch(`${API_HOST}/items`, {
-    method: 'POST',
-    credentials: 'include',
-    body: JSON.stringify({name:'myitem'}),
-    headers: { 'Content-Type': 'application/json' },
-  });
-  console.log(await req.json())
-};
-
 // payload = {email}
 export const signIn = async (payload) => {
   const req = await fetch(`${API_HOST}/login`, {
@@ -31,6 +10,14 @@ export const signIn = async (payload) => {
   return req.status === 204;
 };
 
+export const signOut = async () => {
+  const req = await fetch(`${API_HOST}/logout`, {
+    credentials: 'include',
+    method: 'GET',
+  });
+  return req.status === 204;
+};
+
 // payload = {name, mail}
 export const register = async (payload) => {
   const req = await fetch(`${API_HOST}/register`, {

src/api/item.js

@@ -0,0 +1,28 @@
+import { API_HOST } from '../config/constants';
+
+// payload = {email}
+export const getOwnItems = async () => {
+  const req = await fetch(`${API_HOST}/own`, {
+    method: 'GET',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+  });
+  // eslint-disable-next-line no-console
+  console.log(req);
+};
+
+// payload = {email}
+export const createItem = async () => {
+  const req = await fetch(`${API_HOST}/items`, {
+    method: 'POST',
+    credentials: 'include',
+    body: JSON.stringify({ name: 'myitem' }),
+    headers: { 'Content-Type': 'application/json' },
+  });
+  // eslint-disable-next-line no-console
+  console.log(await req.json());
+};
+
+// we need this function for navigation purposes: when you click on an item, you want to see its 'immediate' children
+// eslint-disable-next-line import/prefer-default-export
+export const fetchItemImmediateChildren = () => {};

src/components/App.js

@@ -42,6 +42,7 @@ function App() {
             <Route path="/" exact>
               <Redirect to="/items" />
             </Route>
+            <Redirect to="/items" />
           </Switch>
         </main>
       </div>

src/components/SignIn.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Cookies from 'js-cookie'
 import { withRouter } from 'react-router';
 import { withStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
@@ -10,7 +9,8 @@ import Divider from '@material-ui/core/Divider';
 import FormControl from '@material-ui/core/FormControl';
 import { Alert } from '@material-ui/lab';
 import { REGISTER_PATH } from '../config/paths';
-import { createItem, getOwnItems, signIn } from '../api/authentication';
+import { signIn, signOut } from '../api/authentication';
+import { isSignedIn } from '../utils/common';
 
 const styles = (theme) => ({
   fullScreen: {
@@ -47,23 +47,12 @@ class SignIn extends Component {
   state = {
     isSuccess: null,
     email: '',
+    isAuthenticated: false,
   };
 
-  componentDidUpdate() {
-    //this.isSignedIn()
-  }
-
-  async componentDidMount() {
-    this.isSignedIn()
-    console.log(await createItem())
-  }
-
-  async isSignedIn() {
-    await fetch("http://ielsrv7.epfl.ch/auth?t=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI4N2M0OTQwZS1mNzY0LTRkODYtODExNC0xZWRkOWVmZjJlZTAiLCJpYXQiOjE2MDU3NzYxMTEsImV4cCI6MTYwNTc3NzkxMX0.g9Kb2hauJyv25nX-Y-vtFHwsCglKXueo_Y-C4IvoG-M", {
-      credentials: "include",
-
-    })
-   // getOwnItems()
+  componentDidMount() {
+    const isAuthenticated = isSignedIn();
+    this.setState({ isAuthenticated });
   }
 
   handleOnRegister = () => {
@@ -79,16 +68,19 @@ class SignIn extends Component {
     this.setState({ isSuccess });
   };
 
+  signOut = async () => {
+    const isSuccess = await signOut();
+    this.setState({ isSuccess });
+  };
+
   handleOnChange = (e) => {
     this.setState({ email: e.target.value });
   };
 
   renderMessage = () => {
     const { isSuccess } = this.state;
     if (isSuccess) {
-      return (
-        <Alert severity="success">An email was sent with the login link!</Alert>
-      );
+      return <Alert severity="success">Success!</Alert>;
     }
     // is not triggered for null (initial case)
     if (isSuccess === false) {
@@ -97,16 +89,22 @@ class SignIn extends Component {
     return null;
   };
 
-  render() {
-    const { classes } = this.props;
-    const { email } = this.state;
+  renderSignOutButton = () => {
+    return (
+      <>
+        <Typography variant="subtitle1">You are already signed in.</Typography>
+        <Button variant="text" color="primary" onClick={this.signOut}>
+          Click here to sign out
+        </Button>
+      </>
+    );
+  };
 
+  renderSignInForm = () => {
+    const { email } = this.state;
+    const { classes } = this.props;
     return (
-      <div className={classes.fullScreen}>
-        {this.renderMessage()}
-        <Typography variant="h2" component="h2">
-          Sign In
-        </Typography>
+      <>
         <FormControl>
           <TextField
             className={classes.input}
@@ -125,6 +123,22 @@ class SignIn extends Component {
         <Button variant="text" color="primary" onClick={this.handleOnRegister}>
           Not registered? Click here to register
         </Button>
+      </>
+    );
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { isAuthenticated } = this.state;
+
+    return (
+      <div className={classes.fullScreen}>
+        {this.renderMessage()}
+        <Typography variant="h2" component="h2">
+          Sign In
+        </Typography>
+        {!isAuthenticated && this.renderSignInForm()}
+        {isAuthenticated && this.renderSignOutButton()}
       </div>
     );
   }

src/utils/common.js

@@ -0,0 +1,9 @@
+import Cookies from 'js-cookie';
+
+// could use redux store to keep session
+// todo: better check on session
+// eslint-disable-next-line import/prefer-default-export
+export const isSignedIn = () => {
+  const value = Cookies.get('session');
+  return Boolean(value);
+};