Merge pull request #6 from khanghy2130/profile-route

Profile route

app/root.tsx

@@ -65,7 +65,7 @@ function App() {
             revalidator.revalidate();
             // handle events
             if (event === "INITIAL_SESSION") {
-                if (session?.user) setUser(session.user);
+                setUser(session?.user);
             } else if (event === "SIGNED_IN") {
                 setUser(session?.user);
             } else if (event === "SIGNED_OUT") {

app/routes/$.tsx

@@ -1,7 +1,5 @@
+// 404 route
 
-
-export default function SplatRoute(){
-    return <div>
-        404 Not Found!!
-    </div>
-}
+export default function SplatRoute() {
+    return <div>404 Not Found!!</div>;
+}

app/routes/_index.tsx

@@ -9,21 +9,9 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-    const [isDone, setIsDone] = useState(false);
-    const headingClicked = () => setIsDone(true);
-
     return (
         <div>
-            <h1
-                className="text-5xl text-color-2 hover:line-through"
-                onClick={headingClicked}
-            >
-                {isDone ? "done" : "click here"}
-            </h1>
-
-            {Array.from(Array(50)).map((item, index) => (
-                <p key={index}>{index}</p>
-            ))}
+            <h1 className="text-5xl text-color-2">Landing page</h1>
         </div>
     );
 }

app/routes/profile.tsx

@@ -0,0 +1,30 @@
+import { Link, useOutletContext } from "@remix-run/react";
+import { ContextProps } from "~/utils/types/ContextProps.type";
+
+export default function Profile() {
+    const { supabase, user } = useOutletContext<ContextProps>();
+
+    // unauthenticated render
+    if (!user) {
+        return (
+            <div>
+                <h1>Log in to see your profile.</h1>
+                <Link to="/login">
+                    <button className="btn">Login</button>
+                </Link>
+            </div>
+        );
+    }
+
+    // authenticated render
+    return (
+        <div>
+            <h1 className="text-3xl">
+                My Profile (no one else can see my profile)
+            </h1>
+            <p>UUID: {user.id}</p>
+            <p>Name: {user.user_metadata.full_name}</p>
+            <p>Email: {user.user_metadata.email}</p>
+        </div>
+    );
+}

app/tests/somefile.test.tsx

@@ -3,10 +3,11 @@ import { render, screen } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
-import Index from "../routes/_index";
+// import Index from "../routes/_index";
 
 describe("App", () => {
-    it("clicks to change text", async () => {
+    it("dummy test", async () => {
+        /*
         // ARRANGE
         render(<Index />);
 
@@ -16,5 +17,8 @@ describe("App", () => {
 
         // ASSERT
         expect(screen.getByRole("heading")).toHaveTextContent("done");
+        */
+
+        expect(1 + 2).toBe(3);
     });
 });