feat: sort order direction (#92)

Co-authored-by: Sara Vieira <hey@iamsaravieira.com>
pmndrs · Feb 21, 2024 · d278b47 · d278b47
1 parent 04066a7
commit d278b47
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 84 deletions.
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@supabase/supabase-js": "^1.21.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
-    "@tippyjs/react": "^4.2.5",
+    "@tippyjs/react": "^4.2.6",
     "antd": "^4.16.10",
     "axios": "^1.6.7",
     "clipboard-copy": "^4.0.1",

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -1,6 +1,15 @@
+import Tippy from '@tippyjs/react'
+import 'tippy.js/dist/tippy.css' // optional
 import { SearchIcon } from '@heroicons/react/solid'
 
-const Search = ({ search, setSearch, onOrderChange, assetName }) => {
+const Search = ({
+  search,
+  setSearch,
+  onOrderChange,
+  onOrderDirectionChange,
+  assetName,
+  orderDirection,
+}) => {
   const placeholder = `Search for ${assetName}`
   return (
     <div className='items-center block mt-6 sm:flex gap-10'>
@@ -21,14 +30,14 @@ const Search = ({ search, setSearch, onOrderChange, assetName }) => {
           <SearchIcon className='w-5 h-5 text-gray-400' aria-hidden='true' />
         </div>
       </div>
-      <div className='mt-4 min-w-[200px] sm:mt-0'>
-        <label htmlFor='order' className='sr-only'>
+      <div className='mt-4 min-w-[200px] sm:mt-0 items-center flex gap-4'>
+        <label htmlFor='orderBy' className='sr-only'>
           Order By
         </label>
         <select
-          id='order'
-          name='order'
-          className='block w-full py-2 pl-3 pr-10 text-base text-gray-800 bg-white border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md'
+          id='orderBy'
+          name='orderBy'
+          className='inline-block py-2 pl-3 pr-10 text-base text-gray-800 bg-white border-gray-300 cursor-pointer min-w-max focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md'
           onChange={(e) => onOrderChange(e.target.value)}
         >
           <option value='alphabetic'>Order By</option>
@@ -37,6 +46,54 @@ const Search = ({ search, setSearch, onOrderChange, assetName }) => {
           <option value='views'>Views</option>
           <option value='alphabetic'>Alphabetic</option>
         </select>
+        {orderDirection === 'desc' ? (
+          <Tippy content='Descending'>
+            <button
+              title='Descending'
+              className='items-center h-9 flex justify-center px-3 text-base text-gray-800 bg-white border border-gray-300 cursor-pointer min-w-max sm:text-sm rounded-md'
+              onClick={() => onOrderDirectionChange('asc')}
+            >
+              <svg
+                className='w-6 h-6'
+                viewBox='0 0 24 24'
+                strokeWidth='1.5'
+                stroke='currentColor'
+                fill='none'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+              >
+                <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+                <path d='M5 5m0 .5a.5 .5 0 0 1 .5 -.5h4a.5 .5 0 0 1 .5 .5v4a.5 .5 0 0 1 -.5 .5h-4a.5 .5 0 0 1 -.5 -.5z' />
+                <path d='M5 14m0 .5a.5 .5 0 0 1 .5 -.5h4a.5 .5 0 0 1 .5 .5v4a.5 .5 0 0 1 -.5 .5h-4a.5 .5 0 0 1 -.5 -.5z' />
+                <path d='M14 15l3 3l3 -3' />
+                <path d='M17 18v-12' />
+              </svg>
+            </button>
+          </Tippy>
+        ) : (
+          <Tippy content='Ascending'>
+            <button
+              className='items-center h-9 flex justify-center px-3 text-base text-gray-800 bg-white border border-gray-300 cursor-pointer min-w-max sm:text-sm rounded-md'
+              onClick={() => onOrderDirectionChange('desc')}
+            >
+              <svg
+                className='w-6 h-6'
+                viewBox='0 0 24 24'
+                strokeWidth='1.5'
+                stroke='currentColor'
+                fill='none'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+              >
+                <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+                <path d='M14 9l3 -3l3 3' />
+                <path d='M5 5m0 .5a.5 .5 0 0 1 .5 -.5h4a.5 .5 0 0 1 .5 .5v4a.5 .5 0 0 1 -.5 .5h-4a.5 .5 0 0 1 -.5 -.5z' />
+                <path d='M5 14m0 .5a.5 .5 0 0 1 .5 -.5h4a.5 .5 0 0 1 .5 .5v4a.5 .5 0 0 1 -.5 .5h-4a.5 .5 0 0 1 -.5 -.5z' />
+                <path d='M17 6v12' />
+              </svg>
+            </button>
+          </Tippy>
+        )}
       </div>
     </div>
   )

diff --git a/src/helpers/store/hdri.js b/src/helpers/store/hdri.js
@@ -10,12 +10,17 @@ const useHDRIStore = create((set, get) => {
     defaultHdri: null,
     currentHdri: [],
     search: '',
-    order: 'alphabetic',
-    setOrder: (order, hdris) => {
-      set({ order })
+    orderBy: 'alphabetic',
+    orderDirection: 'asc',
+    setOrderBy: (orderBy, hdris) => {
+      set({ orderBy })
       const currentHdri = hdris || get().currentHdri
-
-      return sortAssets(order, currentHdri)
+      return sortAssets(orderBy, currentHdri, get().orderDirection)
+    },
+    setOrderDirection: (orderDirection) => {
+      set({ orderDirection })
+      const currentHdri = get().currentHdri
+      return sortAssets(get().orderBy, currentHdri, get().orderDirection)
     },
     createHDRIDownload: async (hdri, tab) => {
       let code = ''
@@ -40,8 +45,8 @@ const useHDRIStore = create((set, get) => {
     setSearch: (e) => {
       const search = e.target.value
       const defaultHdri = get().defaultHdri
-      const order = get().order
-      const setOrder = get().setOrder
+      const orderBy = get().orderBy
+      const setOrderBy = get().setOrderBy
       set({ search: search })
       if (search.length) {
         const searchResults = defaultHdri.filter((hdri) => {
@@ -51,9 +56,9 @@ const useHDRIStore = create((set, get) => {
             hdri.name.toLowerCase().includes(search.toLowerCase())
           )
         })
-        set({ currentHdri: setOrder(order, searchResults) })
+        set({ currentHdri: setOrderBy(orderBy, searchResults) })
       } else {
-        set({ currentHdri: setOrder(order, defaultHdri) })
+        set({ currentHdri: setOrderBy(orderBy, defaultHdri) })
       }
     },
   }

diff --git a/src/helpers/store/index.js b/src/helpers/store/index.js
@@ -22,12 +22,17 @@ const useStore = create((set, get) => {
     currentModels: [],
     parseBuffer: null,
     search: '',
-    order: 'alphabetic',
-    setOrder: (order, models) => {
-      set({ order })
+    orderBy: 'alphabetic',
+    orderDirection: 'asc',
+    setOrderBy: (orderBy, models) => {
+      set({ orderBy })
       const currentModels = models || get().currentModels
-
-      return sortAssets(order, currentModels)
+      return sortAssets(orderBy, currentModels, get().orderDirection)
+    },
+    setOrderDirection: (orderDirection) => {
+      set({ orderDirection })
+      const currentModels = get().currentModels
+      return sortAssets(get().orderBy, currentModels, get().orderDirection)
     },
     createModelDownloadZip: async (model, jsx, tab) => {
       let code = ''
@@ -52,8 +57,8 @@ const useStore = create((set, get) => {
     setSearch: (e) => {
       const search = e.target.value
       const defaultModels = get().defaultModels
-      const setOrder = get().setOrder
-      const order = get().order
+      const setOrderBy = get().setOrderBy
+      const orderBy = get().orderBy
       set({ search: search })
       if (search.length) {
         const searchResults = defaultModels.filter((model) => {
@@ -63,9 +68,9 @@ const useStore = create((set, get) => {
             model.name.toLowerCase().includes(search.toLowerCase())
           )
         })
-        set({ currentModels: setOrder(order, searchResults) })
+        set({ currentModels: setOrderBy(orderBy, searchResults) })
       } else {
-        set({ currentModels: setOrder(order, defaultModels) })
+        set({ currentModels: setOrderBy(orderBy, defaultModels) })
       }
     },
     toggleFavorite: async (type, name) => {

diff --git a/src/helpers/store/materials.js b/src/helpers/store/materials.js
@@ -12,12 +12,17 @@ const useMaterialsStore = create((set, get) => {
     defaultMaterials: null,
     currentMaterials: [],
     search: '',
-    order: 'alphabetic',
-    setOrder: (order, materials) => {
-      set({ order })
+    orderBy: 'alphabetic',
+    orderDirection: 'asc',
+    setOrderBy: (orderBy, materials) => {
+      set({ orderBy })
       const currentMaterials = materials || get().currentMaterials
-
-      return sortAssets(order, currentMaterials)
+      return sortAssets(orderBy, currentMaterials, get().orderDirection)
+    },
+    setOrderDirection: (orderDirection) => {
+      set({ orderDirection })
+      const currentMaterials = get().currentMaterials
+      return sortAssets(get().orderBy, currentMaterials, get().orderDirection)
     },
     createPBRCodeDownload: async (material, tab) => {
       let code = ''
@@ -78,8 +83,8 @@ const useMaterialsStore = create((set, get) => {
     setSearch: (e) => {
       const search = e.target.value
       const defaultMaterials = get().defaultMaterials
-      const order = get().order
-      const setOrder = get().setOrder
+      const orderBy = get().orderBy
+      const setOrderBy = get().setOrderBy
       set({ search: search })
       if (search.length) {
         const searchResults = defaultMaterials.filter((material) => {
@@ -88,9 +93,9 @@ const useMaterialsStore = create((set, get) => {
             material.name.toLowerCase().includes(search.toLowerCase())
           )
         })
-        set({ currentMaterials: setOrder(order, searchResults) })
+        set({ currentMaterials: setOrderBy(orderBy, searchResults) })
       } else {
-        set({ currentMaterials: setOrder(order, defaultMaterials) })
+        set({ currentMaterials: setOrderBy(orderBy, defaultMaterials) })
       }
     },
   }

diff --git a/src/helpers/store/utils.js b/src/helpers/store/utils.js
@@ -1,29 +1,23 @@
-export const sortAssets = (order, currentAssets) => {
+export const sortAssets = (orderBy, currentAssets, orderDirection) => {
   let assetsToReturn
-  if (order === 'views') {
-    assetsToReturn = currentAssets.sort((a, b) => b.views - a.views)
-  }
-  if (order === 'added') {
-    assetsToReturn = currentAssets.sort(
-      (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
-    )
-  }
-  if (order === 'size') {
-    assetsToReturn = currentAssets.sort(
-      (a, b) => a.originalSize - b.originalSize
-    )
-  }
-  if (order === 'alphabetic') {
-    assetsToReturn = currentAssets.sort((a, b) => {
-      if (a.id < b.id) {
-        return -1
-      }
-      if (a.id > b.id) {
-        return 1
-      }
-      return 0
-    })
+  switch (orderBy) {
+    case 'views':
+      assetsToReturn = currentAssets.sort((a, b) => b.views - a.views)
+      break
+    case 'added':
+      assetsToReturn = currentAssets.sort(
+        (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
+      )
+      break
+    case 'size':
+      assetsToReturn = currentAssets.sort(
+        (a, b) => a.originalSize - b.originalSize
+      )
+      break
+    default:
+      assetsToReturn = currentAssets.sort((a, b) => (a.id < b.id ? -1 : 1))
+    // default is alphabetic
   }
 
-  return assetsToReturn
+  return orderDirection === 'asc' ? assetsToReturn : assetsToReturn.reverse()
 }
diff --git a/src/pages/hdris.jsx b/src/pages/hdris.jsx
@@ -7,14 +7,21 @@ import Asset from '@/components/Asset'
 import Search from '@/components/Search'
 
 const Index = ({ title, hdris }) => {
-  const { search, currentHdri, setSearch, setOrder } = useHDRIStore(
-    (state) => ({
-      search: state.search,
-      currentHdri: state.currentHdri,
-      setSearch: state.setSearch,
-      setOrder: state.setOrder,
-    })
-  )
+  const {
+    search,
+    currentHdri,
+    setSearch,
+    setOrderBy,
+    setOrderDirection,
+    orderDirection,
+  } = useHDRIStore((state) => ({
+    search: state.search,
+    currentHdri: state.currentHdri,
+    setSearch: state.setSearch,
+    setOrderBy: state.setOrderBy,
+    setOrderDirection: state.setOrderDirection,
+    orderDirection: state.orderDirection,
+  }))
   useEffect(() => {
     useHDRIStore.setState({ currentHdri: hdris })
     useHDRIStore.setState({ defaultHdri: hdris })
@@ -29,7 +36,9 @@ const Index = ({ title, hdris }) => {
       <Search
         search={search}
         setSearch={setSearch}
-        onOrderChange={setOrder}
+        onOrderChange={setOrderBy}
+        onOrderDirectionChange={setOrderDirection}
+        orderDirection={orderDirection}
         assetName="HDRI's"
       />
       <ul className=' mt-10 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8'>

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -6,11 +6,20 @@ import { API_ENDPOINT } from '@/helpers/constants/api'
 import Search from '@/components/Search'
 
 const Index = ({ title, models }) => {
-  const { search, currentModels, setSearch, setOrder } = useStore((state) => ({
+  const {
+    search,
+    currentModels,
+    setSearch,
+    setOrderBy,
+    setOrderDirection,
+    orderDirection,
+  } = useStore((state) => ({
     search: state.search,
     currentModels: state.currentModels,
     setSearch: state.setSearch,
-    setOrder: state.setOrder,
+    setOrderBy: state.setOrderBy,
+    setOrderDirection: state.setOrderDirection,
+    orderDirection: state.orderDirection,
   }))
   useEffect(() => {
     useStore.setState({ currentModels: models })
@@ -27,7 +36,9 @@ const Index = ({ title, models }) => {
       <Search
         search={search}
         setSearch={setSearch}
-        onOrderChange={setOrder}
+        onOrderChange={setOrderBy}
+        onOrderDirectionChange={setOrderDirection}
+        orderDirection={orderDirection}
         assetName='models'
       />
       <ul className=' mt-10 grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8'>