Merge pull request #9 from lemeow125/feature/notes_per_user

Feature/notes per user

src/Components/Api/Api.tsx

@@ -1,38 +1,91 @@
 import axios from "axios";
+import {
+  ActivationParams,
+  UpdateNoteParams,
+  AddNoteParams,
+  LoginParams,
+  RegistrationParams,
+} from "../../Interfaces/Interfaces";
 
 // Note APIs
 
 export function GetNotes() {
-  return axios.get("http://localhost:8000/api/v1/notes/").then((response) => {
-    return response.data;
-  });
-}
-
-export interface note {
-  title: string;
-  content: string;
-}
-
-export function AddNote(note: note) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
-    .post("http://localhost:8000/api/v1/notes/", note)
+    .get("http://localhost:8000/api/v1/notes/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
     .then((response) => {
       return response.data;
     });
 }
 
+export function GetNote(id: number) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .get("http://localhost:8000/api/v1/notes/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function UpdateNote(note: UpdateNoteParams) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .patch("http://localhost:8000/api/v1/notes/" + note.id + "/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log("Error updating note", error);
+      return error;
+    });
+}
+
+export function AddNote(note: AddNoteParams) {
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .post("http://localhost:8000/api/v1/notes/", note, {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.log("Error adding note", error);
+      return error;
+    });
+}
+
 export function DeleteNote(id: number) {
-  return axios.delete("http://localhost:8000/api/v1/notes/" + id + "/");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
+  return axios
+    .delete("http://localhost:8000/api/v1/notes/" + id + "/", {
+      headers: {
+        Authorization: "Token " + token,
+      },
+    })
+    .catch((error) => {
+      console.log("Error deleting note", error);
+      return error;
+    });
 }
 
 // User APIs
-export interface register {
-  email: string;
-  username: string;
-  password: string;
-}
 
