[skip ci] Feat: Add switch Latest / Popular (#995)

* Add switch Latest / Popular

* Fix label

src/components/accordions/PopularNovels/index.tsx

@@ -4,6 +4,9 @@ import {
   Stack,
   ToggleButton,
   ToggleButtonGroup,
+  Switch,
+  FormControlLabel,
+  FormGroup,
 } from '@mui/material';
 import React, { useEffect, useState, ChangeEvent } from 'react';
 import AccordionContainer from '../components/AccordionContainer';
@@ -19,12 +22,16 @@ export default function PopularNovels() {
   const [loading, setLoading] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [maxIndex, setMaxIndex] = useState(0);
+  const [isLatest, setIsLatest] = useState(true);
 
   const fetchNovelsByIndex = (index: number) => {
     if (plugin && index) {
       setLoading(true);
       plugin
-        .popularNovels(index, { filters: filterValues })
+        .popularNovels(index, {
+          filters: filterValues,
+          showLatestNovels: isLatest,
+        })
         .then(res => {
           if (res.length !== 0) {
             setCurrentIndex(index);
@@ -38,6 +45,18 @@ export default function PopularNovels() {
     }
   };
 
+  const handleSwitchLatestChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsLatest(event.target.checked);
+  };
+
+  useEffect(() => {
+    if (plugin) {
+      setCurrentIndex(1);
+      setMaxIndex(1);
+      fetchNovelsByIndex(1);
+    }
+  }, [isLatest]);
+
   useEffect(() => {
     // Reset when changing plugins.
     setCurrentIndex(0);
@@ -57,7 +76,19 @@ export default function PopularNovels() {
   }, [plugin]);
   return (
     <AccordionContainer title="Popular Novels" loading={loading}>
-      <Stack direction={'row'} spacing={2}>
+      <Stack direction={'row'} spacing={2} alignItems={'center'}>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={isLatest}
+                onChange={handleSwitchLatestChange}
+                color="secondary"
+              />
+            }
+            label={<Box minWidth={70}>{isLatest ? 'Latest' : 'Popular'}</Box>}
+          />
+        </FormGroup>
         <Button
           disabled={plugin === undefined}
           onClick={() => fetchNovelsByIndex(1)}