justman00 · KatiaDev · Feb 22, 2021 · Feb 24, 2021 · Feb 24, 2021 · Mar 16, 2021
diff --git a/.env.example b/.env.example
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,16 +6,24 @@
     "@chakra-ui/react": "^1.3.3",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@reach/router": "^1.3.4",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "antd": "^3.26.2",
+    "es-cookie": "^1.3.2",
     "faunadb": "^2.10.0",
     "framer-motion": "^3.3.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.3.0",
-    "react-toastify": "^5.4.1"
+    "react-icons": "^4.2.0",
+    "react-redux": "^7.2.2",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.1",
+    "react-toastify": "^5.4.1",
+    "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,11 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,11 +29,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Notes App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal_root"></div>
+
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.js b/src/App.js
@@ -1,14 +1,168 @@
-import React, { useEffect, useState } from 'react';
-import { getAllNotes, deleteNote, editNote } from './api';
+import React, { useEffect } from "react";
+import { Route, NavLink, Switch } from "react-router-dom";
+import {
+  Flex,
+  Box,
+  Text,
+  Button,
+  IconButton,
+  Popover,
+  PopoverTrigger,
+  Portal,
+  PopoverContent,
+  PopoverArrow,
+  PopoverHeader,
+  PopoverCloseButton,
+  PopoverBody,
+  PopoverFooter,
+} from "@chakra-ui/react";
+import { useDispatch } from "react-redux";
+import { BsFillPersonFill } from "react-icons/bs";
+//import { get } from "es-cookie";
+
+import Home from "./pages/Home";
+import NotesList from "./pages/NotesList";
+import AddNote from "./pages/AddNote";
+import EditNote from "./pages/EditNote";
+import Note from "./pages/Note";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import PrivateRoute from "./components/PrivateRoute";
+import { getNotesAction } from "./actions/notesActions";
 
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = React.useState(true);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    //const token = get("token");
+
+    const token = localStorage.getItem("token");
+
+    fetch(
+      `https://notes-app-ecaterina-popa.herokuapp.com/api/auth/check-auth`,
+      {
+        headers: {
+          Authorization: token,
+        },
+      }
+    )
+      .then((res) => {
+        switch (res.status) {
+          case 200:
+            setIsAuthenticated(true);
+            break;
+          default:
+            setIsAuthenticated(false);
+            break;
+        }
+      })
+      .catch(console.error);
+  }, []);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      dispatch(getNotesAction());
+    }
+  }, [dispatch, isAuthenticated]);
+
+  const handleLogOutClick = (e) => {
+    localStorage.removeItem("token");
+    setIsAuthenticated(false);
+    //return history.push("/");
+  };
+
   return (
-    <div className="App">
-      <header className="App-container">
-        <div>
-          Bine ati venit la <strong>StepIt Notes</strong>
-        </div>
-      </header>
+    <div>
+      <Box>
+        <Box mt="3">
+          <Text fontFamily="Great Vibes" fontSize="72px" align="center">
+            Notes
+          </Text>
+        </Box>
+        <Flex justifyContent="center" alignItems="center">
+          <Box>
+            <NavLink exact to="/">
+              <Button colorScheme="teal" variant="ghost">
+                Home
+              </Button>
+            </NavLink>
+          </Box>
+          <Box>
+            <NavLink exact to="/notes-list">
+              <Button colorScheme="teal" variant="ghost">
+                My Notes
+              </Button>
+            </NavLink>
+          </Box>
+          <Box>
+            <NavLink exact to="/add-note">
+              <Button colorScheme="teal" variant="ghost">
+                Add Note
+              </Button>
+            </NavLink>
+          </Box>
+          <Box>
+            <Popover>
+              <PopoverTrigger>
+                <IconButton
+                  colorScheme="teal"
+                  aria-label="User"
+                  size="md"
+                  icon={<BsFillPersonFill />}
+                />
+              </PopoverTrigger>
+              <Portal>
+                <PopoverContent>
+                  <PopoverArrow />
+                  <PopoverHeader>Profile</PopoverHeader>
+                  <PopoverCloseButton />
+                  <PopoverBody>Settings</PopoverBody>
+                  <PopoverFooter>
+                    <Button
+                      colorScheme="red"
+                      size="sm"
+                      onClick={handleLogOutClick}
+                    >
+                      Log out
+                    </Button>
+                  </PopoverFooter>
+                </PopoverContent>
+              </Portal>
+            </Popover>
+          </Box>
+        </Flex>
+        <Switch>
+          <PrivateRoute
+            path="/notes-list"
+            isAuthenticated={isAuthenticated}
+            render={(props) => <NotesList {...props} />}
+          />
+          <PrivateRoute
+            path="/note/:id"
+            isAuthenticated={isAuthenticated}
+            render={(props) => <Note {...props} />}
+          />
+          <PrivateRoute
+            path="/edit-note/:id"
+            isAuthenticated={isAuthenticated}
+            render={(props) => <EditNote {...props} />}
+          />
+          <PrivateRoute
+            path="/add-note"
+            isAuthenticated={isAuthenticated}
+            render={(props) => <AddNote {...props} />}
+          />
+          <Route
+            path="/login"
+            render={(props) => (
+              <Login {...props} setIsAuthenticated={setIsAuthenticated} />
+            )}
+          />
+          <Route path="/register" render={(props) => <Register {...props} />} />
+          <Route path="/" component={Home} />
+        </Switch>
+      </Box>
     </div>
   );
 }

