Add notes view

package.json

@@ -18,7 +18,7 @@
     "dotenv": "^8.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-redux": "^7.2.2",
+    "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "redux": "^4.0.5",

src/actions/TYPES.js

@@ -11,3 +11,6 @@ export const SET_WEEKS = "SET_WEEKS";
 
 //entries
 export const SET_ENTRIES = "SET_ENTRIES";
+
+//notes 
+export const SET_NOTES = "SET_NOTES";

src/actions/index.js

@@ -14,8 +14,11 @@ export const getUser = (cognitoUser) => async (dispatch) => {
 
     const weeks = user.docBody.journal.weeks;
     const entries = user.docBody.journal.weeks[0].entries;
+    const notes = user.docBody.notes;
+
     dispatch({ type: SET_WEEKS, payload: weeks });
     dispatch({ type: SET_ENTRIES, payload: entries });
+    dispatch({ type: SET_NOTES, payload: notes });
   } catch (err) {
     console.log(err);
   }

src/actions/notes.js

@@ -0,0 +1,61 @@
+import { SET_NOTES, SET_USER } from "./TYPES";
+import axios from "axios";
+import store from "../store";
+
+const BASE_URL = "https://vip3e81bu0.execute-api.us-east-1.amazonaws.com/test";
+
+export const getNotes = () => (dispatch) => {
+  const state = store.getState();
+  const notes = state.notesData.notes;
+  dispatch({ type: SET_NOTES, payload: notes });
+};
+
+export const addNote = (cognitoUser, content) => async (dispatch) => {
+  try {
+    const data = {
+      note: {
+        content: content,
+      },
+    };
+    const headers = {
+      headers: { Authorization: "Bearer " + cognitoUser.jwtToken },
+    };
+    const path = BASE_URL + `/users/${cognitoUser.cognitoId}/notes`;
+    const res = await axios.post(path, data, headers);
+    console.log(res);
+    const user = res.data.data.Attributes;
+    dispatch({ type: SET_USER, payload: user });
+
+    const notes = user.docBody.notes;
+    dispatch({ type: SET_NOTES, payload: notes });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const updateNote = (cognitoUser, noteID, content) => async (
+  dispatch
+) => {
+  try {
+    const data = {
+      note: {
+        content: content,
+      },
+    };
+    const headers = {
+      headers: { Authorization: "Bearer " + cognitoUser.jwtToken },
+    };
+    const path = BASE_URL + `/users/${cognitoUser.cognitoId}/notes/${noteID}`;
+    const res = await axios.put(path, data, headers);
+    console.log("res: ", res);
+
+    //not sure why its one data only vs 2 for adding notes?
+    const user = res.data.Attributes;
+    dispatch({ type: SET_USER, payload: user });
+
+    const notes = user.docBody.notes;
+    dispatch({ type: SET_NOTES, payload: notes });
+  } catch (err) {
+    console.log(err);
+  }
+};

src/actions/user.js

@@ -1,4 +1,10 @@
-import { SET_USER, SET_COGNITO_DATA, SET_WEEKS, SET_ENTRIES } from "./TYPES";
+import {
+  SET_USER,
+  SET_COGNITO_DATA,
+  SET_WEEKS,
+  SET_ENTRIES,
+  SET_NOTES,
+} from "./TYPES";
 import axios from "axios";
 import { GET_USER_URI } from "../setupEnv";
 
@@ -33,7 +39,10 @@ export const reduceUser = (user, weekIndex = 0) => (dispatch) => {
   if (user === null) return;
   const weeks = user.docBody ? user.docBody.journal.weeks : [];
   const entries = weeks.length > 0 ? weeks[weekIndex].entries : [];
+  const notes = user.docBody ? user.docBody?.notes : {};
+
   dispatch({ type: SET_USER, payload: user });
   dispatch({ type: SET_WEEKS, payload: weeks });
   dispatch({ type: SET_ENTRIES, payload: entries });
+  dispatch({ type: SET_NOTES, payload: notes });
 };

src/components/journal/JournalDash.js

@@ -62,14 +62,14 @@ class JournalDash extends Component {
               weekIndex={weekIndex}
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={8}>
             <EditorTab
               entries={entries}
               weekIndex={weekIndex}
               entryIndex={entryIndex}
             />
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={2}>
             <EntriesTab
               setEntryIndex={this.setEntryIndex}
               entries={entries}

src/components/notes/Note.js

@@ -0,0 +1,86 @@
+import React, { useState, useCallback } from "react";
+import { Button, Paper, Typography, Card } from "@material-ui/core";
+import axios from "axios";
+
+import "../../styles/notes.css";
+import Texteditor from "../TextEditor";
+import { connect } from "react-redux";
+import { reduceUser } from "../../actions/user";
+import { updateNote } from "../../actions/notes";
+
+import { REACT_APP_STAG_BASE } from "../../setupEnv";
+
+// get content from note
+const contentPlaceholder =
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet erat eu diam condimentum imperdiet. Praesent vitae massa sed neque lobortis viverra. Vestibulum euismod mattis suscipit.";
+
+function Note({ cognitoUser, noteID, content, updateNote, deleteNoteList }) {
+  const [edit, setEdit] = useState(false);
+  const [contentText, setContentText] = useState(content || contentPlaceholder);
+  const [noteId, setNoteId] = useState(noteID);
+
+  const saveUpdateNote = useCallback(async () => {
+    console.log("update: ", noteId, "contentText: ", contentText);
+    await updateNote(cognitoUser, noteId, contentText);
+  }, [contentText, noteId]);
+
+  const handleEdit = useCallback(async () => {
+    if (edit) await saveUpdateNote();
+    const editState = !edit;
+    setEdit(editState);
+  }, [edit, setEdit, saveUpdateNote]);
+
+  const handleText = useCallback(
+    (text) => {
+      setContentText(text);
+    },
+    [setContentText]
+  );
+
+  const deleteNote = async () => {
+    deleteNoteList(noteID);
+    try {
+      const res = await axios.delete(
+        REACT_APP_STAG_BASE + `users/${cognitoUser.cognitoId}/notes/${noteID}`
+      );
+      reduceUser(res.data.Attributes);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    <div className="Note">
+      <Card raised="true">
+        <Paper>
+          <div className="cardContainer">
+            {edit ? (
+              <Texteditor
+                entry={{ content: contentText }}
+                onChange={handleText}
+              />
+            ) : (
+              //<Typography variant="body2"> {content} </Typography>
+              <div dangerouslySetInnerHTML={{ __html: contentText }} />
+            )}
+            <Button variant="outlined" size="small" onClick={handleEdit}>
+              {edit ? "save" : "edit"}
+            </Button>
+            <Button variant="outlined" size="small">
+              pin
+            </Button>
+            <Button variant="outlined" size="small" onClick={deleteNote}>
+              delete
+            </Button>
+          </div>
+        </Paper>
+      </Card>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  cognitoUser: state.userData.cognitoUser,
+});
+
+export default connect(mapStateToProps, { updateNote, reduceUser })(Note);

src/components/notes/NotesDash.js

@@ -1,14 +1,82 @@
-import React, { Component } from "react";
+import React, { useCallback, useEffect, useState, useMemo } from "react";
+import Note from "./Note.js";
+import { Grid, Button } from "@material-ui/core";
+import { addNote, getNotes } from "../../actions/notes";
+import { connect } from "react-redux";
 
-class NotesDash extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
+const NotesDash = ({ user, cognitoUser, notes, getNotes, addNote }) => {
+  const [notesList, setNotesList] = useState(notes);
+  console.log("notes: ", notes);
+  // map through retrieved notes to display.
+  const handleAddNotes = useCallback(async () => {
+    await addNote(cognitoUser, "");
+    await getNotes();
+  }, []);
 
-  render() {
-    return <div>Notes Dashboard...</div>;
-  }
-}
+  useEffect(() => {
+    const fetchNote = async () => {
+      await getNotes();
+    };
+    fetchNote();
+  }, []);
 
-export default NotesDash;
+  useEffect(() => {
+    setNotesList(notes);
+  }, [notes]);
+
+  const mappedNotes = useMemo(() => {
+    const notesArr = [];
+    for (const key in notesList) {
+      notesArr.push({
+        id: notesList[key]?.id,
+        content: notesList[key]?.content || "",
+      });
+    }
+    return notesArr;
+  }, [notesList]);
+
+  const deleteNoteList = useCallback(
+    (id) => {
+      const updatedNotesList = mappedNotes.filter((note) => note?.id !== id);
+      setNotesList(updatedNotesList);
+    },
+    [notesList, setNotesList]
+  );
+
+  return (
+    <div>
+      <Button
+        variant="contained"
+        color="primary"
+        size="large"
+        onClick={handleAddNotes}
+      >
+        Add+
+      </Button>
+      <Grid container direction="row">
+        {mappedNotes.map((note) => {
+          console.log("note: ", note);
+          return (
+            <Note
+              key={`id_${note?.id}`}
+              noteID={note?.id}
+              content={note?.content}
+              deleteNoteList={deleteNoteList}
+            />
+          );
+        })}
+      </Grid>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({
+  user: state.userData.user,
+  cognitoUser: state.userData.cognitoUser,
+  notes: state?.notesData?.notes,
+});
+
+export default connect(mapStateToProps, {
+  getNotes,
+  addNote,
+})(NotesDash);

src/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from "redux";
 import userReducer from "./userReducer";
 import weeksReducer from "./weeksReducer";
 import entriesReducer from "./entriesReducer";
+import notesReducer from "./notesReducer";
 
 export default combineReducers({
   userData: userReducer,
   weeksData: weeksReducer,
   entriesData: entriesReducer,
+  notesData: notesReducer,
 });

src/reducers/notesReducer.js

@@ -0,0 +1,18 @@
+import { SET_NOTES } from "../actions/TYPES";
+
+export default function notesReducer (
+    state = {
+        notes: null,
+    },
+    action 
+) {
+    switch(action.type) {
+        case SET_NOTES:
+            return {
+                ...state,
+                notes: action.payload,
+            };
+        default:
+            return state; 
+    }
+}

src/styles/globals.css

@@ -92,3 +92,6 @@ button:focus {
 .text-editor {
   width: 100%;
 }
+.ck-editor__editable {
+  min-height: 300px;
+}