From 540e79fbffb6202996a4a4c8d69f02bede683f97 Mon Sep 17 00:00:00 2001 From: Nikurasu Date: Thu, 22 Aug 2024 18:40:20 +0200 Subject: [PATCH] feature(settingsPage): add input fields dynamically --- package.json | 0 pnpm-lock.yaml | 0 public/icon-with-shadow.svg | 0 public/icon/128.png | Bin public/icon/16.png | Bin public/icon/32.png | Bin public/icon/48.png | Bin public/icon/96.png | Bin src/background.ts | 0 src/components/settingsPage.tsx | 25 ------- src/index.html | 0 src/index.tsx | 10 ++- src/manifest.json | 0 src/popup.tsx | 0 src/popup/Popup.css | 0 src/popup/Popup.tsx | 2 +- src/{ => shared}/components/MenuBar.tsx | 0 src/{ => shared}/components/linkcard.tsx | 0 src/{ => shared}/components/menudrawer.tsx | 0 src/shared/components/settingsPage.tsx | 70 ++++++++++++++++++ .../contexts/ConfiguarableLinksContext.tsx | 25 +++++++ .../contexts/CurrentPageContext.tsx | 0 .../contexts/DrawerOpenContext.tsx | 0 src/{ => shared}/data/sites.json | 0 .../interfaces/HomepageLink.interface.ts | 5 ++ src/site/App.tsx | 10 +-- src/theme.ts | 0 src/vite-env.d.ts | 0 tsconfig.json | 2 +- tsconfig.node.json | 0 vite.config.ts | 2 +- 31 files changed, 114 insertions(+), 37 deletions(-) mode change 100755 => 100644 package.json mode change 100755 => 100644 pnpm-lock.yaml mode change 100755 => 100644 public/icon-with-shadow.svg mode change 100755 => 100644 public/icon/128.png mode change 100755 => 100644 public/icon/16.png mode change 100755 => 100644 public/icon/32.png mode change 100755 => 100644 public/icon/48.png mode change 100755 => 100644 public/icon/96.png mode change 100755 => 100644 src/background.ts delete mode 100644 src/components/settingsPage.tsx mode change 100755 => 100644 src/index.html mode change 100755 => 100644 src/index.tsx mode change 100755 => 100644 src/manifest.json mode change 100755 => 100644 src/popup.tsx mode change 100755 => 100644 src/popup/Popup.css mode change 100755 => 100644 src/popup/Popup.tsx rename src/{ => shared}/components/MenuBar.tsx (100%) mode change 100755 => 100644 rename src/{ => shared}/components/linkcard.tsx (100%) mode change 100755 => 100644 rename src/{ => shared}/components/menudrawer.tsx (100%) create mode 100644 src/shared/components/settingsPage.tsx create mode 100644 src/shared/contexts/ConfiguarableLinksContext.tsx rename src/{ => shared}/contexts/CurrentPageContext.tsx (100%) rename src/{ => shared}/contexts/DrawerOpenContext.tsx (100%) rename src/{ => shared}/data/sites.json (100%) mode change 100755 => 100644 create mode 100644 src/shared/interfaces/HomepageLink.interface.ts mode change 100755 => 100644 src/site/App.tsx mode change 100755 => 100644 src/theme.ts mode change 100755 => 100644 src/vite-env.d.ts mode change 100755 => 100644 tsconfig.json mode change 100755 => 100644 tsconfig.node.json mode change 100755 => 100644 vite.config.ts diff --git a/package.json b/package.json old mode 100755 new mode 100644 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml old mode 100755 new mode 100644 diff --git a/public/icon-with-shadow.svg b/public/icon-with-shadow.svg old mode 100755 new mode 100644 diff --git a/public/icon/128.png b/public/icon/128.png old mode 100755 new mode 100644 diff --git a/public/icon/16.png b/public/icon/16.png old mode 100755 new mode 100644 diff --git a/public/icon/32.png b/public/icon/32.png old mode 100755 new mode 100644 diff --git a/public/icon/48.png b/public/icon/48.png old mode 100755 new mode 100644 diff --git a/public/icon/96.png b/public/icon/96.png old mode 100755 new mode 100644 diff --git a/src/background.ts b/src/background.ts old mode 100755 new mode 100644 diff --git a/src/components/settingsPage.tsx b/src/components/settingsPage.tsx deleted file mode 100644 index 58b4e4b..0000000 --- a/src/components/settingsPage.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Grid, styled, TextField, Typography } from "@mui/material"; -import { useState } from "react"; - -const FormGrid = styled(Grid)(() => ({ - display: 'flex', - flexDirection: 'column' -})) - -export default function SettingsPage() { - const [data, setData] = useState([{title: '', subtitle: '', hyperlink: ''}]) - - return ( - - - console.log(e.target.name)} - /> - - - ) -} \ No newline at end of file diff --git a/src/index.html b/src/index.html old mode 100755 new mode 100644 diff --git a/src/index.tsx b/src/index.tsx old mode 100755 new mode 100644 index ed4c14a..02ed79b --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,6 @@ import React from 'react' import ReactDOM from 'react-dom/client' import App from './site/App' -import MenuBar from './components/MenuBar'; import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; import '@fontsource/roboto/500.css'; @@ -9,8 +8,9 @@ import '@fontsource/roboto/700.css'; import { ThemeProvider } from '@mui/material/styles'; import { CssBaseline } from '@mui/material'; import theme from './theme'; -import { DrawerOpenContextProvider } from './contexts/DrawerOpenContext'; -import { CurrentPageContextProvider } from './contexts/CurrentPageContext'; +import { DrawerOpenContextProvider } from './shared/contexts/DrawerOpenContext'; +import { CurrentPageContextProvider } from './shared/contexts/CurrentPageContext'; +import { ConfigurableLinksContextProvider } from './shared/contexts/ConfiguarableLinksContext'; ReactDOM.createRoot(document.getElementById('root')!).render( @@ -18,7 +18,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render( - + + + diff --git a/src/manifest.json b/src/manifest.json old mode 100755 new mode 100644 diff --git a/src/popup.tsx b/src/popup.tsx old mode 100755 new mode 100644 diff --git a/src/popup/Popup.css b/src/popup/Popup.css old mode 100755 new mode 100644 diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx old mode 100755 new mode 100644 index 2604849..bc1a820 --- a/src/popup/Popup.tsx +++ b/src/popup/Popup.tsx @@ -1,6 +1,6 @@ import { useEffect } from 'react'; import "./Popup.css"; -import Sites from "@Data/sites.json" +import Sites from '@Data/sites.json' import React from 'react'; export default function() { diff --git a/src/components/MenuBar.tsx b/src/shared/components/MenuBar.tsx old mode 100755 new mode 100644 similarity index 100% rename from src/components/MenuBar.tsx rename to src/shared/components/MenuBar.tsx diff --git a/src/components/linkcard.tsx b/src/shared/components/linkcard.tsx old mode 100755 new mode 100644 similarity index 100% rename from src/components/linkcard.tsx rename to src/shared/components/linkcard.tsx diff --git a/src/components/menudrawer.tsx b/src/shared/components/menudrawer.tsx similarity index 100% rename from src/components/menudrawer.tsx rename to src/shared/components/menudrawer.tsx diff --git a/src/shared/components/settingsPage.tsx b/src/shared/components/settingsPage.tsx new file mode 100644 index 0000000..5e26f71 --- /dev/null +++ b/src/shared/components/settingsPage.tsx @@ -0,0 +1,70 @@ +import { Button, Grid, styled, TextField, Typography } from "@mui/material"; +import { useContext, useState } from "react"; +import { HomepageLink } from "../interfaces/HomepageLink.interface"; +import { ConfigurableLinksContext } from "../contexts/ConfiguarableLinksContext"; + +const FormGrid = styled(Grid)(() => ({ + display: 'flex', + flexDirection: 'column' +})) + +interface FormRowProps { + index: number + link: HomepageLink +} + +export default function SettingsPage() { + const {configurableLinks, setConfigurableLinks} = useContext(ConfigurableLinksContext) + + const handleChange = (index: number, event: React.ChangeEvent) => { + let newconfigurableLinks = [...configurableLinks] + newconfigurableLinks[index][event.target.name as keyof HomepageLink] = event.target.value + setConfigurableLinks(newconfigurableLinks) + } + + const addFields = () => { + setConfigurableLinks([...configurableLinks, {} as HomepageLink]) + } + + return ( + + {configurableLinks.map((link, index) =>( + <> + + handleChange(index, e)} + /> + + + handleChange(index, e)} + /> + + + handleChange(index, e)} + /> + + + ))} + + + + + ) +} \ No newline at end of file diff --git a/src/shared/contexts/ConfiguarableLinksContext.tsx b/src/shared/contexts/ConfiguarableLinksContext.tsx new file mode 100644 index 0000000..7637921 --- /dev/null +++ b/src/shared/contexts/ConfiguarableLinksContext.tsx @@ -0,0 +1,25 @@ +import { createContext, Dispatch, SetStateAction, useState } from "react" +import { HomepageLink } from "../interfaces/HomepageLink.interface" +import { ContainerProps } from "@mui/material" + +type ConfigurableLinksContextType = { + configurableLinks: Array, + setConfigurableLinks: Dispatch>> +} + +const ConfigurableLinksContext = createContext({ + configurableLinks: new Array, + setConfigurableLinks: () => {} +}) + +const ConfigurableLinksContextProvider = (props: ContainerProps) => { + const [configurableLinks, setConfigurableLinks] = useState(new Array) + + return ( + + {props.children} + + ) +} + +export {ConfigurableLinksContext, ConfigurableLinksContextProvider} \ No newline at end of file diff --git a/src/contexts/CurrentPageContext.tsx b/src/shared/contexts/CurrentPageContext.tsx similarity index 100% rename from src/contexts/CurrentPageContext.tsx rename to src/shared/contexts/CurrentPageContext.tsx diff --git a/src/contexts/DrawerOpenContext.tsx b/src/shared/contexts/DrawerOpenContext.tsx similarity index 100% rename from src/contexts/DrawerOpenContext.tsx rename to src/shared/contexts/DrawerOpenContext.tsx diff --git a/src/data/sites.json b/src/shared/data/sites.json old mode 100755 new mode 100644 similarity index 100% rename from src/data/sites.json rename to src/shared/data/sites.json diff --git a/src/shared/interfaces/HomepageLink.interface.ts b/src/shared/interfaces/HomepageLink.interface.ts new file mode 100644 index 0000000..cc95389 --- /dev/null +++ b/src/shared/interfaces/HomepageLink.interface.ts @@ -0,0 +1,5 @@ +export interface HomepageLink { + title: string + subtitle: string, + hyperlink: string +} \ No newline at end of file diff --git a/src/site/App.tsx b/src/site/App.tsx old mode 100755 new mode 100644 index a80007f..e1fb041 --- a/src/site/App.tsx +++ b/src/site/App.tsx @@ -1,12 +1,12 @@ import Sites from '@Data/sites.json' import { Box, Button, debounce, FormLabel, Grid, OutlinedInput, styled, TextField, Typography } from '@mui/material' import React, { useContext, useState } from 'react' -import MenuBar from '../components/MenuBar' -import LinkCard from '../components/linkcard' +import MenuBar from '../shared/components/MenuBar' +import LinkCard from '../shared/components/linkcard' import { Link, Route } from 'wouter' -import MenuDrawer from '../components/menudrawer' -import { CurrentPageContext } from '../contexts/CurrentPageContext' -import SettingsPage from '../components/settingsPage' +import MenuDrawer from '../shared/components/menudrawer' +import { CurrentPageContext } from '../shared/contexts/CurrentPageContext' +import SettingsPage from '../shared/components/settingsPage' const useLocalStorage = (storageKey: string, fallbackState: any) => { const [value, setValue] = React.useState( diff --git a/src/theme.ts b/src/theme.ts old mode 100755 new mode 100644 diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts old mode 100755 new mode 100644 diff --git a/tsconfig.json b/tsconfig.json old mode 100755 new mode 100644 index 7a5a463..8616847 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,7 @@ "jsx": "react-jsx", "paths": { "@Data/*": [ - "./src/data/*" + "./src/shared/data/*" ], } }, diff --git a/tsconfig.node.json b/tsconfig.node.json old mode 100755 new mode 100644 diff --git a/vite.config.ts b/vite.config.ts old mode 100755 new mode 100644 index ff90f64..5b74334 --- a/vite.config.ts +++ b/vite.config.ts @@ -25,7 +25,7 @@ export default defineConfig({ ], resolve: { alias: { - "@Data": path.resolve(__dirname, './src/data') + "@Data": path.resolve(__dirname, './src/shared/data') } } });