Merge pull request #42 from IzzyDotExe/user-notes

User notes

arc3-api/src/v1/controllers/UserNotesControllers.js

@@ -14,7 +14,7 @@ async function GetUserNotes(req, res) {
   try {
 
     const notes = await UserNote.find();
-    res.status(200).json(notes.filter(x => x.guildsnowflake == guildid && x.usersnowflake == userid));
+    res.status(200).json(notes.filter(x => x.guildsnowflake === guildid && ( userid === "all" || x.usersnowflake === userid )));
 
   } catch (e) {
     console.error(e.message)

arc3-dash/src/components/Notes/Note.css

@@ -0,0 +1,43 @@
+.note {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    border: solid white 2px;
+    margin: 15px;
+    padding: 15px;
+    color: white;
+    background-color: #1f1f1f;
+    border-radius: 25px;
+}
+
+.note-top {
+    display: flex;
+    justify-content: space-between;
+}
+
+
+.note-middle {
+    display: flex;
+    flex-direction: column;
+    background-color: #2a2a2a;
+    padding: 0 5px;
+    border-radius: 5px;
+}
+
+.note-top p {
+    color: gray;
+}
+
+.note-top h2 {
+    margin-left: 10px;
+}
+
+.note-bottom {
+    color: gray;
+    display: flex;
+    justify-content: end;
+}
+
+.note-top img {
+    width: 25px;
+}

arc3-dash/src/components/Notes/Note.jsx

@@ -0,0 +1,46 @@
+import {timeAgo} from '../../lib/utils.js';
+import {TranscriptMemberComponent} from '../Transcripts/TranscriptMemberComponent.jsx';
+import MemberLabel from "../Util/MemberLabel";
+import {useEffect, useState} from "react";
+import axios from "axios";
+import "./Note.css"
+
+export function Note({ note, lid}) {
+
+    const date = timeAgo(parseInt(note.date)*1000);
+
+    const [user, setUser] = useState({});
+    const [author, setAuthor] = useState({});
+    useEffect(( ) => {
+
+        console.log(note)
+
+        if (note) {
+            axios.get(`/api/discord/users/${note.usersnowflake}/`).then(res => {
+                setUser(res.data);
+            })
+            axios.get(`/api/discord/users/${note.authorsnowflake}/`).then(res => {
+                setAuthor(res.data);
+            })
+        }
+
+    }, [note])
+
+    return (
+        <div className="note"  id={`note-${lid}`}>
+
+            <div className="note-top">
+                <MemberLabel user={user} placement="right"/>
+                <p>{date}</p>
+            </div>
+            <div className="note-middle">
+                <p>{note.note}</p>
+            </div>
+            <div className="note-bottom">
+                <p>Added by: {author ? author.username : "not found"}</p>
+            </div>
+
+        </div>
+
+    )
+}

arc3-dash/src/components/Notes/NoteUser.css

@@ -0,0 +1,24 @@
+.note-user {
+    color: white;
+    padding: 5px;
+    border-radius: 5px;
+
+}
+
+.note-user:hover {
+    background-color: #3f3f3f;
+    cursor: pointer;
+}
+
+.note-user h2 {
+    padding: 0 20px;
+    font-size: large;
+}
+
+.note-user p {
+    color: gray;
+}
+
+.note-user img {
+    width: 35px;
+}

arc3-dash/src/components/Notes/NoteUser.jsx

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from "react";
+import MemberLabel from "../Util/MemberLabel";
+import axios from "axios";
+
+import "./NoteUser.css"
+import {isEmptyOrSpaces} from "../../lib/utils";
+
+export function NoteUser({ userid, guildid, notes, lid, setNotes, filter}) {
+
+    const [user, setUser] = useState(null)
+
+    const noteClick = useCallback(() => {
+
+        // Show notes from this user on left side
+        axios.get(`/api/notes/${guildid}/${userid}`).then(res => {
+            setNotes(res.data)
+        })
+
+    }, [guildid, userid, setNotes])
+
+    useEffect(() => {
+
+        axios.get(`/api/discord/users/${userid}/`).then(res => {
+            setUser(res.data);
+        })
+
+    }, [userid])
+
+
+
+    return (
+        <>
+        { !isEmptyOrSpaces(filter) && user && user.username.toLowerCase().includes(filter.toLowerCase()) &&
+        <div onClick={noteClick} id={`note-user-${lid}`} className="note-user">
+            <MemberLabel placement="right" user={user}/>
+            <p>{notes} Notes</p>
+        </div>
+        }
+        </>
+
+    )
+}

arc3-dash/src/components/Notes/NoteUserList.css

@@ -0,0 +1,4 @@
+.note-user {
+    display: flex;
+    justify-content: space-between;
+}

arc3-dash/src/components/Notes/NotesUserList.jsx

@@ -0,0 +1,17 @@
+import {NoteUser} from "./NoteUser";
+import './NoteUserList.css'
+import {useEffect, useState} from "react";
+
+export default function NoteUserList({notesUsers, setNotes, filter}) {
+
+    let uniqueUsers = [...notesUsers]
+
+    uniqueUsers = uniqueUsers.filter((elem, index) => {
+        return uniqueUsers.findIndex(obj => obj.usersnowflake === elem.usersnowflake) === index
+    })
+
+    return <> {uniqueUsers.map((x, i, a)=> {
+        return <NoteUser filter={filter} guildid={notesUsers[0].guildsnowflake} setNotes={setNotes} lid={i} key={i} userid={x.usersnowflake} notes={notesUsers.filter(y => y.usersnowflake === x.usersnowflake).length}/>
+    })}</>
+
+}

arc3-dash/src/lib/utils.js

@@ -22,4 +22,8 @@ export function timeAgo(prevDate) {
       default:
           return "";
   }
+}
+
+export function isEmptyOrSpaces(str){
+    return str && (str.match(/^ *$/) !== null)
 }

arc3-dash/src/routes/Notes.css

@@ -1,21 +1,53 @@
-.NotesPick {
-  width: 100%;
-  height: 100%;
+.notes {
+  background-color: rgb(30, 30, 30);
+  flex: 1;
   display: flex;
+  padding: 20px;
+  overflow-x: scroll;
 }
 
-.NotesPick > 
-.sidebar {
-  padding: 10px;
-  flex: 2;
+.notes > section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: #333333;
+  margin: 20px;
+  border-radius: 20px;
 }
 
-.NotesPick >
-.notes-sec {
-  flex: 5;
+.notes > section > input {
+  width: 70%;
+  height: 20px;
 }
 
-.sidebar
-.user-tr {
-  padding: 10px;
+.notes-user-list {
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  margin: 10px 30px;
+}
+
+.notes-display {
+  width: 100%;
+  overflow-x: scroll;
+}
+
+.notes > section >  h2 {
+  color: white;
+  font-size: xx-large;
+  margin: 20px 0;
+}
+
+@media screen and (min-width: 800px) {
+  .notes {
+    flex-direction: row;
+  }
+}
+
+
+@media screen and (max-width: 800px) {
+  .notes {
+    flex-direction: column;
+  }
 }

arc3-dash/src/routes/Notes.jsx

@@ -1,51 +1,59 @@
-import Navbar from '../components/Nav/Navbar';
-import { useState, useEffect} from 'react';
+
+import { useState, useEffect, useCallback} from 'react';
 import axios from 'axios';
 import { useParams } from 'react-router';
-import { Outlet } from "react-router-dom";
 import "./Notes.css"
 
-import {TranscriptMemberComponent} from '../components/Transcripts/TranscriptMemberComponent'
+import NoteUserList from "../components/Notes/NotesUserList";
+import {Note} from "../components/Notes/Note";
 
 export default function Notes() {
 
   const {guild, userid} = useParams();
   const [notesUsers, setNoteUsers] = useState([]);
 
+  const [notes, setNotes] = useState([]);
+  const [filter, setFilter] = useState("");
+
   useEffect(() => {
-    axios.get(`/api/notes/${guild}`).then(res => {
+    axios.get(`/api/notes/${guild}/all`).then(res => {
       setNoteUsers(res.data);
     })
-  }, [guild])
-
-  return (
-
-      <>
 
-        <div className="App">
-
-          <title>User Notes</title>
+  }, [guild])
 
-          <main>
-            <div className="NotesPick">
-              <div className = "sidebar">
-                {notesUsers.map(x => {
-                  return <a href={`/${guild}/notes/${x}`}><TranscriptMemberComponent style={x == userid ? {"border": "2px solid red"} : {}} userid={x}/></a>
-                })
-                }
-              </div>
 
-              <div className = "notes-sec">
-                <Outlet/>
-              </div>
+  return (
+      <div className="notes">
+          <section className="right">
+              <h2>Users</h2>
+              <input onChange={(e) => {
+                  setFilter(e.target.value)
+              }}/>
+              <section className="notes-user-list">
+                  <NoteUserList filter={filter} setNotes={setNotes} notesUsers={notesUsers}/>
+              </section>
+          </section>
+          <section className="left">
+              <h2>Notes</h2>
+                <NotesDisplay filter={filter} notes={notes}/>
+          </section>
+      </div>
 
-            </div>
-          </main>
+  )
 
-        </div>
+}
 
-      </>
 
-  )
+function NotesDisplay({notes, filter}) {
 
+    return <section className="notes-display">
+        {
+            notes.sort((a, b) => {
+                return parseInt(b.date) - parseInt(a.date)
+            }).map((x, i) => {
+                return <Note note={x} lid={i} key={i}/>
+            })
+        }
+    </section>
 }

arc3-dash/src/routes/UserNotes.jsx

@@ -2,7 +2,7 @@ import { useParams } from 'react-router';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 
-import {Note} from '../components/Note'
+import {Note} from '../components/Notes/Note'
 
 
 export default function UserNotes() {