Skip to content

Commit e3a0c15

Browse files
authored
Merge pull request #16 from ajnart/ajnart/issue15
Enhancement : Decouple the UI by using conditional rendering for each module
2 parents 5f58f84 + 4452b08 commit e3a0c15

8 files changed

+24
-5
lines changed

components/layout/Header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { NextLink } from '@mantine/next';
1313
import { Logo } from './Logo';
1414
import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
1515
import { SettingsMenuButton } from '../Settings/SettingsMenu';
16-
import CalendarComponent from '../calendar/CalendarComponent';
16+
import CalendarComponent from '../modules/calendar/CalendarModule';
1717

1818
const HEADER_HEIGHT = 60;
1919

components/layout/Layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AppShell, Aside, Center, createStyles } from '@mantine/core';
22
import { Header } from './Header';
33
import { Footer } from './Footer';
4-
import CalendarComponent from '../calendar/CalendarComponent';
4+
import CalendarComponent from '../modules/calendar/CalendarModule';
55

66
const useStyles = createStyles((theme) => ({
77
main: {

components/calendar/CalendarComponent.story.tsx components/modules/calendar/CalendarComponent.story.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import CalendarComponent from './CalendarComponent';
1+
import CalendarComponent from './CalendarModule';
22

33
export default {
44
title: 'Calendar component',

components/calendar/CalendarComponent.tsx components/modules/calendar/CalendarModule.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,19 @@ import { Popover, Box, ScrollArea, Divider, Indicator } from '@mantine/core';
33
import { useEffect, useState } from 'react';
44
import { Calendar } from '@mantine/dates';
55
import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
6-
import { useConfig } from '../../tools/state';
6+
import { useConfig } from '../../../tools/state';
7+
import { CalendarIcon } from '@modulz/radix-icons';
8+
import { MHPModule } from '../modules';
9+
10+
export const CalendarModule: MHPModule = {
11+
title: 'Calendar',
12+
description: 'A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.',
13+
icon: CalendarIcon,
14+
component: CalendarComponent,
15+
};
716

817
export default function CalendarComponent(props: any) {
918
const { config } = useConfig();
10-
const [opened, setOpened] = useState(false);
1119
const [sonarrMedias, setSonarrMedias] = useState([] as any);
1220
const [radarrMedias, setRadarrMedias] = useState([] as any);
1321

components/modules/modules.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// This interface is to be used in all the modules of the project
2+
// Each module should have its own interface and call the following function:
3+
// TODO: Add a function to register a module
4+
// Note: Maybe use context to keep track of the modules
5+
export interface MHPModule {
6+
title: string;
7+
description: string;
8+
icon: React.ReactNode;
9+
component: React.ComponentType;
10+
props?: any;
11+
}

0 commit comments

Comments
 (0)