[questions][ui] change landing page to component

apps/portal/src/components/questions/LandingComponent.tsx

@@ -1,19 +1,37 @@
-import { useForm } from 'react-hook-form';
+import { useState } from 'react';
 import { Button, Select } from '@tih/ui';
 
 import NavBar from '~/components/questions/NavBar';
 
 export type LandingQueryData = {
-  date: string;
+  company: string;
   location: string;
   questionType: string;
 };
-export default function LandingPage() {
-  const { register, handleSubmit } = useForm<LandingQueryData>();
 
-  const onSubmit = (data: LandingQueryData) => {
+export type LandingComponentProps = {
-    // eslint-disable-next-line no-console
+  handleLandingQuery: (data: LandingQueryData) => void;
-    console.log(data);
+};
+
+export default function LandingComponent({
+  handleLandingQuery,
+}: LandingComponentProps) {
+  const [landingQueryData, setLandingQueryData] = useState<LandingQueryData>({
+    company: 'google',
+    location: 'singapore',
+    questionType: 'coding',
+  });
+
+  const handleChangeCompany = (company: string) => {
+    setLandingQueryData((prev) => ({ ...prev, company }));
+  };
+
+  const handleChangeLocation = (location: string) => {
+    setLandingQueryData((prev) => ({ ...prev, location }));
+  };
+
+  const handleChangeType = (questionType: string) => {
+    setLandingQueryData((prev) => ({ ...prev, questionType }));
   };
 
   return (
@@ -29,13 +47,10 @@ export default function LandingPage() {
           Get to know the latest SWE interview questions asked by top companies
         </p>
 
-        <form
+        <div className="mx-auto mt-6 flex max-w-lg items-baseline gap-3 px-4 text-center text-xl text-black sm:max-w-3xl">
-          className="mx-auto mt-6 flex max-w-lg items-baseline gap-3 px-4 text-center text-xl text-black sm:max-w-3xl"
-          onSubmit={handleSubmit(onSubmit)}>
           <p>Find</p>
           <div className=" space-x-2">
             <Select
-              //   {...register('questionType')}
               isLabelHidden={true}
               label="Type"
               options={[
@@ -52,12 +67,12 @@ export default function LandingPage() {
                   value: 'system design',
                 },
               ]}
-              value="coding"
+              value={landingQueryData.questionType}
+              onChange={handleChangeType}
             />
           </div>
           <p>questions from</p>
           <Select
-            //   {...register('company')}
             isLabelHidden={true}
             label="Company"
             options={[
@@ -74,13 +89,13 @@ export default function LandingPage() {
                 value: 'amazon',
               },
             ]}
-            value="google"
+            value={landingQueryData.company}
+            onChange={handleChangeCompany}
           />
           <p>in</p>
           <Select
-            //   {...register('location')}
             isLabelHidden={true}
-            label="Select a category"
+            label="Location"
             options={[
               {
                 label: 'Singapore',
@@ -95,13 +110,14 @@ export default function LandingPage() {
                 value: 'menlo park',
               },
             ]}
-            value="singapore"
+            value={landingQueryData.location}
+            onChange={handleChangeLocation}
           />
           <Button
             label="Go"
             variant="primary"
-            onClick={handleSubmit(onSubmit)}></Button>
+            onClick={() => handleLandingQuery(landingQueryData)}></Button>
-        </form>
+        </div>
         <div>
           <p className="py-20 text-center">CAROUSELL PLACEHOLDER</p>
         </div>

apps/portal/src/pages/questions/index.tsx

@@ -4,6 +4,8 @@ import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCa
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
 import type { FilterOptions } from '~/components/questions/filter/FilterSection';
 import FilterSection from '~/components/questions/filter/FilterSection';
+import type { LandingQueryData } from '~/components/questions/LandingComponent';
+import LandingComponent from '~/components/questions/LandingComponent';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
 
 type FilterChoices = Array<Omit<FilterOptions, 'checked'>>;
@@ -22,8 +24,8 @@ const companies: FilterChoices = [
 // Code, design, behavioral
 const questionTypes: FilterChoices = [
   {
-    label: 'Code',
+    label: 'Coding',
-    value: 'code',
+    value: 'coding',
   },
   {
     label: 'Design',
@@ -66,6 +68,7 @@ export default function QuestionsHomePage() {
     Array<string>
   >([]);
   const [selectedLocations, setSelectedLocations] = useState<Array<string>>([]);
+  const [hasLanded, setHasLanded] = useState(false);
 
   const companyFilterOptions = useMemo(() => {
     return companies.map((company) => ({
@@ -95,7 +98,19 @@ export default function QuestionsHomePage() {
     }));
   }, [selectedLocations]);
 
-  return (
+  const handleLandingQuery = (data: LandingQueryData) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+    setSelectedCompanies([data.company]);
+    setSelectedLocations([data.location]);
+    setSelectedQuestionTypes([data.questionType]);
+    setHasLanded(true);
+  };
+
+  return !hasLanded ? (
+    <LandingComponent
+      handleLandingQuery={handleLandingQuery}></LandingComponent>
+  ) : (
     <main className="flex flex-1 flex-col items-stretch overflow-y-auto">
       <div className="flex pt-4">
         <section className="w-[300px] border-r px-4">