From 4e8cc1df6e754a4814f32d22544c2b10b58a3ac5 Mon Sep 17 00:00:00 2001 From: Patrick Cerny Date: Mon, 22 Jan 2024 23:29:17 +0100 Subject: [PATCH 1/3] Fixed es-lint error in button component --- EsefexUI/package-lock.json | 2 +- .../components/soundButton/SoundButton.tsx | 25 +++++++++++-------- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/EsefexUI/package-lock.json b/EsefexUI/package-lock.json index 057a3f8..a6a2359 100644 --- a/EsefexUI/package-lock.json +++ b/EsefexUI/package-lock.json @@ -1,5 +1,5 @@ { - "name": "electron-react-boilerplate", + "name": "EsefexUI", "lockfileVersion": 3, "requires": true, "packages": { diff --git a/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx b/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx index 03eaf2e..e032b64 100644 --- a/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx +++ b/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx @@ -1,15 +1,18 @@ -import { Button } from "@mantine/core"; -import { FC } from "react"; -import { Sound } from "../../models/Sound"; +import { Button } from '@mantine/core'; +import { Sound } from '../../models/Sound'; interface SoundButtonProps { - sound: Sound; + sound: Sound; } -export const SoundButton: FC = ({sound}) => { - return ( - <> - - - ); -} \ No newline at end of file +function SoundButton(props: SoundButtonProps) { + const { sound } = props; + + return ( + + ); +} + +export default SoundButton; From a24c54dae824cdfecbe9eb1bb88285dd9e902acf Mon Sep 17 00:00:00 2001 From: Patrick Cerny Date: Mon, 22 Jan 2024 23:36:21 +0100 Subject: [PATCH 2/3] Fixed formatting and es-lint --- EsefexUI/src/renderer/App.css | 3 +- EsefexUI/src/renderer/App.tsx | 36 +++++++++---------- .../src/renderer/components/header/Header.css | 4 +-- .../src/renderer/components/header/Header.tsx | 35 ++++++++++-------- .../components/soundButton/SoundButton.tsx | 2 +- EsefexUI/src/renderer/index.ejs | 2 +- EsefexUI/src/renderer/models/Sound.ts | 14 ++++---- EsefexUI/src/renderer/models/index.ts | 1 + EsefexUI/src/renderer/postcss.config.js | 22 ++++++------ EsefexUI/src/renderer/theme.ts | 2 +- 10 files changed, 62 insertions(+), 59 deletions(-) create mode 100644 EsefexUI/src/renderer/models/index.ts diff --git a/EsefexUI/src/renderer/App.css b/EsefexUI/src/renderer/App.css index 6d90088..929ea5f 100644 --- a/EsefexUI/src/renderer/App.css +++ b/EsefexUI/src/renderer/App.css @@ -3,7 +3,6 @@ * See https://github.com/webpack-contrib/sass-loader#imports */ - body { --mantine-color-body: #141414; position: relative; @@ -38,4 +37,4 @@ a { a:hover { opacity: 1; text-decoration: none; -} \ No newline at end of file +} diff --git a/EsefexUI/src/renderer/App.tsx b/EsefexUI/src/renderer/App.tsx index 1181ba6..9659f9f 100644 --- a/EsefexUI/src/renderer/App.tsx +++ b/EsefexUI/src/renderer/App.tsx @@ -1,37 +1,37 @@ import { MemoryRouter as Router, Routes, Route } from 'react-router-dom'; import './App.css'; import '@mantine/core/styles.css'; -import { Button, Flex, Grid, MantineProvider,Title } from '@mantine/core'; +import { Flex, MantineProvider } from '@mantine/core'; import { theme } from './theme'; -import { SoundButton } from './components/soundButton/SoundButton'; -import { Sound } from './models/Sound'; -import { Header } from './components/header/Header'; +import SoundButton from './components/soundButton/SoundButton'; +import { Sound } from './models'; +import Header from './components/header/Header'; -let testSound: Sound = { - id:"617007869", - serverId:"testserver", - name:"test", - icon:"https://cdn.discordapp.com/emojis/630819109726191617.webp?size=128&quality=lossless" -} +const TEST_SOUND: Sound = { + id: '617007869', + serverId: 'testserver', + name: 'test', + icon: 'https://cdn.discordapp.com/emojis/630819109726191617.webp?size=128&quality=lossless', +}; +//use loop, even for testing function Hello() { return ( <> -
- - - - - +
+ + + + + - ); } export default function App() { return ( - + } /> diff --git a/EsefexUI/src/renderer/components/header/Header.css b/EsefexUI/src/renderer/components/header/Header.css index d620549..b8fd7ee 100644 --- a/EsefexUI/src/renderer/components/header/Header.css +++ b/EsefexUI/src/renderer/components/header/Header.css @@ -1,3 +1,3 @@ .serverName { - text-align: right; -} \ No newline at end of file + text-align: right; +} diff --git a/EsefexUI/src/renderer/components/header/Header.tsx b/EsefexUI/src/renderer/components/header/Header.tsx index 042071f..35b484c 100644 --- a/EsefexUI/src/renderer/components/header/Header.tsx +++ b/EsefexUI/src/renderer/components/header/Header.tsx @@ -1,16 +1,21 @@ -import { Button, Group, Image, Title } from "@mantine/core"; -import { FC } from "react"; -import "./Header.css"; +import { Group, Image, Title } from '@mantine/core'; +import './Header.css'; -export const Header: FC = () => { - return ( - <> - -
- -
- Server Name - - - ); -} \ No newline at end of file +function Header() { + return ( + +
+ +
+ + Server Name + + + ); +} + +export default Header; diff --git a/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx b/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx index e032b64..86c5914 100644 --- a/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx +++ b/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx @@ -1,5 +1,5 @@ import { Button } from '@mantine/core'; -import { Sound } from '../../models/Sound'; +import { Sound } from '../../models'; interface SoundButtonProps { sound: Sound; diff --git a/EsefexUI/src/renderer/index.ejs b/EsefexUI/src/renderer/index.ejs index 167cf37..1c061fc 100644 --- a/EsefexUI/src/renderer/index.ejs +++ b/EsefexUI/src/renderer/index.ejs @@ -1,4 +1,4 @@ - + diff --git a/EsefexUI/src/renderer/models/Sound.ts b/EsefexUI/src/renderer/models/Sound.ts index f4e1ebf..3a26d94 100644 --- a/EsefexUI/src/renderer/models/Sound.ts +++ b/EsefexUI/src/renderer/models/Sound.ts @@ -1,8 +1,6 @@ -type Sound = { - id: string; - serverId: string; - name: string; - icon: string; -}; - -export type { Sound }; \ No newline at end of file +export interface Sound { + id: string; + serverId: string; + name: string; + icon: string; +} diff --git a/EsefexUI/src/renderer/models/index.ts b/EsefexUI/src/renderer/models/index.ts new file mode 100644 index 0000000..b584fe4 --- /dev/null +++ b/EsefexUI/src/renderer/models/index.ts @@ -0,0 +1 @@ +export * from './Sound'; diff --git a/EsefexUI/src/renderer/postcss.config.js b/EsefexUI/src/renderer/postcss.config.js index 069b052..bfba0dd 100644 --- a/EsefexUI/src/renderer/postcss.config.js +++ b/EsefexUI/src/renderer/postcss.config.js @@ -1,14 +1,14 @@ module.exports = { - plugins: { - 'postcss-preset-mantine': {}, - 'postcss-simple-vars': { - variables: { - 'mantine-breakpoint-xs': '36em', - 'mantine-breakpoint-sm': '48em', - 'mantine-breakpoint-md': '62em', - 'mantine-breakpoint-lg': '75em', - 'mantine-breakpoint-xl': '88em', - }, + plugins: { + 'postcss-preset-mantine': {}, + 'postcss-simple-vars': { + variables: { + 'mantine-breakpoint-xs': '36em', + 'mantine-breakpoint-sm': '48em', + 'mantine-breakpoint-md': '62em', + 'mantine-breakpoint-lg': '75em', + 'mantine-breakpoint-xl': '88em', }, }, - }; \ No newline at end of file + }, +}; diff --git a/EsefexUI/src/renderer/theme.ts b/EsefexUI/src/renderer/theme.ts index f5436df..bf4dee5 100644 --- a/EsefexUI/src/renderer/theme.ts +++ b/EsefexUI/src/renderer/theme.ts @@ -2,4 +2,4 @@ import { createTheme } from '@mantine/core'; export const theme = createTheme({ /** Put your mantine theme override here */ -}); \ No newline at end of file +}); From aa8abc365aa47e1e4168411ab5091668d1c86f41 Mon Sep 17 00:00:00 2001 From: Patrick Cerny Date: Mon, 22 Jan 2024 23:44:51 +0100 Subject: [PATCH 3/3] comments, how i would do it --- EsefexUI/src/renderer/App.tsx | 6 +++--- EsefexUI/src/renderer/components/header/Header.tsx | 1 + .../src/renderer/components/soundButton/SoundButton.tsx | 4 +++- EsefexUI/src/renderer/models/Sound.ts | 2 ++ EsefexUI/src/renderer/models/index.ts | 2 ++ EsefexUI/src/renderer/theme.ts | 4 +++- 6 files changed, 14 insertions(+), 5 deletions(-) diff --git a/EsefexUI/src/renderer/App.tsx b/EsefexUI/src/renderer/App.tsx index 9659f9f..04fda64 100644 --- a/EsefexUI/src/renderer/App.tsx +++ b/EsefexUI/src/renderer/App.tsx @@ -2,10 +2,10 @@ import { MemoryRouter as Router, Routes, Route } from 'react-router-dom'; import './App.css'; import '@mantine/core/styles.css'; import { Flex, MantineProvider } from '@mantine/core'; -import { theme } from './theme'; import SoundButton from './components/soundButton/SoundButton'; import { Sound } from './models'; import Header from './components/header/Header'; +import Theme from './theme'; const TEST_SOUND: Sound = { id: '617007869', @@ -14,7 +14,7 @@ const TEST_SOUND: Sound = { icon: 'https://cdn.discordapp.com/emojis/630819109726191617.webp?size=128&quality=lossless', }; -//use loop, even for testing +// use loop, even for testing function Hello() { return ( <> @@ -31,7 +31,7 @@ function Hello() { export default function App() { return ( - + } /> diff --git a/EsefexUI/src/renderer/components/header/Header.tsx b/EsefexUI/src/renderer/components/header/Header.tsx index 35b484c..d445931 100644 --- a/EsefexUI/src/renderer/components/header/Header.tsx +++ b/EsefexUI/src/renderer/components/header/Header.tsx @@ -1,6 +1,7 @@ import { Group, Image, Title } from '@mantine/core'; import './Header.css'; +// dont use a react-fragment if only one element is wrapped --> unneccesairy code function Header() { return ( diff --git a/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx b/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx index 86c5914..a6eccb6 100644 --- a/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx +++ b/EsefexUI/src/renderer/components/soundButton/SoundButton.tsx @@ -5,9 +5,11 @@ interface SoundButtonProps { sound: Sound; } +// always name the props "props", helps with collaberation, easier to identify + function SoundButton(props: SoundButtonProps) { + // destructure props if needed const { sound } = props; - return (