-export function UserRegister(register: register) {
+export function UserRegister(register: RegistrationParams) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/users/", register)
     .then(async (response) => {
@@ -45,19 +98,14 @@ export function UserRegister(register: register) {
     });
 }
 
-export interface user {
-  username: string;
-  password: string;
-}
-
-export function UserLogin(user: user) {
+export function UserLogin(user: LoginParams) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/token/login/", user)
     .then(async (response) => {
       localStorage.setItem("token", JSON.stringify(response.data.auth_token));
       console.log(
         "Login Success! Stored Token: ",
-        JSON.parse(localStorage.getItem("token") || "")
+        JSON.parse(localStorage.getItem("token") || "{}")
       );
       return true;
     })
@@ -68,7 +116,7 @@ export function UserLogin(user: user) {
 }
 
 export function UserInfo() {
-  const token = JSON.parse(localStorage.getItem("token") || "");
+  const token = JSON.parse(localStorage.getItem("token") || "{}");
   return axios
     .get("http://localhost:8000/api/v1/accounts/users/me/", {
       headers: {
@@ -76,20 +124,12 @@ export function UserInfo() {
       },
     })
     .then((response) => {
+      console.log(response.data);
       return response.data;
-    })
-    .catch((error) => {
-      console.log("Error in fetching user data");
-      console.log(error);
     });
 }
 
-export interface activation {
-  uid: string;
-  token: string;
-}
-
-export function UserActivate(activation: activation) {
+export function UserActivate(activation: ActivationParams) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/users/activation/", activation)
     .then(async (response) => {

src/Components/AppIcon/AppIcon.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
+import { IconProps } from "../../Interfaces/Interfaces";
 
-export interface props {
-  size: number;
-  color: string;
-}
-
-export default function AppIcon(props: props) {
+export default function AppIcon(props: IconProps) {
   return (
     <>
       <svg
@@ -13,11 +9,11 @@ export default function AppIcon(props: props) {
         width={props.size + "px"}
         height={props.size + "px"}
         viewBox="0 0 24 24"
-        stroke-width="2"
+        strokeWidth="2"
         stroke={props.color}
         fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>

src/Components/Header/Header.tsx

@@ -4,6 +4,7 @@ import styles from "../../styles";
 import AppIcon from "../AppIcon/AppIcon";
 import Login from "../LoginButton/LoginButton";
 import HomeIcon from "../HomeIcon/HomeIcon";
+import UserIcon from "../UserIcon/UserIcon";
 
 export default function Header() {
   return (
@@ -16,9 +17,7 @@ export default function Header() {
           }}
         >
           <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
-          <HomeIcon size={32} color="white" />
+          <UserIcon size={32} color="white" />
         </div>
         <div
           style={{

src/Components/HomeIcon/HomeIcon.tsx

@@ -1,13 +1,9 @@
 import { Button } from "@mui/material";
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
+import { IconProps } from "../../Interfaces/Interfaces";
 
-export interface props {
-  size: number;
-  color: string;
-}
-
-export default function HomeIcon(props: props) {
+export default function HomeIcon(props: IconProps) {
   const navigate = useNavigate();
   return (
     <Button
@@ -28,11 +24,11 @@ export default function HomeIcon(props: props) {
         width={props.size - 4 + "px"}
         height={props.size - 4 + "px"}
         viewBox="0 0 24 24"
-        stroke-width="2"
+        strokeWidth="2"
         stroke={props.color}
         fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>

src/Components/LoginButton/LoginButton.tsx

@@ -5,23 +5,14 @@ import styles from "../../styles";
 import { useDispatch, useSelector } from "react-redux";
 import { SetLoggedOut } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 import { UnsetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
-
-export interface user {
-  LoggedInUser: {
-    value: {
-      email: string;
-      id: number;
-      username: string;
-    };
-  };
-}
+import { LoggedInUserState, LoginState } from "../../Interfaces/Interfaces";
 
 export default function LoginButton() {
   const dispatch = useDispatch();
-  const logged_in = useSelector(
-    (state: { Login: { logged_in: boolean } }) => state.Login.logged_in
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  const logged_in_user = useSelector(
+    (state: LoggedInUserState) => state.LoggedInUser.value
   );
-  const logged_in_user = useSelector((state: user) => state.LoggedInUser.value);
   const navigate = useNavigate();
   if (!logged_in) {
     return (

src/Components/Note/Note.tsx

@@ -3,14 +3,11 @@ import styles from "../../styles";
 import { Button } from "@mui/material";
 import { useMutation, useQueryClient } from "react-query";
 import { DeleteNote } from "../Api/Api";
+import { NoteProps } from "../../Interfaces/Interfaces";
+import { useNavigate } from "react-router-dom";
 
-export interface props {
-  title: string;
-  content: string;
-  id: number;
-  date_created: string;
-}
-export default function Note(props: props) {
+export default function Note(props: NoteProps) {
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: DeleteNote,
@@ -21,20 +18,38 @@ export default function Note(props: props) {
   return (
     <div style={styles.flex_column}>
       <div style={styles.note}>
-        <p style={styles.text_medium}>{props.title}</p>
+        <p style={styles.text_medium}>Owner: {props.owner}</p>
+        <p style={styles.text_medium}>Title: {props.title}</p>
         <div style={styles.note_content}>
-          <p style={styles.text_small}>{props.content}</p>
+          <textarea
+            style={styles.input_notebody}
+            disabled={true}
+            value={props.content}
+          />
+        </div>
+        <p style={styles.text_medium}>
+          Timestamp: {String(props.date_created)}
+        </p>
+        <div style={styles.flex_row}>
+          <Button
+            style={styles.button_red}
+            variant="contained"
+            onClick={() => {
+              mutation.mutate(props.id);
+            }}
+          >
+            Remove Note
+          </Button>
+          <Button
+            style={styles.button_yellow}
+            variant="contained"
+            onClick={() => {
+              navigate("/Note/" + props.id);
+            }}
+          >
+            Edit Note
+          </Button>
         </div>
-        <p style={styles.text_medium}>Timestamp: {props.date_created}</p>
-        <Button
-          style={styles.button_red}
-          variant="contained"
-          onClick={() => {
-            mutation.mutate(props.id);
-          }}
-        >
-          Remove Note
-        </Button>
       </div>
     </div>
   );

src/Components/Notes/Notes.tsx

@@ -5,6 +5,8 @@ import Note from "../Note/Note";
 import { Button } from "@mui/material";
 import { useQuery } from "react-query";
 import { GetNotes } from "../Api/Api";
+import { useSelector } from "react-redux";
+import { LoginState, NoteProps } from "../../Interfaces/Interfaces";
 
 export default function Notes() {
   const navigate = useNavigate();
@@ -13,21 +15,26 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
-  if (error) {
-    return (
-      <div style={styles.note}>
-        <p style={styles.text_medium_red}>Error contacting Notes server</p>
-      </div>
-    );
-  }
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
   if (isLoading) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium}>Loading Notes...</p>
       </div>
     );
-  }
-  if (notes.length === 0) {
+  } else if (!logged_in && error) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Please login to use Clip Notes</p>
+      </div>
+    );
+  } else if (error) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium_red}>Error contacting Notes server</p>
+      </div>
+    );
+  } else if (notes.length === 0) {
     return (
       <div style={styles.note}>
         <p style={styles.text_medium}>No notes exist yet</p>
@@ -44,30 +51,20 @@ export default function Notes() {
       </div>
     );
   }
-
   return (
     <>
-      {notes.map(
-        (
-          note: {
-            title: string;
-            content: string;
-            id: number;
-            date_created: string;
-          },
-          index: number
-        ) => {
-          return (
-            <Note
-              id={note.id}
-              key={index}
-              title={note.title}
-              content={note.content}
-              date_created={note.date_created}
-            />
-          );
-        }
-      )}
+      {notes.map((note: NoteProps, index: number) => {
+        return (
+          <Note
+            id={note.id}
+            key={index}
+            title={note.title}
+            content={note.content}
+            date_created={note.date_created}
+            owner={note.owner}
+          />
+        );
+      })}
       <Button
         style={styles.button_green}
         variant="contained"

src/Components/UserIcon/UserIcon.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@mui/material";
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { IconProps } from "../../Interfaces/Interfaces";
+
+export default function UserIcon(props: IconProps) {
+  const navigate = useNavigate();
+  return (
+    <Button
+      variant="contained"
+      style={{
+        backgroundColor: "#005997",
+        borderRadius: 16,
+        width: props.size + "px",
+        height: props.size + "px",
+        margin: 4,
+        alignContent: "center",
+        alignItems: "center",
+      }}
+      onClick={() => navigate("/User")}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke={props.color}
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
+        <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
+      </svg>
+    </Button>
+  );
+}

src/Interfaces/Interfaces.tsx

@@ -0,0 +1,58 @@
+// Redux Interfaces
+export interface LoginState {
+  Login: { logged_in: boolean };
+}
+
+export interface LoggedInUserState {
+  LoggedInUser: {
+    value: {
+      email: string;
+      id: number;
+      username: string;
+    };
+  };
+}
+
+// Component Props Interfaces
+
+export interface NoteProps {
+  title: string;
+  content: string;
+  id: number;
+  date_created: Date;
+  owner: string;
+}
+
+export interface IconProps {
+  size: number;
+  color: string;
+}
+
+// API Interfaces
+
+export interface RegistrationParams {
+  email: string;
+  username: string;
+  password: string;
+}
+
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface ActivationParams {
+  uid: string;
+  token: string;
+}
+
+export interface AddNoteParams {
+  title: string;
+  content: string;
+}
+
+export interface UpdateNoteParams {
+  id: number;
+  title: string;
+  content: string;
+}

src/Routes/Activation/Activation.tsx

@@ -3,15 +3,12 @@ import Header from "../../Components/Header/Header";
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { UserActivate } from "../../Components/Api/Api";
+import { ActivationParams } from "../../Interfaces/Interfaces";
 
-export interface activation {
-  uid: string;
-  token: string;
-}
 export default function Activation() {
   let { uid, token } = useParams();
   const [status, setStatus] = useState(0);
-  async function verify(activation: activation) {
+  async function verify(activation: ActivationParams) {
     let status = await UserActivate(activation);
     if (status) {
       setStatus(1);
@@ -23,7 +20,7 @@ export default function Activation() {
     if (uid && token) {
       verify({ uid, token });
     }
-  }, []);
+  }, [uid, token]);
   if (status === 1) {
     return (
       <div style={styles.background}>

src/Routes/Home/Home.tsx

@@ -1,11 +1,11 @@
 import styles from "../../styles";
 import Header from "../../Components/Header/Header";
-import NoteMapper from "../../Components/Notes/Notes";
+import Notes from "../../Components/Notes/Notes";
 export default function Home() {
   return (
     <div style={styles.background}>
       <Header />
-      <NoteMapper />
+      <Notes />
     </div>
   );
 }

src/Routes/Login/Login.tsx

@@ -7,7 +7,7 @@ import { useState } from "react";
 import { Button } from "@mui/material";
 import { UserInfo, UserLogin } from "../../Components/Api/Api";
 
-import { useSelector, useDispatch } from "react-redux";
+import { useDispatch } from "react-redux";
 import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
 import { SetLoggedIn } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
 
@@ -29,7 +29,7 @@ export default function Login() {
           <div style={{ margin: 4 }} />
           <input
             style={styles.input_notetitle}
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, username: e.target.value });
             }}
             maxLength={20}
@@ -41,7 +41,7 @@ export default function Login() {
           <input
             style={styles.input_notetitle}
             type="password"
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, password: e.target.value });
             }}
             maxLength={20}

src/Routes/NewNote/NewNote.tsx

@@ -42,8 +42,8 @@ export default function NewNote() {
           <div style={styles.note_content}>
             <textarea
               style={styles.input_notebody}
-              onChange={(e: { target: { value: any } }) => {
-                setNote({ ...note, content: e.target.value });
+              onChange={async (e: { target: { value: any } }) => {
+                await setNote({ ...note, content: e.target.value });
               }}
             />
           </div>
@@ -51,11 +51,13 @@ export default function NewNote() {
             style={styles.button_green}
             variant="contained"
             onClick={async () => {
-              mutation.mutate({
-                title: note.title,
-                content: note.content,
-              });
-              navigate("/");
+              try {
+                await mutation.mutate({
+                  title: note.title,
+                  content: note.content,
+                });
+                navigate("/");
+              } catch (error) {}
             }}
           >
             Add Note

src/Routes/Register/Register.tsx

@@ -1,16 +1,12 @@
 import * as React from "react";
 import styles from "../../styles";
 
-import { useNavigate } from "react-router-dom";
 import Header from "../../Components/Header/Header";
 import { useState } from "react";
 import { Button } from "@mui/material";
-import { UserInfo, UserLogin } from "../../Components/Api/Api";
-
 import { UserRegister } from "../../Components/Api/Api";
 
 export default function Register() {
-  const navigate = useNavigate();
   const [user, setUser] = useState({
     email: "",
     username: "",
@@ -27,7 +23,7 @@ export default function Register() {
           <div style={{ margin: 4 }} />
           <input
             style={styles.input_notetitle}
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, email: e.target.value });
             }}
             maxLength={20}
@@ -38,7 +34,7 @@ export default function Register() {
           <div style={{ margin: 4 }} />
           <input
             style={styles.input_notetitle}
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, username: e.target.value });
             }}
             maxLength={20}
@@ -50,7 +46,7 @@ export default function Register() {
           <input
             style={styles.input_notetitle}
             type="password"
-            onChange={(e: { target: { value: any } }) => {
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setUser({ ...user, password: e.target.value });
             }}
             maxLength={20}
@@ -61,9 +57,7 @@ export default function Register() {
           variant="contained"
           onClick={async () => {
             setUser({
-              email: "",
-              username: "",
-              password: "",
+              ...user,
             });
             if (await UserRegister(user)) {
               setFeedback(

src/Routes/UserPage/UserPage.tsx

@@ -0,0 +1,51 @@
+import styles from "../../styles";
+import Header from "../../Components/Header/Header";
+import { UserInfo } from "../../Components/Api/Api";
+import { useQuery } from "react-query";
+import { useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
+import LoginButton from "../../Components/LoginButton/LoginButton";
+
+export default function UserPage() {
+  const { data, isLoading, error } = useQuery("user", UserInfo, { retry: 0 });
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
+  if (isLoading && !error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Loading...</p>
+        </div>
+      </div>
+    );
+  } else if (!logged_in && error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <div style={styles.note}>
+          <p style={styles.text_medium}>Please login to view user info</p>
+          <LoginButton />
+        </div>
+      </div>
+    );
+  } else if (error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <div style={styles.note}>
+          <p style={styles.text_medium_red}>An error has occured</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div style={styles.background}>
+      <Header />
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Username: {data.username}</p>
+        <p style={styles.text_medium}>Email: {data.email}</p>
+        <p style={styles.text_medium}>User ID: {data.id}</p>
+      </div>
+    </div>
+  );
+}

src/Routes/ViewEditNote/ViewEditNote.tsx

@@ -0,0 +1,115 @@
+import styles from "../../styles";
+import { Button } from "@mui/material";
+import { useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import Header from "../../Components/Header/Header";
+import { AddNote, GetNote, UpdateNote } from "../../Components/Api/Api";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { NoteProps } from "../../Interfaces/Interfaces";
+
+export interface input {
+  e: React.ChangeEvent;
+}
+export default function ViewNote() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const queryClient = useQueryClient();
+  const mutation = useMutation({
+    mutationFn: UpdateNote,
+    onSuccess: () => {
+      queryClient.invalidateQueries("notes");
+    },
+  });
+  const [note, setNote] = useState({
+    title: "test",
+    content: "test",
+  });
+  async function retrieve() {
+    let a = await GetNote(Number(id));
+    setNote(a);
+    return a;
+  }
+  const { data, isLoading, error } = useQuery("note", retrieve, {
+    retry: 0,
+  });
+  useEffect(() => {
+    setNote(data);
+  }, []);
+  if (error) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <div style={styles.note}>
+          <p style={styles.text_medium_red}>Error retrieving specific note</p>
+        </div>
+      </div>
+    );
+  }
+  if (isLoading) {
+    return (
+      <div style={styles.note}>
+        <p style={styles.text_medium}>Loading Note...</p>
+      </div>
+    );
+  }
+  if (data) {
+    return (
+      <div style={styles.background}>
+        <Header />
+        <p style={styles.text_medium}>Edit Note</p>
+        <div style={styles.flex_column}>
+          <div style={styles.note}>
+            <div style={styles.flex_row}>
+              <p style={styles.text_small}>Title:&nbsp;</p>
+              <input
+                style={styles.input_notetitle}
+                value={note.title}
+                onChange={(e: { target: { value: any } }) => {
+                  setNote({ ...note, title: e.target.value });
+                }}
+                maxLength={20}
+              />
+            </div>
+            <div style={styles.note_content}>
+              <textarea
+                style={styles.input_notebody}
+                value={note.content}
+                onChange={async (e: { target: { value: any } }) => {
+                  await setNote({ ...note, content: e.target.value });
+                }}
+              />
+            </div>
+            <Button
+              style={styles.button_green}
+              variant="contained"
+              onClick={async () => {
+                try {
+                  await mutation.mutate({
+                    id: Number(id),
+                    title: note.title,
+                    content: note.content,
+                  });
+                  navigate("/");
+                } catch (error) {}
+              }}
+            >
+              Update Note
+            </Button>
+          </div>
+        </div>
+        <div style={styles.flex_row}>
+          <Button
+            style={styles.button_red}
+            variant="contained"
+            onClick={() => {
+              navigate("/");
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    );
+  }
+  return <div>heh</div>;
+}

src/index.tsx

@@ -9,6 +9,8 @@ import NewNote from "./Routes/NewNote/NewNote";
 import Login from "./Routes/Login/Login";
 import Activation from "./Routes/Activation/Activation";
 import Register from "./Routes/Register/Register";
+import UserPage from "./Routes/UserPage/UserPage";
+import ViewEditNote from "./Routes/ViewEditNote/ViewEditNote";
 
 import { QueryClient, QueryClientProvider } from "react-query";
 
@@ -38,6 +40,14 @@ const router = createBrowserRouter([
     path: "/Activation/:uid/:token",
     element: <Activation />,
   },
+  {
+    path: "/Note/:id",
+    element: <ViewEditNote />,
+  },
+  {
+    path: "/User",
+    element: <UserPage />,
+  },
 ]);
 
 const root = ReactDOM.createRoot(

src/styles.tsx

@@ -47,6 +47,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   note_content: {
     display: "flex",
+    flexWrap: "wrap",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
@@ -80,7 +81,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     height: "100%",
     width: "100%",
     minWidth: "100%",
-    maxHeight: "200px",
+    minHeight: "256px",
+    maxHeight: "768px",
     fontSize: "2vh",
     fontWeight: "bold",
   },
@@ -90,8 +92,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256x",
-    marginTop: 4,
-    marginBottom: 4,
+    margin: 4,
   },
   button_yellow: {
     backgroundColor: "#e2b465",
@@ -99,8 +100,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256px",
-    marginTop: 4,
-    marginBottom: 4,
+    margin: 4,
   },
   button_red: {
     backgroundColor: "#bc231e",
@@ -108,8 +108,7 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: "flex",
     flexDirection: "row",
     width: "256px",
-    marginTop: 4,
-    marginBottom: 4,
+    margin: 4,
   },
   text_small: {
     color: "white",