Split grid/list view configs into separate components

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -38,28 +38,21 @@ import {
   setGridGapSize,
 } from '../../../redux/configSlice';
 
-const LookAndFeelConfig = () => {
+export const ListViewConfigPanel = ({ bordered }: any) => {
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
-  const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
-    Boolean(settings.getSync('dynamicBackground'))
-  );
+
   const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
     Boolean(settings.getSync('highlightOnRowHover'))
   );
-  const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
-  const themePickerContainerRef = useRef(null);
-  const fontPickerContainerRef = useRef(null);
-  const titleBarPickerContainerRef = useRef(null);
-  const [themeList, setThemeList] = useState(
-    _.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
-  );
+
   const songCols: any = settings.getSync('musicListColumns');
   const albumCols: any = settings.getSync('albumListColumns');
   const playlistCols: any = settings.getSync('playlistListColumns');
   const artistCols: any = settings.getSync('artistListColumns');
   const miniCols: any = settings.getSync('miniListColumns');
   const genreCols: any = settings.getSync('genreListColumns');
+
   const currentSongColumns = songCols?.map((column: any) => column.label) || [];
   const currentAlbumColumns = albumCols?.map((column: any) => column.label) || [];
   const currentPlaylistColumns = playlistCols?.map((column: any) => column.label) || [];
