View Subpages

client/src/App.jsx

@@ -8,18 +8,18 @@ import moment from "moment";
 
 import { useSelector, useDispatch } from "react-redux";
 import { getAuth, deleteAuth } from "./_redux/auth";
+import { initUrl } from "./_redux/url";
 
 const App = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const auth = useSelector((state) => state.auth);
+  const url = useSelector((state) => state.url);
   const [showLanguages, setShowLanguages] = useState(false);
   const [page, setPage] = useState("");
 
-  const query = new URLSearchParams(window.location.search);
-  const url = query.get("url");
-
   useEffect(() => {
+    dispatch(initUrl());
     dispatch(getAuth());
   }, []);
 
@@ -54,7 +54,7 @@ const App = () => {
                       </button>
                     </div>
 
-                    {url && <Comments url={url} />}
+                    {url && <Comments />}
                   </>
                 ) : (
                   <div>

client/src/_redux/store.js

@@ -2,11 +2,13 @@ import { configureStore } from "@reduxjs/toolkit";
 import authReducer from "./auth";
 import commentsReducer from "./comments";
 import countReducer from "./count";
+import urlReducer from "./url";
 
 export const store = configureStore({
   reducer: {
     auth: authReducer,
     comments: commentsReducer,
     count: countReducer,
+    url: urlReducer,
   },
 });

client/src/_redux/url.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const urlSlice = createSlice({
+  name: "url",
+  initialState: "",
+  reducers: {
+    initUrl: () => {
+      const query = new URLSearchParams(window.location.search);
+      const url = query.get("url");
+      return url;
+    },
+    setUrl: (_state, action) => {
+      return action.payload;
+    },
+  },
+});
+
+export const { initUrl, setUrl } = urlSlice.actions;
+
+export default urlSlice.reducer;

client/src/components/Comments.jsx

@@ -5,25 +5,28 @@ import CommentForm from "./CommentForm";
 import CommentsList from "./CommentsList";
 import { useTranslation } from "react-i18next";
 import ErrorDiv from "./ErrorDiv";
+import Subpages from "./Subpages";
 
 import { useSelector, useDispatch } from "react-redux";
 import { setCount } from "./../_redux/count";
 import { setComments, loadOlderComments } from "./../_redux/comments";
 
 // eslint-disable-next-line react/prop-types
-const Comments = ({ url }) => {
+const Comments = () => {
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(0);
   const [loadMore, setLoadMore] = useState(false);
-  const loaded = useRef(false);
+  const [showSubpages, setShowSubpages] = useState(false);
+  const lastUrl = useRef("");
   const { t } = useTranslation();
   const auth = useSelector((state) => state.auth);
   const count = useSelector((state) => state.count);
+  const url = useSelector((state) => state.url);
   const dispatch = useDispatch();
 
   useEffect(() => {
-    if (loaded.current === false) {
+    if (lastUrl.current !== url) {
       const API_URL =
         process.env.NODE_ENV === "development"
           ? process.env.REACT_APP_API_LOCAL_SERVER
@@ -58,9 +61,9 @@ const Comments = ({ url }) => {
         }
       });
 
-      loaded.current = true;
+      lastUrl.current = url;
     }
-  }, [page]);
+  }, [page, url]);
 
   return (
     <div>
@@ -73,8 +76,21 @@ const Comments = ({ url }) => {
             </span>
           </span>
 
-          <div className="dark:text-gray-300 flex p-2 px-2 text-gray-700 float-right">
-            {count} {count > 1 ? t("comments") : t("comment")}
+          <div className="flex p-2 px-2 justify-between">
+            {showSubpages ? (
+              <Subpages url={url} auth={auth} t={t} />
+            ) : (
+              <span
+                className="cursor-pointer dark:text-gray-300 text-gray-700"
+                onClick={() => setShowSubpages(true)}
+              >
+                {t("Show subpages")}
+              </span>
+            )}
+
+            <span className="dark:text-gray-300 text-gray-700">
+              {count} {count > 1 ? t("comments") : t("comment")}
+            </span>
           </div>
         </div>
 

client/src/components/Subpages.jsx

@@ -0,0 +1,80 @@
+/* eslint-disable react/prop-types */
+import React, { useRef, useState, useEffect } from "react";
+import axios from "axios";
+
+import { useDispatch } from "react-redux";
+import { setUrl } from "./../_redux/url";
+
+// eslint-disable-next-line react/prop-types
+const Subpages = ({ url, auth, t }) => {
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [subpages, setSubpages] = useState([]);
+  const loaded = useRef(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (loaded.current === false) {
+      const API_URL =
+        process.env.NODE_ENV === "development"
+          ? process.env.REACT_APP_API_LOCAL_SERVER
+          : process.env.REACT_APP_API_SERVER;
+
+      setLoading(true);
+      axios({
+        method: "post",
+        url: API_URL + "/api/getsubpages",
+        data: {
+          url,
+          authKey: auth.authKey,
+        },
+      }).then((res) => {
+        setLoading(false);
+
+        if (res.data.meta) {
+          setSubpages(res.data.meta);
+          setError("");
+        } else {
+          setError(res.data.error);
+        }
+      });
+
+      loaded.current = true;
+    }
+  }, []);
+
+  return (
+    <div>
+      <div>
+        {loading ? (
+          <span>{t("Loading...")}</span>
+        ) : (
+          <div>
+            {subpages.length > 0 ? (
+              <select
+                style={{ width: 200 }}
+                className="rounded-lg"
+                onChange={(e) => {
+                  dispatch(setUrl(e.target.value));
+                }}
+              >
+                {subpages.map((u, key) => (
+                  <option key={key} value={u.url}>
+                    /{u.url.match(/^https?:\/\/[a-zA-Z:.0-9]+\/(.*)$/)[1]} -{" "}
+                    {u.count} {u.count > 1 ? t("comments") : t("comment")}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <span>{t("No subpages")}</span>
+            )}
+
+            {error && <span>{error}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Subpages;

client/src/locales/de/translation.json

@@ -42,6 +42,8 @@
   "Save Comment": "Kommentar speichern",
   "Show more": "Mehr anzeigen",
   "Load older comments": "Ältere Kommentare aufrufen",
+  "No subpages": "Keine Unterseiten",
+  "Show subpages": "Unterseiten zeigen",
 
   "Comment not found.": "Kommentar nicht gefunden.",
   "Error. Please try again.": "Fehler. Bitte versuche es erneut.",

client/src/locales/en/translation.json

@@ -42,6 +42,8 @@
   "Save Comment": "Save Comment",
   "Show more": "Show more",
   "Load older comments": "Load older comments",
+  "No subpages": "No subpages",
+  "Show subpages": "Show subpages",
 
   "Comment not found.": "Comment not found.",
   "Error. Please try again.": "Error. Please try again.",

client/src/locales/fr/translation.json

@@ -42,14 +42,16 @@
   "Save Comment": "Sauvegarder le commentaire",
   "Show more": "Afficher plus",
   "Load older comments": "Charger comm. plus anciens",
+  "No subpages": "Pas de sous-pages",
+  "Show subpages": "Afficher les sous-pages",
 
   "Comment not found.": "Commentaire non trouvé.",
   "Error. Please try again.": "Erreur. Veuillez réessayer.",
   "Login can have min 2 and max 30 characters.": "Nom d'utilisateur peut avoir min 2 et max 30 caractères.",
   "Error. You have already one account.": "Erreur. Vous avez déjà un compte.",
   "Login exist, try another one.": "Ce nom existe déja, essayez un autre.",
   "Signature not match, please try again.": "La signature ne correspond pas, veuillez réessayer.",
-  "Website URL to long. Max 2000 characters.":"L'URL du site Web est trop long. Max 2000 caractères",
+  "Website URL to long. Max 2000 characters.": "L'URL du site Web est trop long. Max 2000 caractères",
   "Comment can have min 2 and max 3000 characters.": "Le commentaire peut avoir min 2 et max 3000 caractères.",
   "Please log in to post comment.": "Veuillez vous connecter pour poster un commentaire.",
   "Please log in to see comments.": "Veuillez vous connecter pour voir les commentaires.",

client/src/locales/nl/translation.json

@@ -42,6 +42,8 @@
   "Save Comment": "Commentaar opslaan",
   "Show more": "Toon meer",
   "Load older comments": "Oudere commentaren laden",
+  "No subpages": "Geen subpagina's",
+  "Show subpages": "Toon subpagina's",
 
   "Comment not found.": "Commentaar niet gevonden.",
   "Error. Please try again.": "Fout. Probeer het opnieuw.",

client/src/locales/pl/translation.json

@@ -42,6 +42,8 @@
   "Save Comment": "Zapisz komentarz",
   "Show more": "Pokaż całość",
   "Load older comments": "Załaduj starsze komentarze",
+  "No subpages": "Brak podstron",
+  "Show subpages": "Pokaż podstrony",
 
   "Comment not found.": "Komentarz nie znaleziony",
   "Error. Please try again.": "Błąd. Proszę spróbować ponownie.",

client/src/locales/skeleton/translation.json

@@ -42,6 +42,8 @@
   "Save Comment": "",
   "Show more": "",
   "Load older comments": "",
+  "No subpages": "",
+  "Show subpages": "",
 
   "Comment not found.": "",
   "Error. Please try again.": "",