From 4ad0914b173f714aa082bd7cf2c0ad7b832aaae1 Mon Sep 17 00:00:00 2001
From: grimsi <9295182+grimsi@users.noreply.github.com>
Date: Sat, 16 Mar 2024 14:48:06 +0100
Subject: [PATCH] Fix Multi-Step-Wizard Implement generic Wizard component for
 future use in Gameyfin

---
 .run/UI debug.run.xml                     |   2 +-
 frontend/components/Input.tsx             |  19 +-
 frontend/components/wizard/Wizard.tsx     |  87 +++++++++
 frontend/components/wizard/WizardStep.tsx |   3 +
 frontend/views/SetupView.tsx              | 224 +++++++++-------------
 gradlew                                   |   0
 6 files changed, 185 insertions(+), 150 deletions(-)
 create mode 100644 frontend/components/wizard/Wizard.tsx
 create mode 100644 frontend/components/wizard/WizardStep.tsx
 mode change 100644 => 100755 gradlew

diff --git a/.run/UI debug.run.xml b/.run/UI debug.run.xml
index b656b83..0a58cbb 100644
--- a/.run/UI debug.run.xml	
+++ b/.run/UI debug.run.xml	
@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="UI debug" type="JavascriptDebugType" engineId="37cae5b9-e8b2-4949-9172-aafa37fbc09c" uri="http://localhost:8080" useFirstLineBreakpoints="true">
+  <configuration default="false" name="UI debug" type="JavascriptDebugType" uri="http://localhost:8080" useFirstLineBreakpoints="true">
     <method v="2" />
   </configuration>
 </component>
\ No newline at end of file
diff --git a/frontend/components/Input.tsx b/frontend/components/Input.tsx
index 13f0a79..148e5bb 100644
--- a/frontend/components/Input.tsx
+++ b/frontend/components/Input.tsx
@@ -30,21 +30,4 @@ const Input = ({label, ...props}) => {
     );
 }
 
-export default Input;
-/*
-                        <Input
-                            onChange={(event) => {
-                                setUsername(event.target.value);
-                            }}
-                            id="username"
-                            type="text"
-                            autoComplete="username"
-                            placeholder=""
-                            size="lg"
-                            className=" !border-t-blue-gray-200 focus:!border-t-gray-900"
-                            labelProps={{
-                                className: "before:content-none after:content-none",
-                            }}
-                            crossOrigin="" //TODO: see https://github.com/creativetimofficial/material-tailwind/issues/427
-                        />
-*/
\ No newline at end of file
+export default Input;
\ No newline at end of file
diff --git a/frontend/components/wizard/Wizard.tsx b/frontend/components/wizard/Wizard.tsx
new file mode 100644
index 0000000..d50e13b
--- /dev/null
+++ b/frontend/components/wizard/Wizard.tsx
@@ -0,0 +1,87 @@
+import React, {useState} from "react";
+import {Form, Formik, FormikBag, FormikHelpers} from "formik";
+import {Button, Spinner, Step, Stepper} from "@material-tailwind/react";
+import {ArrowLeft, ArrowRight, Check} from "@phosphor-icons/react";
+
+const Wizard = ({children, initialValues, onSubmit}: { children: any, initialValues: any, onSubmit: any }) => {
+    const [stepNumber, setStepNumber] = useState(0);
+    const steps = React.Children.toArray(children);
+    const [snapshot, setSnapshot] = useState(initialValues);
+
+    const step = steps[stepNumber];
+    const totalSteps = steps.length;
+    const isFirstStep = stepNumber === 0;
+    const isLastStep = stepNumber === totalSteps - 1;
+
+    const next = (values: any) => {
+        setSnapshot(values);
+        setStepNumber(Math.min(stepNumber + 1, totalSteps - 1));
+    };
+
+    const previous = (values: any) => {
+        setSnapshot(values);
+        setStepNumber(Math.max(stepNumber - 1, 0));
+    };
+
+    const handleSubmit = async (values: any, bag: FormikBag<any, any> | FormikHelpers<any>) => {
+        /*// @ts-ignore*/
+        if (step.props.onSubmit) {
+            /*// @ts-ignore*/
+            await step.props.onSubmit(values, bag);
+        }
+        if (isLastStep) {
+            return onSubmit(values, bag);
+        } else {
+            await bag.setTouched({});
+            next(values);
+        }
+    };
+
+    return (
+        <Formik
+            initialValues={snapshot}
+            onSubmit={handleSubmit}
+            isInitialValid={false}
+            /*// @ts-ignore*/
+            validationSchema={step.props.validationSchema}
+        >
+            {formik => (
+                <Form className="flex flex-col grow">
+                    <div className="w-full mb-8">
+                        <Stepper
+                            activeStep={stepNumber}
+                        >
+                            {steps.map((child, index) => (
+                                <Step key={index}>
+                                    {/*// @ts-ignore*/}
+                                    {child.props.icon}
+                                </Step>
+                            ))}
+                        </Stepper>
+                    </div>
+                    <div className="flex grow">
+                        {step}
+                    </div>
+                    <div className="bottom-0 w-full">
+                        <div className="flex justify-between">
+                            <Button onClick={() => previous(formik.values)} disabled={isFirstStep}
+                                    className="rounded-full">
+                                <ArrowLeft/>
+                            </Button>
+                            <Button disabled={formik.isSubmitting}
+                                    className="rounded-full"
+                                    type="submit"
+                            >
+                                {formik.isSubmitting ?
+                                    <Spinner className="h-5 w-5"/> : isLastStep ? <Check/> : <ArrowRight/>
+                                }
+                            </Button>
+                        </div>
+                    </div>
+                </Form>
+            )}
+        </Formik>
+    );
+};
+
+export default Wizard;
\ No newline at end of file
diff --git a/frontend/components/wizard/WizardStep.tsx b/frontend/components/wizard/WizardStep.tsx
new file mode 100644
index 0000000..c34c99d
--- /dev/null
+++ b/frontend/components/wizard/WizardStep.tsx
@@ -0,0 +1,3 @@
+const WizardStep = ({children}: { children: any }) => children;
+
+export default WizardStep;
\ No newline at end of file
diff --git a/frontend/views/SetupView.tsx b/frontend/views/SetupView.tsx
index 1c0784b..840c3a3 100644
--- a/frontend/views/SetupView.tsx
+++ b/frontend/views/SetupView.tsx
@@ -1,55 +1,89 @@
-import {Button, Card, Spinner, Step, Stepper, Typography} from "@material-tailwind/react";
-import {useState} from "react";
-import {ArrowLeft, ArrowRight, Check, GearFine, HandWaving, User} from "@phosphor-icons/react";
-import {Form, Formik} from "formik";
+import React from 'react';
+import {useFormikContext} from 'formik';
 import * as Yup from 'yup';
