From 70b84b810fe4de48cbe94c4e7099204b4e44a05f Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Sun, 6 Mar 2022 21:02:06 +0000
Subject: [PATCH] source layouts (#153)

---
 .../context/LibraryOptionsContext.tsx         |  4 +-
 .../library/LibraryOptionsProvider.tsx        |  4 +-
 src/components/source/GridLayouts.tsx         | 85 +++++++++++++++++++
 src/components/source/SourceMangaGrid.tsx     |  4 +-
 src/screens/SourceMangas.tsx                  |  6 ++
 src/typings.d.ts                              |  1 +
 6 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 src/components/source/GridLayouts.tsx

diff --git a/src/components/context/LibraryOptionsContext.tsx b/src/components/context/LibraryOptionsContext.tsx
index b550b9112a..7fd57282be 100644
--- a/src/components/context/LibraryOptionsContext.tsx
+++ b/src/components/context/LibraryOptionsContext.tsx
@@ -14,7 +14,9 @@ type ContextType = {
 };
 
 const LibraryOptionsContext = React.createContext<ContextType>({
-    options: { showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0 },
+    options: {
+        showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0, SourcegridLayout: 0,
+    },
     setOptions: () => {},
 });
 
diff --git a/src/components/library/LibraryOptionsProvider.tsx b/src/components/library/LibraryOptionsProvider.tsx
index 613d6574dc..0ec0cc753b 100644
--- a/src/components/library/LibraryOptionsProvider.tsx
+++ b/src/components/library/LibraryOptionsProvider.tsx
@@ -15,7 +15,9 @@ interface IProps {
 
 export default function LibraryOptionsContextProvider({ children }: IProps) {
     const [options, setOptions] = useLocalStorage<LibraryDisplayOptions>('libraryOptions',
-        { showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0 });
+        {
+            showDownloadBadge: false, showUnreadBadge: false, gridLayout: 0, SourcegridLayout: 0,
+        });
 
     return (
         <LibraryOptionsContext.Provider value={{ options, setOptions }}>
diff --git a/src/components/source/GridLayouts.tsx b/src/components/source/GridLayouts.tsx
new file mode 100644
index 0000000000..0bf89929b3
--- /dev/null
+++ b/src/components/source/GridLayouts.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import {
+    IconButton, Menu, MenuItem, FormControlLabel, Radio,
+} from '@mui/material';
+import React from 'react';
+import ViewModuleIcon from '@mui/icons-material/ViewModule';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
+
+export default function SourceGridLayout() {
+    const { options, setOptions } = useLibraryOptionsContext();
+
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: any) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    function setGridContextOptions(
+        e: React.ChangeEvent<HTMLInputElement>,
+        checked: boolean,
+    ) {
+        if (checked) {
+            setOptions((prev: any) => ({ ...prev, SourcegridLayout: parseInt(e.target.name, 10) }));
+        }
+    }
+
+    return (
+        <>
+            <IconButton
+                onClick={handleClick}
+                size="small"
+                sx={{ ml: 2 }}
+                aria-controls={open ? 'account-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+            >
+                <ViewModuleIcon />
+            </IconButton>
+            <Menu
+                id="basic-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{ 'aria-labelledby': 'basic-button' }}
+            >
+                <MenuItem onClick={handleClose}>
+                    <FormControlLabel
+                        label="Compact grid"
+                        control={(
+                            <Radio
+                                name="0"
+                                // eslint-disable-next-line max-len
+                                checked={options.SourcegridLayout === 0 || options.SourcegridLayout === undefined}
+                                onChange={setGridContextOptions}
+                            />
+                        )}
+                    />
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <FormControlLabel
+                        label="Comfortable grid"
+                        control={(
+                            <Radio
+                                name="1"
+                                checked={options.SourcegridLayout === 1}
+                                onChange={setGridContextOptions}
+                            />
+                        )}
+                    />
+
+                </MenuItem>
+            </Menu>
+
+        </>
+    );
+}
diff --git a/src/components/source/SourceMangaGrid.tsx b/src/components/source/SourceMangaGrid.tsx
index daf4da0ae1..a843549b65 100644
--- a/src/components/source/SourceMangaGrid.tsx
+++ b/src/components/source/SourceMangaGrid.tsx
@@ -17,7 +17,8 @@ function filterManga(mangas: IMangaCard[]): IMangaCard[] {
 
 export default function SourceMangaGrid(props: IMangaGridProps) {
     const {
-        mangas, isLoading, hasNextPage, lastPageNum, setLastPageNum, message, messageExtra,
+        mangas, isLoading, hasNextPage, lastPageNum,
+        setLastPageNum, message, messageExtra, gridLayout,
     } = props;
 
     const filteredManga = filterManga(mangas);
@@ -32,6 +33,7 @@ export default function SourceMangaGrid(props: IMangaGridProps) {
             setLastPageNum={setLastPageNum}
             message={showFilteredOutMessage ? FILTERED_OUT_MESSAGE : message}
             messageExtra={messageExtra}
+            gridLayout={gridLayout}
         />
     );
 }
diff --git a/src/screens/SourceMangas.tsx b/src/screens/SourceMangas.tsx
index d02b908558..c0bde9741e 100644
--- a/src/screens/SourceMangas.tsx
+++ b/src/screens/SourceMangas.tsx
@@ -15,6 +15,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import SourceOptions from 'components/source/SourceOptions';
 import AppbarSearch from 'components/util/AppbarSearch';
 import { useQueryParam, StringParam } from 'use-query-params';
+import SourceGridLayout from 'components/source/GridLayouts';
+import { useLibraryOptionsContext } from 'components/context/LibraryOptionsContext';
 
 interface IPos {
     position: number
@@ -43,6 +45,8 @@ export default function SourceMangas(props: { popular: boolean }) {
     const [Init, setInit] = useState<undefined | null>();
     const [Noreset, setNoreset] = useQueryParam('R');
 
+    const { options } = useLibraryOptionsContext();
+
     function makeFilters() {
         client.get(`/api/v1/source/${sourceId}/filters`)
             .then((response) => response.data)
@@ -123,6 +127,7 @@ export default function SourceMangas(props: { popular: boolean }) {
     useEffect(() => {
         setAction(
             <>
+                <SourceGridLayout />
                 <AppbarSearch />
                 {isConfigurable && (
                     <IconButton
@@ -202,6 +207,7 @@ export default function SourceMangas(props: { popular: boolean }) {
                 message={message}
                 messageExtra={messageExtra}
                 isLoading={!fetched}
+                gridLayout={options.SourcegridLayout}
             />
             {Data !== undefined && (
                 <SourceOptions
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 7eea6a3b19..ba4ee0e00b 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -265,4 +265,5 @@ interface LibraryDisplayOptions {
     showDownloadBadge: boolean
     showUnreadBadge: boolean
     gridLayout: number
+    SourcegridLayout:number
 }