Created note taking functionality in dashboard

package.json

@@ -31,7 +31,7 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-helmet": "^6.1.0",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.11.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^8.0.4",
     "react-quill": "^2.0.0",
@@ -60,7 +60,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.10",
     "gh-pages": "^4.0.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "vite": "^3.1.8"
@@ -77,4 +77,4 @@
     ],
     "*.{js,jsx,css,md}": "prettier --write"
   }
-}
+}

src/components/Dashboard/Dashboard.jsx

@@ -8,6 +8,7 @@ import { DashboardContainer } from "./DashboardElements";
 import UnderMaintenance from "../Other/UnderMaintenance/UnderMaintenance";
 import apiStatus from "../../features/apiStatus";
 import LoadingSpinner from "../Other/MixComponents/Spinner/LoadingSpinner";
+import NoteApp from "./Notetaker/NoteApp";
 // import Sidebar from "./Sidebar/Sidebar";
 // import AuthPopup from "../../pages/AuthPopup/AuthPopup";
 
@@ -33,7 +34,8 @@ const Dashboard = () => {
     return (
         <Wrapper>
             <DashboardContainer>
-                <DashboardItems />
+                {/* <DashboardItems /> */}
+                <NoteApp />
             </DashboardContainer>
         </Wrapper>
     );

src/components/Dashboard/DashboardElements.jsx

@@ -12,8 +12,8 @@ export const DashboardRoutesContainer = styled.div`
 
 export const DashboardContainer = styled.div`
     display: flex;
-    flex-direction: row;
-    align-items: center;
+    flex-direction: column;
+    align-items: start;
     width: 100%;
     max-width: 1500px;
 `;

src/components/Dashboard/Notetaker/AddNote.jsx

@@ -0,0 +1,43 @@
+import { useState, React } from "react";
+import './NoteApp.css'
+
+const AddNote = ({ handleAddNote }) => {
+    const [noteText, setNoteText] = useState("");
+    const [characterLimit, setCharacterLimit] = useState(200);
+    const [characterLimitError, setCharacterLimitError] = useState(false);
+
+    const handleChange = (event) => {
+        setNoteText(event.target.value);
+        if (noteText.trim().length > characterLimit) {
+            setCharacterLimitError(true);
+        } else {
+            setCharacterLimitError(false);
+        }
+    };
+
+    const handleSaveClick = () => {
+        if (noteText.trim().length > 0 && noteText.trim().length < characterLimit) {
+            handleAddNote(noteText);
+            setNoteText("");
+        }
+    };
+
+
+    return (
+        <div className="note">
+            <textarea
+                rows="8"
+                cols="10"
+                placeholder="Type to add a note..."
+                value={noteText}
+                onChange={handleChange}
+            ></textarea>
+            <div>
+                <small className={characterLimitError ? "character-limit-error" : "character-limit"}>{characterLimit - noteText.length} characters remaining.</small>
+                <button className="add-note-button" onClick={handleSaveClick}>Add</button>
+            </div>
+        </div>
+    );
+};
+
+export default AddNote;

src/components/Dashboard/Notetaker/Note.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { GoTrash } from 'react-icons/go';
+
+const Note = ({ id, text, handleDeleteNote }) => {
+    return (
+        <div className="note">
+            <p>{text}</p>
+            <GoTrash size={24} className="delete-button" onClick={() => handleDeleteNote(id)}>Delete Note</GoTrash>
+        </div>
+    );
+};
+
+export default Note;

src/components/Dashboard/Notetaker/NoteApp.css

@@ -0,0 +1,62 @@
+.note {
+    background-color: #242526;
+    color: #828282;
+    border: 1px solid #828282;
+    border-radius: 8px;
+    padding: 10px;
+    margin-bottom: 20px;
+    max-height: 300px;
+    width: 300px;
+    overflow-x: none;
+    overflow-wrap: break-word;
+    word-break: break-all;
+}
+
+.note textarea {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: #242526;
+    color: #828282;
+    font-size: 16px;
+    resize: none;
+    outline: none;
+    overflow-x: none;
+}
+
+
+.note button {
+    background-color: #828282;
+    color: #090909;
+    border: none;
+    padding: 8px 16px;
+    font-size: 16px;
+    border-radius: 4px;
+    margin-left: 30px;
+    cursor: pointer;
+}
+
+.note button:hover {
+    background-color: #090909;
+    color: #828282;
+}
+
+.note .delete-button {
+    margin-bottom: -5px;
+    margin-left: 260px;
+    cursor: pointer;
+}
+
+.note .character-limit-error {
+    color: red
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+.wrapper {
+    overflow-y: hidden;
+}

src/components/Dashboard/Notetaker/NoteApp.jsx

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import NoteList from "./NoteList";
+import { nanoid } from "nanoid";
+
+const NoteApp = () => {
+    const [notes, setNotes] = useState([]);
+
+    useEffect(() => {
+        const savedNotes = JSON.parse(localStorage.getItem("react-notes-app-data"));
+        if (savedNotes != '') {
+            setNotes(savedNotes);
+        }
+    }, []);
+
+    useEffect(() => {
+        localStorage.setItem("react-notes-app-data", JSON.stringify(notes));
+    }, [notes]);
+
+    const addNote = (text) => {
+        const newNote = {
+            text,
+            id: nanoid(),
+        };
+        const newNotes = [...notes, newNote];
+        setNotes(newNotes);
+    };
+
+    const deleteNote = (id) => {
+        const newNotes = notes.filter((note) => note.id !== id);
+        setNotes(newNotes);
+    };
+
+    return (
+        <div className="wrapper">
+            <NoteList notes={notes} handleAddNote={addNote} handleDeleteNote={deleteNote} />
+        </div>
+    );
+};
+
+export default NoteApp;

src/components/Dashboard/Notetaker/NoteList.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Note from "./Note";
+import AddNote from "./AddNote";
+
+const NoteList = ({ id, notes, handleAddNote, handleDeleteNote }) => {
+    return (
+        <div className="container">
+            {notes.map((note) => (
+                <Note key={note.id} id={note.id} text={note.text} handleDeleteNote={handleDeleteNote} />
+            ))}
+            <AddNote handleAddNote={handleAddNote} />
+        </div>
+    );
+};
+
+export default NoteList;

src/components/Dashboard/OldDashbaord/DashboardItems.jsx

@@ -1,8 +1,13 @@
 import React from "react";
 import { DashboardItemsContainer } from "../DashboardElements";
+import NoteApp from "../Notetaker/NoteApp";
 
 const DashboardItems = () => {
-    return <DashboardItemsContainer></DashboardItemsContainer>;
+    return (
+        <DashboardItemsContainer>
+
+        </DashboardItemsContainer>
+    );
 };
 
 export default DashboardItems;

src/components/Dashboard/Profile/ProfileElements.jsx

@@ -58,7 +58,7 @@ export const Wrapper = styled.div`
     width: 100%;
     color: #f5f5f5;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 0 25px;

src/components/Explore/Users/UsersElements.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { ExploreContentContainer } from "../ExploreElements";
-import { LuVerified } from "react-icons/lu";
+import { LuUserCheck } from "react-icons/lu";
 
 export const UsersContainer = styled(ExploreContentContainer)`
     grid-auto-rows: ${(props) => (props.displayAt === "explore" ? "1fr" : "0fr")};
@@ -11,7 +11,7 @@ export const UsersContainer = styled(ExploreContentContainer)`
     }
 `;
 
-export const IconVerified = styled(LuVerified)`
+export const IconVerified = styled(LuUserCheck)`
     color: #1da1f2;
     font-size: 1.2rem;
 `;