chore: onboarding

Author: VulpoTheDev

apps/web/src/app/(main)/(onboarding)/onboarding/page.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useAuth } from "@/app/context/AuthContext";
+import AvatarSection from "./sections/Avatar";
+import { redirect } from "next/navigation";
+import { useState } from "react";
+import Creation from "./sections/Creation";
+
+export default function OnboardingPage() {
+  const { isLoading, user } = useAuth();
+  const [section, setSection] = useState(0);
+  const handleSuccess = () => setSection(prev => prev + 1);
+  if (!isLoading && !user) return redirect('/login');
+
+
+  if (!isLoading) {
+    return (
+      <div className="bg-100 relative flex min-h-screen w-full items-start justify-center px-6 pt-36">
+        {section === 0 && <AvatarSection user={user} onSuccess={handleSuccess} />}
+        {section === 1 && <Creation />}
+      </div>
+    );
+  }
+
+  return null;
+}

apps/web/src/app/(main)/(onboarding)/onboarding/sections/Avatar.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { DropZone } from "@/components/Modals/DropZone";
+import { useEffect, useState } from "react";
+import { updateProfile } from '@/utils/api'
+import { sleep } from "@/utils/utils";
+import Image from "next/image";
+import { User } from "@/app/context/AuthContext";
+
+export default function AvatarSection({ user, onSuccess }: { user: User | null, onSuccess: () => void }) {
+  const [uploadedUrl, setUploadedUrl] = useState("")
+
+  useEffect(() => {
+    if (uploadedUrl) {
+      updateProfile(uploadedUrl)
+      sleep(3000).then(() => onSuccess());
+    }
+  }, [uploadedUrl])
+
+  return (
+    <>
+      <Image
+        src="/Backdrop.png"
+        alt="Backdrop"
+        height={300}
+        width={2000}
+        className="absolute left-0 top-0 z-0 h-1/5 w-full object-cover"
+      />
+      <div className="flex flex-col justify-center items-center gap-y-8 transition-all duration-300">
+        <DropZone setData={setUploadedUrl} />
+        {uploadedUrl ? (
+          <h1 className="text-3xl opacity-100 transition-opacity duration-300">
+            Looking good!
+          </h1>
+        ) : (
+          <h1 className="text-3xl opacity-100 transition-opacity duration-300">
+            Welcome to MyArtverse, {user!.handle}!
+          </h1>
+        )}
+      </div>
+    </>
+
+  )
+}

