Add a checkbox to include/exclude translations

components/CellData.tsx

@@ -17,6 +17,7 @@ export interface Mod {
   description: string;
   thumbnail_link: string;
   game_id: number;
+  is_translation: boolean;
   updated_at: string;
   created_at: string;
   last_update_at: string;

components/CellModList.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 
 import styles from "../styles/CellModList.module.css";
@@ -19,7 +19,10 @@ type ModWithCounts = Mod & {
 };
 
 const CellModList: React.FC<Props> = ({ mods, counts }) => {
-  const modsWithCounts: ModWithCounts[] = mods.map((mod) => {
+  const [includeTranslations, setIncludeTranslations] = useState(true);
+
+  const modsWithCounts: ModWithCounts[] = mods
+    .map((mod) => {
       const modCounts = counts && counts[mod.nexus_mod_id];
       return {
         ...mod,
@@ -27,7 +30,8 @@ const CellModList: React.FC<Props> = ({ mods, counts }) => {
         unique_downloads: modCounts ? modCounts[1] : 0,
         views: modCounts ? modCounts[2] : 0,
       };
-  });
+    })
+    .filter((mod) => includeTranslations || !mod.is_translation);
 
   let numberFmt = new Intl.NumberFormat("en-US");
 
@@ -35,6 +39,14 @@ const CellModList: React.FC<Props> = ({ mods, counts }) => {
     mods && (
       <>
         <h2>Nexus Mods ({modsWithCounts.length})</h2>
+        <label className={styles["include-translations"]}>
+          <input
+            type="checkbox"
+            checked={includeTranslations}
+            onChange={() => setIncludeTranslations(!includeTranslations)}
+          />
+          Include translations
+        </label>
         <ul className={styles["mod-list"]}>
           {modsWithCounts
             .sort((a, b) => b.unique_downloads - a.unique_downloads)

components/ModData.tsx

@@ -22,6 +22,7 @@ export interface Mod {
   description: string;
   thumbnail_link: string;
   game_id: number;
+  is_translation: boolean;
   updated_at: string;
   created_at: string;
   last_update_at: string;
@@ -134,6 +135,7 @@ const ModData: React.FC<Props> = ({
           >
             {data.category_name}
           </a>
+          {data.is_translation && <strong>&nbsp;(translation)</strong>}
         </div>
         <div>
           <strong>Author:&nbsp;</strong>

components/PluginModList.tsx

@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 
 import styles from "../styles/PluginModList.module.css";
@@ -22,7 +22,10 @@ type ModWithCounts = Mod & {
 };
 
 const PluginModList: React.FC<Props> = ({ mods, files, counts }) => {
-  const modsWithCounts: ModWithCounts[] = mods.map((mod) => {
+  const [includeTranslations, setIncludeTranslations] = useState(true);
+
+  const modsWithCounts: ModWithCounts[] = mods
+    .map((mod) => {
       const modCounts = counts && counts[mod.nexus_mod_id];
       return {
         ...mod,
@@ -30,7 +33,8 @@ const PluginModList: React.FC<Props> = ({ mods, files, counts }) => {
         unique_downloads: modCounts ? modCounts[1] : 0,
         views: modCounts ? modCounts[2] : 0,
       };
-  });
+    })
+    .filter((mod) => includeTranslations || !mod.is_translation);
 
   let numberFmt = new Intl.NumberFormat("en-US");
 
@@ -38,6 +42,14 @@ const PluginModList: React.FC<Props> = ({ mods, files, counts }) => {
     mods && (
       <>
         <h2>Nexus Mods ({modsWithCounts.length})</h2>
+        <label className={styles["include-translations"]}>
+          <input
+            type="checkbox"
+            checked={includeTranslations}
+            onChange={() => setIncludeTranslations(!includeTranslations)}
+          />
+          Include translations
+        </label>
         <ul className={styles["mod-list"]}>
           {modsWithCounts
             .sort((a, b) => b.unique_downloads - a.unique_downloads)

styles/CellModList.module.css

@@ -11,3 +11,11 @@
 .mod-title {
   margin-bottom: 8px;
 }
+
+.include-translations {
+  margin-bottom: 12px;
+}
+
+.include-translations input {
+  margin-right: 8px;
+}

styles/PluginModList.module.css

@@ -21,3 +21,11 @@
 .file-list li {
   margin-top: 8px;
 }
+
+.include-translations {
+  margin-bottom: 12px;
+}
+
+.include-translations input {
+  margin-right: 8px;
+}