🪀🌼 ↝ [SGV2-10 SGV2-14 SGV2-2]: Setting up a test to automate 'mission' completion

Author: Gizmotronn

components/Gameplay/Chapter 1/onboarding.tsx

@@ -0,0 +1,45 @@
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import React, { useEffect, useState } from "react";
+
+export function PickYourPlanet() {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [profile, setProfile] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (session?.user?.id) {
+            supabase
+                .from("profiles")
+                .select()
+                .eq("id", session.user.id)
+                .then((result) => {
+                    if (result.data && result.data.length > 0) {
+                        setProfile(result.data[0]);
+                    }
+                    setLoading(false);
+                })
+        } else {
+            setLoading(false);
+        }
+    }, [session]);
+
+    if (loading) {
+        return <p>Loading...</p>;
+    }
+
+    if (!session) {
+        return <p>Please sign in</p>;
+    }
+
+    if (profile) {
+        return (
+            <div>
+                <p>Name: {profile.username}</p>
+            </div>
+        );
+    };
+
+    return <p>No profile found</p>;
+};

components/Gameplay/mission-list.tsx

@@ -1,6 +1,6 @@
 import { CardTitle, CardDescription, CardHeader, CardContent, CardFooter, Card } from "../ui/card";
 import Link from "next/link";
-import { Button } from "../ui/button";
+import { Button } from "../ui/button"; 
 
 export function MissionList() {
   const missions = [

pages/tests/onboarding.tsx

@@ -0,0 +1,28 @@
+import { PickYourPlanet } from "../../components/Gameplay/Chapter 1/onboarding";
+import Layout from "../../components/_Core/Section/Layout";
+
+export default function OnboardingTest() {
+
+    return (
+        <Layout>
+            <style jsx global>
+          {`
+            body {
+              background: url('') center/cover;
+              background-attachment: fixed;
+            }
+
+            @media only screen and (max-width: 767px) {
+              .planet-heading {
+                color: white;
+                font-size: 24px;
+                text-align: center;
+                margin-bottom: 10px;
+              }
+            }
+          `}
+        </style>
+            <PickYourPlanet />
+        </Layout>
+    );
+};