From 88a07266b2a06faf5e5e536d8269ed3d9fa7896b Mon Sep 17 00:00:00 2001
From: Mark D'Avella <markdavella@gmail.com>
Date: Fri, 26 Apr 2024 12:15:45 -0400
Subject: [PATCH] update build (#387)

---
 .../channel_config/NoChannelsCreated.tsx      | 43 +++++++++++++++++++
 web/src/pages/channels/ChannelsPage.tsx       | 33 +-------------
 web/src/pages/guide/GuidePage.tsx             |  4 +-
 3 files changed, 48 insertions(+), 32 deletions(-)
 create mode 100644 web/src/components/channel_config/NoChannelsCreated.tsx

diff --git a/web/src/components/channel_config/NoChannelsCreated.tsx b/web/src/components/channel_config/NoChannelsCreated.tsx
new file mode 100644
index 000000000..2fd8223b3
--- /dev/null
+++ b/web/src/components/channel_config/NoChannelsCreated.tsx
@@ -0,0 +1,43 @@
+import SettingsRemoteIcon from '@mui/icons-material/SettingsRemote';
+import { Box, Button, Typography } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { useChannels } from '../../hooks/useChannels';
+import PaddedPaper from '../base/PaddedPaper';
+
+export default function NoChannelsCreated() {
+  const { isFetching: channelsFetching, data: channels } = useChannels();
+
+  return (
+    channels &&
+    channels.length === 0 &&
+    !channelsFetching && (
+      <PaddedPaper
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          py: 10,
+          textAlign: 'center',
+        }}
+      >
+        <Box>
+          <SettingsRemoteIcon fontSize="large" />
+          <Typography variant="h5">
+            You haven't created any channels yet.
+          </Typography>
+          <Button
+            variant="contained"
+            sx={{
+              my: 2,
+              maxWidth: 350,
+              textAlign: 'center',
+            }}
+            component={RouterLink}
+            to="/channels/new"
+          >
+            Create your First Channel Now!
+          </Button>
+        </Box>
+      </PaddedPaper>
+    )
+  );
+}
diff --git a/web/src/pages/channels/ChannelsPage.tsx b/web/src/pages/channels/ChannelsPage.tsx
index d5f041d40..eb03caf01 100644
--- a/web/src/pages/channels/ChannelsPage.tsx
+++ b/web/src/pages/channels/ChannelsPage.tsx
@@ -1,7 +1,6 @@
 import { Delete, PlayArrow as WatchIcon } from '@mui/icons-material';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import EditIcon from '@mui/icons-material/Edit';
-import SettingsRemoteIcon from '@mui/icons-material/SettingsRemote';
 import TextSnippetIcon from '@mui/icons-material/TextSnippet';
 import {
   Box,
@@ -32,7 +31,7 @@ import { isEmpty } from 'lodash-es';
 import { useState } from 'react';
 import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import TunarrLogo from '../../components/TunarrLogo.tsx';
-import PaddedPaper from '../../components/base/PaddedPaper.tsx';
+import NoChannelsCreated from '../../components/channel_config/NoChannelsCreated.tsx';
 import { useChannels } from '../../hooks/useChannels.ts';
 import { useTunarrApi } from '../../hooks/useTunarrApi.ts';
 
@@ -238,35 +237,7 @@ export default function ChannelsPage() {
         </Table>
       </TableContainer>
 
-      {channels && channels.length === 0 && !channelsFetching && (
-        <PaddedPaper
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            py: 10,
-            textAlign: 'center',
-          }}
-        >
-          <Box>
-            <SettingsRemoteIcon fontSize="large" />
-            <Typography variant="h5">
-              You haven't created any channels yet.
-            </Typography>
-            <Button
-              variant="contained"
-              sx={{
-                my: 2,
-                maxWidth: 350,
-                textAlign: 'center',
-              }}
-              component={RouterLink}
-              to="/channels/new"
-            >
-              Create your First Channel Now!
-            </Button>
-          </Box>
-        </PaddedPaper>
-      )}
+      <NoChannelsCreated />
     </div>
   );
 }
diff --git a/web/src/pages/guide/GuidePage.tsx b/web/src/pages/guide/GuidePage.tsx
index 5ac01ad99..8543aba6e 100644
--- a/web/src/pages/guide/GuidePage.tsx
+++ b/web/src/pages/guide/GuidePage.tsx
@@ -17,11 +17,12 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import dayjs, { Dayjs, duration } from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import { useCallback, useState } from 'react';
+import { useInterval } from 'usehooks-ts';
+import NoChannelsCreated from '../../components/channel_config/NoChannelsCreated.tsx';
 import { TvGuide } from '../../components/guide/TvGuide.tsx';
 import { roundCurrentTime } from '../../helpers/util.ts';
 import useStore from '../../store/index.ts';
 import { setGuideDurationState } from '../../store/themeEditor/actions.ts';
-import { useInterval } from 'usehooks-ts';
 
 dayjs.extend(duration);
 dayjs.extend(isBetween);
@@ -153,6 +154,7 @@ export default function GuidePage({ channelId }: Props = { channelId: 'all' }) {
         </Stack>
       </Box>
       <TvGuide channelId={channelId} start={start} end={end} />
+      <NoChannelsCreated />
     </>
   );
 }