Tons o stuff

src/Cell.js

@@ -18,6 +18,7 @@ const Cell = React.memo((props) => {
     requestUnloadedSkin,
     permalinkUrl,
     concentsToNsfw,
+    doesNotConcentToNsfw,
     showNsfw,
   } = props;
   const { width, height } = data;
@@ -58,6 +59,7 @@ const Cell = React.memo((props) => {
       // TODO: This is werid because there is an implicit assumption that this is always avaliable if we have the skin
       permalink={permalinkUrl}
       concentsToNsfw={concentsToNsfw}
+      doesNotConcentToNsfw={doesNotConcentToNsfw}
       showNsfw={showNsfw}
     />
   );
@@ -91,7 +93,11 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(Actions.selectedSkin(hash, position));
   },
   concentsToNsfw() {
-    dispatch(Actions.concentsToNswf());
+    dispatch(Actions.concentsToNsfw());
+  },
+
+  doesNotConcentToNsfw() {
+    dispatch(Actions.doesNotConcentToNsfw());
   },
 });
 export default connect(mapStateToProps, mapDispatchToProps)(Cell);

src/UploadGrid.js

@@ -4,6 +4,7 @@ import { HEADING_HEIGHT } from "./constants";
 import { useActionCreator } from "./hooks";
 import * as Actions from "./redux/actionCreators";
 import * as Selectors from "./redux/selectors";
+import * as Utils from "./utils";
 
 function UploadRow({ file }) {
   const tryToUploadFile = useActionCreator(Actions.tryToUploadFile);
@@ -44,6 +45,15 @@ function UploadRow({ file }) {
       <td>{getStatus()}</td>
       <td>{file.file.name}</td>
       <td>{file.status}</td>
+      <td>
+        {(file.status === "FOUND" || file.status === "ARCHIVED") && (
+          <img
+            src={Utils.screenshotUrlFromHash(file.md5)}
+            alt={file.file.name}
+            style={{ height: 100 }}
+          />
+        )}
+      </td>
     </tr>
   );
 }

src/components/Skin.js

@@ -14,6 +14,7 @@ function Skin({
   fileName,
   nsfw,
   concentsToNsfw,
+  doesNotConcentToNsfw,
   showNsfw,
 }) {
   const [loaded, setLoaded] = useState(false);
@@ -28,6 +29,7 @@ function Skin({
           )
         ) {
           e.preventDefault();
+          doesNotConcentToNsfw();
           return;
         } else {
           concentsToNsfw();
@@ -44,7 +46,15 @@ function Skin({
         selectSkin(hash, { top, left });
       }
     },
-    [concentsToNsfw, hash, nsfw, ref, selectSkin, showNsfw]
+    [
+      concentsToNsfw,
+      doesNotConcentToNsfw,
+      hash,
+      nsfw,
+      ref,
+      selectSkin,
+      showNsfw,
+    ]
   );
 
   const imgStyle = {

src/redux/actionCreators.js

@@ -26,10 +26,14 @@ export function loadedSkinZip(zip) {
   return { type: "LOADED_SKIN_ZIP", zip };
 }
 
-export function concentsToNswf() {
+export function concentsToNsfw() {
   return { type: "CONCENTS_TO_NSFW" };
 }
 
+export function doesNotConcentToNsfw() {
+  return { type: "DOES_NOT_CONCENT_TO_NSFW" };
+}
+
 export function toggleUploadView() {
   return { type: "TOGGLE_UPLOAD_VIEW" };
 }

src/redux/epics.js

@@ -4,12 +4,15 @@ import * as Actions from "./actionCreators";
 import * as Selectors from "./selectors";
 import * as Utils from "../utils";
 import {
+  tap,
   filter,
   switchMap,
   map,
   mergeMap,
   takeUntil,
   catchError,
+  ignoreElements,
+  delay,
 } from "rxjs/operators";
 import { search } from "../algolia";
 import queryParser from "../queryParser";
@@ -264,9 +267,7 @@ function uploadActions(file) {
   return concat(
     of(Actions.startingFileUpload(file.id)),
     from(UploadUtils.upload(file.file)).pipe(
-      map((response) => {
-        return Actions.archivedSkin(file.id, response);
-      }),
+      map((response) => Actions.archivedSkin(file.id, response)),
       catchError(() => of(Actions.uploadFailed(file.id)))
     )
   );
@@ -300,6 +301,33 @@ const uploadAllFilesEpic = (actions, state) =>
     })
   );
 
+const loggingEpic = (actions, state) =>
+  actions.pipe(
+    tap((action) => {
+      // ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
+      switch (action.type) {
+        case "CONCENTS_TO_N_SFW":
+        case "DOES_NOT_CONCENT_TO_NSFW":
+        case "CLOSE_UPLOAD_FILES":
+        case "GOT_FILE_MD5":
+        case "ARCHIVED_SKIN":
+        case "TRY_TO_UPLOAD_FILE":
+        case "UPLOAD_FAILED":
+        case "STARTING_FILE_UPLOAD":
+        case "TRY_TO_UPLOAD_ALL_FILES":
+        case "INVALID_FILE_EXTENSION":
+        case "GOT_FILE":
+        case "NOT_CLASSIC_SKIN":
+        case "GOT_MISSING_AND_FOUND_MD5S":
+          window.ga("send", "event", "redux", action.type);
+          break;
+        default: {
+        }
+      }
+    }),
+    ignoreElements()
+  );
+
 export default combineEpics(
   searchEpic,
   urlChangedEpic,
@@ -314,5 +342,6 @@ export default combineEpics(
   uploadFilesEpic,
   uploadAllFilesEpic,
   uploadSingleFileEpic,
-  checkIfUploadsAreMissingEpic
+  checkIfUploadsAreMissingEpic,
+  loggingEpic
 );

src/utils.js

@@ -1,4 +1,5 @@
 import { SKIN_CDN, SCREENSHOT_CDN } from "./constants";
+
 export function screenshotUrlFromHash(hash) {
   return `${SCREENSHOT_CDN}/screenshots/${hash}.png`;
 }