Merge pull request #15 from EsefexBot/fix-eslint-errors

Fix EsLint errors and formatting

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;
-}
+}

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 { theme } from './theme';
-import { SoundButton } from './components/soundButton/SoundButton';
-import { Sound } from './models/Sound';
-import { Header } from './components/header/Header';
+import { Flex, MantineProvider } from '@mantine/core';
+import SoundButton from './components/soundButton/SoundButton';
+import { Sound } from './models';
+import Header from './components/header/Header';
+import Theme from './theme';
 
-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 (
     <>
-      <Header/>
-      <Flex >
-        <SoundButton sound={testSound}/>
-        <SoundButton sound={testSound}/>
-        <SoundButton sound={testSound}/>
-        <SoundButton sound={testSound}/>
+      <Header />
+      <Flex>
+        <SoundButton sound={TEST_SOUND} />
+        <SoundButton sound={TEST_SOUND} />
+        <SoundButton sound={TEST_SOUND} />
+        <SoundButton sound={TEST_SOUND} />
       </Flex>
-
     </>
   );
 }
 
 export default function App() {
   return (
-    <MantineProvider defaultColorScheme='dark' theme={theme}>
+    <MantineProvider defaultColorScheme="dark" theme={Theme}>
       <Router>
         <Routes>
           <Route path="/" element={<Hello />} />

EsefexUI/src/renderer/components/header/Header.css

@@ -1,3 +1,3 @@
 .serverName {
-    text-align: right;
-}
+  text-align: right;
+}

EsefexUI/src/renderer/components/header/Header.tsx

@@ -1,16 +1,22 @@
-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 (
-        <>
-            <Group grow>
-                <div>
-                    <Image w={100} h={100} src="https://cdn.discordapp.com/attachments/248446166927147009/1177018089712402432/esefex.png?ex=658caa04&is=657a3504&hm=236dd01dab7c2356c82afccf9fab8a1bbd823774080c230565cec71fb5f62773&" />
-                </div>
-                <Title className="serverName" mr={20} >Server Name</Title>
-            </Group>
-        </>
-    );
-}
+// dont use a react-fragment if only one element is wrapped --> unneccesairy code
+function Header() {
+  return (
+    <Group grow>
+      <div>
+        <Image
+          w={100}
+          h={100}
+          src="https://cdn.discordapp.com/attachments/248446166927147009/1177018089712402432/esefex.png?ex=658caa04&is=657a3504&hm=236dd01dab7c2356c82afccf9fab8a1bbd823774080c230565cec71fb5f62773&"
+        />
+      </div>
+      <Title className="serverName" mr={20}>
+        Server Name
+      </Title>
+    </Group>
+  );
+}
+
+export default Header;

EsefexUI/src/renderer/components/soundButton/SoundButton.tsx

@@ -1,15 +1,20 @@
-import { Button } from "@mantine/core";
-import { FC } from "react";
-import { Sound } from "../../models/Sound";
+import { Button } from '@mantine/core';
+import { Sound } from '../../models';
 
 interface SoundButtonProps {
-    sound: Sound;
+  sound: Sound;
 }
 
-export const SoundButton: FC<SoundButtonProps> = ({sound}) => {
-    return (
-        <>
-            <Button w={100} h={100} bg="#1A1A1A" radius={25}><img src={sound.icon}/></Button>
-        </>
-    );
-}
+// always name the props "props", helps with collaberation, easier to identify
+
+function SoundButton(props: SoundButtonProps) {
+  // destructure props if needed
+  const { sound } = props;
+  return (
+    <Button w={100} h={100}>
+      <img src={sound.icon} alt="test" />
+    </Button>
+  );
+}
+
+export default SoundButton;

EsefexUI/src/renderer/index.ejs

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />

EsefexUI/src/renderer/models/Sound.ts

@@ -1,8 +1,8 @@
-type Sound = {
-    id: string;
-    serverId: string;
-    name: string;
-    icon: string;
-};
+// use interfaes not types
 
-export type { Sound };
+export interface Sound {
+  id: string;
+  serverId: string;
+  name: string;
+  icon: string;
+}

EsefexUI/src/renderer/models/index.ts

@@ -0,0 +1,3 @@
+// use index.ts for exporting --> eliminates one import path and allows easier importing from the "models" module
+// always order this file alphabetically, as in the filetree
+export * from './Sound';

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',
       },
     },
-  };
+  },
+};

EsefexUI/src/renderer/theme.ts

@@ -1,5 +1,7 @@
 import { createTheme } from '@mantine/core';
 
-export const theme = createTheme({
+const Theme = createTheme({
   /** Put your mantine theme override here */
-});
+});
+
+export default Theme;