@@ -67,6 +60,188 @@ const LookAndFeelConfig = () => {
   const currentMiniColumns = miniCols?.map((column: any) => column.label) || [];
   const currentGenreColumns = genreCols?.map((column: any) => column.label) || [];
 
+  return (
+    <ConfigPanel header="List-View" bordered={bordered}>
+      <Nav
+        activeKey={config.active.columnSelectorTab}
+        onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
+      >
+        <StyledNavItem eventKey="music">Songs</StyledNavItem>
+        <StyledNavItem eventKey="album">Albums</StyledNavItem>
+        <StyledNavItem eventKey="playlist">Playlists</StyledNavItem>
+        <StyledNavItem eventKey="artist">Artists</StyledNavItem>
+        <StyledNavItem eventKey="genre">Genres</StyledNavItem>
+        <StyledNavItem eventKey="mini">Miniplayer</StyledNavItem>
+      </Nav>
+      {config.active.columnSelectorTab === 'music' && (
+        <ListViewConfig
+          title="Song List"
+          defaultColumns={currentSongColumns}
+          columnPicker={songColumnPicker}
+          columnList={songColumnListAuto}
+          settingsConfig={{
+            columnList: 'musicListColumns',
+            rowHeight: 'musicListRowHeight',
+            fontSize: 'musicListFontSize',
+          }}
+        />
+      )}
+
+      {config.active.columnSelectorTab === 'album' && (
+        <ListViewConfig
+          title="Album List"
+          defaultColumns={currentAlbumColumns}
+          columnPicker={albumColumnPicker}
+          columnList={albumColumnListAuto}
+          settingsConfig={{
+            columnList: 'albumListColumns',
+            rowHeight: 'albumListRowHeight',
+            fontSize: 'albumListFontSize',
+          }}
+        />
+      )}
+
+      {config.active.columnSelectorTab === 'playlist' && (
+        <ListViewConfig
+          title="Playlist List"
+          defaultColumns={currentPlaylistColumns}
+          columnPicker={playlistColumnPicker}
+          columnList={playlistColumnListAuto}
+          settingsConfig={{
+            columnList: 'playlistListColumns',
+            rowHeight: 'playlistListRowHeight',
+            fontSize: 'playlistListFontSize',
+          }}
+        />
+      )}
+
+      {config.active.columnSelectorTab === 'artist' && (
+        <ListViewConfig
+          title="Artist List"
+          defaultColumns={currentArtistColumns}
+          columnPicker={artistColumnPicker}
+          columnList={artistColumnListAuto}
+          settingsConfig={{
+            columnList: 'artistListColumns',
+            rowHeight: 'artistListRowHeight',
+            fontSize: 'artistListFontSize',
+          }}
+        />
+      )}
+
+      {config.active.columnSelectorTab === 'genre' && (
+        <ListViewConfig
+          title="Genre List"
+          defaultColumns={currentGenreColumns}
+          columnPicker={genreColumnPicker}
+          columnList={genreColumnListAuto}
+          settingsConfig={{
+            columnList: 'genreListColumns',
+            rowHeight: 'genreListRowHeight',
+            fontSize: 'genreListFontSize',
+          }}
+        />
+      )}
+
+      {config.active.columnSelectorTab === 'mini' && (
+        <ListViewConfig
+          title="Miniplayer List"
+          defaultColumns={currentMiniColumns}
+          columnPicker={songColumnPicker}
+          columnList={songColumnListAuto}
+          settingsConfig={{
+            columnList: 'miniListColumns',
+            rowHeight: 'miniListRowHeight',
+            fontSize: 'miniListFontSize',
+          }}
+        />
+      )}
+
+      <br />
+      <StyledCheckbox
+        defaultChecked={highlightOnRowHoverChk}
+        checked={highlightOnRowHoverChk}
+        onChange={(_v: any, e: boolean) => {
+          settings.setSync('highlightOnRowHover', e);
+          dispatch(
+            setMiscSetting({
+              setting: 'highlightOnRowHover',
+              value: e,
+            })
+          );
+          setHighlightOnRowHoverChk(e);
+        }}
+      >
+        Show highlight on row hover
+      </StyledCheckbox>
+    </ConfigPanel>
+  );
+};
+
+export const GridViewConfigPanel = ({ bordered }: any) => {
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((state) => state.config);
+
+  return (
+    <ConfigPanel header="Grid-View" bordered={bordered}>
+      <ControlLabel>Card size (px)</ControlLabel>
+      <StyledInputNumber
+        defaultValue={config.lookAndFeel.gridView.cardSize}
+        step={1}
+        min={100}
+        max={350}
+        width={150}
+        onChange={(e: any) => {
+          settings.setSync('gridCardSize', Number(e));
+          dispatch(setGridCardSize({ size: Number(e) }));
+        }}
+      />
+      <br />
+      <ControlLabel>Gap size (px)</ControlLabel>
+      <StyledInputNumber
+        defaultValue={config.lookAndFeel.gridView.gapSize}
+        step={1}
+        min={0}
+        max={100}
+        width={150}
+        onChange={(e: any) => {
+          settings.setSync('gridGapSize', Number(e));
+          dispatch(setGridGapSize({ size: Number(e) }));
+        }}
+      />
+      <br />
+      <ControlLabel>Grid alignment</ControlLabel>
+      <RadioGroup
+        name="gridAlignemntRadioList"
+        appearance="default"
+        defaultValue={config.lookAndFeel.gridView.alignment}
+        value={config.lookAndFeel.gridView.alignment}
+        onChange={(e: string) => {
+          dispatch(setGridAlignment({ alignment: e }));
+          settings.setSync('gridAlignment', e);
+        }}
+      >
+        <StyledRadio value="flex-start">Left</StyledRadio>
+        <StyledRadio value="center">Center</StyledRadio>
+      </RadioGroup>
+    </ConfigPanel>
+  );
+};
+
+const LookAndFeelConfig = () => {
+  const dispatch = useAppDispatch();
+  const [dynamicBackgroundChk, setDynamicBackgroundChk] = useState(
+    Boolean(settings.getSync('dynamicBackground'))
+  );
+
+  const [selectedTheme, setSelectedTheme] = useState(String(settings.getSync('theme')));
+  const themePickerContainerRef = useRef(null);
+  const fontPickerContainerRef = useRef(null);
+  const titleBarPickerContainerRef = useRef(null);
+  const [themeList, setThemeList] = useState(
+    _.concat(settings.getSync('themes'), settings.getSync('themesDefault'))
+  );
+
   return (
     <>
       <ConfigPanel header="Look & Feel" bordered>
@@ -161,162 +336,9 @@ const LookAndFeelConfig = () => {
           Enable dynamic background
         </StyledCheckbox>
       </ConfigPanel>
-      <ConfigPanel header="List-View" bordered>
-        <Nav
-          activeKey={config.active.columnSelectorTab}
-          onSelect={(e) => dispatch(setActive({ ...config.active, columnSelectorTab: e }))}
-        >
-          <StyledNavItem eventKey="music">Songs</StyledNavItem>
-          <StyledNavItem eventKey="album">Albums</StyledNavItem>
-          <StyledNavItem eventKey="playlist">Playlists</StyledNavItem>
-          <StyledNavItem eventKey="artist">Artists</StyledNavItem>
-          <StyledNavItem eventKey="genre">Genres</StyledNavItem>
-          <StyledNavItem eventKey="mini">Miniplayer</StyledNavItem>
-        </Nav>
-        {config.active.columnSelectorTab === 'music' && (
-          <ListViewConfig
-            title="Song List"
-            defaultColumns={currentSongColumns}
-            columnPicker={songColumnPicker}
-            columnList={songColumnListAuto}
-            settingsConfig={{
-              columnList: 'musicListColumns',
-              rowHeight: 'musicListRowHeight',
-              fontSize: 'musicListFontSize',
-            }}
-          />
-        )}
-
-        {config.active.columnSelectorTab === 'album' && (
-          <ListViewConfig
-            title="Album List"
-            defaultColumns={currentAlbumColumns}
-            columnPicker={albumColumnPicker}
-            columnList={albumColumnListAuto}
-            settingsConfig={{
-              columnList: 'albumListColumns',
-              rowHeight: 'albumListRowHeight',
-              fontSize: 'albumListFontSize',
-            }}
-          />
-        )}
-
-        {config.active.columnSelectorTab === 'playlist' && (
-          <ListViewConfig
-            title="Playlist List"
-            defaultColumns={currentPlaylistColumns}
-            columnPicker={playlistColumnPicker}
-            columnList={playlistColumnListAuto}
-            settingsConfig={{
-              columnList: 'playlistListColumns',
-              rowHeight: 'playlistListRowHeight',
-              fontSize: 'playlistListFontSize',
-            }}
-          />
-        )}
-
-        {config.active.columnSelectorTab === 'artist' && (
-          <ListViewConfig
-            title="Artist List"
-            defaultColumns={currentArtistColumns}
-            columnPicker={artistColumnPicker}
-            columnList={artistColumnListAuto}
-            settingsConfig={{
-              columnList: 'artistListColumns',
-              rowHeight: 'artistListRowHeight',
-              fontSize: 'artistListFontSize',
-            }}
-          />
-        )}
 
-        {config.active.columnSelectorTab === 'genre' && (
-          <ListViewConfig
-            title="Genre List"
-            defaultColumns={currentGenreColumns}
-            columnPicker={genreColumnPicker}
-            columnList={genreColumnListAuto}
-            settingsConfig={{
-              columnList: 'genreListColumns',
-              rowHeight: 'genreListRowHeight',
-              fontSize: 'genreListFontSize',
-            }}
-          />
-        )}
-
-        {config.active.columnSelectorTab === 'mini' && (
-          <ListViewConfig
-            title="Miniplayer List"
-            defaultColumns={currentMiniColumns}
-            columnPicker={songColumnPicker}
-            columnList={songColumnListAuto}
-            settingsConfig={{
-              columnList: 'miniListColumns',
-              rowHeight: 'miniListRowHeight',
-              fontSize: 'miniListFontSize',
-            }}
-          />
-        )}
-
-        <br />
-        <StyledCheckbox
-          defaultChecked={highlightOnRowHoverChk}
-          checked={highlightOnRowHoverChk}
-          onChange={(_v: any, e: boolean) => {
-            settings.setSync('highlightOnRowHover', e);
-            dispatch(
-              setMiscSetting({
-                setting: 'highlightOnRowHover',
-                value: e,
-              })
-            );
-            setHighlightOnRowHoverChk(e);
-          }}
-        >
-          Show highlight on row hover
-        </StyledCheckbox>
-      </ConfigPanel>
-      <ConfigPanel header="Grid-View" bordered>
-        <ControlLabel>Card size (px)</ControlLabel>
-        <StyledInputNumber
-          defaultValue={config.lookAndFeel.gridView.cardSize}
-          step={1}
-          min={100}
-          max={350}
-          width={150}
-          onChange={(e: any) => {
-            settings.setSync('gridCardSize', Number(e));
-            dispatch(setGridCardSize({ size: Number(e) }));
-          }}
-        />
-        <br />
-        <ControlLabel>Gap size (px)</ControlLabel>
-        <StyledInputNumber
-          defaultValue={config.lookAndFeel.gridView.gapSize}
-          step={1}
-          min={0}
-          max={100}
-          width={150}
-          onChange={(e: any) => {
-            settings.setSync('gridGapSize', Number(e));
-            dispatch(setGridGapSize({ size: Number(e) }));
-          }}
-        />
-        <br />
-        <ControlLabel>Grid alignment</ControlLabel>
-        <RadioGroup
-          name="gridAlignemntRadioList"
-          appearance="default"
-          defaultValue={config.lookAndFeel.gridView.alignment}
-          value={config.lookAndFeel.gridView.alignment}
-          onChange={(e: string) => {
-            dispatch(setGridAlignment({ alignment: e }));
-            settings.setSync('gridAlignment', e);
-          }}
-        >
-          <StyledRadio value="flex-start">Left</StyledRadio>
-          <StyledRadio value="center">Center</StyledRadio>
-        </RadioGroup>
-      </ConfigPanel>
+      <ListViewConfigPanel bordered />
+      <GridViewConfigPanel bordered />
     </>
   );
 };