react query and friends

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["next/core-web-vitals", "kentcdodds"],
   "rules": {
-    "no-negated-condition": "off"
+    "no-negated-condition": "off",
+    "import/consistent-type-specifier-style": "off"
   }
 }

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules\\.pnpm\\typescript@4.9.4\\node_modules\\typescript\\lib",
+  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }

app/(auth)/layout.tsx

@@ -3,14 +3,6 @@ import { Suspense } from "react";
 import "~/styles/globals.css";
 import Loading from "~/app/(web)/loading";
 
-type SeoDataManager = {
-  title: string;
-};
-
-const seoData: SeoDataManager = {
-  title: "Login Page",
-};
-
 export default function RootLayout(props: PropsWithChildren<{}>) {
   return (
     <div className="flex justify-between flex-col">

app/(auth)/#/email/page.tsx

@@ -1,12 +1,7 @@
-"use client";
+import { TermsSection, AuthLoginForm } from "~/parts/Authentication";
+import { FormHeader, AuthOption } from "~/components/Form";
 
-import React from "react";
-import TermsSection from "~/parts/Authentication/Terms-Section";
-import FormHeader from "~/components/Form/FormHeader";
-import AuthOption from "~/components/Form/AuthOption";
-import AuthLoginForm from "~/parts/Authentication/AuthLoginForm";
-
-export default function Login() {
+export default function EmailLoginPage() {
   return (
     <div className="w-full h-fit lg:h-screen py-4 px-2 flex flex-col gap-4 justify-center items-center">
       <FormHeader title={"Login to"} backTo={"/#"} />

app/(auth)/#/head.tsx

@@ -1,6 +1,4 @@
-// import next script
-import Script from "next/script";
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 type SeoDataManager = {
   title: string;
@@ -9,10 +7,7 @@ type SeoDataManager = {
 const seoData: SeoDataManager = {
   title: "Login to Existing Account",
 };
+
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={seoData} />
-    </>
-  );
+  return <Seo seoData={seoData} />;
 }

app/(auth)/#/page.tsx

@@ -1,14 +1,9 @@
-"use client";
-
-import AuthForm from "~/parts/Authentication/AuthForm";
-import React from "react";
+import { AuthForm } from "~/parts/Authentication";
 
 export default function LoginPage() {
   return (
-    <>
-      <section className={"h-screen flex justify-center items-center"}>
-        <AuthForm name={"Login"} />
-      </section>
-    </>
+    <section className={"h-screen flex justify-center items-center"}>
+      <AuthForm name="Login" />
+    </section>
   );
 }

app/(auth)/register/email/page.tsx

@@ -1,18 +1,13 @@
-"use client";
+import { TermsSection, AuthRegisterForm } from "~/parts/Authentication";
+import { AuthOption, FormHeader } from "~/components/Form";
 
-import React from "react";
-import TermsSection from "~/parts/Authentication/Terms-Section";
-import AuthOption from "~/components/Form/AuthOption";
-import FormHeader from "~/components/Form/FormHeader";
-import AuthRegisterForm from "~/parts/Authentication/AuthRegisterForm";
-
-export default function RegisterPage() {
+export default function EmailRegisterPage() {
   return (
-    <div className={"w-full h-fit lg:h-screen py-4 px-2 flex flex-col gap-4 justify-center items-center"}>
-      <FormHeader title={"Welcome to"} backTo={"/register"}/>
-      <AuthRegisterForm/>
-      <AuthOption ask={"Registered"}/>
-      <TermsSection title={"Register"}/>
+    <div className="w-full h-fit lg:h-screen py-4 px-2 flex flex-col gap-4 justify-center items-center">
+      <FormHeader title="Welcome to" backTo="/register" />
+      <AuthRegisterForm />
+      <AuthOption ask="Registered" />
+      <TermsSection title="Register" />
     </div>
   );
 }

app/(auth)/register/head.tsx

@@ -1,4 +1,4 @@
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 type SeoDataManager = {
   title: string;
@@ -7,10 +7,7 @@ type SeoDataManager = {
 const seoData: SeoDataManager = {
   title: "Register New Account",
 };
+
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={seoData} />
-    </>
-  );
+  return <Seo seoData={seoData} />;
 }

app/(auth)/register/page.tsx

@@ -1,13 +1,9 @@
-/* eslint-disable react/display-name */
-import React from "react";
-import AuthForm from "~/parts/Authentication/AuthForm";
+import { AuthForm } from "~/parts/Authentication";
 
-const RegisterPage: React.FC = React.memo(() => {
+export default function RegisterPage() {
   return (
-    <section className={"h-screen flex justify-center items-center"}>
-      <AuthForm name={"Register"} />
+    <section className="h-screen flex justify-center items-center">
+      <AuthForm name="Register" />
     </section>
   );
-});
-
-export default RegisterPage;
+}

app/(web)/competition/head.tsx

@@ -1,9 +1,5 @@
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={{ title: "Competition" }} />
-    </>
-  );
+  return <Seo seoData={{ title: "Competition" }} />;
 }

app/(web)/head.tsx

@@ -1,4 +1,4 @@
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 type SeoDataManager = {
   title: string;
@@ -9,9 +9,5 @@ const seoData: SeoDataManager = {
 };
 
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={seoData} />
-    </>
-  );
+  return <Seo seoData={seoData} />;
 }

app/(web)/idea/[id]/head.tsx

@@ -1,21 +1,14 @@
-import Seo from "~/components/Seo";
-import React from "react";
-import { IDEAS } from '~/data/Idea/Index/ideas';
-import type { Idea } from '~/types/Idea/Index/Idea';
+import { Seo } from "~/components/Seo";
+import { IDEAS } from "~/data/Idea/Index/ideas";
+import type { Idea } from "~/types/Idea/Index/Idea";
 
-type ideaMeta = {
+type IdeaMeta = {
   params: {
     id: number;
   };
 };
 
-const head: React.FC<ideaMeta> = ({ params }) => {
+export default function Head({ params }: IdeaMeta) {
   const props: Idea = IDEAS.filter((value) => value.id == params.id)[0];
-  return (
-    <>
-      <Seo seoData={{ title: props.title }} />
-    </>
-  );
-};
-
-export default head;
+  return <Seo seoData={{ title: props.title }} />;
+}

app/(web)/idea/[id]/page.tsx

@@ -1,22 +1,20 @@
-import React from "react";
 import { IDEAS } from "~/data/Idea/Index/ideas";
-import Content from "~/parts/Idea/Details/IdeaContent";
-import type { ideaSlug } from "~/types/Idea/Details/IdeaSlug";
-import type { Idea } from "~/types/Idea/Index/Idea";
-import Sidebar from "~/parts/Idea/Details/IdeaSidebar";
+import { IdeaContent, IdeaSidebar } from "~/parts/Idea/Details";
+
+type IdeaPageProps = {
+  params: {
+    id: number;
+  };
+};
+
+export default function IdeaPage({ params }: IdeaPageProps) {
+  const props = IDEAS.find((value) => value.id == params.id);
+  if (props === undefined) return null;
 
-const Page: React.FC<ideaSlug> = ({ params }) => {
-  const props: Idea = IDEAS.filter((value) => value.id == params.id)[0];
   return (
-    <div
-      className={
-        "w-full justify-center items-center xl:px-56 text-gray-200 flex flex-col lg:flex-row"
-      }
-    >
-      <Content key={props.id} {...props} />
-      <Sidebar {...props} />
+    <div className="w-full justify-center items-center xl:px-56 text-gray-200 flex flex-col lg:flex-row">
+      <IdeaContent key={props.id} {...props} />
+      <IdeaSidebar {...props} />
     </div>
   );
-};
-
-export default Page;
+}

app/(web)/idea/create/head.tsx

@@ -1,9 +1,5 @@
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={{ title: "Create Idea" }} />
-    </>
-  );
+  return <Seo seoData={{ title: "Create Idea" }} />;
 }

app/(web)/idea/create/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import React from "react";
 import IdeaForm from "~/parts/Idea/Create/IdeaForm";
 
 export default function CreateIdeaPage() {

app/(web)/idea/head.tsx

@@ -1,9 +1,5 @@
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={{ title: "Ideas" }} />
-    </>
-  );
+  return <Seo seoData={{ title: "Ideas" }} />;
 }

app/(web)/idea/page.tsx

@@ -1,15 +1,11 @@
-"use client";
-import { Header } from "~/parts/Idea/Index/Header";
-import { SearchInput } from "~/parts/Idea/Index/SearchInput";
-import { TagList } from "~/parts/Idea/Index/TagList";
-import { TAGS } from "~/data/Idea/Index/tags";
-import { IdeasList } from "~/parts/Idea/Index/IdeasList";
-import { IDEAS } from "~/data/Idea/Index/ideas";
-import { useSupabase } from "~/components/Supabase/SupabaseProvider";
-import Link from 'next/link';
+import Link from "next/link";
+import { Header, SearchInput, TagList, IdeasList } from "~/parts/Idea/Index";
+import { TAGS, IDEAS } from "~/data/Idea/Index";
+import { useSupabase } from "~/components/Supabase";
 
-export default function IdeaPage() {
+export default function IdeaHomePage() {
   const { session } = useSupabase();
+
   return (
     <section className="w-full h-full pt-1 md:pt-8 relative">
       <Header />
@@ -21,7 +17,12 @@ export default function IdeaPage() {
         </>
       ) : (
         <div className="flex flex-col items-center justify-center pt-24">
-          <Link href="/#" className="text-base font-bold text-gray-200 btn bg-purple-500 hover:bg-purple-600">Please #</Link>
+          <Link
+            href="/#"
+            className="text-base font-bold text-gray-200 btn bg-purple-500 hover:bg-purple-600"
+          >
+            Please #
+          </Link>
         </div>
       )}
     </section>

app/(web)/layout.tsx

@@ -1,15 +1,14 @@
-"use client";
 import type { PropsWithChildren } from "react";
 import { Suspense } from "react";
-import Footer from "~/components/Footer";
+import { Footer } from "~/components/Footer";
 import { Navbar } from "~/components/Navigation/Navbar";
 import "~/styles/globals.css";
 import Loading from "~/app/(auth)/loading";
 
 export default function RootLayout(props: PropsWithChildren<{}>) {
   return (
     <div className="flex justify-between flex-col h-full">
-      <div className={"z-20"}>
+      <div className="z-20">
         <Navbar />
       </div>
       <div className="flex-1">

app/(web)/page.tsx

@@ -1,18 +1,19 @@
-import React from "react";
-import Hero from "~/parts/Index/Hero";
-import ContributorSection from "~/parts/Index/ContributorSection";
-import BenefitSection from "~/parts/Index/BenefitSection";
-import Step from "~/parts/Index/StepByStepSection/Step";
-import Forms from "~/parts/Index/Forms";
+import {
+  Hero,
+  ContributorSection,
+  BenefitSection,
+  StepsSection,
+  ContactForm,
+} from "~/parts/Index";
 import { contributors } from "~/data/contributor/contributors";
 
 export default function HomePage() {
   return (
-    <div>
+    <div className="max-w-7xl mx-auto">
       <Hero />
       <BenefitSection />
-      <Step />
-      <Forms />
+      <StepsSection />
+      <ContactForm />
       <ContributorSection contributors={contributors} />
     </div>
   );

app/(web)/user/logout/head.tsx

@@ -1,6 +1,4 @@
-// import next script
-import Script from "next/script";
-import Seo from "~/components/Seo";
+import { Seo } from "~/components/Seo";
 
 type SeoDataManager = {
   title: string;
@@ -9,10 +7,7 @@ type SeoDataManager = {
 const seoData: SeoDataManager = {
   title: "Logging Out...",
 };
+
 export default function Head() {
-  return (
-    <>
-      <Seo seoData={seoData} />
-    </>
-  );
+  return <Seo seoData={seoData} />;
 }