prettier users

client/src/App.tsx

@@ -11,6 +11,7 @@ import { Login } from "./Login";
 import { Signup } from "./Signup";
 import { Home } from "./Home";
 import {
+    homeAction,
     loginAction,
     profileSelfAction,
     signupAction,
@@ -42,9 +43,8 @@ const router = createBrowserRouter([
     },
     {
         path: "/home",
-        loader: async () => {
-            return await homeLoader();
-        },
+        loader: homeLoader,
+        action: homeAction,
         element: <Home />,
         children: [
             { path: "feed", element: <Feed />, loader: feedLoader },

client/src/Home.scss

@@ -14,6 +14,16 @@
     #SidebarUserInfo {
       display: flex;
       flex-direction: column;
+
+      button {
+        background: none;
+        border: none;
+        padding: 0;
+        text-decoration: none;
+        cursor: pointer;
+        color: inherit;
+        font-size: inherit;
+      }
     }
 
     * {

client/src/Home.tsx

@@ -1,4 +1,10 @@
-import { NavLink, NavLinkProps, Outlet, useLoaderData } from "react-router-dom";
+import {
+    Form,
+    NavLink,
+    NavLinkProps,
+    Outlet,
+    useLoaderData,
+} from "react-router-dom";
 import { homeLoader, LoaderToType } from "./loaders";
 import { isError } from "./api/dto";
 
@@ -26,6 +32,16 @@ export function Home() {
                 <div id="SidebarUserInfo">
                     <a> username: {loaderData.username}</a>
                     <a>name: {loaderData.fullName}</a>
+                    {/*method post for everything to reload*/}
+                    <Form method={"post"}>
+                        <button
+                            type={"submit"}
+                            name={"intent"}
+                            value={"logout"}
+                        >
+                            logout
+                        </button>
+                    </Form>
                 </div>
                 <div id="SidebarNav">
                     <NavLink to={"feed"} className={activePendingClassName}>

client/src/ProfileCard.scss

@@ -2,14 +2,38 @@
   width: 15rem;
   height: 5rem;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   border: 1px solid #EFEFEF;
   border-radius: 7px;
   padding: 1rem;
-  .fullName{
-    font-size: 1.3rem;
-  }
-  .username{
+flex: auto;
 
+  .profileInfo {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    a {
+      text-decoration: none;
+      color: black;
+    }
+
+    .fullName{
+      font-size: 1.3rem;
+    }
+    .username{
+
+    }
+  }
+
+  .profileActions {
+    button {
+      background: none;
+      border: none;
+      padding: 0;
+      text-decoration: none;
+      cursor: pointer;
+      color: inherit;
+      font-size: 0.8rem;
+    }
   }
 }

client/src/ProfileCard.tsx

@@ -16,36 +16,40 @@ export function ProfileCard({
 }) {
     return (
         <div className={"profileCard"}>
-            <Link to={`/home/profile/${username}`} className={"fullName"}>
-                {fullName}
-            </Link>
-            <Link to={`/home/profile/${username}`} className={"username"}>
-                {username}
-            </Link>
-            {actions &&
-                (alreadyFollowing ? (
-                    <Form method={"put"}>
-                        <input hidden={true} value={uuid} name={"uuid"} />
-                        <button
-                            type={"submit"}
-                            name={"intent"}
-                            value={"unfollow"}
-                        >
-                            unfollow
-                        </button>
-                    </Form>
-                ) : (
-                    <Form method={"put"}>
-                        <input hidden={true} value={uuid} name={"uuid"} />
-                        <button
-                            type={"submit"}
-                            name={"intent"}
-                            value={"follow"}
-                        >
-                            follow
-                        </button>
-                    </Form>
-                ))}
+            <div className={"profileInfo"}>
+                <Link to={`/home/profile/${username}`} className={"fullName"}>
+                    {fullName}
+                </Link>
+                <Link to={`/home/profile/${username}`} className={"username"}>
+                    {username}
+                </Link>
+            </div>
+            <div className={"profileActions"}>
+                {actions &&
+                    (alreadyFollowing ? (
+                        <Form method={"put"}>
+                            <input hidden={true} value={uuid} name={"uuid"} />
+                            <button
+                                type={"submit"}
+                                name={"intent"}
+                                value={"unfollow"}
+                            >
+                                unfollow
+                            </button>
+                        </Form>
+                    ) : (
+                        <Form method={"put"}>
+                            <input hidden={true} value={uuid} name={"uuid"} />
+                            <button
+                                type={"submit"}
+                                name={"intent"}
+                                value={"follow"}
+                            >
+                                follow
+                            </button>
+                        </Form>
+                    ))}
+            </div>
         </div>
     );
 }

client/src/UserList.scss

@@ -0,0 +1,11 @@
+.userList {
+  min-width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding: 2.5rem 2rem 0;
+  flex-wrap: wrap;
+
+  .profileCard {
+    margin: 0.2rem;
+  }
+}

client/src/UserList.tsx

@@ -4,6 +4,8 @@ import { isError } from "./api/dto";
 import { ProfileCard } from "./ProfileCard";
 import { useHomeContext } from "./HomeContext";
 
+import "./UserList.scss";
+
 export function UserList() {
     const loaderData = useLoaderData() as LoaderToType<typeof userListLoader>;
     const homeContext = useHomeContext();
@@ -17,7 +19,7 @@ export function UserList() {
         return <div>Error</div>;
     }
     return (
-        <div>
+        <div className={"userList"}>
             {people.map((u) => {
                 return (
                     <ProfileCard

client/src/actions.ts

@@ -2,7 +2,7 @@ import { addFollower, removeFollower, signup } from "./api/Person";
 import { ActionFunctionArgs, redirect } from "react-router-dom";
 import { login } from "./api/Token";
 import { isError } from "./api/dto";
-import { setToken } from "./api/utils";
+import { deleteToken, setToken } from "./api/utils";
 import { createPost, deletePost } from "./api/Post";
 
 export type ActionToType<T extends (...args: any) => any> =
@@ -62,10 +62,18 @@ export async function profileSelfAction({ request }: ActionFunctionArgs) {
     }
 }
 
+export async function homeAction({ request }: ActionFunctionArgs) {
+    const formData = await request.formData();
+    const intent = formData.get("intent")!.toString();
+    if (intent == "logout") {
+        deleteToken();
+        return redirect("/");
+    }
+}
+
 export async function userListAction({ request }: ActionFunctionArgs) {
     const formData = await request.formData();
     const intent = formData.get("intent")!.toString();
-    console.log(intent);
     if (intent == "follow") {
         return await addFollower(formData.get("uuid")!.toString());
     } else if (intent == "unfollow") {