diff --git a/src/actions/notesActions.js b/src/actions/notesActions.js
@@ -0,0 +1,99 @@
+export const START_GETTING_NOTES = "START_GETTING_NOTES";
+export const SUCCESS_GETTING_NOTES = "SUCCESS_GETTING_NOTES";
+export const ERROR_GETTING_NOTES = "ERROR_GETTING_NOTES";
+
+export const getNotesAction = () => async (dispatch) => {
+  dispatch({ type: START_GETTING_NOTES });
+
+  try {
+    const notes = await fetch(
+      `https://notes-app-ecaterina-popa.herokuapp.com/api/notes`,
+      {
+        headers: {
+          Authorization: localStorage.getItem("token"),
+        },
+      }
+    ).then((res) => res.json());
+    if (Array.isArray(notes)) {
+      dispatch({
+        type: SUCCESS_GETTING_NOTES,
+        payload: notes,
+      });
+    }
+  } catch (err) {
+    dispatch({
+      type: ERROR_GETTING_NOTES,
+      payload:
+        "Sorry! The page you were trying to access is currently unavailable.",
+    });
+  }
+};
+
+export const ADD_NOTE_SUCCESS = "ADD_NOTE_SUCCESS";
+export const ADD_NOTE_FAILURE = "ADD_NOTE_FAILURE";
+
+export const addNoteAction = (note) => async (dispatch) => {
+  try {
+    const addedNote = await fetch(
+      `https://notes-app-ecaterina-popa.herokuapp.com/api/notes`,
+      {
+        method: "POST",
+        body: JSON.stringify({ title: note.title, content: note.content }),
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          Authorization: localStorage.getItem("token"),
+        },
+      }
+    ).then((res) => res.json());
+    dispatch({ type: ADD_NOTE_SUCCESS, payload: addedNote });
+  } catch (error) {
+    console.error(error);
+    dispatch({ type: ADD_NOTE_FAILURE, payload: error.message });
+  }
+};
+
+export const EDIT_NOTE_SUCCESS = "EDIT_NOTE_SUCCESS";
+export const EDIT_NOTE_FAILURE = "EDIT_NOTE_FAILURE";
+
+export const updateNoteAction = (noteId, note) => async (dispatch) => {
+  try {
+    const updatedNote = await fetch(
+      `https://notes-app-ecaterina-popa.herokuapp.com/api/notes/${noteId}`,
+      {
+        method: "PUT",
+        body: JSON.stringify({ title: note.title, content: note.content }),
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+          Authorization: localStorage.getItem("token"),
+        },
+      }
+    ).then((res) => res.json());
+
+    dispatch({ type: EDIT_NOTE_SUCCESS, payload: updatedNote });
+  } catch (error) {
+    dispatch({ type: EDIT_NOTE_FAILURE, payload: error.message });
+  }
+};
+
+export const DELETE_NOTE_SUCCESS = "DELETE_NOTE_SUCCESS";
+export const DELETE_NOTE_FAILURE = "DELETE_NOTE_FAILURE";
+
+export const deleteNoteAction = (noteId) => async (dispatch) => {
+  try {
+    const deletedNote = await fetch(
+      `https://notes-app-ecaterina-popa.herokuapp.com/api/notes/${noteId}`,
+      {
+        method: "DELETE",
+        headers: {
+          Authorization: localStorage.getItem("token"),
+        },
+      }
+    ).then((res) => res.json());
+
+    dispatch({ type: DELETE_NOTE_SUCCESS, payload: deletedNote });
+  } catch (error) {
+    dispatch({ type: DELETE_NOTE_FAILURE, payload: error.message });
+  }
+};
diff --git a/src/api/editNote.js b/src/api/editNote.js
@@ -1,13 +1,9 @@
-import { client, q } from '../config/db';
-
-const editNote = (noteId, newNote) =>
-  client
-    .query(
-      q.Update(q.Ref(q.Collection('notes'), noteId), {
-        data: { text: { ...newNote } },
-      })
-    )
-    .then((ret) => console.log(ret))
-    .catch((err) => console.warn(err));
+import { client, q } from "../config/db";
 
+const editNote = (noteId, editedNote) =>
+  client.query(
+    q.Update(q.Ref(q.Collection("notes"), noteId), {
+      data: { ...editedNote },
+    })
+  );
 export default editNote;
diff --git a/src/api/getAllNotes.js b/src/api/getAllNotes.js
@@ -1,20 +1,18 @@
-import { client, q } from '../config/db'
+import { client, q } from "../config/db";
 
-const getAllNotes = client.query(
-  q.Paginate(
-    q.Match(
-      q.Ref('indexes/notes')))
-)
-  .then((response) => {
-    const productRefs = response.data
-    // create new query out of todo refs. 
-    // https://docs.fauna.com/fauna/current/api/fql/
-    const getAllProductDataQuery = productRefs.map((ref) => {
-      return q.Get(ref)
+const getAllNotes = () =>
+  client
+    .query(q.Paginate(q.Match(q.Ref("indexes/notes"))))
+    .then((response) => {
+      const productRefs = response.data;
+      // create new query out of todo refs.
+      // https://docs.fauna.com/fauna/current/api/fql/
+      const getAllProductDataQuery = productRefs.map((ref) => {
+        return q.Get(ref);
+      });
+      // query the refs
+      return client.query(getAllProductDataQuery).then((data) => data);
     })
-    // query the refs
-    return client.query(getAllProductDataQuery).then((data) => data)
-  })
-  .catch((error) => console.log('error', error.message))
+    .catch((error) => console.log("error", error.message));
 
-export default getAllNotes;
+export default getAllNotes;