No plex server connected message

markdavella · Mar 7, 2024 · 286636c · 286636c
1 parent 75a368c
commit 286636c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 25 deletions.
diff --git a/web/src/components/channel_config/ProgrammingSelector.tsx b/web/src/components/channel_config/ProgrammingSelector.tsx
@@ -1,11 +1,13 @@
 import {
+  AddCircle,
   Clear,
   ExpandLess,
   ExpandMore,
   GridView,
   ViewList,
 } from '@mui/icons-material';
 import {
+  Box,
   Button,
   ButtonGroup,
   Collapse,
@@ -37,7 +39,7 @@ import {
 } from '@tunarr/types/plex';
 import { chain, first, isEmpty, isNil, isUndefined, map } from 'lodash-es';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useIntersectionObserver } from 'usehooks-ts';
 import { toggle } from '../../helpers/util.ts';
 import { fetchPlexPath, usePlex } from '../../hooks/plexHooks.ts';
@@ -294,6 +296,28 @@ export default function ProgrammingSelector() {
           </Select>
         </FormControl>
       )}
+      {plexServers?.length === 0 && (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            m: 4,
+          }}
+        >
+          <Typography align="center" variant="h6">
+            No Plex Servers connected
+          </Typography>
+          <Button
+            variant="contained"
+            to="/settings/plex"
+            component={Link}
+            sx={{ margin: '0 auto' }}
+            startIcon={<AddCircle />}
+          >
+            Add Your Plex Server
+          </Button>
+        </Box>
+      )}
       {!isNil(directoryChildren) &&
         directoryChildren.size > 0 &&
         selectedLibrary && (
@@ -364,26 +388,29 @@ export default function ProgrammingSelector() {
             </Stack>
           </>
         )}
-      <LinearProgress
-        sx={{ visibility: searchLoading ? 'visible' : 'hidden' }}
-      />
-      <List
-        component="nav"
-        sx={{
-          mt: 2,
-          width: '100%',
-          maxHeight: 1200,
-          overflowY: 'scroll',
-          display: viewType === 'grid' ? 'flex' : 'block',
-          flexWrap: 'wrap',
-          gap: '10px',
-          justifyContent: 'space-between',
-        }}
-      >
-        {selectedServer && renderListItems()}
-
-        <div style={{ height: 40 }} ref={ref}></div>
-      </List>
+      {selectedServer && (
+        <LinearProgress
+          sx={{ visibility: searchLoading ? 'visible' : 'hidden' }}
+        />
+      )}
+      {selectedServer && (
+        <List
+          component="nav"
+          sx={{
+            mt: 2,
+            width: '100%',
+            maxHeight: 1200,
+            overflowY: 'scroll',
+            display: viewType === 'grid' ? 'flex' : 'block',
+            flexWrap: 'wrap',
+            gap: '10px',
+            justifyContent: 'space-between',
+          }}
+        >
+          renderListItems()
+          <div style={{ height: 40 }} ref={ref}></div>
+        </List>
+      )}
       <Divider sx={{ mt: 3, mb: 2 }} />
       <Typography>Selected Items</Typography>
       <SelectedProgrammingList />

diff --git a/web/src/pages/channels/ProgrammingSelectorPage.tsx b/web/src/pages/channels/ProgrammingSelectorPage.tsx
@@ -3,10 +3,6 @@ import PaddedPaper from '../../components/base/PaddedPaper.tsx';
 import ProgrammingSelector from '../../components/channel_config/ProgrammingSelector.tsx';
 
 export default function ProgrammingSelectorPage() {
-  // const location = useLocation();
-  // const pathnames = reject(location.pathname.split('/'), isEmpty);
-  // const getRouteName = useGetRouteName();
-
   return (
     <>
       <Breadcrumbs />