diff --git a/README.md b/README.md index b15ac16..ce61b02 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,6 @@ - Image uploads for backgrounds -- Update PATCH on links to translate from name to ID of category - - Create actions section - Fix all query/setState problems @@ -12,7 +10,6 @@ - Remove the following * hardcoded base url (trigger) * hardcoded mariadb password - * hardcoded name in greetings - Add /? help popup from search diff --git a/package-lock.json b/package-lock.json index 720b43d..d669e7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "@mantine/modals": "^7.12.1", "@tabler/icons-react": "^3.12.0", "@tanstack/react-query": "^5.51.23", - "@tanstack/react-query-devtools": "^4.36.1", + "@tanstack/react-query-devtools": "^5.0.0-alpha.91", "@tanstack/react-query-persist-client": "^5.51.23", "clsx": "^2.1.1", "dayjs": "^1.11.12", @@ -1534,6 +1534,15 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@tanstack/query-devtools": { + "version": "5.0.0-alpha.89", + "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.0.0-alpha.89.tgz", + "integrity": "sha512-/D7D2xq+vW1qkz/AJyD44ACsHLNtDC5/tRqozhIlpu/OOEM1RkjMiHv2IAJmWgJJ1cWm80qA5UXT4dropkUyMw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, "node_modules/@tanstack/query-persist-client-core": { "version": "5.51.21", "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.51.21.tgz", @@ -1562,22 +1571,20 @@ } }, "node_modules/@tanstack/react-query-devtools": { - "version": "4.36.1", - "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.36.1.tgz", - "integrity": "sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==", + "version": "5.0.0-alpha.91", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.0.0-alpha.91.tgz", + "integrity": "sha512-nFsLJowDDuvVRX8j6iEyBZaOcD2hwHDQhbn1GnkHpZqg3EuroVIi7lKZNpzcDyKLa7a8pZTdmMbZ6Ki51JnP7w==", "dependencies": { - "@tanstack/match-sorter-utils": "^8.7.0", - "superjson": "^1.10.0", - "use-sync-external-store": "^1.2.0" + "@tanstack/query-devtools": "5.0.0-alpha.89" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/react-query": "^4.36.1", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + "@tanstack/react-query": "5.0.0-alpha.91", + "react": "^18.0.0", + "react-dom": "^18.0.0" } }, "node_modules/@tanstack/react-query-persist-client": { @@ -2170,20 +2177,6 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, - "node_modules/copy-anything": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", - "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", - "dependencies": { - "is-what": "^4.1.8" - }, - "engines": { - "node": ">=12.13" - }, - "funding": { - "url": "https://github.com/sponsors/mesqueeb" - } - }, "node_modules/cosmiconfig": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", @@ -3025,17 +3018,6 @@ "node": ">=8" } }, - "node_modules/is-what": { - "version": "4.1.16", - "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz", - "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==", - "engines": { - "node": ">=12.13" - }, - "funding": { - "url": "https://github.com/sponsors/mesqueeb" - } - }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -3976,17 +3958,6 @@ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" }, - "node_modules/superjson": { - "version": "1.13.3", - "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.3.tgz", - "integrity": "sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==", - "dependencies": { - "copy-anything": "^3.0.2" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -4219,14 +4190,6 @@ } } }, - "node_modules/use-sync-external-store": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", - "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/vite": { "version": "5.4.0", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz", diff --git a/package.json b/package.json index d8b9b05..4632785 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@mantine/modals": "^7.12.1", "@tabler/icons-react": "^3.12.0", "@tanstack/react-query": "^5.51.23", - "@tanstack/react-query-devtools": "^4.36.1", + "@tanstack/react-query-devtools": "^5.0.0-alpha.91", "@tanstack/react-query-persist-client": "^5.51.23", "clsx": "^2.1.1", "dayjs": "^1.11.12", diff --git a/src/App.tsx b/src/App.tsx index 0b136b1..fdc04a5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,7 @@ import Settings from './pages/settings/Settings'; import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT import '@mantine/dates/styles.css'; //if using mantine date picker features import 'mantine-react-table/styles.css'; //import MRT styles +import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { useAtom } from 'jotai'; import { appTheme } from './contexts/theme'; @@ -34,7 +35,6 @@ function App() { }); const [theme, setTheme] = useAtom(appTheme); - useEffect(() => { if (data && themeName) { const temp = data.find((t: any) => t.name === themeName); @@ -64,6 +64,7 @@ function App() { + diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx index 7e5400a..c47e286 100644 --- a/src/DataTable/DataTable.tsx +++ b/src/DataTable/DataTable.tsx @@ -100,7 +100,7 @@ export function DataTableComponent({ ), mantineCreateRowModalProps: { style: { - color: theme.primary, + color: theme.primaryColor, }, }, renderTopToolbarCustomActions: ({ table }) => { diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index c268bde..2f9c980 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -7,10 +7,10 @@ export default function ThemeProvider({ return ( callEndpoint(method, endpoint, body), - onMutate: () => {}, - onSuccess: (data, variables) => { - queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] }); - - if (variables.endpoint.includes('/')) { - if ((variables.endpoint.match(/\//g) || []).length > 2) { - const GetEndpoint = variables.endpoint.split('/'); - const Endpoint = `${GetEndpoint[1]}/${GetEndpoint[2]}`; - queryClient.invalidateQueries({ queryKey: ['GET', `/${Endpoint}`] }); - } else { - const GetEndpoint = variables.endpoint.split('/')[1]; - queryClient.invalidateQueries({ - queryKey: ['GET', `/${GetEndpoint}`], - }); - } - } + onMutate: () => { + queryClient.invalidateQueries(); + }, + onSuccess: () => { + queryClient.invalidateQueries(); }, }); } diff --git a/src/pages/homepage/components/Applications.tsx b/src/pages/homepage/components/Applications.tsx index 23c890f..9b2fe50 100644 --- a/src/pages/homepage/components/Applications.tsx +++ b/src/pages/homepage/components/Applications.tsx @@ -14,7 +14,7 @@ function Applications({ contentType }: any) { }, [isFetching]); return ( <> - {applications.length > 0 && ( + {applications.length > 0 && contentType.length > 0 && ( Applications diff --git a/src/pages/homepage/components/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks.tsx index 2a5efe1..4fccf07 100644 --- a/src/pages/homepage/components/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks.tsx @@ -22,40 +22,43 @@ function Links({ contentType }: any) { }, [linksIsFetched, groupsIsFetched]); return ( <> - {groupsIsFetched && linksIsFetched && categories?.length > 0 && ( - - - Bookmarks - - - {categories.map((category: any) => { - if ( - contentType.includes(category.filterName) || - contentType.includes('All') - ) { - return ( - bookmark.category === category.categoryName, - )} - /> - ); - } - })} + {groupsIsFetched && + linksIsFetched && + categories?.length > 0 && + contentType.length > 0 && ( + + + Bookmarks + + + {categories.map((category: any) => { + if ( + contentType.includes(category.filterName) || + contentType.includes('All') + ) { + return ( + bookmark.category === category.categoryName, + )} + /> + ); + } + })} + - - )} + )} ); } diff --git a/src/pages/homepage/components/Search.tsx b/src/pages/homepage/components/Search.tsx index 59d361b..6ca5cf0 100644 --- a/src/pages/homepage/components/Search.tsx +++ b/src/pages/homepage/components/Search.tsx @@ -1,15 +1,18 @@ -import { Stack, TextInput } from '@mantine/core'; +import { Divider, Group, Modal, Stack, Text, TextInput } from '@mantine/core'; +import { useDisclosure } from '@mantine/hooks'; +import { useAtom } from 'jotai'; import { useState } from 'react'; +import { appTheme } from '../../../contexts/theme'; import { useQueryAPI } from '../../../hooks'; -import { textInputClasses } from '../../../styles'; +import { modalClasses, textInputClasses } from '../../../styles'; export default function Search() { const { data: providers } = useQueryAPI({ endpoint: 'api/providers' }); - + const [opened, { open: openModal, close: closeModal }] = useDisclosure(false); const [providerLabel, setProviderLabel] = useState('Google Search'); const [providerURL, setProviderURL] = useState('https://www.google.com/search?q='); const [value, setValue] = useState(''); - + const [theme, setTheme] = useAtom(appTheme); const handleKeyPress = (item: any) => { let option = ''; let subtext = ''; @@ -22,7 +25,9 @@ export default function Search() { subtext = item.target.value; } if (item.key === 'Enter') { - if (item.target.value.startsWith('/')) { + if (providerLabel === 'Show help') { + openModal(); + } else if (item.target.value.startsWith('/')) { open(`${providerURL}${subtext}`, '_self'); } else if (validURL(item.target.value)) { if (containsProtocol(item.target.value)) window.location = item.target.value; @@ -72,7 +77,9 @@ export default function Search() { data-active={value !== ''} onChange={(item: any) => { setValue(item.currentTarget.value); - if (item.target.value.startsWith('/')) { + if (item.target.value === '/?') { + setProviderLabel('Show help'); + } else if (item.target.value.startsWith('/')) { const provider = providers?.find( (p: any) => p.prefix === item.target.value.split(' ')[0], ); @@ -89,6 +96,48 @@ export default function Search() { } }} /> + { + closeModal(); + setValue(''); + setProviderLabel('Google Search'); + setProviderURL('https://www.google.com/search?q='); + }} + style={{ + '--color-text-pri': theme.primaryColor, + '--color-text-acc': theme.accentColor, + '--color-background': theme.backgroundColor, + '--color-border': theme.borderColor, + '--color-search-background': theme.searchColor, + '--image-background': `url(${theme.backgroundImage})`, + }} + closeOnEscape + closeOnClickOutside + > + + + + Help info + + + + +

Search Providers

+ + {providers?.map((provider: any) => ( + + {provider.prefix} + {provider.name} + + ))} + + + + ); } diff --git a/src/pages/settings/components/Applications.tsx b/src/pages/settings/components/Applications.tsx index 317df0f..10f5edf 100644 --- a/src/pages/settings/components/Applications.tsx +++ b/src/pages/settings/components/Applications.tsx @@ -16,7 +16,7 @@ const ApplicationSettings = () => { if (isFetched) { setApplicationData(data); } - }); + }, [data, isFetching]); return ( diff --git a/src/pages/settings/components/Categories.tsx b/src/pages/settings/components/Categories.tsx index 5fa270e..f35797c 100644 --- a/src/pages/settings/components/Categories.tsx +++ b/src/pages/settings/components/Categories.tsx @@ -12,10 +12,10 @@ const CategorySettings = () => { const [categoryData, setCategoryData] = useState([]); useEffect(() => { - if (isFetched) { + if (data && isFetched) { setCategoryData(data); } - }); + }, [data, isFetched]); return ( diff --git a/src/pages/settings/components/ThemeModalContent.tsx b/src/pages/settings/components/ThemeModalContent.tsx index c3b17a2..a5d221d 100644 --- a/src/pages/settings/components/ThemeModalContent.tsx +++ b/src/pages/settings/components/ThemeModalContent.tsx @@ -22,7 +22,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { }} > @@ -97,7 +98,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { textTransform: 'uppercase', marginTop: '20px', marginBottom: '20px', - color: selectedTheme.primary, + color: selectedTheme.primaryColor, }} > Applications @@ -134,7 +135,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { textTransform: 'uppercase', marginTop: '20px', marginBottom: '20px', - color: selectedTheme.primary, + color: selectedTheme.primaryColor, }} > Bookmarks @@ -166,7 +167,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { fontWeight: 400, height: '10px', width: 'auto', - color: selectedTheme.accent, + color: selectedTheme.accentColor, textTransform: 'uppercase', marginTop: '20px', marginBottom: '20px', @@ -179,7 +180,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { display: 'block', fontSize: '14px', lineHeight: 2, - color: selectedTheme.primary, + color: selectedTheme.primaryColor, }} component='a' > @@ -190,7 +191,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { display: 'block', fontSize: '14px', lineHeight: 2, - color: selectedTheme.primary, + color: selectedTheme.primaryColor, }} component='a' > @@ -213,7 +214,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { fontWeight: 400, height: '10px', width: 'auto', - color: selectedTheme.accent, + color: selectedTheme.accentColor, textTransform: 'uppercase', marginTop: '20px', marginBottom: '20px', @@ -226,7 +227,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { display: 'block', fontSize: '14px', lineHeight: 2, - color: selectedTheme.primary, + color: selectedTheme.primaryColor, }} component='a' > @@ -237,7 +238,7 @@ export default function ThemeModalContent({ selectedTheme }: any) { display: 'block', fontSize: '14px', lineHeight: 2, - color: selectedTheme.primary, + color: selectedTheme.primaryColor, }} component='a' > diff --git a/src/pages/settings/components/Themes.tsx b/src/pages/settings/components/Themes.tsx index cb7fef7..8b4f6d1 100644 --- a/src/pages/settings/components/Themes.tsx +++ b/src/pages/settings/components/Themes.tsx @@ -32,7 +32,7 @@ function ThemesSettings({ theme }: any) { const [colorValue, setColorValue] = useState('#000000'); const [value, setValue] = useLocalStorage({ key: 'theme', - defaultValue: {}, + defaultValue: 'blackboard', }); const { data, isFetched } = useQueryAPI({ endpoint: 'api/themes', @@ -88,6 +88,14 @@ function ThemesSettings({ theme }: any) { classNames={modalClasses} opened={opened} onClose={handleClose} + style={{ + '--color-text-pri': theme.primaryColor, + '--color-text-acc': theme.accentColor, + '--color-background': theme.backgroundColor, + '--color-border': theme.borderColor, + '--color-search-background': theme.searchColor, + '--image-background': `url(${theme.backgroundImage})`, + }} > @@ -106,11 +114,7 @@ function ThemesSettings({ theme }: any) { } styles={{ label: { - color: 'black', - }, - input: { - color: 'black', - backgroundColor: 'white', + color: theme.primaryColor, }, }} /> @@ -118,35 +122,41 @@ function ThemesSettings({ theme }: any) { - Primary Color + + Primary Color + { - setColorId('primary'); + setColorId('primaryColor'); openPicker(); - setColorValue(selectedTheme.primary); + setColorValue(selectedTheme.primaryColor); }} radius={'sm'} w={'100px'} - color={selectedTheme.primary} + color={selectedTheme.primaryColor} style={{ cursor: 'pointer' }} /> - Accent Color + + Accent Color + { - setColorId('accent'); + setColorId('accentColor'); openPicker(); - setColorValue(selectedTheme.accent); + setColorValue(selectedTheme.accentColor); }} radius={'sm'} w={'100px'} - color={selectedTheme.accent} + color={selectedTheme.accentColor} style={{ cursor: 'pointer' }} /> - Background Color + + Background Color + { setColorId('background'); @@ -160,24 +170,28 @@ function ThemesSettings({ theme }: any) { /> - Border Color + + Border Color + { - setColorId('border'); + setColorId('borderColor'); openPicker(); - setColorValue(selectedTheme.border); + setColorValue(selectedTheme.borderColor); }} radius={'sm'} w={'100px'} - color={selectedTheme.border} + color={selectedTheme.borderColor} style={{ cursor: 'pointer' }} /> - Search Background Color + + Search Background Color + { - setColorId('searchbackground'); + setColorId('searchBackground'); openPicker(); setColorValue(selectedTheme.searchColor); }} @@ -199,11 +213,7 @@ function ThemesSettings({ theme }: any) { } styles={{ label: { - color: 'black', - }, - input: { - color: 'black', - backgroundColor: 'white', + color: theme.primaryColor, }, }} /> @@ -214,22 +224,26 @@ function ThemesSettings({ theme }: any) { <> - {colorValue} + setColorValue(e.target.value)} + />