Refactoring Phase 1

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `config`
+  // extends: ["custom"],
+  settings: {
+    next: {
+      rootDir: ["apps/*/"],
+    },
+  },
+};

apps/app/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require("config/.eslintrc");

apps/app/Dockerfile.web

@@ -14,7 +14,7 @@ ENV PATH="${PATH}:./pnpm"
 
 COPY ./apps ./apps
 COPY ./package.json ./package.json
-COPY ./.eslintrc.json ./.eslintrc.json
+COPY ./.eslintrc.js ./.eslintrc.js
 COPY ./turbo.json ./turbo.json
 COPY ./pnpm-workspace.yaml ./pnpm-workspace.yaml
 COPY ./pnpm-lock.yaml ./pnpm-lock.yaml

apps/app/components/forms/EmailCodeForm.tsx → apps/app/components/account/email-code-form.tsx

@@ -1,28 +1,28 @@
 import React, { useState } from "react";
-// react hook form
 import { useForm } from "react-hook-form";
 // ui
-import { Button, Input } from "ui";
-import authenticationService from "lib/services/authentication.service";
-// icons
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
+import { Button, Input } from "components/ui";
+// services
+import authenticationService from "services/authentication.service";
+// icons
 
 // types
-type SignIn = {
+type EmailCodeFormValues = {
   email: string;
   key?: string;
   token?: string;
 };
 
-const EmailCodeForm = ({ onSuccess }: any) => {
+export const EmailCodeForm = ({ onSuccess }: any) => {
   const [codeSent, setCodeSent] = useState(false);
   const {
     register,
     handleSubmit,
     setError,
     setValue,
-    formState: { errors, isSubmitting, dirtyFields, isValid, isDirty },
-  } = useForm<SignIn>({
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailCodeFormValues>({
     defaultValues: {
       email: "",
       key: "",
@@ -32,9 +32,8 @@ const EmailCodeForm = ({ onSuccess }: any) => {
     reValidateMode: "onChange",
   });
 
-  const onSubmit = ({ email }: SignIn) => {
+  const onSubmit = ({ email }: EmailCodeFormValues) => {
     console.log(email);
-
     authenticationService
       .emailCode({ email })
       .then((res) => {
@@ -46,15 +45,15 @@ const EmailCodeForm = ({ onSuccess }: any) => {
       });
   };
 
-  const handleSignin = (formData: SignIn) => {
+  const handleSignin = (formData: EmailCodeFormValues) => {
     authenticationService
       .magicSignIn(formData)
-      .then(async (response) => {
-        await onSuccess(response);
+      .then((response) => {
+        onSuccess(response);
       })
       .catch((error) => {
         console.log(error);
-        setError("token" as keyof SignIn, {
+        setError("token" as keyof EmailCodeFormValues, {
           type: "manual",
           message: error.error,
         });
@@ -127,5 +126,3 @@ const EmailCodeForm = ({ onSuccess }: any) => {
     </>
   );
 };
-
-export default EmailCodeForm;

apps/app/components/forms/EmailPasswordForm.tsx → apps/app/components/account/email-password-form.tsx

@@ -1,29 +1,26 @@
 import React from "react";
 // next
 import Link from "next/link";
-import { useRouter } from "next/router";
 // react hook form
 import { useForm } from "react-hook-form";
 // ui
-import { Button, Input } from "ui";
-import authenticationService from "lib/services/authentication.service";
+import { Button, Input } from "components/ui";
+import authenticationService from "services/authentication.service";
 
 // types
-type SignIn = {
+type EmailPasswordFormValues = {
   email: string;
   password?: string;
   medium?: string;
 };
 
-const EmailPasswordForm = ({ onSuccess }: any) => {
+export const EmailPasswordForm = ({ onSuccess }: any) => {
   const {
     register,
     handleSubmit,
     setError,
-    setValue,
-    getValues,
-    formState: { errors, isSubmitting, dirtyFields, isValid, isDirty },
-  } = useForm<SignIn>({
+    formState: { errors, isSubmitting, isValid, isDirty },
+  } = useForm<EmailPasswordFormValues>({
     defaultValues: {
       email: "",
       password: "",
@@ -33,19 +30,19 @@ const EmailPasswordForm = ({ onSuccess }: any) => {
     reValidateMode: "onChange",
   });
 
-  const onSubmit = (formData: SignIn) => {
+  const onSubmit = (formData: EmailPasswordFormValues) => {
     authenticationService
       .emailLogin(formData)
-      .then(async (response) => {
-        await onSuccess(response);
+      .then((response) => {
+        onSuccess(response);
       })
       .catch((error) => {
         console.log(error);
         if (!error?.response?.data) return;
         Object.keys(error.response.data).forEach((key) => {
           const err = error.response.data[key];
           console.log("err", err);
-          setError(key as keyof SignIn, {
+          setError(key as keyof EmailPasswordFormValues, {
             type: "manual",
             message: Array.isArray(err) ? err.join(", ") : err,
           });
@@ -85,8 +82,8 @@ const EmailPasswordForm = ({ onSuccess }: any) => {
             placeholder="Enter your password"
           />
         </div>
-        <div className="flex items-center justify-between mt-2">
-          <div className="text-sm ml-auto">
+        <div className="mt-2 flex items-center justify-between">
+          <div className="ml-auto text-sm">
             <Link href={"/forgot-password"}>
               <a className="font-medium text-theme hover:text-indigo-500">Forgot your password?</a>
             </Link>
@@ -105,5 +102,3 @@ const EmailPasswordForm = ({ onSuccess }: any) => {
     </>
   );
 };
-
-export default EmailPasswordForm;

apps/app/components/account/email-signin-form.tsx

@@ -0,0 +1,46 @@
+import { useState, FC } from "react";
+import { KeyIcon } from "@heroicons/react/24/outline";
+// components
+import { EmailCodeForm, EmailPasswordForm } from "components/account";
+
+export interface EmailSignInFormProps {
+  handleSuccess: () => void;
+}
+
+export const EmailSignInForm: FC<EmailSignInFormProps> = (props) => {
+  const { handleSuccess } = props;
+  // states
+  const [useCode, setUseCode] = useState(true);
+
+  return (
+    <>
+      {useCode ? (
+        <EmailCodeForm onSuccess={handleSuccess} />
+      ) : (
+        <EmailPasswordForm onSuccess={handleSuccess} />
+      )}
+      <div className="mt-6">
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-gray-300" />
+          </div>
+          <div className="relative flex justify-center text-sm">
+            <span className="bg-white px-2 text-gray-500">or</span>
+          </div>
+        </div>
+        <div className="mt-6 flex w-full flex-col items-stretch gap-y-2">
+          <button
+            type="button"
+            className="flex w-full items-center rounded border border-gray-300 px-3 py-2 text-sm duration-300 hover:bg-gray-100"
+            onClick={() => setUseCode((prev) => !prev)}
+          >
+            <KeyIcon className="h-[25px] w-[25px]" />
+            <span className="w-full text-center font-medium">
+              {useCode ? "Continue with Password" : "Continue with Code"}
+            </span>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};

apps/app/components/account/github-login-button.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState, FC } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// images
+import githubImage from "/public/logos/github.png";
+
+const { NEXT_PUBLIC_GITHUB_ID } = process.env;
+
+export interface GithubLoginButtonProps {
+  handleSignIn: React.Dispatch<string>;
+}
+
+export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
+  const { handleSignIn } = props;
+  // router
+  const {
+    query: { code },
+  } = useRouter();
+  // states
+  const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
+
+  useEffect(() => {
+    if (code) {
+      handleSignIn(code.toString());
+    }
+  }, [code, handleSignIn]);
+
+  useEffect(() => {
+    const origin =
+      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    setLoginCallBackURL(`${origin}/signin` as any);
+  }, []);
+
+  return (
+    <Link
+      href={`https://github.com/login/oauth/authorize?client_id=${NEXT_PUBLIC_GITHUB_ID}&redirect_uri=${loginCallBackURL}`}
+    >
+      <button className="flex w-full items-center rounded bg-black px-3 py-2 text-sm text-white opacity-90 duration-300 hover:opacity-100">
+        <Image
+          src={githubImage}
+          height={25}
+          width={25}
+          className="flex-shrink-0"
+          alt="GitHub Logo"
+        />
+        <span className="w-full text-center font-medium">Continue with GitHub</span>
+      </button>
+    </Link>
+  );
+};

apps/app/components/socialbuttons/google-login.tsx → apps/app/components/account/google-login.tsx

@@ -4,20 +4,21 @@ import Script from "next/script";
 
 export interface IGoogleLoginButton {
   text?: string;
-  onSuccess?: (res: any) => void;
-  onFailure?: (res: any) => void;
+  handleSignIn: React.Dispatch<any>;
   styles?: CSSProperties;
 }
 
 export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
+  const { handleSignIn } = props;
+
   const googleSignInButton = useRef<HTMLDivElement>(null);
   const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);
 
   const loadScript = useCallback(() => {
     if (!googleSignInButton.current || gsiScriptLoaded) return;
     window?.google?.accounts.id.initialize({
       client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
-      callback: props.onSuccess as any,
+      callback: handleSignIn,
     });
     window?.google?.accounts.id.renderButton(
       googleSignInButton.current,
@@ -32,7 +33,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
     );
     window?.google?.accounts.id.prompt(); // also display the One Tap dialog
     setGsiScriptLoaded(true);
-  }, [props.onSuccess, gsiScriptLoaded]);
+  }, [handleSignIn, gsiScriptLoaded]);
 
   useEffect(() => {
     if (window?.google?.accounts?.id) {
@@ -46,7 +47,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div className="w-full" id="googleSignInButton" ref={googleSignInButton}></div>
+      <div className="w-full" id="googleSignInButton" ref={googleSignInButton} />
     </>
   );
 };

apps/app/components/account/index.ts

@@ -0,0 +1,5 @@
+export * from "./google-login";
+export * from "./email-code-form";
+export * from "./email-password-form";
+export * from "./github-login-button";
+export * from "./email-signin-form";

apps/app/ui/breadcrumbs/index.tsx → apps/app/components/breadcrumbs/index.tsx

@@ -1,6 +1,6 @@
+import * as React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 // icons
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 
@@ -32,29 +32,27 @@ type BreadcrumbItemProps = {
   icon?: any;
 };
 
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => {
-  return (
-    <>
-      {link ? (
-        <Link href={link}>
-          <a className="border-r-2 border-gray-300 px-3 text-sm">
-            <p className={`${icon ? "flex items-center gap-2" : ""}`}>
-              {icon ?? null}
-              {title}
-            </p>
-          </a>
-        </Link>
-      ) : (
-        <div className="px-3 text-sm">
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => (
+  <>
+    {link ? (
+      <Link href={link}>
+        <a className="border-r-2 border-gray-300 px-3 text-sm">
           <p className={`${icon ? "flex items-center gap-2" : ""}`}>
-            {icon}
+            {icon ?? null}
             {title}
           </p>
-        </div>
-      )}
-    </>
-  );
-};
+        </a>
+      </Link>
+    ) : (
+      <div className="px-3 text-sm">
+        <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+          {icon}
+          {title}
+        </p>
+      </div>
+    )}
+  </>
+);
 
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;