diff --git a/.eslintrc.js b/.eslintrc.js index 4a92ecdf..9ba7d4cc 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -2,7 +2,7 @@ module.exports = { env: { browser: true, - es2021: true + es2021: true, }, extends: [ 'standard', @@ -13,12 +13,12 @@ module.exports = { // 'plugin:import/typescript', // 'plugin:promise/recommended', // 'plugin:security/recommended-legacy', - 'plugin:react/recommended' + 'plugin:react/recommended', ], parserOptions: { ecmaVersion: 'latest', parser: '@typescript-eslint/parser', - sourceType: 'module' + sourceType: 'module', }, plugins: [ // '@typescript-eslint', @@ -27,7 +27,7 @@ module.exports = { // 'security', // 'no-catch-all', 'react', - 'react-hooks' + 'react-hooks', ], settings: { // 'import/resolver': { @@ -35,13 +35,13 @@ module.exports = { // node: true, // }, react: { - version: 'detect' - } + version: 'detect', + }, }, rules: { 'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks 'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies - 'react/react-in-jsx-scope': 'off' // Disable requirement for React import + 'react/react-in-jsx-scope': 'off', // Disable requirement for React import // 'no-catch-all/no-catch-all': 'error', // 'no-console': 'error', // 'no-debugger': 'error', @@ -139,7 +139,7 @@ module.exports = { overrides: [ { files: ['*.ts', '*.tsx'], - parser: '@typescript-eslint/parser' + parser: '@typescript-eslint/parser', // parserOptions: { // tsconfigRootDir: __dirname, // project: ['./tsconfig.json', '**/tsconfig.json'], @@ -158,19 +158,19 @@ module.exports = { // '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }], // 'no-void': ['error', { allowAsStatement: true }], // }, + }, + { + files: ['!*.json'], + plugins: ['prettier'], + extends: ['plugin:prettier/recommended'], + rules: { + 'prettier/prettier': 'error', }, - { - files: ['!*.json'], - plugins: ['prettier'], - extends: ['plugin:prettier/recommended'], - rules: { - 'prettier/prettier': 'error', - } - }, + }, { files: ['*.json'], plugins: ['json'], - extends: ['plugin:json/recommended-with-comments'] + extends: ['plugin:json/recommended-with-comments'], }, // { // files: ['*.{test,spec}.[tj]s'], @@ -206,7 +206,7 @@ module.exports = { files: ['*.yaml', '*.yml'], parser: 'yaml-eslint-parser', plugins: ['yml'], - extends: ['plugin:yml/prettier'] - } - ] + extends: ['plugin:yml/prettier'], + }, + ], } diff --git a/postcss.config.js b/postcss.config.js index a3f5603f..3b33f365 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -2,6 +2,6 @@ module.exports = { plugins: { tailwindcss: {}, - autoprefixer: {} - } + autoprefixer: {}, + }, } diff --git a/rollup.config.js b/rollup.config.js index e868bf42..c3b83748 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -9,14 +9,30 @@ export default { format: 'esm', exports: 'named', sourcemap: true, - strict: false - } + strict: false, + }, ], plugins: [ postcss({ - plugins: [] + plugins: [], }), - typescript() + typescript(), + ], + external: [ + 'react', + 'react-dom', + 'leaflet', + 'react-leaflet', + 'react-toastify', + 'react-string-replace', + 'react-toastify/dist/ReactToastify.css', + 'tw-elements', + 'react-router-dom', + 'react-leaflet-cluster', + '@tanstack/react-query', + 'tributejs', + 'prop-types', + 'leaflet/dist/leaflet.css', + '@heroicons/react/20/solid', ], - external: ['react', 'react-dom', 'leaflet', 'react-leaflet', 'react-toastify', 'react-string-replace', 'react-toastify/dist/ReactToastify.css', 'tw-elements', 'react-router-dom', 'react-leaflet-cluster', '@tanstack/react-query', 'tributejs', 'prop-types', 'leaflet/dist/leaflet.css', '@heroicons/react/20/solid'] } diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index be317061..5827a2b8 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/src/Components/AppShell/AppShell.tsx @@ -4,16 +4,26 @@ import { SetAssetsApi } from './SetAssetsApi' import { AssetsApi } from '../../types' import { ContextWrapper } from './ContextWrapper' -export function AppShell ({ appName, children, assetsApi, userType }: { appName: string, children: React.ReactNode, assetsApi: AssetsApi, userType: string }) { +export function AppShell({ + appName, + children, + assetsApi, + userType, +}: { + appName: string + children: React.ReactNode + assetsApi: AssetsApi + userType: string +}) { return ( - -
- - -
- {children} -
-
- + +
+ + +
+ {children} +
+
+ ) } diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx index f4625187..92fce768 100644 --- a/src/Components/AppShell/Content.tsx +++ b/src/Components/AppShell/Content.tsx @@ -1,14 +1,13 @@ import * as React from 'react' type ContentProps = { - children?: React.ReactNode; + children?: React.ReactNode } -export function Content ({ children } : ContentProps) { +export function Content({ children }: ContentProps) { return (
{children}
- ) } diff --git a/src/Components/AppShell/ContextWrapper.tsx b/src/Components/AppShell/ContextWrapper.tsx index ddb54697..9cae2738 100644 --- a/src/Components/AppShell/ContextWrapper.tsx +++ b/src/Components/AppShell/ContextWrapper.tsx @@ -31,11 +31,7 @@ export const ContextWrapper = ({ children }) => { // Case 1: Only the Router is missing, but ContextWrapper is already provided if (!location && isWrapped) { - return ( - - {children} - - ) + return {children} } // Case 2: Neither Router nor ContextWrapper is present @@ -43,9 +39,7 @@ export const ContextWrapper = ({ children }) => { return ( - - {children} - + {children} ) @@ -80,7 +74,8 @@ export const Wrappers = ({ children }) => { - { pauseOnFocusLoss draggable pauseOnHover - theme="light" /> + theme='light' + /> {children} diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index d276e3f6..7524939b 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -6,21 +6,23 @@ import { useEffect, useRef, useState } from 'react' import { useItems } from '../Map/hooks/useItems' import { Item } from '../../types' -export default function NavBar ({ appName, userType }: { appName: string, userType: string }) { +export default function NavBar({ appName, userType }: { appName: string; userType: string }) { const { isAuthenticated, user, logout } = useAuth() - const [userProfile, setUserProfile] = useState({}as Item) + const [userProfile, setUserProfile] = useState({} as Item) const items = useItems() useEffect(() => { - const profile = user && items.find(i => (i.user_created?.id === user.id) && i.layer?.itemType.name === userType) - profile ? setUserProfile(profile) : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name, text: '' }) - // eslint-disable-next-line react-hooks/exhaustive-deps + const profile = + user && + items.find((i) => i.user_created?.id === user.id && i.layer?.itemType.name === userType) + profile + ? setUserProfile(profile) + : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name, text: '' }) + // eslint-disable-next-line react-hooks/exhaustive-deps }, [user, items]) - useEffect(() => { - - }, [userProfile]) + useEffect(() => {}, [userProfile]) const nameRef = useRef(null) const [nameWidth, setNameWidth] = useState(0) @@ -38,95 +40,156 @@ export default function NavBar ({ appName, userType }: { appName: string, userTy }, [location]) const onLogout = () => { - toast.promise( - logout(), - { - success: { - render () { - return 'Bye bye' - }, - // other options - icon: 'πŸ‘‹' + toast.promise(logout(), { + success: { + render() { + return 'Bye bye' }, - error: { - render ({ data }) { - return `${data}` - } + // other options + icon: 'πŸ‘‹', + }, + error: { + render({ data }) { + return `${data}` }, - pending: 'logging out ..' - }) + }, + pending: 'logging out ..', + }) } if (showNav) { return ( - <> -
- -
-
-

{appName}

- + <> +
+ +
+
+ +

+ {appName} +

+ + +
-
- {isAuthenticated - ?
- - { userProfile?.image &&
-
- + {isAuthenticated ? ( +
+ + {userProfile?.image && ( +
+
+ +
+
+ )} +
{userProfile.name || user?.first_name}
+ +
+ +
-
} -
{userProfile.name || user?.first_name}
- -
- -
-
- :
+ ) : ( +
+
+ +
Login
+ -
-
- Login -
- -
- Sign Up -
+ +
Sign Up
+ +
+
+ +
    +
  • + Login +
    • +
  • + Sign Up +
    • +
+
-
- -
    -
  • Login
    • -
  • Sign Up
    • -
-
- -
- } -
- - + )} +
+ ) - } else return (<>) + } else return <> } diff --git a/src/Components/AppShell/SetAssetsApi.tsx b/src/Components/AppShell/SetAssetsApi.tsx index e4874d47..d1a69d3d 100644 --- a/src/Components/AppShell/SetAssetsApi.tsx +++ b/src/Components/AppShell/SetAssetsApi.tsx @@ -2,7 +2,7 @@ import { useSetAssetApi } from './hooks/useAssets' import { AssetsApi } from '../../types' import { useEffect } from 'react' -export const SetAssetsApi = ({ assetsApi }:{assetsApi: AssetsApi}) => { +export const SetAssetsApi = ({ assetsApi }: { assetsApi: AssetsApi }) => { const setAssetsApi = useSetAssetApi() useEffect(() => { @@ -10,7 +10,5 @@ export const SetAssetsApi = ({ assetsApi }:{assetsApi: AssetsApi}) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [assetsApi]) - return ( - <> - ) + return <> } diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx index d4509e0a..d2f475fd 100644 --- a/src/Components/AppShell/SideBar.tsx +++ b/src/Components/AppShell/SideBar.tsx @@ -1,23 +1,20 @@ import { useRef, useState, useEffect } from 'react' import { NavLink, useLocation } from 'react-router-dom' -import { - Sidenav, - initTE -} from 'tw-elements' +import { Sidenav, initTE } from 'tw-elements' import SidebarSubmenu from './SidebarSubmenu' import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon' import * as React from 'react' type route = { - path: string; + path: string // eslint-disable-next-line no-undef - icon: JSX.Element; - name: string; - submenu?: route; + icon: JSX.Element + name: string + submenu?: route blank?: boolean } -export function SideBar ({ routes, bottomRoutes }: { routes: route[], bottomRoutes?: route[] }) { +export function SideBar({ routes, bottomRoutes }: { routes: route[]; bottomRoutes?: route[] }) { // prevent react18 from calling useEffect twice const init = useRef(false) @@ -34,9 +31,7 @@ export function SideBar ({ routes, bottomRoutes }: { routes: route[], bottomRout useEffect(() => { if (!init.current) { initTE({ Sidenav }) - const instance = Sidenav.getInstance( - document.getElementById('sidenav') - ) + const instance = Sidenav.getInstance(document.getElementById('sidenav')) setInstance(instance) instance.toggleSlim() init.current = true @@ -55,84 +50,117 @@ export function SideBar ({ routes, bottomRoutes }: { routes: route[], bottomRout return (