Separated typescript interfaces into its own file and polished and cleaned up overall code

src/Components/Api/Api.tsx

@@ -1,4 +1,10 @@
 import axios from "axios";
+import {
+  ActivationParams,
+  AddNoteParams,
+  LoginParams,
+  RegistrationParams,
+} from "../../Interfaces/Interfaces";
 
 // Note APIs
 
@@ -15,12 +21,7 @@ export function GetNotes() {
     });
 }
 
-export interface note {
+export function AddNote(note: AddNoteParams) {
-  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, {
@@ -43,13 +44,8 @@ export function DeleteNote(id: number) {
 }
 
 // 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) => {
@@ -62,12 +58,7 @@ export function UserRegister(register: register) {
     });
 }
 
-export interface user {
+export function UserLogin(user: LoginParams) {
-  username: string;
-  password: string;
-}
-
-export function UserLogin(user: user) {
   return axios
     .post("http://localhost:8000/api/v1/accounts/token/login/", user)
     .then(async (response) => {
@@ -101,12 +92,7 @@ export function UserInfo() {
     });
 }
 
-export interface activation {
+export function UserActivate(activation: ActivationParams) {
-  uid: string;
-  token: string;
-}
-
-export function UserActivate(activation: activation) {
   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 {
+export default function AppIcon(props: IconProps) {
-  size: number;
-  color: string;
-}
-
-export default function AppIcon(props: props) {
   return (
     <>
       <svg

src/Components/Header/Header.tsx

@@ -18,7 +18,6 @@ export default function Header() {
           <HomeIcon size={32} color="white" />
           <HomeIcon size={32} color="white" />
           <HomeIcon size={32} color="white" />
-          <HomeIcon 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 {
+export default function HomeIcon(props: IconProps) {
-  size: number;
-  color: string;
-}
-
-export default function HomeIcon(props: props) {
   const navigate = useNavigate();
   return (
     <Button

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";
-
+import { LoggedInUserState, LoginState } from "../../Interfaces/Interfaces";
-export interface user {
-  LoggedInUser: {
-    value: {
-      email: string;
-      id: number;
-      username: string;
-    };
-  };
-}
 
 export default function LoginButton() {
   const dispatch = useDispatch();
-  const logged_in = useSelector(
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
-    (state: { Login: { logged_in: boolean } }) => 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,9 @@ 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";
 
-export interface props {
+export default function Note(props: NoteProps) {
-  title: string;
-  content: string;
-  id: number;
-  date_created: string;
-}
-export default function Note(props: props) {
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: DeleteNote,

src/Components/Notes/Notes.tsx

@@ -6,6 +6,7 @@ import { Button } from "@mui/material";
 import { useQuery } from "react-query";
 import { GetNotes } from "../Api/Api";
 import { useSelector } from "react-redux";
+import { LoginState } from "../../Interfaces/Interfaces";
 
 export default function Notes() {
   const navigate = useNavigate();
@@ -14,9 +15,7 @@ export default function Notes() {
     isLoading,
     error,
   } = useQuery("notes", GetNotes, { retry: 0 });
-  const logged_in = useSelector(
+  const logged_in = useSelector((state: LoginState) => state.Login.logged_in);
-    (state: { Login: { logged_in: boolean } }) => state.Login.logged_in
-  );
   if (!logged_in) {
     return (
       <div style={styles.note}>

src/Interfaces/Interfaces.tsx

@@ -0,0 +1,51 @@
+// 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: 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;
+}

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/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/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: "",
+              ...user,
-              username: "",
-              password: "",
             });
             if (await UserRegister(user)) {
               setFeedback(