diff --git a/src/components/SongDisplay/SongDisplay.scss b/src/components/SongDisplay/SongDisplay.scss index d27a9aa..f727c33 100644 --- a/src/components/SongDisplay/SongDisplay.scss +++ b/src/components/SongDisplay/SongDisplay.scss @@ -1,5 +1,4 @@ .songs > .container { - align-content: space-between; display: grid; grid-row: 1 / span 2; grid-auto-rows: max-content; diff --git a/src/components/SongList/defaults.ts b/src/components/SongList/defaults.ts index 6e7bc89..032509e 100644 --- a/src/components/SongList/defaults.ts +++ b/src/components/SongList/defaults.ts @@ -1,8 +1,18 @@ +/** + * TODO: Sync these with local state + */ + export const DEFAULT_ALPHA_PROPS = { enabled: false, - sortDescending: true, + sortDescending: false, }; + export const DEFAULT_NUM_PROPS = { enabled: true, - sortDescending: true, + sortDescending: false, +}; + +export const DEFAULT_FILTER_PROPS = { + enabled: false, + currValue: null, }; diff --git a/src/components/SongList/index.tsx b/src/components/SongList/index.tsx index 1068ce3..a7b2731 100644 --- a/src/components/SongList/index.tsx +++ b/src/components/SongList/index.tsx @@ -1,7 +1,7 @@ import { useState, useEffect, useContext, useCallback, useRef } from "react"; import { FaSortAlphaDown, FaSortAlphaDownAlt, FaSortNumericDown, FaSortNumericDownAlt } from "react-icons/fa"; +import { DEFAULT_ALPHA_PROPS, DEFAULT_FILTER_PROPS, DEFAULT_NUM_PROPS } from "./defaults"; import { FixedSizeGrid, GridChildComponentProps } from "react-window"; -import { DEFAULT_ALPHA_PROPS, DEFAULT_NUM_PROPS } from "./defaults"; import AutoSizer from "react-virtualized-auto-sizer"; import { useHistory } from "react-router-dom"; import { Helmet } from "react-helmet"; @@ -65,21 +65,21 @@ function SongList() { // TODO: Sync all filter options with local storage as preferences /** Local State to handle list behaviour */ - const [filterAlphaProps, setFilterAlphaProps] = useState(DEFAULT_ALPHA_PROPS); - const [filterNumberProps, setFilterNumberProps] = useState(DEFAULT_NUM_PROPS); + const [sortAlphaProps, setSortAlphaProps] = useState(DEFAULT_ALPHA_PROPS); + const [sortNumberProps, setSortNumberProps] = useState(DEFAULT_NUM_PROPS); + const [filterLetterProps, setFilterLetterProps] = useState(DEFAULT_FILTER_PROPS); + const [filterNumberProps, setFilterNumberProps] = useState(DEFAULT_FILTER_PROPS); const [finalList, setFinalList] = useState( - sortList(filterAlphaProps.enabled, filterNumberProps.sortDescending, songs, true) + sortList(sortAlphaProps.enabled, sortNumberProps.sortDescending, songs, true) ); // Contains a copy of songs from the context - // const [numbers, setNumbers] = useState([]); // An array of available song number categories - // const [letters, setLetters] = useState([]); // An array of available song letter categories /** Virtualized list props */ const wrapperRef = useRef(null); const [dualColumns] = useMediaQuery("(min-width: 951px)"); - const numColumns = useRef(dualColumns ? 2 : 1); + const numColumns = dualColumns ? 2 : 1; const numRows = useRef(0); - if (numColumns.current === 2) numRows.current = Math.ceil(finalList.length / 2); + if (numColumns === 2) numRows.current = Math.ceil(finalList.length / 2); else numRows.current = finalList.length; /** Handles Filter Drawer display */ @@ -104,12 +104,14 @@ function SongList() { const createMenu = useCallback(() => { let characters = [], numbers = []; - for (let i = 0; i < finalList.length; i++) { - characters.push(finalList[i].title.charAt(0)); - numbers.push(finalList[i].number); + // Ensure we're getting numbers in order for later + let songsCopy = [...songs!].sort((a, b) => a.number - b.number); + for (let i = 0; i < songsCopy.length; i++) { + characters.push(songsCopy[i].title.charAt(0)); + numbers.push(songsCopy[i].number); } return { letters: String.prototype.concat(...new Set(characters)), numbers: numbers }; - }, [finalList]); + }, [songs]); const generateMenuOptions = useCallback((): MenuOptionsFnT => { const menuValues = createMenu(); @@ -145,50 +147,54 @@ function SongList() { function filterSongs(props: FilterSongT) { let filtered: Song[] = []; if (props.type === "numbers") { + if (!filterNumberProps.enabled) return; filtered = songs!.filter(song => song.number === props.value); } else if (props.type === "range") { + if (!filterNumberProps.enabled) return; filtered = songs!.filter(song => song.number >= props.value[0] && song.number <= props.value[1]); } else if (props.type === "letters") { + if (!filterLetterProps.enabled) return; filtered = songs!.filter(song => song.title.charAt(0) === props.value); } - const isAlphabetical = filterAlphaProps.enabled; - const sortDescending = isAlphabetical ? filterAlphaProps.sortDescending : filterNumberProps.sortDescending; - sortList(filterAlphaProps.enabled, sortDescending, filtered); + const isAlphabetical = sortAlphaProps.enabled; + const sortDescending = isAlphabetical ? sortAlphaProps.sortDescending : sortNumberProps.sortDescending; + sortList(sortAlphaProps.enabled, sortDescending, filtered); } /** [ASC/DESC] Handles list filter directional changes */ function handleFilterChange(value: string | number, filterType: FilterT) { const sortDescending = value === "Descending"; + console.log("Filter time: ", sortDescending); if (filterType === FILTER_TYPES.NUM) { - setFilterNumberProps(props => ({ ...props, sortDescending: sortDescending })); - if (filterNumberProps.enabled) handleFilterToggle(filterType); + setSortNumberProps(props => ({ ...props, sortDescending })); + if (sortNumberProps.enabled) handleFilterToggle(filterType, sortDescending); } if (filterType === FILTER_TYPES.ALPHA) { - setFilterAlphaProps(props => ({ ...props, sortDescending: sortDescending })); - if (filterAlphaProps.enabled) handleFilterToggle(filterType); + setSortAlphaProps(props => ({ ...props, sortDescending })); + if (sortAlphaProps.enabled) handleFilterToggle(filterType, sortDescending); } } /** [Enable Options] Handles list filter features enable / disable */ - function handleFilterToggle(filterType: FilterT) { - console.log("Toggle called ", filterType); + function handleFilterToggle(filterType: FilterT, sortDesc?: boolean) { + console.log("Toggle called ", filterType, sortDesc); if (filterType !== FILTER_TYPES.FAVE) { const sortAlphabetical = filterType === FILTER_TYPES.ALPHA; - const sortDescending = sortAlphabetical - ? filterAlphaProps.sortDescending - : filterNumberProps.sortDescending; + let sortDescending: boolean; + if (sortDesc !== undefined) sortDescending = sortDesc; + else sortDescending = sortAlphabetical ? sortAlphaProps.sortDescending : sortNumberProps.sortDescending; - console.log(sortDescending); - setFilterNumberProps(props => ({ ...props, enabled: !sortAlphabetical })); - setFilterAlphaProps(props => ({ ...props, enabled: sortAlphabetical })); + console.log("Filter toggle values: ", sortAlphabetical, sortDescending); + setSortNumberProps(props => ({ ...props, enabled: !sortAlphabetical })); + setSortAlphaProps(props => ({ ...props, enabled: sortAlphabetical })); sortList(sortAlphabetical, sortDescending); } else { - const isAlphabetical = filterAlphaProps.enabled; - const sortDescending = isAlphabetical ? filterAlphaProps.sortDescending : filterNumberProps.sortDescending; - sortList(filterAlphaProps.enabled, sortDescending, songs); + const isAlphabetical = sortAlphaProps.enabled; + const sortDescending = isAlphabetical ? sortAlphaProps.sortDescending : sortNumberProps.sortDescending; + sortList(sortAlphaProps.enabled, sortDescending, songs); } } @@ -201,11 +207,14 @@ function SongList() { ): Song[] { const newArray = sourceList ? [...sourceList] : [...finalList]; + console.log(sortAlphabetically, sortDescending); + if (sortAlphabetically) { - if (sortDescending) newArray.sort((a, b) => a.title.localeCompare(b.title)); + if (!sortDescending) newArray.sort((a, b) => a.title.localeCompare(b.title)); else newArray.sort((a, b) => b.title.localeCompare(a.title)); + console.log(newArray[0]); } else { - if (sortDescending) newArray.sort((a, b) => a.number - b.number); + if (!sortDescending) newArray.sort((a, b) => a.number - b.number); else newArray.sort((a, b) => b.number - a.number); } @@ -224,9 +233,14 @@ function SongList() { return ( <> {values.map(number => ( - + ))} ); @@ -237,9 +251,14 @@ function SongList() { return ( <> {values.map(letter => ( - + ))} ); @@ -247,7 +266,7 @@ function SongList() { /** Renders a single cell */ const Cell = ({ columnIndex, rowIndex, style, data }: GridChildComponentProps) => { - const itemIndex = rowIndex * numColumns.current + columnIndex; + const itemIndex = rowIndex * numColumns + columnIndex; if (itemIndex >= finalList.length) return null; return ( handleFilterToggle(nextValue as FILTER_TYPES)} w="100%" > @@ -281,15 +300,15 @@ function SongList() { handleFilterChange(nextValue, FILTER_TYPES.ALPHA)} > - Ascending + Ascending - Descending + Descending @@ -303,15 +322,15 @@ function SongList() { handleFilterChange(value, FILTER_TYPES.NUM)} > - Ascending + Ascending - Descending + Descending @@ -323,16 +342,17 @@ function SongList() { Filter By Letter - Enable - handleFilterChange(value, FILTER_TYPES.NUM)} + setFilterLetterProps(props => ({ ...props, enabled: !props.enabled }))} > + Enable + + - + @@ -340,19 +360,24 @@ function SongList() { Filter By Range - Enable - handleFilterChange(value, FILTER_TYPES.NUM)}> + setFilterNumberProps(props => ({ ...props, enabled: !props.enabled }))} + > + Enable + + - + Favourites - handleFilterToggle(FILTER_TYPES.FAVE)}> + handleFilterToggle(FILTER_TYPES.FAVE)} disabled> Only favourites @@ -418,7 +443,7 @@ function SongList() { width={width} rowHeight={100} columnWidth={window.innerWidth > 950 ? width / 2 - 8 : width - 8} - columnCount={numColumns.current} + columnCount={numColumns} rowCount={numRows.current} itemData={finalList} style={{ overflowX: "hidden" }} diff --git a/src/index.css b/src/index.scss similarity index 80% rename from src/index.css rename to src/index.scss index 95f7b95..e10a6c0 100644 --- a/src/index.css +++ b/src/index.scss @@ -111,6 +111,31 @@ button:-moz-focusring, outline: 1px dotted ButtonText; } -.ant-card-head-title { - font-weight: bold; +/* custom scrollbar */ +::-webkit-scrollbar { + width: 20px; +} + +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #a8aebf; +} + +html[style="--chakra-ui-color-mode:light;"] { + & ::-webkit-scrollbar-thumb { + background-color: #a5acaf; + &:hover { + background-color: #888d9c; + } + } } diff --git a/src/index.tsx b/src/index.tsx index 5a0983f..a419e57 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,7 +6,7 @@ import { ChakraProvider, ColorModeScript } from "@chakra-ui/react"; import { unregister } from "./serviceWorker"; import "focus-visible/dist/focus-visible"; -import "./index.css"; +import "./index.scss"; import { customTheme } from "theme"; import App from "./App"; diff --git a/src/pages/Search/Search.scss b/src/pages/Search/Search.scss index 1f215c5..68549cc 100644 --- a/src/pages/Search/Search.scss +++ b/src/pages/Search/Search.scss @@ -8,14 +8,12 @@ .gridItemWrapper { align-items: center; - // border-bottom: 1px solid rgba(0, 0, 0, 0.12); - // border-right: 1px solid rgba(0, 0, 0, 0.12); - cursor: pointer; text-align: left; user-select: none; } .gridItem { + cursor: pointer; transition: transform 0.1s ease-in-out; will-change: transform; &:hover { diff --git a/src/pages/Search/index.tsx b/src/pages/Search/index.tsx index cf035bc..9a93a52 100644 --- a/src/pages/Search/index.tsx +++ b/src/pages/Search/index.tsx @@ -66,17 +66,18 @@ function Search() { - +