From d278b47c6453cc2fdcce410ca81a175957dfdb53 Mon Sep 17 00:00:00 2001 From: njm222 Date: Wed, 21 Feb 2024 23:34:15 +0530 Subject: [PATCH] feat: sort order direction (#92) Co-authored-by: Sara Vieira --- package.json | 2 +- src/components/Search.js | 69 +++++++++++++++++++++++++++++++--- src/helpers/store/hdri.js | 23 +++++++----- src/helpers/store/index.js | 23 +++++++----- src/helpers/store/materials.js | 23 +++++++----- src/helpers/store/utils.js | 44 ++++++++++------------ src/pages/hdris.jsx | 27 ++++++++----- src/pages/index.jsx | 17 +++++++-- src/pages/materials.jsx | 27 ++++++++----- yarn.lock | 8 ++-- 10 files changed, 179 insertions(+), 84 deletions(-) diff --git a/package.json b/package.json index 35ea0bb..2afe38c 100644 --- 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 index fea1263..5b9f12b 100644 --- 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 (
@@ -21,14 +30,14 @@ const Search = ({ search, setSearch, onOrderChange, assetName }) => {
-
-
) diff --git a/src/helpers/store/hdri.js b/src/helpers/store/hdri.js index 8595a47..a1c52d6 100644 --- 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 index 37dff7c..aaf66cf 100644 --- 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 index 0ad31af..c37fff1 100644 --- 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 index d4556dd..8097c22 100644 --- 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 index 831f8ce..4f32167 100644 --- 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 }) => {
    diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 554681d..2d82118 100644 --- 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 }) => {
      diff --git a/src/pages/materials.jsx b/src/pages/materials.jsx index b902154..3edb158 100644 --- a/src/pages/materials.jsx +++ b/src/pages/materials.jsx @@ -7,14 +7,21 @@ import { API_ENDPOINT } from '@/helpers/constants/api' import Search from '@/components/Search' const Index = ({ title, materials }) => { - const { search, currentMaterials, setSearch, setOrder } = useMaterialsStore( - (state) => ({ - search: state.search, - currentMaterials: state.currentMaterials, - setSearch: state.setSearch, - setOrder: state.setOrder, - }) - ) + const { + search, + currentMaterials, + setSearch, + setOrderBy, + setOrderDirection, + orderDirection, + } = useMaterialsStore((state) => ({ + search: state.search, + currentMaterials: state.currentMaterials, + setSearch: state.setSearch, + setOrderBy: state.setOrderBy, + setOrderDirection: state.setOrderDirection, + orderDirection: state.orderDirection, + })) useEffect(() => { useMaterialsStore.setState({ currentMaterials: materials }) useMaterialsStore.setState({ defaultMaterials: materials }) @@ -29,7 +36,9 @@ const Index = ({ title, materials }) => {
        diff --git a/yarn.lock b/yarn.lock index ae8192c..de3844e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2128,10 +2128,10 @@ dependencies: mini-svg-data-uri "^1.2.3" -"@tippyjs/react@^4.2.5": - version "4.2.5" - resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.5.tgz#9b5837db93a1cac953962404df906aef1a18e80d" - integrity sha512-YBLgy+1zznBNbx4JOoOdFXWMLXjBh9hLPwRtq3s8RRdrez2l3tPBRt2m2909wZd9S1KUeKjOOYYsnitccI9I3A== +"@tippyjs/react@^4.2.6": + version "4.2.6" + resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71" + integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw== dependencies: tippy.js "^6.3.1"