diff --git a/package-lock.json b/package-lock.json index c6adc4fc..025cae6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "thecyberhub.org", - "version": "0.53.12", + "version": "0.53.14", "dependencies": { "@radix-ui/react-slot": "^1.0.1", "@reduxjs/toolkit": "^1.9.1", @@ -27,7 +27,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", @@ -56,7 +56,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" @@ -3146,9 +3146,9 @@ } }, "node_modules/husky": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz", - "integrity": "sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==", + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", "dev": true, "bin": { "husky": "lib/bin.js" @@ -5631,9 +5631,9 @@ } }, "node_modules/react-icons": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", - "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", "peerDependencies": { "react": "*" } @@ -6583,10 +6583,9 @@ } }, "node_modules/styled-components": { - "version": "5.3.6", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", - "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", - "hasInstallScript": true, + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", "dependencies": { "@babel/helper-module-imports": "^7.0.0", "@babel/traverse": "^7.4.5", @@ -9478,9 +9477,9 @@ "dev": true }, "husky": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz", - "integrity": "sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==", + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", "dev": true }, "ignore": { @@ -11144,9 +11143,9 @@ } }, "react-icons": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", - "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", "requires": {} }, "react-infinite-scroll-component": { @@ -11829,9 +11828,9 @@ } }, "styled-components": { - "version": "5.3.6", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.6.tgz", - "integrity": "sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==", + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", "requires": { "@babel/helper-module-imports": "^7.0.0", "@babel/traverse": "^7.4.5", @@ -12265,4 +12264,4 @@ "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==" } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index cd5268fe..7b83734f 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 9ede1b8d..b11941ff 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/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 ( - + {/* */} + ); diff --git a/src/components/Dashboard/DashboardElements.jsx b/src/components/Dashboard/DashboardElements.jsx index f8d668c4..403a24e6 100644 --- a/src/components/Dashboard/DashboardElements.jsx +++ b/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; `; diff --git a/src/components/Dashboard/Notetaker/AddNote.jsx b/src/components/Dashboard/Notetaker/AddNote.jsx new file mode 100644 index 00000000..ba837f5f --- /dev/null +++ b/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 ( +
+ +
+ {characterLimit - noteText.length} characters remaining. + +
+
+ ); +}; + +export default AddNote; diff --git a/src/components/Dashboard/Notetaker/Note.jsx b/src/components/Dashboard/Notetaker/Note.jsx new file mode 100644 index 00000000..bb1d4e66 --- /dev/null +++ b/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 ( +
+

{text}

+ handleDeleteNote(id)}>Delete Note +
+ ); +}; + +export default Note; diff --git a/src/components/Dashboard/Notetaker/NoteApp.css b/src/components/Dashboard/Notetaker/NoteApp.css new file mode 100644 index 00000000..6eea7b58 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/Dashboard/Notetaker/NoteApp.jsx b/src/components/Dashboard/Notetaker/NoteApp.jsx new file mode 100644 index 00000000..d7bb5768 --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export default NoteApp; diff --git a/src/components/Dashboard/Notetaker/NoteList.jsx b/src/components/Dashboard/Notetaker/NoteList.jsx new file mode 100644 index 00000000..8482ea1b --- /dev/null +++ b/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 ( +
+ {notes.map((note) => ( + + ))} + +
+ ); +}; + +export default NoteList; diff --git a/src/components/Dashboard/OldDashbaord/DashboardItems.jsx b/src/components/Dashboard/OldDashbaord/DashboardItems.jsx index e5e055be..d65d264a 100644 --- a/src/components/Dashboard/OldDashbaord/DashboardItems.jsx +++ b/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 ; + return ( + + + + ); }; export default DashboardItems; diff --git a/src/components/Dashboard/Profile/ProfileElements.jsx b/src/components/Dashboard/Profile/ProfileElements.jsx index 41ef55fe..6b9574ba 100644 --- a/src/components/Dashboard/Profile/ProfileElements.jsx +++ b/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; diff --git a/src/components/Explore/Users/UsersElements.jsx b/src/components/Explore/Users/UsersElements.jsx index 68a17c62..6ae1c01c 100644 --- a/src/components/Explore/Users/UsersElements.jsx +++ b/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; `;