From 0c385bd686e3e3b293003de2abc3a8b1442649da Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Mon, 10 Oct 2022 15:08:50 +0800
Subject: [PATCH] [questions][ui] improve mobile styling

---
 .../questions/ContributeQuestionCard.tsx      |   2 +-
 .../questions/ContributeQuestionDialog.tsx    |   4 +-
 .../questions/QuestionSearchBar.tsx           |  19 +-
 apps/portal/src/pages/questions/index.tsx     | 185 ++++++++++--------
 4 files changed, 124 insertions(+), 86 deletions(-)

diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index fa11f098..73faba27 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -40,7 +40,7 @@ export default function ContributeQuestionCard({
           placeholder="Contribute a question"
           onChange={handleOpenContribute}
         />
-        <div className="flex items-end justify-center gap-x-2">
+        <div className="flex flex-wrap items-end justify-center gap-x-2">
           <div className="min-w-[150px] flex-1">
             <TextInput
               disabled={true}
diff --git a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
index e2ae8c8c..65cb1058 100644
--- a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
@@ -62,9 +62,9 @@ export default function ContributeQuestionDialog({
                 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                 <Dialog.Panel className="relative max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full">
-                  <div className="bg-white  p-6 pt-5 sm:pb-4">
+                  <div className="bg-white p-6 pt-5 sm:pb-4">
                     <div className="flex flex-1 items-stretch">
-                      <div className="mt-3 w-full sm:mt-0 sm:ml-4 sm:text-left">
+                      <div className="mt-3 w-full sm:mt-0 sm:text-left">
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900">
diff --git a/apps/portal/src/components/questions/QuestionSearchBar.tsx b/apps/portal/src/components/questions/QuestionSearchBar.tsx
index d72ee69f..a27f043b 100644
--- a/apps/portal/src/components/questions/QuestionSearchBar.tsx
+++ b/apps/portal/src/components/questions/QuestionSearchBar.tsx
@@ -1,5 +1,8 @@
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Select, TextInput } from '@tih/ui';
+import {
+  AdjustmentsHorizontalIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+import { Button, Select, TextInput } from '@tih/ui';
 
 export type SortOption = {
   label: string;
@@ -7,6 +10,7 @@ export type SortOption = {
 };
 
 export type QuestionSearchBarProps<SortOptions extends Array<SortOption>> = {
+  onFilterOptionsToggle: () => void;
   onSortChange?: (sortValue: SortOptions[number]['value']) => void;
   sortOptions: SortOptions;
   sortValue: SortOptions[number]['value'];
@@ -18,6 +22,7 @@ export default function QuestionSearchBar<
   onSortChange,
   sortOptions,
   sortValue,
+  onFilterOptionsToggle,
 }: QuestionSearchBarProps<SortOptions>) {
   return (
     <div className="flex items-center gap-2">
@@ -39,7 +44,15 @@ export default function QuestionSearchBar<
         label="Sort by"
         options={sortOptions}
         value={sortValue}
-        onChange={onSortChange}></Select>
+        onChange={onSortChange}
+      />
+      <Button
+        addonPosition="start"
+        icon={AdjustmentsHorizontalIcon}
+        label="Filter options"
+        variant="tertiary"
+        onClick={onFilterOptionsToggle}
+      />
     </div>
   );
 }
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx
index 5ca513fe..d7558bb0 100644
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@@ -1,7 +1,9 @@
 import { subMonths, subYears } from 'date-fns';
 import { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
+import { NoSymbolIcon } from '@heroicons/react/24/outline';
 import type { QuestionsQuestionType } from '@prisma/client';
+import { SlideOut } from '@tih/ui';
 
 import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard';
 import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
@@ -59,17 +61,22 @@ export default function QuestionsHomePage() {
       : undefined;
   }, [selectedQuestionAge]);
 
-  const { data: questions } = trpc.useQuery([
-    'questions.questions.getQuestionsByFilter',
+  const { data: questions } = trpc.useQuery(
+    [
+      'questions.questions.getQuestionsByFilter',
+      {
+        companies: selectedCompanies,
+        endDate: today,
+        locations: selectedLocations,
+        questionTypes: selectedQuestionTypes,
+        roles: [],
+        startDate,
+      },
+    ],
     {
-      companies: selectedCompanies,
-      endDate: today,
-      locations: selectedLocations,
-      questionTypes: selectedQuestionTypes,
-      roles: [],
-      startDate,
+      keepPreviousData: true,
     },
-  ]);
+  );
 
   const utils = trpc.useContext();
   const { mutate: createQuestion } = trpc.useMutation(
@@ -83,6 +90,7 @@ export default function QuestionsHomePage() {
 
   const [hasLanded, setHasLanded] = useState(false);
   const [loaded, setLoaded] = useState(false);
+  const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
 
   const companyFilterOptions = useMemo(() => {
     return COMPANIES.map((company) => ({
@@ -153,79 +161,72 @@ export default function QuestionsHomePage() {
     return null;
   }
 
+  const filterSidebar = (
+    <div className="divide-y divide-slate-200 px-4">
+      <FilterSection
+        label="Company"
+        options={companyFilterOptions}
+        searchPlaceholder="Add company filter"
+        onOptionChange={(optionValue, checked) => {
+          if (checked) {
+            setSelectedCompanies([...selectedCompanies, optionValue]);
+          } else {
+            setSelectedCompanies(
+              selectedCompanies.filter((company) => company !== optionValue),
+            );
+          }
+        }}
+      />
+      <FilterSection
+        label="Question types"
+        options={questionTypeFilterOptions}
+        showAll={true}
+        onOptionChange={(optionValue, checked) => {
+          if (checked) {
+            setSelectedQuestionTypes([...selectedQuestionTypes, optionValue]);
+          } else {
+            setSelectedQuestionTypes(
+              selectedQuestionTypes.filter(
+                (questionType) => questionType !== optionValue,
+              ),
+            );
+          }
+        }}
+      />
+      <FilterSection
+        isSingleSelect={true}
+        label="Question age"
+        options={questionAgeFilterOptions}
+        showAll={true}
+        onOptionChange={(optionValue) => {
+          setSelectedQuestionAge(optionValue);
+        }}
+      />
+      <FilterSection
+        label="Location"
+        options={locationFilterOptions}
+        searchPlaceholder="Add location filter"
+        onOptionChange={(optionValue, checked) => {
+          if (checked) {
+            setSelectedLocations([...selectedLocations, optionValue]);
+          } else {
+            setSelectedLocations(
+              selectedLocations.filter((location) => location !== optionValue),
+            );
+          }
+        }}
+      />
+    </div>
+  );
+
   return !hasLanded ? (
     <LandingComponent onLanded={handleLandingQuery}></LandingComponent>
   ) : (
-    <main className="flex flex-1 flex-col items-stretch overflow-y-auto">
-      <div className="flex pt-4">
-        <aside className="w-[300px] border-r px-4">
-          <h2 className="text-xl font-semibold">Filter by</h2>
-          <div className="divide-y divide-slate-200">
-            <FilterSection
-              label="Company"
-              options={companyFilterOptions}
-              searchPlaceholder="Add company filter"
-              onOptionChange={(optionValue, checked) => {
-                if (checked) {
-                  setSelectedCompanies([...selectedCompanies, optionValue]);
-                } else {
-                  setSelectedCompanies(
-                    selectedCompanies.filter(
-                      (company) => company !== optionValue,
-                    ),
-                  );
-                }
-              }}
-            />
-            <FilterSection
-              label="Question types"
-              options={questionTypeFilterOptions}
-              showAll={true}
-              onOptionChange={(optionValue, checked) => {
-                if (checked) {
-                  setSelectedQuestionTypes([
-                    ...selectedQuestionTypes,
-                    optionValue,
-                  ]);
-                } else {
-                  setSelectedQuestionTypes(
-                    selectedQuestionTypes.filter(
-                      (questionType) => questionType !== optionValue,
-                    ),
-                  );
-                }
-              }}
-            />
-            <FilterSection
-              isSingleSelect={true}
-              label="Question age"
-              options={questionAgeFilterOptions}
-              showAll={true}
-              onOptionChange={(optionValue) => {
-                setSelectedQuestionAge(optionValue);
-              }}
-            />
-            <FilterSection
-              label="Location"
-              options={locationFilterOptions}
-              searchPlaceholder="Add location filter"
-              onOptionChange={(optionValue, checked) => {
-                if (checked) {
-                  setSelectedLocations([...selectedLocations, optionValue]);
-                } else {
-                  setSelectedLocations(
-                    selectedLocations.filter(
-                      (location) => location !== optionValue,
-                    ),
-                  );
-                }
-              }}
-            />
-          </div>
-        </aside>
-        <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto pt-4">
-          <div className="flex min-h-0 max-w-3xl flex-1">
-            <div className="flex flex-1 flex-col items-stretch justify-start gap-4 pb-4">
+    <main className="flex flex-1 flex-col items-stretch">
+      <div className="flex h-full flex-1">
+        <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
+          <div className="flex min-h-0 max-w-3xl flex-1 p-4">
+            <div className="flex flex-1 flex-col items-stretch justify-start gap-4">
               <ContributeQuestionCard
                 onSubmit={(data) => {
                   createQuestion({
@@ -250,6 +251,9 @@ export default function QuestionsHomePage() {
                   },
                 ]}
                 sortValue="most-recent"
+                onFilterOptionsToggle={() => {
+                  setFilterDrawerOpen(!filterDrawerOpen);
+                }}
                 onSortChange={(value) => {
                   // eslint-disable-next-line no-console
                   console.log(value);
@@ -257,7 +261,6 @@ export default function QuestionsHomePage() {
               />
               {(questions ?? []).map((question) => (
                 <QuestionOverviewCard
-                  // eslint-disable-next-line react/no-array-index-key
                   key={question.id}
                   answerCount={question.numAnswers}
                   content={question.content}
@@ -275,9 +278,31 @@ export default function QuestionsHomePage() {
                   upvoteCount={question.numVotes}
                 />
               ))}
+              {(questions ?? []).length === 0 && (
+                <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
+                  <NoSymbolIcon className="h-6 w-6" />
+                  <p>Nothing found. Try changing your search filters.</p>
+                </div>
+              )}
             </div>
           </div>
         </section>
+        <aside className="hidden w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
+          <h2 className="px-4 text-xl font-semibold">Filter by</h2>
+          {filterSidebar}
+        </aside>
+        <div className="hidden">
+          <SlideOut
+            enterFrom="end"
+            isShown={filterDrawerOpen}
+            size="sm"
+            title="Filter by"
+            onClose={() => {
+              setFilterDrawerOpen(false);
+            }}>
+            {filterSidebar}
+          </SlideOut>
+        </div>
       </div>
     </main>
   );