apps/web/src/app/(main)/(onboarding)/onboarding/sections/Creation.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useState } from 'react';
+import { fetchUserData } from '@/utils/api';
+import Image from 'next/image';
+
+export default function Creation() {
+  const [profile, setProfile] = useState<{ handle: string; avatarUrl: string } | null>(null);
+
+  useEffect(() => {
+    const getProfile = async () => {
+      const data = await fetchUserData();
+      setProfile(data);
+    };
+
+    getProfile();
+  }, []);
+
+  if (!profile) return <div className="text-white">Loading...</div>;
+
+  return (
+    <>
+      <Image
+        src="/Backdrop.png"
+        alt="Backdrop"
+        height={150}
+        width={2000}
+        className="absolute left-0 top-0 z-0 h-1/6 w-full object-cover"
+      />
+      <div className='flex flex-col items-center'>
+        <div className="flex items-center gap-x-4 bg-100 z-50 absolute p-4 rounded-lg">
+          <Image alt={`@${profile.handle}'s Avatar`} src={profile.avatarUrl} width={50} height={50} />
+          <span className='text-700 text-2xl'>@{profile.handle}</span>
+        </div>
+        <div className='relative flex flex-col items-center justify-center gap-y-8 pt-36'>
+          <h1 className='text-3xl'>Create a Character</h1>
+          <p className='text-2xl'>Awesome, you're avatar has been set.</p>
+          <div className='flex flex-row gap-x-4'>
+            <div className='bg-100 p-4 rounded-md inset-shadow-xs'>
+              <Image src="/UserBanner.svg" alt="Banner" width={500} height={200} className="rounded-md mb-3" />
+              <h1 className='text-2xl'>Create a Character</h1>
+              <p className='text-xl'>Awesome, you're avatar has been set.</p>
+            </div>
+            <div className='bg-100 p-4 rounded-md inset-shadow-xs'>
+              <Image src="/UserBanner.svg" alt="Banner" width={500} height={200} className="rounded-md mb-3" />
+              <h1 className='text-2xl'>Import from Toyhou.se</h1>
+              <p className='text-xl'>Awesome, you're avatar has been set.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

apps/web/src/app/context/AuthContext.tsx

@@ -46,6 +46,26 @@ const AuthContext = createContext<AuthContextType>({
 
 export const useAuth = () => useContext(AuthContext)
 
+export const useAuthRedirect = (redirectTo: string = "/login") => {
+  "use client"
+
+  const { user, isLoading } = useAuth()
+  const router = useRouter()
+  const [authUser, setAuthUser] = useState<User | null>(null)
+
+  useEffect(() => {
+    if (!isLoading) {
+      if (!user) {
+        router.push(redirectTo)
+      } else {
+        setAuthUser(user)
+      }
+    }
+  }, [user, isLoading, router, redirectTo])
+
+  return { user: authUser as User, isLoading }
+}
+
 export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
   const [user, setUser] = useState<User | null>(null)
   const [isLoading, setIsLoading] = useState(true)
@@ -79,6 +99,7 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       throw new Error("Logout failed")
     }
   }
+  
 
   return (
     <AuthContext.Provider value={{ user, isLoading, logout }}>

apps/web/src/app/context/authRedirect.tsx

@@ -5,25 +5,7 @@ import { fetcher } from "@/app/lib/fetcher"
 import { BACKEND_URL } from "@/utils/constants"
 import { type User, useAuth } from "./AuthContext"
 
-export const useAuthRedirect = (redirectTo: string = "/login") => {
-  "use client"
 
-  const { user, isLoading } = useAuth()
-  const router = useRouter()
-  const [authUser, setAuthUser] = useState<User | null>(null)
-
-  useEffect(() => {
-    if (!isLoading) {
-      if (!user) {
-        router.push(redirectTo)
-      } else {
-        setAuthUser(user)
-      }
-    }
-  }, [user, isLoading, router, redirectTo])
-
-  return { user: authUser, isLoading }
-}
 
 export const serverAuthRedirect = async () => {
   "use server"

apps/web/src/components/Modals/DropZone.tsx

@@ -8,22 +8,23 @@ import { LuUpload } from "react-icons/lu"
 import type { MapElement } from "@/types/utils"
 
 const allowedTypes = ["image/png", "image/jpeg", "image/jpg"]
-const maxFileSize = 10 * 1024 * 1024 // 10 MB
+const maxFileSize = 10 * 1024 * 1024 // 10MB
 
-export default function DropZone({
+export function DropZone({
   setData,
   className = "",
   value = "",
-  aspectRatio = "1"
+  onSuccess
 }: {
   setData: (url: string) => void
+  onSuccess?: () => void
   className?: string
   value?: string
   aspectRatio?: string
 }) {
   const [isDragging, setIsDragging] = useState(false)
   const [file, setFile] = useState<File | null>(null)
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const [imageUrl, setImageUrl] = useState<string | null>(value || null)
   const [uploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState(false)
@@ -34,12 +35,6 @@ export default function DropZone({
     if (fileUploadRef.current) fileUploadRef.current.value = ""
   }, [file])
 
-  useEffect(() => {
-    const handleDragOver = (e: DragEvent) => e.preventDefault()
-    window.addEventListener("dragover", handleDragOver)
-    return () => window.removeEventListener("dragover", handleDragOver)
-  }, [])
-
   const handleDrag = (e: React.DragEvent) => {
     e.preventDefault()
     e.stopPropagation()
@@ -59,7 +54,7 @@ export default function DropZone({
 
   const processFile = (uploadedFile: File) => {
     if (!allowedTypes.includes(uploadedFile.type)) {
-      return setError("Invalid file type.")
+      return setError("Invalid file type. Please upload a PNG or JPEG image.")
     }
 
     if (uploadedFile.size > maxFileSize) {
@@ -85,10 +80,7 @@ export default function DropZone({
         credentials: "include"
       })
 
-      if (!res.ok)
-        throw new Error(
-          res.status === 401 ? "Are you logged in?" : "Upload failed"
-        )
+      if (!res.ok) throw new Error("Upload failed. Please try again.")
 
       const data = await res.json()
       setData(data.url)
@@ -98,47 +90,38 @@ export default function DropZone({
       setError(err instanceof Error ? err.message : "Unknown error occurred")
     } finally {
       setUploading(false)
+      // onSuccess()
     }
   }
 
   return (
     <div
       className={cn(
-        "rounded-md border-2 border-dashed p-10 text-center transition-colors",
-        isDragging ? "bg-gray-300" : "bg-gray-100",
+        "flex flex-col items-center justify-center rounded-lg text-center cursor-pointer z-10 bg-100 w-fit p-8",
         className
       )}
       onDragEnter={handleDrag}
       onDragOver={handleDrag}
       onDragLeave={handleDrag}
       onDrop={handleDrop}
+      onClick={() => fileUploadRef.current?.click()}
     >
       <input
         ref={fileUploadRef}
         type="file"
         className="hidden"
         onChange={handleFileInputChange}
+        accept={allowedTypes.join(", ")}
       />
       {imageUrl ? (
-        <div className="flex flex-col items-center">
-          <Image width={200} height={200} alt="Uploaded" src={imageUrl} />
-          <span className="text-lg font-bold">Uploaded!</span>
-        </div>
+        <Image width={200} height={200} alt="Uploaded" src={imageUrl} className="rounded-md" />
       ) : uploading ? (
         <span className="text-lg font-bold">Uploading...</span>
       ) : (
-        <div className="flex flex-col items-center">
-          <button
-            className="mb-6 flex items-center justify-center rounded-full bg-gray-200 p-8"
-            onClick={() => fileUploadRef.current?.click()}
-          >
-            <LuUpload size={48} />
-          </button>
-          <span className="text-lg font-bold">Drag and drop files here</span>
-          <span className="mt-4">
-            Max size: 10MB, Supported formats: .jpg, .png
-          </span>
-          {error && <span className="text-red-500">{error}</span>}
+        <div className="flex flex-col items-center justify-center text-sm cursor-pointer z-10 border-2 border-dashed aspect-square p-5 bg-100 rounded-lg">
+          <span>Drag and drop files</span>
+          <span>here or browse files</span>
+          {error && <span className="text-red-500 mt-2">{error}</span>}
         </div>
       )}
     </div>

apps/web/src/utils/api.ts

@@ -329,3 +329,13 @@ export const search = async (
 
   return data
 }
+
+export const updateProfile = async (avatarLink?: string, birthday?: string, displayName?: string, pronouns?: string) => {
+  const data = await apiWithAuth<unknown>('PUT', "/v1/profile/me", {
+    avatarLink: avatarLink,
+    birthday: birthday,
+    displayName: birthday,
+    pronouns: pronouns
+  })
+  return data;
+}

apps/web/src/utils/utils.ts

@@ -0,0 +1 @@
+export const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));