From 7990f164d63d9c99ff9c17bc68b555a300804ab1 Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Tue, 20 Aug 2024 16:28:46 -0500 Subject: [PATCH] Linted --- .eslintrc.cjs | 17 +- biome.json | 52 +++++ src/App.tsx | 65 +++--- src/DataTable/DataTable.tsx | 66 +++--- src/DataTable/columns/ApplicationColumns.tsx | 52 ++--- src/DataTable/columns/BookmarkColumns.tsx | 38 ++-- src/DataTable/columns/CategoryColumns.tsx | 28 +-- src/DataTable/columns/MessagesColumns.tsx | 28 +-- .../columns/PersonalizationColumns.tsx | 28 +-- .../columns/SearchProviderColumns.tsx | 28 +-- src/components/ThemeProvider.tsx | 13 +- src/components/ToastError.tsx | 6 +- src/contexts/HomepageFilters.ts | 4 +- src/contexts/theme.ts | 4 +- src/hooks/index.ts | 2 +- src/hooks/useAPI.ts | 188 ++++++++------- src/index.css | 4 + src/main.tsx | 10 +- src/pages/homepage/Homepage.tsx | 44 ++-- src/pages/homepage/components/AppItem.tsx | 34 +-- .../homepage/components/Applications.tsx | 36 +-- src/pages/homepage/components/Bookmarks.tsx | 36 ++- src/pages/homepage/components/Header.tsx | 38 ++-- src/pages/homepage/components/LinkGroups.tsx | 12 +- src/pages/homepage/components/LinkItem.tsx | 11 +- src/pages/homepage/components/MessageInfo.jsx | 10 +- src/pages/homepage/components/Search.tsx | 85 ++++--- .../homepage/components/SettingsButton.tsx | 44 ++-- src/pages/settings/Settings.tsx | 60 ++--- .../settings/components/Applications.tsx | 16 +- src/pages/settings/components/Bookmarks.tsx | 18 +- src/pages/settings/components/Categories.tsx | 16 +- src/pages/settings/components/Messages.tsx | 16 +- .../settings/components/Personalization.tsx | 16 +- .../settings/components/SearchProviders.tsx | 16 +- .../settings/components/ThemeModalContent.tsx | 204 ++++++++--------- src/pages/settings/components/Themes.tsx | 215 ++++++++++-------- src/styles/index.ts | 22 +- vite.config.ts | 14 +- 39 files changed, 824 insertions(+), 772 deletions(-) create mode 100644 biome.json diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 30af7ce..1b0ddd2 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -2,17 +2,14 @@ module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react-hooks/recommended", + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', ], - ignorePatterns: ["dist", ".eslintrc.cjs"], - parser: "@typescript-eslint/parser", - plugins: ["react-refresh"], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], rules: { - "react-refresh/only-export-components": [ - "warn", - { allowConstantExport: true }, - ], + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], }, }; diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..eeb4374 --- /dev/null +++ b/biome.json @@ -0,0 +1,52 @@ +{ + "$schema": "./node_modules/@biomejs/biome/configuration_schema.json", + "organizeImports": { + "enabled": true + }, + "files": { + "ignore": ["./node_modules/", "./dist/", "./.nx/"], + "ignoreUnknown": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "a11y": { + "noSvgWithoutTitle": "off", + "all": true + }, + "complexity": { + "noUselessTypeConstraint": "off", + "recommended": true + }, + "suspicious": { + "noExplicitAny": "off", + "noConsoleLog": "error", + "noImplicitAnyLet": "off", + "recommended": true + }, + "correctness": { + "useExhaustiveDependencies": "off", + "noUnusedImports": "error", + "recommended": true + }, + "performance": { + "noDelete": "off", + "recommended": true + } + } + }, + "formatter": { + "enabled": true, + "formatWithErrors": false, + "indentStyle": "tab", + "indentWidth": 2, + "lineWidth": 90 + }, + "javascript": { + "formatter": { + "quoteStyle": "single", + "jsxQuoteStyle": "single" + } + } +} diff --git a/src/App.tsx b/src/App.tsx index f64097d..01e54ed 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,36 +1,36 @@ -import Homepage from "./pages/homepage/Homepage"; import { - MantineProvider, DEFAULT_THEME, + MantineProvider, createTheme, mergeMantineTheme, -} from "@mantine/core"; +} from '@mantine/core'; +import { useLocalStorage } from '@mantine/hooks'; +import { ModalsProvider } from '@mantine/modals'; +import { useEffect } from 'react'; import { Route, + RouterProvider, createBrowserRouter, createRoutesFromElements, - RouterProvider, -} from "react-router-dom"; -import Settings from "./pages/settings/Settings"; -import { ModalsProvider } from "@mantine/modals"; -import { useLocalStorage } from "@mantine/hooks"; -import { useEffect, useState } from "react"; -import { useQueryAPI } from "./hooks/useAPI"; -import ThemeProvider from "./components/ThemeProvider"; -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 { appTheme } from "./contexts/theme"; -import { useAtom } from "jotai"; +} from 'react-router-dom'; +import ThemeProvider from './components/ThemeProvider'; +import { useQueryAPI } from './hooks/useAPI'; +import Homepage from './pages/homepage/Homepage'; +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 { useAtom } from 'jotai'; +import { appTheme } from './contexts/theme'; function App() { const { data, isFetched } = useQueryAPI({ - endpoint: "api/themes", + endpoint: 'api/themes', }); const [themeName, setThemeName] = useLocalStorage({ - key: "theme", - defaultValue: "blackboard", + key: 'theme', + defaultValue: 'blackboard', }); const [theme, setTheme] = useAtom(appTheme); @@ -45,38 +45,31 @@ function App() { const router = createBrowserRouter( createRoutesFromElements( - } /> - } - /> + } /> + } /> , ), ); const overrides = createTheme({ white: theme?.colorbackground, - fontFamily: - "-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif", + fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', }); const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); - return ( <> - {theme && ( + {theme && ( - - - - - + + + + + )} - - ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx index 3c2c345..c49e0fb 100644 --- a/src/DataTable/DataTable.tsx +++ b/src/DataTable/DataTable.tsx @@ -1,19 +1,19 @@ import { + type MRT_Row, + type MRT_TableOptions, MantineReactTable, - MRT_Row, - MRT_TableOptions, useMantineReactTable, -} from "mantine-react-table"; -import { memo } from "react"; -import "../dataTableStyles.css"; -import { ActionIcon, Button, Flex, Text } from "@mantine/core"; -import { FiPlus } from "react-icons/fi"; -import { IconEdit, IconTrash } from "@tabler/icons-react"; -import { useMutationAPI } from "../hooks/useAPI"; -import { modals } from "@mantine/modals"; -import { actionIconClasses, buttonClasses } from "../styles"; -import { appTheme } from "../contexts/theme"; -import { useAtom } from "jotai"; +} from 'mantine-react-table'; +import { memo } from 'react'; +import '../dataTableStyles.css'; +import { ActionIcon, Button, Flex, Text } from '@mantine/core'; +import { modals } from '@mantine/modals'; +import { IconEdit, IconTrash } from '@tabler/icons-react'; +import { useAtom } from 'jotai'; +import { FiPlus } from 'react-icons/fi'; +import { appTheme } from '../contexts/theme'; +import { useMutationAPI } from '../hooks/useAPI'; +import { actionIconClasses, buttonClasses } from '../styles'; export function DataTableComponent({ tableName, @@ -34,29 +34,28 @@ export function DataTableComponent({ const { mutateAsync: createRow } = useMutationAPI(); const { mutateAsync: editRow } = useMutationAPI(); const { mutateAsync: deleteRow } = useMutationAPI(); - const handleCreateRow: MRT_TableOptions["onCreatingRowSave"] = async ({ + const handleCreateRow: MRT_TableOptions['onCreatingRowSave'] = async ({ values, exitCreatingMode, }) => { - createRow({ method: "POST", endpoint: endpoint, body: values }); + createRow({ method: 'POST', endpoint: endpoint, body: values }); exitCreatingMode(); }; - const handleEditRow: MRT_TableOptions["onEditingRowSave"] = async ({ + const handleEditRow: MRT_TableOptions['onEditingRowSave'] = async ({ values, table, }) => { - editRow({ method: "PATCH", endpoint: endpoint, body: values }); + editRow({ method: 'PATCH', endpoint: endpoint, body: values }); table.setEditingRow(null); }; -console.log(theme) const openDeleteConfirmModal = (row: MRT_Row) => modals.openConfirmModal({ - title: "Are you sure you want to delete this user?", + title: 'Are you sure you want to delete this user?', children: Are you sure?, - labels: { confirm: "Delete", cancel: "Cancel" }, - confirmProps: { color: "red" }, + labels: { confirm: 'Delete', cancel: 'Cancel' }, + confirmProps: { color: 'red' }, onConfirm: () => - deleteRow({ method: "DELETE", endpoint: endpoint, body: row.original }), + deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }), }); const table = useMantineReactTable({ columns: columns, @@ -65,8 +64,8 @@ console.log(theme) enablePagination: false, enableRowVirtualization: true, enableEditing: true, - createDisplayMode: "modal", - editDisplayMode: "row", + createDisplayMode: 'modal', + editDisplayMode: 'row', enableBottomToolbar: false, enableToolbarInternalActions: false, onCreatingRowSave: handleCreateRow, @@ -82,13 +81,17 @@ console.log(theme) showLoadingOverlay: isLoading, isLoading: isLoading, }, - mantinePaperProps: {className: 'root'}, + mantinePaperProps: { className: 'root' }, renderRowActions: ({ row, table }) => ( - - table.setEditingRow(row)}> + + table.setEditingRow(row)} + > - openDeleteConfirmModal(row)}> + openDeleteConfirmModal(row)}> @@ -100,7 +103,12 @@ console.log(theme) }, renderTopToolbarCustomActions: ({ table }) => { return ( - ); diff --git a/src/DataTable/columns/ApplicationColumns.tsx b/src/DataTable/columns/ApplicationColumns.tsx index ebfaec4..dd070e7 100644 --- a/src/DataTable/columns/ApplicationColumns.tsx +++ b/src/DataTable/columns/ApplicationColumns.tsx @@ -1,5 +1,5 @@ -import type { MRT_ColumnDef } from "mantine-react-table"; -import { useMemo } from "react"; +import type { MRT_ColumnDef } from 'mantine-react-table'; +import { useMemo } from 'react'; export default function ApplicationColumns() { const columns = useMemo[]>( @@ -9,14 +9,14 @@ export default function ApplicationColumns() { if (row.id) { return `${row.id}`; } - return ""; + return ''; }, enableEditing: false, - id: "id", - header: "ID", + id: 'id', + header: 'ID', size: 50, mantineCopyButtonProps: ({ cell, row }) => ({ - className: "id", + className: 'id', id: `${cell.getValue()}-id`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -27,12 +27,12 @@ export default function ApplicationColumns() { if (row.name) { return `${row.name}`; } - return ""; + return ''; }, - id: "name", - header: "Name", + id: 'name', + header: 'Name', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "name", + className: 'name', id: `${cell.getValue()}-name`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -43,12 +43,12 @@ export default function ApplicationColumns() { if (row.url) { return `${row.url}`; } - return ""; + return ''; }, - id: "url", - header: "Url", + id: 'url', + header: 'Url', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "url", + className: 'url', id: `${cell.getValue()}-url`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -59,12 +59,12 @@ export default function ApplicationColumns() { if (row.icon) { return `${row.icon}`; } - return ""; + return ''; }, - id: "icon", - header: "Icon", + id: 'icon', + header: 'Icon', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "icon", + className: 'icon', id: `${cell.getValue()}-icon`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -75,12 +75,12 @@ export default function ApplicationColumns() { if (row.urlbase) { return `${row.urlbase}`; } - return ""; + return ''; }, - id: "urlbase", - header: "Base Url", + id: 'urlbase', + header: 'Base Url', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "urlbase", + className: 'urlbase', id: `${cell.getValue()}-urlbase`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -91,12 +91,12 @@ export default function ApplicationColumns() { if (row.category) { return `${row.category}`; } - return ""; + return ''; }, - id: "category", - header: "Category", + id: 'category', + header: 'Category', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "category", + className: 'category', id: `${cell.getValue()}-category`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, diff --git a/src/DataTable/columns/BookmarkColumns.tsx b/src/DataTable/columns/BookmarkColumns.tsx index 6bfe615..39edb40 100644 --- a/src/DataTable/columns/BookmarkColumns.tsx +++ b/src/DataTable/columns/BookmarkColumns.tsx @@ -1,5 +1,5 @@ -import type { MRT_ColumnDef } from "mantine-react-table"; -import { useMemo } from "react"; +import type { MRT_ColumnDef } from 'mantine-react-table'; +import { useMemo } from 'react'; export default function ApplicationColumns(groups: any, groupData: any) { const columns = useMemo[]>( @@ -9,14 +9,14 @@ export default function ApplicationColumns(groups: any, groupData: any) { if (row.id) { return `${row.id}`; } - return ""; + return ''; }, enableEditing: false, - id: "id", - header: "ID", + id: 'id', + header: 'ID', size: 50, mantineCopyButtonProps: ({ cell, row }) => ({ - className: "id", + className: 'id', id: `${cell.getValue()}-id`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -27,12 +27,12 @@ export default function ApplicationColumns(groups: any, groupData: any) { if (row.name) { return `${row.name}`; } - return ""; + return ''; }, - id: "name", - header: "Name", + id: 'name', + header: 'Name', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "name", + className: 'name', id: `${cell.getValue()}-name`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -43,12 +43,12 @@ export default function ApplicationColumns(groups: any, groupData: any) { if (row.url) { return `${row.url}`; } - return ""; + return ''; }, - id: "url", - header: "Url", + id: 'url', + header: 'Url', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "url", + className: 'url', id: `${cell.getValue()}-url`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -60,14 +60,14 @@ export default function ApplicationColumns(groups: any, groupData: any) { if (index !== null && index !== undefined) { return `${index}`; } - return "N/A"; + return 'N/A'; }, - id: "category", - header: "Category", - editVariant: "select", + id: 'category', + header: 'Category', + editVariant: 'select', mantineEditSelectProps: { data: groups }, mantineCopyButtonProps: ({ cell, row }) => ({ - className: "category", + className: 'category', id: `${cell.getValue()}-category`, }), Cell: ({ renderedCellValue, row }) => diff --git a/src/DataTable/columns/CategoryColumns.tsx b/src/DataTable/columns/CategoryColumns.tsx index b9a8ccf..8ab175f 100644 --- a/src/DataTable/columns/CategoryColumns.tsx +++ b/src/DataTable/columns/CategoryColumns.tsx @@ -1,5 +1,5 @@ -import type { MRT_ColumnDef } from "mantine-react-table"; -import { useMemo } from "react"; +import type { MRT_ColumnDef } from 'mantine-react-table'; +import { useMemo } from 'react'; export default function CategoryColumns() { const columns = useMemo[]>( @@ -9,11 +9,11 @@ export default function CategoryColumns() { if (row.id) { return `${row.id}`; } - return ""; + return ''; }, enableEditing: false, - id: "id", - header: "ID", + id: 'id', + header: 'ID', size: 50, Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, @@ -23,10 +23,10 @@ export default function CategoryColumns() { if (row.category_name) { return `${row.category_name}`; } - return ""; + return ''; }, - id: "category_name", - header: "Name", + id: 'category_name', + header: 'Name', size: 50, Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, @@ -36,11 +36,11 @@ export default function CategoryColumns() { if (row.category_index > -1) { return `${row.category_index}`; } - return ""; + return ''; }, enableEditing: false, - id: "category_index", - header: "Index", + id: 'category_index', + header: 'Index', size: 50, Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, @@ -50,10 +50,10 @@ export default function CategoryColumns() { if (row.column_filter) { return `${row.column_filter}`; } - return ""; + return ''; }, - id: "column_filter", - header: "Filter Name", + id: 'column_filter', + header: 'Filter Name', size: 50, Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, diff --git a/src/DataTable/columns/MessagesColumns.tsx b/src/DataTable/columns/MessagesColumns.tsx index 7d9b6e7..0945142 100644 --- a/src/DataTable/columns/MessagesColumns.tsx +++ b/src/DataTable/columns/MessagesColumns.tsx @@ -1,5 +1,5 @@ -import type { MRT_ColumnDef } from "mantine-react-table"; -import { useMemo } from "react"; +import type { MRT_ColumnDef } from 'mantine-react-table'; +import { useMemo } from 'react'; export default function MessagesColumns() { const columns = useMemo[]>( @@ -9,14 +9,14 @@ export default function MessagesColumns() { if (row.id) { return `${row.id}`; } - return ""; + return ''; }, enableEditing: false, - id: "id", - header: "ID", + id: 'id', + header: 'ID', size: 50, mantineCopyButtonProps: ({ cell, row }) => ({ - className: "id", + className: 'id', id: `${cell.getValue()}-id`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -27,12 +27,12 @@ export default function MessagesColumns() { if (row.message) { return `${row.message}`; } - return ""; + return ''; }, - id: "message", - header: "Message", + id: 'message', + header: 'Message', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "message", + className: 'message', id: `${cell.getValue()}-message`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -43,12 +43,12 @@ export default function MessagesColumns() { if (row.easteregg) { return `${row.easteregg}`; } - return ""; + return ''; }, - id: "easteregg", - header: "Easter Egg?", + id: 'easteregg', + header: 'Easter Egg?', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "easteregg", + className: 'easteregg', id: `${cell.getValue()}-easteregg`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, diff --git a/src/DataTable/columns/PersonalizationColumns.tsx b/src/DataTable/columns/PersonalizationColumns.tsx index 1572e13..d2d6e8f 100644 --- a/src/DataTable/columns/PersonalizationColumns.tsx +++ b/src/DataTable/columns/PersonalizationColumns.tsx @@ -1,5 +1,5 @@ -import type { MRT_ColumnDef } from "mantine-react-table"; -import { useMemo } from "react"; +import type { MRT_ColumnDef } from 'mantine-react-table'; +import { useMemo } from 'react'; export default function PersonalizationColumns() { const columns = useMemo[]>( @@ -9,13 +9,13 @@ export default function PersonalizationColumns() { if (row.firstname) { return `${row.firstname}`; } - return ""; + return ''; }, - id: "firstname", - header: "First Name", + id: 'firstname', + header: 'First Name', size: 50, mantineCopyButtonProps: ({ cell, row }) => ({ - className: "firstname", + className: 'firstname', id: `${cell.getValue()}-firstname`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -26,12 +26,12 @@ export default function PersonalizationColumns() { if (row.lastname) { return `${row.lastname}`; } - return ""; + return ''; }, - id: "lastname", - header: "Last Name", + id: 'lastname', + header: 'Last Name', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "lastname", + className: 'lastname', id: `${cell.getValue()}-lastname`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, @@ -42,12 +42,12 @@ export default function PersonalizationColumns() { if (row.email) { return `${row.email}`; } - return ""; + return ''; }, - id: "email", - header: "Email", + id: 'email', + header: 'Email', mantineCopyButtonProps: ({ cell, row }) => ({ - className: "email", + className: 'email', id: `${cell.getValue()}-email`, }), Cell: ({ renderedCellValue, row }) => renderedCellValue, diff --git a/src/DataTable/columns/SearchProviderColumns.tsx b/src/DataTable/columns/SearchProviderColumns.tsx index f1b75b8..011ed8a 100644 --- a/src/DataTable/columns/SearchProviderColumns.tsx +++ b/src/DataTable/columns/SearchProviderColumns.tsx @@ -1,5 +1,5 @@ -import type { MRT_ColumnDef } from "mantine-react-table"; -import { useMemo } from "react"; +import type { MRT_ColumnDef } from 'mantine-react-table'; +import { useMemo } from 'react'; export default function SearchProviderColumns() { const columns = useMemo[]>( @@ -9,11 +9,11 @@ export default function SearchProviderColumns() { if (row.id) { return `${row.id}`; } - return ""; + return ''; }, enableEditing: false, - id: "id", - header: "ID", + id: 'id', + header: 'ID', size: 50, Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, @@ -23,10 +23,10 @@ export default function SearchProviderColumns() { if (row.name) { return `${row.name}`; } - return ""; + return ''; }, - id: "name", - header: "Name", + id: 'name', + header: 'Name', Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, }, @@ -35,10 +35,10 @@ export default function SearchProviderColumns() { if (row.url) { return `${row.url}`; } - return ""; + return ''; }, - id: "url", - header: "Url", + id: 'url', + header: 'Url', Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, }, @@ -47,10 +47,10 @@ export default function SearchProviderColumns() { if (row.prefix) { return `${row.prefix}`; } - return ""; + return ''; }, - id: "prefix", - header: "Prefix", + id: 'prefix', + header: 'Prefix', Cell: ({ renderedCellValue, row }) => renderedCellValue, Header: ({ column }) => column.columnDef.header, }, diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index 81c7edc..9bf23c2 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -1,4 +1,4 @@ -import { Box } from "@mantine/core"; +import { Box } from '@mantine/core'; export default function ThemeProvider({ theme, @@ -7,11 +7,12 @@ export default function ThemeProvider({ return ( {children} diff --git a/src/components/ToastError.tsx b/src/components/ToastError.tsx index a042497..dfa5273 100644 --- a/src/components/ToastError.tsx +++ b/src/components/ToastError.tsx @@ -1,10 +1,10 @@ -import { Stack, Text } from "@mantine/core"; -import { stackClasses } from "../styles"; +import { Stack, Text } from '@mantine/core'; +import { stackClasses } from '../styles'; export function ToastError({ err }: { err: any }) { const errorResponse = JSON.parse(err.message); return ( - + Status: {errorResponse.status} {errorResponse.statusText} diff --git a/src/contexts/HomepageFilters.ts b/src/contexts/HomepageFilters.ts index 4f38add..ac3a585 100644 --- a/src/contexts/HomepageFilters.ts +++ b/src/contexts/HomepageFilters.ts @@ -1,3 +1,3 @@ -import { atom } from "jotai"; +import { atom } from 'jotai'; -export const HomepageFilters = atom([{ value: "All", label: "All" }]); +export const HomepageFilters = atom([{ value: 'All', label: 'All' }]); diff --git a/src/contexts/theme.ts b/src/contexts/theme.ts index bdfdc46..6412db6 100644 --- a/src/contexts/theme.ts +++ b/src/contexts/theme.ts @@ -1,5 +1,5 @@ -import { atom } from "jotai"; +import { atom } from 'jotai'; const appTheme = atom({}); -export { appTheme } +export { appTheme }; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 7f2993e..3216b38 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1 +1 @@ -export { useQueryAPI } from "./useAPI"; +export { useQueryAPI } from './useAPI'; diff --git a/src/hooks/useAPI.ts b/src/hooks/useAPI.ts index 040c69c..050a0ec 100644 --- a/src/hooks/useAPI.ts +++ b/src/hooks/useAPI.ts @@ -1,25 +1,25 @@ import { + useInfiniteQuery, + useMutation, useQuery, useQueryClient, - useMutation, - useInfiniteQuery, -} from "@tanstack/react-query"; -import { useCallback } from "react"; -import { toast } from "react-toastify"; +} from '@tanstack/react-query'; +import { useCallback } from 'react'; +import { toast } from 'react-toastify'; export function useQueryAPI({ endpoint }: { endpoint: string }) { const callEndpoint = async (endpoint: string) => { const url = `http://localhost:5000/trigger/${endpoint}`; const options: object = { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", - "Access-Control-Allow-Origin": "*", - "Access-Control-Allow-Headers": "*", - "Access-Control-Allow-Methods": "POST, GET, OPTIONS", - "Access-Control-Allow-Credentials": true, - "Sec-Fetch-Mode": "no-cors", - "Sec-Fetch-Site": "same-site", + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', + 'Access-Control-Allow-Credentials': true, + 'Sec-Fetch-Mode': 'no-cors', + 'Sec-Fetch-Site': 'same-site', }, }; @@ -31,7 +31,7 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) { }; return useQuery({ - queryKey: ["GET", endpoint], + queryKey: ['GET', endpoint], queryFn: () => callEndpoint(endpoint), }); } @@ -46,13 +46,13 @@ export function useMutationAPI() { const options: any = { method: method, headers: { - "Content-Type": "application/json", - "Access-Control-Allow-Origin": "*", - "Access-Control-Allow-Headers": "*", - "Access-Control-Allow-Methods": "POST, GET, OPTIONS", - "Access-Control-Allow-Credentials": true, - "Sec-Fetch-Mode": "no-cors", - "Sec-Fetch-Site": "same-site", + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', + 'Access-Control-Allow-Credentials': true, + 'Sec-Fetch-Mode': 'no-cors', + 'Sec-Fetch-Site': 'same-site', }, body: JSON.stringify(body), }; @@ -60,7 +60,7 @@ export function useMutationAPI() { const response = await fetch(url, options); if (!response.ok) { const responseData = await response.json(); - if (typeof responseData.detail !== "string") { + if (typeof responseData.detail !== 'string') { const errorResponse = JSON.stringify({ status: response.status, statusText: response.statusText, @@ -73,7 +73,7 @@ export function useMutationAPI() { throw new Error(errorResponse); } - if (typeof responseData.detail === "object") { + if (typeof responseData.detail === 'object') { const errorResponse = JSON.stringify({ status: response.status, statusText: response.statusText, @@ -110,17 +110,17 @@ export function useMutationAPI() { }) => callEndpoint(method, endpoint, body), onMutate: () => {}, onSuccess: (data, variables) => { - queryClient.invalidateQueries({ queryKey: ["GET", variables.endpoint] }); + queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] }); - if (variables.endpoint.includes("/")) { + if (variables.endpoint.includes('/')) { if ((variables.endpoint.match(/\//g) || []).length > 2) { - const GetEndpoint = variables.endpoint.split("/"); + const GetEndpoint = variables.endpoint.split('/'); const Endpoint = `${GetEndpoint[1]}/${GetEndpoint[2]}`; - queryClient.invalidateQueries({ queryKey: ["GET", `/${Endpoint}`] }); + queryClient.invalidateQueries({ queryKey: ['GET', `/${Endpoint}`] }); } else { - const GetEndpoint = variables.endpoint.split("/")[1]; + const GetEndpoint = variables.endpoint.split('/')[1]; queryClient.invalidateQueries({ - queryKey: ["GET", `/${GetEndpoint}`], + queryKey: ['GET', `/${GetEndpoint}`], }); } } @@ -139,20 +139,20 @@ export function useFileUploadAPI() { const options = { method: method, headers: { - "Content-Type": "application/json", - "Access-Control-Allow-Origin": "*", - "Access-Control-Allow-Headers": "*", - "Access-Control-Allow-Methods": "POST, GET, OPTIONS", - "Access-Control-Allow-Credentials": true, - "Sec-Fetch-Mode": "no-cors", - "Sec-Fetch-Site": "same-site", + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', + 'Access-Control-Allow-Credentials': true, + 'Sec-Fetch-Mode': 'no-cors', + 'Sec-Fetch-Site': 'same-site', }, body: body ?? undefined, }; const response = await fetch(url, options as unknown as Body); if (!response.ok) { const responseData = await response.json(); - if (typeof responseData.detail !== "string") { + if (typeof responseData.detail !== 'string') { const errorResponse = JSON.stringify({ status: response.status, statusText: response.statusText, @@ -192,10 +192,10 @@ export function useFileUploadAPI() { }) => callEndpoint(method, endpoint, body), onMutate: () => {}, onSuccess: (variables) => { - queryClient.invalidateQueries({ queryKey: ["GET", variables.endpoint] }); - if (variables.endpoint?.includes("/")) { - const GetEndpoint = variables.endpoint.split("/")[1]; - queryClient.invalidateQueries({ queryKey: ["GET", `/${GetEndpoint}`] }); + queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] }); + if (variables.endpoint?.includes('/')) { + const GetEndpoint = variables.endpoint.split('/')[1]; + queryClient.invalidateQueries({ queryKey: ['GET', `/${GetEndpoint}`] }); } }, }); @@ -210,7 +210,7 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) { const url = new URL(`http://localhost:5000/trigger/${endpoint}`); // Check and append custom query parameters from the endpoint - const customParams = new URLSearchParams(endpoint.split("?")[1]); + const customParams = new URLSearchParams(endpoint.split('?')[1]); for (const [key, value] of customParams) { if (!url.searchParams.has(key)) { url.searchParams.append(key, value); @@ -218,19 +218,19 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) { } // Add 'page' and 'size' parameters - url.searchParams.set("page", page.toString()); // Use 'set' to ensure uniqueness - url.searchParams.set("size", pageSize.toString()); + url.searchParams.set('page', page.toString()); // Use 'set' to ensure uniqueness + url.searchParams.set('size', pageSize.toString()); const options: any = { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", - "Access-Control-Allow-Origin": "*", - "Access-Control-Allow-Headers": "*", - "Access-Control-Allow-Methods": "POST, GET, OPTIONS", - "Access-Control-Allow-Credentials": true, - "Sec-Fetch-Mode": "no-cors", - "Sec-Fetch-Site": "same-site", + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', + 'Access-Control-Allow-Credentials': true, + 'Sec-Fetch-Mode': 'no-cors', + 'Sec-Fetch-Site': 'same-site', }, }; @@ -295,18 +295,18 @@ export function useFetchAllRecordsAPI({ endpoint }: { endpoint: string }) { return allItems; } catch (error) { // Handling errors in fetching the first page - console.error("Error fetching the first page:", error); + console.error('Error fetching the first page:', error); return []; // Return empty array on error } }; const invalidate = useCallback(() => { - queryClient.invalidateQueries({ queryKey: ["GET", endpoint] }); + queryClient.invalidateQueries({ queryKey: ['GET', endpoint] }); }, [queryClient, endpoint]); return { ...useQuery({ - queryKey: ["GET", endpoint], + queryKey: ['GET', endpoint], queryFn: callEndpoint, }), invalidate, @@ -323,31 +323,31 @@ export function useDownloadFile() { async ({ endpoint, file_name }: DownloadFileOptions) => { const url = `http://localhost:5000/trigger/${endpoint}`; const options: any = { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", - "Access-Control-Allow-Origin": "*", - "Access-Control-Allow-Headers": "*", - "Access-Control-Allow-Methods": "POST, GET, OPTIONS", - "Access-Control-Allow-Credentials": true, - "Sec-Fetch-Mode": "no-cors", - "Sec-Fetch-Site": "same-site", + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', + 'Access-Control-Allow-Credentials': true, + 'Sec-Fetch-Mode': 'no-cors', + 'Sec-Fetch-Site': 'same-site', }, }; - const toastID = toast.loading("Processing..."); + const toastID = toast.loading('Processing...'); try { const response = await fetch(url, options); if (!response.ok) { - throw new Error("Network response was not ok"); + throw new Error('Network response was not ok'); } const blob = await response.blob(); - if (blob.type === "application/json") { + if (blob.type === 'application/json') { const blob_text = await blob.text(); - const cleaned_text = blob_text.replace(/"/g, ""); + const cleaned_text = blob_text.replace(/"/g, ''); toast.update(toastID, { render: cleaned_text, - type: "info", + type: 'info', isLoading: false, autoClose: 5000, closeButton: null, @@ -355,11 +355,11 @@ export function useDownloadFile() { return; } - if (typeof window !== "undefined") { + if (typeof window !== 'undefined') { const blobURL = window.URL.createObjectURL(blob); - const a = document.createElement("a"); + const a = document.createElement('a'); - a.style.display = "none"; + a.style.display = 'none'; a.href = blobURL; a.download = file_name; @@ -369,17 +369,17 @@ export function useDownloadFile() { document.body.removeChild(a); toast.update(toastID, { render: `${file_name} Downloaded`, - type: "success", + type: 'success', isLoading: false, autoClose: 5000, closeButton: null, }); } } catch (error) { - console.error("Download failed:", error); + console.error('Download failed:', error); toast.update(toastID, { render: `Error Downloading ${file_name}. Please try again.`, - type: "error", + type: 'error', isLoading: false, autoClose: 5000, closeButton: null, @@ -399,27 +399,27 @@ export const useFetchInfiniteQuery = ({ endpoint: string; pageSize?: number; }) => { - const queryKey = ["GET", endpoint]; + const queryKey = ['GET', endpoint]; const fetchInfiniteQuery = async (endpoint: string) => { const url = `http://localhost:5000/trigger/${endpoint}`; const requestOptions: any = { - method: "GET", + method: 'GET', headers: { - "Content-Type": "application/json", - "Access-Control-Allow-Origin": "*", - "Access-Control-Allow-Headers": "*", - "Access-Control-Allow-Methods": "POST, GET, OPTIONS", - "Access-Control-Allow-Credentials": true, - "Sec-Fetch-Mode": "no-cors", - "Sec-Fetch-Site": "same-site", + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Headers': '*', + 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS', + 'Access-Control-Allow-Credentials': true, + 'Sec-Fetch-Mode': 'no-cors', + 'Sec-Fetch-Site': 'same-site', }, }; try { const response = await fetch(url, requestOptions); return await response.json(); } catch (error) { - console.error("Error fetching transactions:", error); + console.error('Error fetching transactions:', error); throw error; } }; @@ -431,19 +431,13 @@ export const useFetchInfiniteQuery = ({ } return allPages.length + 1; }; - const { - data, - isLoading, - isFetchingNextPage, - fetchNextPage, - isError, - isFetching, - } = useInfiniteQuery({ - queryKey, - queryFn, - getNextPageParam, - initialPageParam: 1, - }); + const { data, isLoading, isFetchingNextPage, fetchNextPage, isError, isFetching } = + useInfiniteQuery({ + queryKey, + queryFn, + getNextPageParam, + initialPageParam: 1, + }); return { data, isLoading, diff --git a/src/index.css b/src/index.css index 5cac195..f1b8018 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,9 @@ @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap'); +.root { + background-image: var(--image-background); +} + .mrt-edit-action-buttons { .mantine-Button-root[data-variant="subtle"] { color: var(--color-text-pri) !important; diff --git a/src/main.tsx b/src/main.tsx index 1354143..ed7d40d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App.tsx"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App.tsx'; const queryClient = new QueryClient({ defaultOptions: { @@ -12,7 +12,7 @@ const queryClient = new QueryClient({ }, }); -ReactDOM.createRoot(document.getElementById("root")!).render( +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx index 0d64ca8..981a624 100644 --- a/src/pages/homepage/Homepage.tsx +++ b/src/pages/homepage/Homepage.tsx @@ -1,31 +1,31 @@ -import { Stack } from "@mantine/core"; -import stackClasses from "../../styles/Stack.module.css"; -import { useQueryAPI } from "../../hooks/useAPI"; -import Search from "./components/Search"; -import Header from "./components/Header"; -import Applications from "./components/Applications"; -import Bookmarks from "./components/Bookmarks"; -import SettingsButton from "./components/SettingsButton"; -import { useEffect, useState } from "react"; -import "../../index.css"; -import { useLocalStorage } from "@mantine/hooks"; +import { Stack } from '@mantine/core'; +import { useEffect, useState } from 'react'; +import { useQueryAPI } from '../../hooks/useAPI'; +import stackClasses from '../../styles/Stack.module.css'; +import Applications from './components/Applications'; +import Bookmarks from './components/Bookmarks'; +import Header from './components/Header'; +import Search from './components/Search'; +import SettingsButton from './components/SettingsButton'; +import '../../index.css'; +import { useLocalStorage } from '@mantine/hooks'; export default function Homepage({ theme }: any) { - const { data, isFetching } = useQueryAPI({ endpoint: "api/messages" }); - const [displayedGreeting, setDisplayedGreeting] = useState(""); + const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' }); + const [displayedGreeting, setDisplayedGreeting] = useState(''); const [contentType, setContentType] = useLocalStorage({ - key: "contenttype", - defaultValue: "All", + key: 'contenttype', + defaultValue: 'All', }); function date() { const currentDate = new Date(); const dateOptions: Intl.DateTimeFormatOptions = { - weekday: "long", - year: "numeric", - month: "long", - day: "numeric", + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric', }; - const date = currentDate.toLocaleDateString("en-GB", dateOptions); + const date = currentDate.toLocaleDateString('en-GB', dateOptions); return date; } function greet(list: any) { @@ -35,7 +35,7 @@ export default function Homepage({ theme }: any) { let timeBased: any = []; let easterEggs: any = []; for (const l of list) { - if (l.easteregg === "N") { + if (l.easteregg === 'N') { timeBased = timeBased.concat(l); } else { easterEggs = easterEggs.concat(l); @@ -54,7 +54,7 @@ export default function Homepage({ theme }: any) { }, [isFetching]); return ( - +
diff --git a/src/pages/homepage/components/AppItem.tsx b/src/pages/homepage/components/AppItem.tsx index a1d55c1..af7cf43 100644 --- a/src/pages/homepage/components/AppItem.tsx +++ b/src/pages/homepage/components/AppItem.tsx @@ -1,37 +1,37 @@ -import { Icon } from "@iconify/react"; -import { Box, Stack, Text } from "@mantine/core"; -import { useState } from "react"; -import stacks from "../../../styles/Stack.module.css"; -import texts from "../../../styles/Text.module.css"; +import { Icon } from '@iconify/react'; +import { Box, Stack, Text } from '@mantine/core'; +import { useState } from 'react'; +import stacks from '../../../styles/Stack.module.css'; +import texts from '../../../styles/Text.module.css'; function AppItem({ url, icon, name }: any) { - const [textDecoration, setTextDecoration] = useState("none"); + const [textDecoration, setTextDecoration] = useState('none'); return ( setTextDecoration("underline")} - onMouseOut={() => setTextDecoration("none")} + onMouseOver={() => setTextDecoration('underline')} + onMouseOut={() => setTextDecoration('none')} className={stacks.appItemBox} > diff --git a/src/pages/homepage/components/Applications.tsx b/src/pages/homepage/components/Applications.tsx index 2423b09..8f7e487 100644 --- a/src/pages/homepage/components/Applications.tsx +++ b/src/pages/homepage/components/Applications.tsx @@ -1,11 +1,11 @@ -import { Stack, Text } from "@mantine/core"; -import { useEffect, useState } from "react"; -import { useQueryAPI } from "../../../hooks/useAPI"; -import texts from "../../../styles/Text.module.css"; -import AppItem from "./AppItem"; +import { Stack, Text } from '@mantine/core'; +import { useEffect, useState } from 'react'; +import { useQueryAPI } from '../../../hooks/useAPI'; +import texts from '../../../styles/Text.module.css'; +import AppItem from './AppItem'; function Applications({ contentType }: any) { - const { data, isFetching } = useQueryAPI({ endpoint: "api/apps" }); + const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' }); const [applications, setApplications] = useState([]); useEffect(() => { if (!isFetching) { @@ -13,26 +13,26 @@ function Applications({ contentType }: any) { } }, [isFetching]); return ( - + Applications {applications?.map((item: any) => { - if (item.category === contentType || contentType === "All") + if (item.category === contentType || contentType === 'All') return ( {groupsIsFetched && linksIsFetched && categories?.length > 0 && ( - + Bookmarks {categories.map((category: any) => { - if ( - category.column_filter === contentType || - contentType === "All" - ) { + if (category.column_filter === contentType || contentType === 'All') { return ( - bookmark.category === category.category_index, + (bookmark: any) => bookmark.category === category.category_index, )} /> ); diff --git a/src/pages/homepage/components/Header.tsx b/src/pages/homepage/components/Header.tsx index a76bbde..6a4bbf3 100644 --- a/src/pages/homepage/components/Header.tsx +++ b/src/pages/homepage/components/Header.tsx @@ -1,6 +1,6 @@ -import { Stack, Text } from "@mantine/core"; -import { useEffect, useState } from "react"; -import { textClasses } from "../../../styles"; +import { Stack, Text } from '@mantine/core'; +import { useEffect, useState } from 'react'; +import { textClasses } from '../../../styles'; function Header({ greet, date }: any) { const [time, setTime] = useState(new Date()); @@ -22,18 +22,18 @@ function Header({ greet, date }: any) { return ( @@ -42,27 +42,27 @@ function Header({ greet, date }: any) { {date} {`${ @@ -71,7 +71,7 @@ function Header({ greet, date }: any) { : time.getHours() > 12 ? time.getHours() - 12 : time.getHours() - }:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? "PM" : "AM"}`} + }:${fixDigits(time.getMinutes())} ${time.getHours() >= 12 ? 'PM' : 'AM'}`} diff --git a/src/pages/homepage/components/LinkGroups.tsx b/src/pages/homepage/components/LinkGroups.tsx index a064e88..185b231 100644 --- a/src/pages/homepage/components/LinkGroups.tsx +++ b/src/pages/homepage/components/LinkGroups.tsx @@ -1,14 +1,14 @@ -import { Stack, Text } from "@mantine/core"; -import texts from "../../../styles/Text.module.css"; -import LinkItem from "./LinkItem"; +import { Stack, Text } from '@mantine/core'; +import texts from '../../../styles/Text.module.css'; +import LinkItem from './LinkItem'; function LinkGroups({ links, category }: any) { return ( diff --git a/src/pages/homepage/components/LinkItem.tsx b/src/pages/homepage/components/LinkItem.tsx index c0d0e9b..e1974ee 100644 --- a/src/pages/homepage/components/LinkItem.tsx +++ b/src/pages/homepage/components/LinkItem.tsx @@ -1,14 +1,9 @@ -import { Text } from "@mantine/core"; -import texts from "../../../styles/Text.module.css"; +import { Text } from '@mantine/core'; +import texts from '../../../styles/Text.module.css'; function LinkItem({ link }: any) { return ( - + {link.name} ); diff --git a/src/pages/homepage/components/MessageInfo.jsx b/src/pages/homepage/components/MessageInfo.jsx index 5de9cb6..9c824a7 100644 --- a/src/pages/homepage/components/MessageInfo.jsx +++ b/src/pages/homepage/components/MessageInfo.jsx @@ -1,9 +1,9 @@ -import { useEffect, useState } from "react"; -import Messages from "../../../components/Messages"; -import useQueryAPI from "../../../hooks/useAPI"; +import { useEffect, useState } from 'react'; +import Messages from '../../../components/Messages'; +import useQueryAPI from '../../../hooks/useAPI'; function MessageInfo() { - const messageData = useQueryAPI({ endpoint: "api/messages" }); + const messageData = useQueryAPI({ endpoint: 'api/messages' }); const [greetings, setGreetings] = useState([]); useEffect(() => { @@ -15,7 +15,7 @@ function MessageInfo() { return ( <> {greetings && ( -
+
{greetings.map((greeting, index) => ( { - let option = '' - let subtext = '' - if (item.target.value.startsWith("/")) { + let option = ''; + let subtext = ''; + if (item.target.value.startsWith('/')) { option = - item.target.value.substr(1, item.target.value.indexOf(" ") - 1) || - item.target.value.substr(1); + item.target.value.substr(1, item.target.value.indexOf(' ') - 1) || + item.target.value.substr(1); subtext = item.target.value.substr(2 + option.length); } else { subtext = item.target.value; } - if (item.key === "Enter") { - if (item.target.value.startsWith("/")) { - open(`${providerURL}${subtext}`, "_self"); + if (item.key === 'Enter') { + 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; - else open(`https://${item.target.value}`, "_self"); + if (containsProtocol(item.target.value)) window.location = item.target.value; + else open(`https://${item.target.value}`, '_self'); } else { - open(`${providerURL}${subtext}`, "_self"); + open(`${providerURL}${subtext}`, '_self'); } } }; function validURL(str: any) { const pattern = new RegExp( - "^(https?:\\/\\/)?" + // protocol - "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name - "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address - "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path - "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string - "(\\#[-a-z\\d_]*)?$", - "i", + '^(https?:\\/\\/)?' + // protocol + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name + '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path + '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string + '(\\#[-a-z\\d_]*)?$', + 'i', ); // fragment locator return !!pattern.test(str); } @@ -56,37 +53,37 @@ export default function Search() { return ( { - setValue(item.currentTarget.value) - if (item.target.value.startsWith("/")) { + setValue(item.currentTarget.value); + if (item.target.value.startsWith('/')) { const provider = providers?.find( - (p: any) => p.prefix === item.target.value.split(" ")[0], - ) - setProviderLabel(provider?.name || "Invalid Search"); + (p: any) => p.prefix === item.target.value.split(' ')[0], + ); + setProviderLabel(provider?.name || 'Invalid Search'); setProviderURL(provider?.url); } else { - setProviderLabel("Google Search"); - setProviderURL("https://www.google.com/search?q="); + setProviderLabel('Google Search'); + setProviderURL('https://www.google.com/search?q='); } }} onKeyUp={(item: any) => { - if(providerLabel !== "Invalid Search"){ + if (providerLabel !== 'Invalid Search') { handleKeyPress(item); } }} diff --git a/src/pages/homepage/components/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton.tsx index 66a72b2..0efac6e 100644 --- a/src/pages/homepage/components/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton.tsx @@ -1,17 +1,15 @@ -import { Button, Menu, NavLink, Select } from "@mantine/core"; -import { useEffect, useState } from "react"; -import { FiMenu, FiMonitor } from "react-icons/fi"; -import { useQueryAPI } from "../../../hooks/useAPI"; -import button from "../../../styles/Button.module.css"; -import menu from "../../../styles/Menu.module.css"; -import navLink from "../../../styles/NavLink.module.css"; -import selectClasses from "../../../styles/Select.module.css"; +import { Button, Menu, NavLink, Select } from '@mantine/core'; +import { useEffect, useState } from 'react'; +import { FiMenu, FiMonitor } from 'react-icons/fi'; +import { useQueryAPI } from '../../../hooks/useAPI'; +import button from '../../../styles/Button.module.css'; +import menu from '../../../styles/Menu.module.css'; +import navLink from '../../../styles/NavLink.module.css'; +import selectClasses from '../../../styles/Select.module.css'; function SettingsButton({ contentType, setContentType, theme }: any) { - const { data, isFetched } = useQueryAPI({ endpoint: "api/appCategories" }); - const [categories, setCategories] = useState([ - { value: "All", label: "All" }, - ]); + const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' }); + const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]); useEffect(() => { if (data) { @@ -19,20 +17,20 @@ function SettingsButton({ contentType, setContentType, theme }: any) { data.map((category: any) => { return { value: category.category, label: category.category }; }) || []; - list.unshift({ value: "All", label: "All" }); + list.unshift({ value: 'All', label: 'All' }); setCategories(list); } }, [data, isFetched]); function runWakeCommand() { const requestOptions = { - method: "GET", - headers: { "Content-Type": "application/json" }, + method: 'GET', + headers: { 'Content-Type': 'application/json' }, }; - fetch("/trigger/api/wakeDakota", requestOptions); + fetch('/trigger/api/wakeDakota', requestOptions); } return ( - +