hide nsfw by default, can hide nsfw in MangaExtensions

src/screens/Settings.tsx

@@ -25,6 +25,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import TextField from '@material-ui/core/TextField';
+import FavoriteIcon from '@material-ui/icons/Favorite';
 import NavbarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 import useLocalStorage from '../util/useLocalStorage';
@@ -36,6 +37,7 @@ export default function Settings() {
 
     const { darkTheme, setDarkTheme } = useContext(DarkTheme);
     const [serverAddress, setServerAddress] = useLocalStorage<String>('serverBaseURL', '');
+    const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', false);
     const [dialogOpen, setDialogOpen] = useState(false);
     const [dialogValue, setDialogValue] = useState(serverAddress);
 
@@ -81,6 +83,19 @@ export default function Settings() {
                         />
                     </ListItemSecondaryAction>
                 </ListItem>
+                <ListItem>
+                    <ListItemIcon>
+                        <FavoriteIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Show NSFW" />
+                    <ListItemSecondaryAction>
+                        <Switch
+                            edge="end"
+                            checked={showNsfw}
+                            onChange={() => setShowNsfw(!showNsfw)}
+                        />
+                    </ListItemSecondaryAction>
+                </ListItem>
                 <ListItem>
                     <ListItemIcon>
                         <DnsIcon />

src/screens/manga/MangaExtensions.tsx

@@ -49,6 +49,7 @@ function extensionDefaultLangs() {
 export default function MangaExtensions() {
     const { setTitle, setAction } = useContext(NavbarContext);
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', extensionDefaultLangs());
+    const [showNsfw] = useLocalStorage<boolean>('showNsfw', false);
 
     useEffect(() => {
         setTitle('Extensions');
@@ -94,15 +95,17 @@ export default function MangaExtensions() {
                                 <h1 key={lang} style={{ marginLeft: 25 }}>
                                     {langCodeToName(lang)}
                                 </h1>
-                                {(list as IExtension[]).map((it) => (
-                                    <ExtensionCard
-                                        key={it.apkName}
-                                        extension={it}
-                                        notifyInstall={() => {
-                                            triggerUpdate();
-                                        }}
-                                    />
-                                ))}
+                                {(list as IExtension[])
+                                    .filter((extension) => showNsfw || !extension.isNsfw)
+                                    .map((it) => (
+                                        <ExtensionCard
+                                            key={it.apkName}
+                                            extension={it}
+                                            notifyInstall={() => {
+                                                triggerUpdate();
+                                            }}
+                                        />
+                                    ))}
                             </React.Fragment>
                         ))
                 ))