feat: refactor the entire learnhouse project

apps/web/app/install/steps/org_creation.tsx

@@ -0,0 +1,138 @@
+
+import FormLayout, { ButtonBlack, FormField, FormLabel, FormLabelAndMessage, FormMessage, Input } from '@components/StyledElements/Form/Form'
+import * as Form from '@radix-ui/react-form';
+import { useFormik } from 'formik';
+import { BarLoader } from 'react-spinners';
+import React from 'react'
+import { createNewOrganization } from '@services/organizations/orgs';
+import { swrFetcher } from '@services/utils/ts/requests';
+import { getAPIUrl } from '@services/config/config';
+import useSWR, { mutate } from "swr";
+import { createNewOrgInstall, updateInstall } from '@services/install/install';
+import { useRouter } from 'next/navigation';
+import { Check } from 'lucide-react';
+
+const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.name) {
+        errors.name = 'Required';
+    }
+
+    if (!values.description) {
+        errors.description = 'Required';
+    }
+
+    if (!values.slug) {
+        errors.slug = 'Required';
+    }
+
+    if (!values.email) {
+        errors.email = 'Required';
+    }
+    else if (
+        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
+    ) {
+        errors.email = 'Invalid email address';
+    }
+
+
+
+    return errors;
+};
+
+function OrgCreation() {
+    const { data: install, error: error, isLoading } = useSWR(`${getAPIUrl()}install/latest`, swrFetcher);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
+    const router = useRouter()
+
+
+    function createOrgAndUpdateInstall(values: any) {
+        try {
+            createNewOrgInstall(values)
+            install.data = {
+                1: values
+            }
+            let install_data = { ...install.data, 1: values }
+            updateInstall(install_data, 2)
+            // await 2 seconds
+            setTimeout(() => {
+                setIsSubmitting(false)
+            }, 2000)
+
+            router.push('/install?step=2')
+            setIsSubmitted(true)
+        }
+        catch (e) {
+            
+        }
+
+    }
+
+    const formik = useFormik({
+        initialValues: {
+            name: '',
+            description: '',
+            slug: '',
+            email: '',
+        },
+        validate,
+        onSubmit: values => {
+            createOrgAndUpdateInstall(values)
+        },
+    });
+    return (
+        <div>
+            <FormLayout onSubmit={formik.handleSubmit}>
+                <FormField name="name">
+                    <FormLabelAndMessage label='Name' message={formik.errors.name} />
+                    <Form.Control asChild>
+                        <Input onChange={formik.handleChange} value={formik.values.name} type="text" required />
+                    </Form.Control>
+                </FormField>
+
+                <FormField name="description">
+                    <FormLabelAndMessage label='Description' message={formik.errors.description} />
+
+                    <Form.Control asChild>
+                        <Input onChange={formik.handleChange} value={formik.values.description} type="text" required />
+                    </Form.Control>
+                </FormField>
+
+                <FormField name="slug">
+
+                    <FormLabelAndMessage label='Slug' message={formik.errors.slug} />
+
+                    <Form.Control asChild>
+                        <Input onChange={formik.handleChange} value={formik.values.slug} type="text" required />
+                    </Form.Control>
+                </FormField>
+                {/* for username  */}
+                <FormField name="email">
+
+                    <FormLabelAndMessage label='Email' message={formik.errors.email} />
+
+                    <Form.Control asChild>
+                        <Input onChange={formik.handleChange} value={formik.values.email} type="email" required />
+                    </Form.Control>
+                </FormField>
+
+                <div className="flex flex-row-reverse py-4">
+                    <Form.Submit asChild>
+                        <ButtonBlack type="submit" css={{ marginTop: 10 }}>
+                            {isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" />
+                                : "Create Organization"}
+                        </ButtonBlack>
+                    </Form.Submit>
+                </div>
+
+                {isSubmitted && <div className='flex space-x-3'> <Check /> Organization Created Successfully</div>}
+
+
+            </FormLayout>
+        </div>
+    )
+}
+
+export default OrgCreation