Linting and formatting

CRLF > LF is REALLY annoying

components/layout/Aside.tsx

@@ -1,6 +1,5 @@
-import { Aside as MantineAside, Space } from '@mantine/core';
+import { Aside as MantineAside } from '@mantine/core';
-import CalendarComponent, { CalendarModule } from '../modules/calendar/CalendarModule';
+import { CalendarModule } from '../modules/calendar/CalendarModule';
-import DateComponent from '../modules/date/DateModule';
 import ModuleWrapper from '../modules/moduleWrapper';
 
 export default function Aside() {
@@ -13,7 +12,7 @@ export default function Aside() {
         base: 'auto',
       }}
     >
-			<ModuleWrapper module={CalendarModule} />
+      <ModuleWrapper module={CalendarModule} />
     </MantineAside>
   );
 }

components/layout/Layout.tsx

@@ -1,8 +1,6 @@
 import { AppShell, Center, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
-import CalendarComponent from '../modules/calendar/CalendarModule';
-import DateComponent from '../modules/date/DateModule';
 import Aside from './Aside';
 import Navbar from './Navbar';
 

components/layout/Navbar.tsx

@@ -1,6 +1,7 @@
 import { Navbar as MantineNavbar } from '@mantine/core';
-import DateComponent, { DateModule } from '../modules/date/DateModule';
+import { DateModule } from '../modules/date/DateModule';
 import ModuleWrapper from '../modules/moduleWrapper';
+
 export default function Navbar() {
   return (
     <MantineNavbar

components/modules/calendar/CalendarModule.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-children-prop */
-import { Popover, Box, ScrollArea, Divider, Indicator, Card } from '@mantine/core';
+import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { CalendarIcon } from '@modulz/radix-icons';
 import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
 import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
-import React from 'react';
 
 export const CalendarModule: IModule = {
   title: 'Calendar',
@@ -105,25 +104,21 @@ function DayComponent(props: any) {
         target={`‏ ${day}`}
       >
         <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.map((media: any, index: number) => {
+          {sonarrFiltered.map((media: any, index: number) => (
-            return (
+            <React.Fragment key={index}>
-              <React.Fragment key={index}>
+              <SonarrMediaDisplay media={media} />
-                <SonarrMediaDisplay media={media} />
+              {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-                {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
-              </React.Fragment>
+          ))}
-            );
-          })}
           {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
             <Divider variant="dashed" my="xl" />
           )}
-          {radarrFiltered.map((media: any, index: number) => {
+          {radarrFiltered.map((media: any, index: number) => (
-            return (
+            <React.Fragment key={index}>
-              <React.Fragment key={index}>
+              <RadarrMediaDisplay media={media} />
-                <RadarrMediaDisplay media={media} />
+              {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
-                {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+            </React.Fragment>
-              </React.Fragment>
+          ))}
-            );
-          })}
         </ScrollArea>
       </Popover>
     </Box>

components/modules/date/DateModule.story.tsx

@@ -1,4 +1,4 @@
-import DateComponent from "./DateModule";
+import DateComponent from './DateModule';
 
 export default {
   title: 'Date module',

components/modules/date/DateModule.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, Group, Text, Title } from '@mantine/core';
+import { Group, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { Clock } from 'tabler-icons-react';
@@ -25,7 +25,7 @@ export default function DateComponent(props: any) {
   }, []);
 
   return (
-    <Group p={'sm'} direction="column">
+    <Group p="sm" direction="column">
       <Title>
         {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
       </Title>

components/modules/moduleWrapper.tsx

@@ -1,10 +1,9 @@
-import { Card, FloatingTooltip, Tooltip, useMantineTheme } from '@mantine/core';
+import { Card, useMantineTheme } from '@mantine/core';
 import { IModule } from './modules';
 
 export default function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
   const theme = useMantineTheme();
-  console.log(module.title);
   return (
     <Card
       mx="sm"
@@ -12,10 +11,10 @@ export default function ModuleWrapper(props: any) {
       shadow="sm"
       style={{
         // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : "white",
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
       }}
     >
-      {<module.component />}
+      <module.component />
     </Card>
   );
 }

tools/theme.ts

@@ -1,5 +1,3 @@
 import { MantineProviderProps } from '@mantine/core';
 
-export const theme: MantineProviderProps['theme'] = {
+export const theme: MantineProviderProps['theme'] = {};
-  
-};