+import Wizard from "Frontend/components/wizard/Wizard";
+import WizardStep from "Frontend/components/wizard/WizardStep";
+import {Card, Typography} from "@material-tailwind/react";
 import Input from "Frontend/components/Input";
+import {GearFine, HandWaving, User} from "@phosphor-icons/react";
 
-export default function SetupView() {
-    const [activeStep, setActiveStep] = useState(0);
-    const [isLastStep, setIsLastStep] = useState(false);
-    const [isFirstStep, setIsFirstStep] = useState(false);
-    const [isLoading, setLoading] = useState(false);
-    const [isNextDisabled, setIsNextDisabled] = useState(false);
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
-    const steps = [<WelcomeStep/>, <UserStep/>, <SettingsStep/>];
+function WelcomeStep() {
+    return (
+        <div className="flex flex-col size-full gap-12 items-center">
+            <Typography variant="h4">Welcome to Gameyfin 👋</Typography>
+            <p className="place-content-center text-justify">
+                Gameyfin is a cutting-edge software tailored for gamers seeking efficient management of their
+                video
+                game collections. <br/><br/> With its intuitive interface and comprehensive features, Gameyfin
+                simplifies the organization of game libraries. Users can effortlessly add games through manual
+                input
+                or
+                automated recognition, categorize them based on various criteria like genre or platform, track
+                in-game
+                progress, and share achievements with friends. <br/><br/> Notably, Gameyfin stands out for its
+                user-friendly
+                design and adaptability, offering ample customization options to meet diverse user preferences.
+            </p>
+            <Typography variant="h5">Let's get started!</Typography>
+        </div>
+    );
+}
 
-    const handleNext = () => !isLastStep && setActiveStep((cur) => cur + 1);
-    const handlePrev = () => !isFirstStep && setActiveStep((cur) => cur - 1);
-    const finish = () => {
-        alert("Setup finished");
-    }
-
-    function WelcomeStep() {
-        return (
-            <div className="flex flex-col size-full gap-12 items-center">
-                <Typography variant="h4">Welcome to Gameyfin 👋</Typography>
-                <p className="place-content-center text-justify">
-                    Gameyfin is a cutting-edge software tailored for gamers seeking efficient management of their
-                    video
-                    game collections. <br/><br/> With its intuitive interface and comprehensive features, Gameyfin
-                    simplifies the organization of game libraries. Users can effortlessly add games through manual
-                    input
-                    or
-                    automated recognition, categorize them based on various criteria like genre or platform, track
-                    in-game
-                    progress, and share achievements with friends. <br/><br/> Notably, Gameyfin stands out for its
-                    user-friendly
-                    design and adaptability, offering ample customization options to meet diverse user preferences.
-                </p>
-                <Typography variant="h5">Let's get started!</Typography>
+function UserStep() {
+    const formik = useFormikContext();
+    return (
+        <div className="flex flex-col size-full gap-12 items-center">
+            <Typography variant="h4">Create your account</Typography>
+            <Typography className="-mt-8">This will set up the initial admin user account.</Typography>
+            <div className="mb-1 flex flex-col w-full gap-6">
+                <Input
+                    label="Username"
+                    name="username"
+                    type="text"
+                />
+                <Input
+                    label="Password"
+                    name="password"
+                    type="password"
+                />
+                <Input
+                    label="Password (repeat)"
+                    name="passwordRepeat"
+                    type="password"
+                />
             </div>
-        );
-    }
+        </div>
+    );
+}
 
-    function UserStep() {
-        return (
-            <div className="flex flex-col size-full gap-12 items-center">
-                <Typography variant="h4">Create your account</Typography>
-                <Typography className="-mt-8">This will set up the initial admin user account.</Typography>
-                <Formik
-                    validateOnMount
-                    initialValues={{username: '', password: '', passwordRepeat: ''}}
+function SettingsStep() {
+    return (
+        <div className="flex flex-col items-center">
+            <Typography variant="h4">Settings</Typography>
+            <Typography>Configure your settings</Typography>
+        </div>
+    );
+}
+
+const SetupView = () => (
+    <div className="flex h-screen">
+        <div className="fixed size-full bg-gradient-to-br from-gf-primary to-gf-secondary"></div>
+        <Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8" shadow={true}>
+            <Wizard
+                initialValues={{username: '', password: '', passwordRepeat: ''}}
+                onSubmit={async (values: any) =>
+                    sleep(300).then(() => alert(JSON.stringify(values, null, 2)))
+                }
+            >
+                <WizardStep
+                    // @ts-ignore
+                    icon={<HandWaving/>}>
+                    <WelcomeStep/>
+                </WizardStep>
+                <WizardStep
+                    // @ts-ignore
                     validationSchema={Yup.object({
                         username: Yup.string()
                             .required('Required'),
@@ -60,91 +94,19 @@ export default function SetupView() {
                             .equals([Yup.ref('password')], 'Passwords do not match')
                             .required('Required')
                     })}
-                    onSubmit={(values, {setSubmitting}) => {
-                        setTimeout(() => {
-                            alert(JSON.stringify(values, null, 2));
-                            setSubmitting(false);
-                        }, 400);
-                    }}
+                    icon={<User/>}
                 >
-                    {formik =>
-                        <Form className="mb-1 flex flex-col w-full gap-6">
-                            <Input
-                                label="Username"
-                                name="username"
-                                type="text"
-                            />
-                            <Input
-                                label="Password"
-                                name="password"
-                                type="password"
-                            />
-                            <Input
-                                label="Password (repeat)"
-                                name="passwordRepeat"
-                                type="password"
-                            />
-                            <Button
-                                type="submit"
-                                disabled={!formik.isValid || formik.isSubmitting}
-                                className="justify-center"
-                            >
-                                {formik.isSubmitting ?
-                                    <Spinner className="h-4 w-full"/> : "Submit"
-                                }
-                            </Button>
-                        </Form>
-                    }
-                </Formik>
-            </div>
-        );
-    }
+                    <UserStep/>
+                </WizardStep>
+                <WizardStep
+                    //@ts-ignore
+                    icon={<GearFine/>}
+                >
+                    <SettingsStep/>
+                </WizardStep>
+            </Wizard>
+        </Card>
+    </div>
+);
 
-    function SettingsStep() {
-        return (
-            <>
-            </>
-        );
-    }
-
-    return (
-        <div className="flex h-screen">
-            <div className="fixed size-full bg-gradient-to-br from-gf-primary to-gf-secondary"></div>
-            <Card className="w-3/4 h-3/4 min-w-[500px] m-auto p-8" shadow={true}>
-                <div className="w-full mb-8">
-                    <Stepper
-                        activeStep={activeStep}
-                        isLastStep={(value) => setIsLastStep(value)}
-                        isFirstStep={(value) => setIsFirstStep(value)}
-                    >
-                        <Step onClick={() => setActiveStep(0)}>
-                            <HandWaving/>
-                        </Step>
-                        <Step onClick={() => setActiveStep(1)}>
-                            <User/>
-                        </Step>
-                        <Step onClick={() => setActiveStep(2)}>
-                            <GearFine/>
-                        </Step>
-                    </Stepper>
-                </div>
-                <div className="flex flex-grow justify-center">
-                    <div className="size-full px-8 min-w-[500px] md:w-1/3 md:px-0">
-                        {steps[activeStep]}
-                    </div>
-                </div>
-                <div className="bottom-0 w-full">
-                    <div className="flex justify-between">
-                        <Button onClick={handlePrev} disabled={isFirstStep} className="rounded-full">
-                            <ArrowLeft/>
-                        </Button>
-                        <Button disabled={isNextDisabled} onClick={isLastStep ? finish : handleNext}
-                                className="rounded-full">
-                            {isLoading ? <Spinner/> : isLastStep ? <Check/> : <ArrowRight/>}
-                        </Button>
-                    </div>
-                </div>
-            </Card>
-        </div>
-    );
-}
\ No newline at end of file
+export default SetupView;
\ No newline at end of file
diff --git a/gradlew b/gradlew
old mode 100644
new mode 100755