Make part of state

src/Cell.js

@@ -17,6 +17,8 @@ const Cell = React.memo((props) => {
     setSelectedSkin,
     requestUnloadedSkin,
     permalinkUrl,
+    concentsToNsfw,
+    showNsfw,
   } = props;
   const { width, height } = data;
   React.useEffect(() => {
@@ -55,6 +57,8 @@ const Cell = React.memo((props) => {
       nsfw={nsfw}
       // TODO: This is werid because there is an implicit assumption that this is always avaliable if we have the skin
       permalink={permalinkUrl}
+      concentsToNsfw={concentsToNsfw}
+      showNsfw={showNsfw}
     />
   );
 });
@@ -75,6 +79,7 @@ const mapStateToProps = (state, ownProps) => {
     requestToken,
     skin,
     permalinkUrl: skin == null ? null : getPermalinkUrlFromHash(skin.hash),
+    showNsfw: state.showNsfw,
   };
 };
 
@@ -85,5 +90,8 @@ const mapDispatchToProps = (dispatch) => ({
   setSelectedSkin(hash, position) {
     dispatch(Actions.selectedSkin(hash, position));
   },
+  concentsToNsfw() {
+    dispatch(Actions.concentsToNswf());
+  },
 });
 export default connect(mapStateToProps, mapDispatchToProps)(Cell);

src/components/Skin.js

@@ -2,8 +2,6 @@ import React, { useState, useCallback } from "react";
 import * as Utils from "../utils";
 import { SCREENSHOT_HEIGHT } from "../constants";
 
-let willSeeNsfw = false;
-
 function Skin({
   style,
   height,
@@ -15,19 +13,24 @@ function Skin({
   src,
   fileName,
   nsfw,
+  concentsToNsfw,
+  showNsfw,
 }) {
   const [loaded, setLoaded] = useState(false);
   const [ref, setRef] = useState(null);
 
   const clickHandler = useCallback(
     (e) => {
-      if (nsfw && !willSeeNsfw) {
-        willSeeNsfw = window.confirm(
-          'This skin has been flagged as "not safe for work". Access adult content?'
-        );
-        if (!willSeeNsfw) {
+      if (nsfw && !showNsfw) {
+        if (
+          !window.confirm(
+            'This skin has been flagged as "not safe for work". Reveal all NSFW content?'
+          )
+        ) {
           e.preventDefault();
           return;
+        } else {
+          concentsToNsfw();
         }
       }
       if (Utils.eventIsLinkClick(e)) {
@@ -41,7 +44,7 @@ function Skin({
         selectSkin(hash, { top, left });
       }
     },
-    [hash, nsfw, ref, selectSkin]
+    [concentsToNsfw, hash, nsfw, ref, selectSkin, showNsfw]
   );
 
   const imgStyle = {
@@ -51,7 +54,7 @@ function Skin({
     opacity: loaded ? 1 : 0,
     transition: "opacity 0.2s",
     backfaceVisibility: loaded ? "hidden" : null,
-    filter: nsfw ? "blur(10px)" : null,
+    filter: nsfw && !showNsfw ? "blur(10px)" : null,
     outline: "none",
   };
 

src/redux/actionCreators.js

@@ -26,11 +26,12 @@ export function loadedSkinZip(zip) {
   return { type: "LOADED_SKIN_ZIP", zip };
 }
 
+export function concentsToNswf() {
+  return { type: "CONCENTS_TO_NSFW" };
+}
+
 export function selectSkinFile(fileName) {
-  const ext = fileName
-    .split(".")
-    .pop()
-    .toLowerCase();
+  const ext = fileName.split(".").pop().toLowerCase();
 
   return { type: "SELECTED_SKIN_FILE_TO_FOCUS", fileName, ext };
 }

src/redux/reducer.js

@@ -14,6 +14,7 @@ const defaultState = {
   scale: 0.5,
   skinChunkData: { chunkSize: 100, numberOfSkins: 64381, chunkFileNames: [] },
   skins: {},
+  showNsfw: false,
 };
 
 export default function reducer(state = defaultState, action) {
@@ -21,6 +22,9 @@ export default function reducer(state = defaultState, action) {
     case "SET_SCALE": {
       return { ...state, scale: action.scale };
     }
+    case "CONCENTS_TO_NSFW": {
+      return { ...state, showNsfw: true };
+    }
     case "GOT_SKIN_DATA": {
       return {
         ...state,