From ea8db4f503e5890a835224b3110e1989244adea8 Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Fri, 28 Oct 2022 10:11:58 +0800
Subject: [PATCH] [resumes][feat] add clear filter functionality

---
 .../components/resumes/landing/CallToAction.tsx  | 15 +++++++--------
 .../src/components/resumes/landing/Hero.tsx      | 14 +++++++-------
 apps/portal/src/pages/resumes/browse.tsx         | 16 ++++++++++++++--
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/apps/portal/src/components/resumes/landing/CallToAction.tsx b/apps/portal/src/components/resumes/landing/CallToAction.tsx
index f14e6c1f..c82ef8d7 100644
--- a/apps/portal/src/components/resumes/landing/CallToAction.tsx
+++ b/apps/portal/src/components/resumes/landing/CallToAction.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import { Button } from '@tih/ui';
 
 import { Container } from './Container';
 
@@ -14,13 +14,12 @@ export function CallToAction() {
             It's free! Take charge of your resume game by learning from the top
             engineers in the field.
           </p>
-          <Link href="/resumes/browse">
-            <button
-              className="bg-primary-500 mt-4 rounded-md py-2 px-3 text-sm font-medium text-white"
-              type="button">
-              Start browsing now
-            </button>
-          </Link>
+          <Button
+            className="mt-4"
+            href="/resumes/browse"
+            label="Start browsing now"
+            variant="primary"
+          />
         </div>
       </Container>
     </section>
diff --git a/apps/portal/src/components/resumes/landing/Hero.tsx b/apps/portal/src/components/resumes/landing/Hero.tsx
index 2e14e199..20f9e4a4 100644
--- a/apps/portal/src/components/resumes/landing/Hero.tsx
+++ b/apps/portal/src/components/resumes/landing/Hero.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { Button } from '@tih/ui';
 
 import { Container } from './Container';
 
@@ -24,13 +25,12 @@ export function Hero() {
         your fellow engineers
       </p>
       <div className="mt-10 flex justify-center gap-x-4">
-        <Link href="/resumes/browse">
-          <button
-            className="bg-primary-500 rounded-md py-2 px-3 text-sm font-medium text-white"
-            type="button">
-            Start browsing now
-          </button>
-        </Link>
+        <Button
+          href="/resumes/browse"
+          label="Start browsing now"
+          variant="primary"
+        />
+        {/* TODO: Update video */}
         <Link href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
           <button
             className="focus-visible:outline-primary-600 group inline-flex items-center justify-center rounded-md py-2 px-4 text-sm ring-1 ring-slate-200 hover:text-slate-900 hover:ring-slate-300 focus:outline-none focus-visible:ring-slate-300 active:bg-slate-100 active:text-slate-600"
diff --git a/apps/portal/src/pages/resumes/browse.tsx b/apps/portal/src/pages/resumes/browse.tsx
index 4b3dc3ba..86825590 100644
--- a/apps/portal/src/pages/resumes/browse.tsx
+++ b/apps/portal/src/pages/resumes/browse.tsx
@@ -285,6 +285,13 @@ export default function ResumeHomePage() {
     }
   };
 
+  const onClearFilterClick = (filterSection: FilterId) => {
+    setUserFilters({
+      ...userFilters,
+      [filterSection]: [],
+    });
+  };
+
   const onShortcutChange = ({
     sortOrder: shortcutSortOrder,
     filters: shortcutFilters,
@@ -484,7 +491,7 @@ export default function ResumeHomePage() {
                   <Disclosure
                     key={filter.id}
                     as="div"
-                    className="border-b border-slate-200 py-6">
+                    className="border-b border-slate-200 pt-6 pb-4">
                     {({ open }) => (
                       <>
                         <h3 className="-my-3 flow-root">
@@ -507,7 +514,7 @@ export default function ResumeHomePage() {
                             </span>
                           </Disclosure.Button>
                         </h3>
-                        <Disclosure.Panel className="pt-4">
+                        <Disclosure.Panel className="space-y-4 pt-4">
                           <CheckboxList
                             description=""
                             isLabelHidden={true}
@@ -536,6 +543,11 @@ export default function ResumeHomePage() {
                               </div>
                             ))}
                           </CheckboxList>
+                          <p
+                            className="cursor-pointer text-sm text-slate-500 underline"
+                            onClick={() => onClearFilterClick(filter.id)}>
+                            Clear
+                          </p>
                         </Disclosure.Panel>
                       </>
                     )}