Created a GridLayout enum and updated all locations to use it. (#208)

So, that we can more easily refactor the code later

src/components/MangaCard.tsx

@@ -14,7 +14,7 @@ import { Avatar, CardContent, Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
 import SpinnerImage from 'components/util/SpinnerImage';
 import { Box, styled } from '@mui/system';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import { BACK } from 'util/useBackTo';
 
 const BottomGradient = styled('div')({
@@ -66,7 +66,7 @@ const truncateText = (str: string, maxLength: number) => {
 
 interface IProps {
     manga: IMangaCard
-    gridLayout: number | undefined
+    gridLayout?: GridLayout
     dimensions: number
     inLibraryIndicator?: boolean
 }
@@ -88,11 +88,11 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
 
     const mangaLinkTo = { pathname: `/manga/${id}/`, state: { backLink: BACK } };
 
-    if (gridLayout !== 2) {
+    if (gridLayout !== GridLayout.List) {
         const cols = Math.ceil(dimensions / ItemWidth);
         return (
             <Grid item columns={cols} xs={1}>
-                <Link to={mangaLinkTo} style={(gridLayout === 1) ? { textDecoration: 'none' } : {}}>
+                <Link to={mangaLinkTo} style={(gridLayout === GridLayout.Comfortable) ? { textDecoration: 'none' } : {}}>
                     <Box
                         sx={{
                             display: 'flex',
@@ -164,13 +164,13 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                         placeItems: 'center',
                                     }}
                                 />
-                                {(gridLayout === 1) ? (<></>) : (
+                                {(gridLayout === GridLayout.Comfortable) ? (<></>) : (
                                     <>
                                         <BottomGradient />
                                         <BottomGradientDoubledDown />
                                     </>
                                 )}
-                                {(gridLayout === 1) ? (
+                                {(gridLayout === GridLayout.Comfortable) ? (
                                     <></>
                                 ) : (
                                     <MangaTitle
@@ -184,7 +184,7 @@ const MangaCard = React.forwardRef<HTMLDivElement, IProps>((props: IProps, ref)
                                 )}
                             </CardActionArea>
                         </Card>
-                        {(gridLayout === 1) ? (
+                        {(gridLayout === GridLayout.Comfortable) ? (
                             <MangaTitle
                                 sx={{
                                     position: 'relative',

src/components/MangaGrid.tsx

@@ -14,6 +14,7 @@ import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import MangaCard from './MangaCard';
+import { GridLayout } from './context/LibraryOptionsContext';
 
 export interface IMangaGridProps{
     mangas: IMangaCard[]
@@ -23,7 +24,7 @@ export interface IMangaGridProps{
     hasNextPage: boolean
     lastPageNum: number
     setLastPageNum: (lastPageNum: number) => void
-    gridLayout?: number | undefined
+    gridLayout?: GridLayout
     horisontal?: boolean | undefined
     noFaces?: boolean | undefined
     inLibraryIndicator?: boolean

src/components/context/LibraryOptionsContext.tsx

@@ -12,11 +12,17 @@ type ContextType = {
     setOptions: React.Dispatch<React.SetStateAction<LibraryOptions>>;
 };
 
+export enum GridLayout {
+    Compact = 0,
+    Comfortable = 1,
+    List = 2,
+}
+
 export const DefaultLibraryOptions: LibraryOptions = {
     showDownloadBadge: false,
     showUnreadBadge: false,
-    gridLayout: 0,
+    gridLayout: GridLayout.Compact,
-    SourcegridLayout: 0,
+    SourcegridLayout: GridLayout.Compact,
 
     downloaded: undefined,
     sortDesc: undefined,

src/components/library/LibraryOptionsPanel.tsx

@@ -10,7 +10,7 @@ import CheckboxInput from 'components/atoms/CheckboxInput';
 import RadioInput from 'components/atoms/RadioInput';
 import SortRadioInput from 'components/atoms/SortRadioInput';
 import ThreeStateCheckboxInput from 'components/atoms/ThreeStateCheckboxInput';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 import OptionsTabs from 'components/molecules/OptionsTabs';
 import React from 'react';
 
@@ -78,9 +78,9 @@ const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                                 onChange={(e) => handleFilterChange('gridLayout', Number(e.target.value))}
                                 value={gridLayout}
                             >
-                                <RadioInput label="Compact grid" value={0} checked={gridLayout == null || gridLayout === 0} />
+                                <RadioInput label="Compact grid" value={GridLayout.Compact} checked={gridLayout == null || gridLayout === GridLayout.Compact} />
-                                <RadioInput label="Comfortable grid" value={1} checked={gridLayout === 1} />
+                                <RadioInput label="Comfortable grid" value={GridLayout.Comfortable} checked={gridLayout === GridLayout.Comfortable} />
-                                <RadioInput label="List" value={2} checked={gridLayout === 2} />
+                                <RadioInput label="List" value={GridLayout.List} checked={gridLayout === GridLayout.List} />
                             </RadioGroup>
 
                             <FormLabel sx={{ mt: 2 }}>Badges</FormLabel>

src/components/source/GridLayouts.tsx

@@ -10,10 +10,11 @@ import {
 } from '@mui/material';
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+import { GridLayout, useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 
+// TODO: clean up this to use a FormControl, and remove dependency on name o radio button
 export default function SourceGridLayout() {
-    const { options, setOptions } = useLibraryOptionsContext();
+    const { options: { SourcegridLayout }, setOptions } = useLibraryOptionsContext();
 
     const [anchorEl, setAnchorEl] = React.useState(null);
     const open = Boolean(anchorEl);
@@ -55,11 +56,14 @@ export default function SourceGridLayout() {
                 <MenuItem onClick={handleClose}>
                     <FormControlLabel
                         label="Compact grid"
+                        value={GridLayout.Compact}
                         control={(
                             <Radio
-                                name="0"
+                                name={GridLayout.Compact.toString()}
-                                // eslint-disable-next-line max-len
+                                checked={
-                                checked={options.SourcegridLayout === 0 || options.SourcegridLayout === undefined}
+                                    SourcegridLayout === GridLayout.Compact
+                                    || SourcegridLayout === undefined
+                                }
                                 onChange={setGridContextOptions}
                             />
                         )}
@@ -70,8 +74,8 @@ export default function SourceGridLayout() {
                         label="Comfortable grid"
                         control={(
                             <Radio
-                                name="1"
+                                name={GridLayout.Comfortable.toString()}
-                                checked={options.SourcegridLayout === 1}
+                                checked={SourcegridLayout === GridLayout.Comfortable}
                                 onChange={setGridContextOptions}
                             />
                         )}
@@ -82,15 +86,14 @@ export default function SourceGridLayout() {
                         label="List"
                         control={(
                             <Radio
-                                name="2"
+                                name={GridLayout.List.toString()}
-                                checked={options.SourcegridLayout === 2}
+                                checked={SourcegridLayout === GridLayout.List}
                                 onChange={setGridContextOptions}
                             />
                         )}
                     />
                 </MenuItem>
             </Menu>
-
         </>
     );
 }

src/typings.d.ts

@@ -280,12 +280,18 @@ type ChapterOptionsReducerAction =
 
 type LibrarySortMode = 'sortToRead' | 'sortAlph' | 'sortID';
 
+enum GridLayout {
+    Compact = 0,
+    Comfortable = 1,
+    List = 2,
+}
+
 interface LibraryOptions {
     // display options
     showDownloadBadge: boolean
     showUnreadBadge: boolean
-    gridLayout: number
+    gridLayout: GridLayout
-    SourcegridLayout:number
+    SourcegridLayout: GridLayout
 
     // filter options
     downloaded: NullAndUndefined<boolean>