Merge pull request #16 from builtbysuraj/filter-ui

Filter UI - Refactor, Add Applied filters
builtbysuraj · Jan 25, 2024 · eb18ce9 · eb18ce9
2 parents 6fe18a6 + 1f1e2f1
commit eb18ce9
Show file tree

Hide file tree

Showing 51 changed files with 567 additions and 618 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <!-- <link rel="icon" type="image/svg+xml" href="./public/favicon.ico" /> -->
+    <link rel="icon" type="image/svg+xml" href="./public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>
       Online Shopping Site for Mobiles, Electronics, Furniture, Grocery,

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -19,9 +19,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.2",
     "@reduxjs/toolkit": "^2.0.1",
-    "@tanstack/react-query": "^5.17.10",
     "axios": "^1.6.4",
-    "classnames": "^2.5.1",
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -4,12 +4,12 @@ import { Footer, Header } from './layouts'
 
 export default function App() {
   return (
-    <div className="AppContainer">
+    <main className="AppContainer">
       <Header />
       <Suspense fallback="Loading...">
         <Outlet />
       </Suspense>
       <Footer />
-    </div>
+    </main>
   )
 }
diff --git a/client/src/assets/css/global.css b/client/src/assets/css/global.css
@@ -0,0 +1,22 @@
+.AppContainer {
+  background-color: #f1f3f6;
+  z-index: -1;
+  min-height: 100vh;
+}
+
+hr {
+  border-top: 1px solid rgba(96, 96, 96, 0.217);
+  margin: 15px 0 0 0;
+}
+
+.sidebar section {
+  margin: 10px 0;
+}
+
+.sidebar section input {
+  margin: 8px 0;
+}
+
+.sidebar section label {
+  padding: 0 10px;
+}
diff --git a/client/src/assets/css/reset.css b/client/src/assets/css/reset.css
@@ -11,18 +11,15 @@ html {
   font-family: system-ui, sans-serif;
 }
 
+html,
 body {
-  line-height: 1.5;
-  min-height: 100vh;
-  min-width: 100vw;
-  /* overflow-x: hidden; */
+  height: 100%;
 }
 
-.AppContainer {
-  background-color: #f1f3f6;
-  z-index: -1;
+body {
+  line-height: 1.5;
   min-height: 100vh;
-  min-width: 100rem;
+  max-width: 100vw;
 }
 
 input,
@@ -32,7 +29,23 @@ select {
   font: inherit;
 }
 
-/* responsive images/videos */
+input[type='radio'],
+label[for] {
+  cursor: pointer;
+}
+
+input[type='text'],
+input[type='number'],
+select,
+textarea {
+  font-size: 16px;
+}
+
+button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 img,
 picture,
 svg,

diff --git a/client/src/components/Form.tsx b/client/src/components/Form.tsx
diff --git a/...nt/src/pages/signup/SignUpPage.module.css → client/src/components/form/Form.module.css b/...nt/src/pages/signup/SignUpPage.module.css → client/src/components/form/Form.module.css
@@ -49,7 +49,7 @@
   border: 0;
   border-bottom: 1px solid grey;
 }
-input::placeholder {
+.login-form input::placeholder {
   opacity: 0.7;
 }
 

diff --git a/client/src/components/form/Form.tsx b/client/src/components/form/Form.tsx
@@ -0,0 +1,49 @@
+import { Link } from 'react-router-dom'
+import styles from './Form.module.css'
+
+type FormProps = {
+  mode: string
+  promptText: string
+  promptLink: string
+  promptLinkText: string
+}
+
+export default function From({
+  mode,
+  promptText,
+  promptLink,
+  promptLinkText,
+}: FormProps) {
+  return (
+    <div className={styles.loginContainer}>
+      <div className={styles.left}>
+        <div className={styles.loginTitle}>
+          <span>{mode}</span>
+        </div>
+        <div className={styles.loginDesc}>
+          <p>Get access to your Orders,</p>
+          <p>Wishlist and Recommendations</p>
+        </div>
+      </div>
+      <div className={styles.right}>
+        <form className={styles.loginForm}>
+          <input type="text" placeholder="Enter Email/Username" />
+          <input type="password" placeholder="Password" />
+          <small>
+            By continuing, you agree to Flipkart's
+            <span className={styles.demoLink}> Terms of Use </span>
+            and
+            <span className={styles.demoLink}> Privacy Policy.</span>
+          </small>
+          <button>{mode}</button>
+          <p>
+            {promptText}{' '}
+            <Link to={promptLink} className={styles.demoLink}>
+              {promptLinkText}
+            </Link>
+          </p>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/components/loader/Loader.tsx b/client/src/components/loader/Loader.tsx
@@ -0,0 +1,17 @@
+import { CircularProgress } from '@mui/material'
+
+export default function Loader() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh',
+        maxWidth: '100vw',
+      }}
+    >
+      <CircularProgress size="3rem" />
+    </div>
+  )
+}
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
diff --git a/client/src/components/ui/Input.tsx b/client/src/components/ui/Input.tsx
@@ -1,9 +1,43 @@
-/* eslint-disable react-refresh/only-export-components */
+type InputProps = {
+  type: string
+  name?: string
+  placeholder?: string
+  id?: string
+  value: string
+  onChange: React.ChangeEventHandler<HTMLInputElement> | undefined
+  checked?: boolean
+  label?: string
+  className?: string
+}
 
-// import { forwardRef } from 'react'
+function Input({
+  type,
+  name,
+  placeholder,
+  id,
+  value,
+  onChange,
+  checked,
+  label,
+  className = '',
+}: InputProps) {
+  return (
+    <>
+      <input
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        id={id}
+        value={value}
+        onChange={onChange}
+        checked={checked}
+        className={className}
+      />
+      <label className={className} htmlFor={id}>
+        {label}
+      </label>
+    </>
+  )
+}
 
-// function Input({ label, type = 'text', className = '', ...props }, ref) {
-//   return <>{label && <label htmlFor="">{label}</label>}</>
-// }
-
-// export default forwardRef(Input)
+export default Input
diff --git a/client/src/hooks/useFilters.ts b/client/src/hooks/useFilters.ts
@@ -1,6 +1,6 @@
 import { SORT_TYPE } from '@/constants/filterConstants'
 import { useGetAllProductsQuery } from '@/state/services/productApi'
-import { ProductType } from '@/types'
+import type { ProductType } from '@/types'
 import useGetParams from './useGetParams'
 
 export default function useFilter() {

diff --git a/client/src/hooks/useHandleDispatch.ts b/client/src/hooks/useHandleDispatch.ts
@@ -6,7 +6,7 @@ import {
   removeFromCart,
 } from '@/state/slices/cartSlice'
 import { useAppDispatch } from '@/state/store'
-import { CartType, ProductType } from '@/types'
+import type { CartType, ProductType } from '@/types'
 
 export default function useHandleDispatch() {
   const dispatch = useAppDispatch()