fix(frontend): reset status when navigate to another alert repo (#74)

* fix(frontend): reset status when navigate to another alert repo * refactor: use catch-all-routes * fix: remove old router.query * fix(frontend): remove console
SocialGouv · Aug 11, 2020 · 8da67a6 · 8da67a6
1 parent 7f633e7
commit 8da67a6
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 37 deletions.
diff --git a/targets/frontend/src/components/changes/index.js b/targets/frontend/src/components/changes/index.js
@@ -43,7 +43,7 @@ export function DilaLink({ info, children }) {
 }
 
 DilaLink.propTypes = {
-  children: PropTypes.nodes,
+  children: PropTypes.node,
   info: PropTypes.shape({
     context: PropTypes.shape({
       containerId: PropTypes.string,

diff --git a/targets/frontend/src/components/dialog/index.js b/targets/frontend/src/components/dialog/index.js
@@ -33,7 +33,7 @@ const styles = {
 };
 
 Dialog.propTypes = {
-  children: PropTypes.nodes,
+  children: PropTypes.node,
   isOpen: PropTypes.bool,
   onDismiss: PropTypes.func.isRequired,
 };
diff --git a/targets/frontend/src/components/layout/Nav.js b/targets/frontend/src/components/layout/Nav.js
@@ -60,8 +60,9 @@ export function Nav() {
             {data.sources.map((source) => (
               <Li key={source.repository}>
                 <Link
-                  href="/alerts/[repo]"
-                  as={`/alerts/${source.repository.replace(/\//g, "–")}#todo`}
+                  shallow
+                  href="/alerts/[[...params]]"
+                  as={`/alerts/${source.repository.replace(/\//g, "–")}/todo`}
                   passHref
                 >
                   <NavLink>{source.label}</NavLink>

diff --git a/targets/frontend/src/components/layout/auth.layout.js b/targets/frontend/src/components/layout/auth.layout.js
@@ -8,7 +8,6 @@ import { Header } from "./header";
 import { Nav } from "./Nav";
 
 export function Layout({ children, title }) {
-  console.log("-- <Layout>");
   return (
     <IconContext.Provider value={{ style: { verticalAlign: "middle" } }}>
       <Head>

diff --git a/targets/frontend/src/hoc/CustomUrqlClient.js b/targets/frontend/src/hoc/CustomUrqlClient.js
@@ -7,7 +7,12 @@ export const withCustomUrqlClient = (Component) =>
     const url = ctx?.req
       ? `${process.env.FRONTEND_URL}/api/graphql`
       : `/api/graphql`;
-    console.log("[ withUrqlClient ]", ctx?.req ? "server" : "client", url);
+    console.log(
+      "[ withUrqlClient ]",
+      ctx?.pathname,
+      ctx?.req ? "server" : "client",
+      url
+    );
     return {
       exchanges: [
         process.env.NODE_ENV !== "production"

diff --git a/targets/frontend/src/lib/auth/authTokenExchange.js b/targets/frontend/src/lib/auth/authTokenExchange.js
@@ -65,7 +65,6 @@ export const authExchange = (ctx) => ({ forward }) => {
       filter((operation) => operation.operationName !== "teardown"),
       mergeMap((operation) => {
         // check whether the token is expired
-        console.log("[ authExchange ]", operation.operationName);
         const isExpired = isTokenExpired();
         // If it's not expired then just add it to the operation immediately
         if (!isExpired) {
@@ -74,7 +73,6 @@ export const authExchange = (ctx) => ({ forward }) => {
 
         // If it's expired and we aren't refreshing it yet, start refreshing it
         if (isExpired && !refreshTokenPromise) {
-          console.log("[ authExchange ] no pending refresh");
           refreshTokenPromise = refreshToken(ctx).then((data) => {
             setToken(data);
             return data.jwt_token;

diff --git a/targets/frontend/src/lib/auth/token.js b/targets/frontend/src/lib/auth/token.js
@@ -16,7 +16,6 @@ function getUserId() {
 
 function isTokenExpired() {
   const expired = !token || Date.now() > new Date(token.jwt_token_expiry);
-  console.log("[ isTokenExpired ]", { expired });
   return expired;
 }
 
@@ -28,7 +27,6 @@ async function refreshToken(ctx) {
     if (ctx && ctx.req) {
       const cookies = parse(ctx.req.headers.cookie || "");
       if (cookies && cookies.refresh_token) {
-        console.log("[ auth.refreshToken ] add cookie", cookies.refresh_token);
         headers["Cookie"] = serialize("refresh_token", cookies.refresh_token);
       }
     }
@@ -47,10 +45,6 @@ async function refreshToken(ctx) {
     // for ServerSide call, we need to set the Cookie header
     // to update the refresh_token value
     if (ctx && ctx.res) {
-      console.log(
-        "[ auth.refreshToken ] setting cookie",
-        tokenData.refresh_token
-      );
       setRefreshTokenCookie(ctx.res, tokenData.refresh_token);
     }
     return tokenData;

diff --git a/targets/frontend/src/pages/alerts/[repo].js → ...rontend/src/pages/alerts/[[...params]].js b/targets/frontend/src/pages/alerts/[repo].js → ...rontend/src/pages/alerts/[[...params]].js
@@ -5,7 +5,7 @@ import slugify from "@socialgouv/cdtn-slugify";
 import { getRouteBySource } from "@socialgouv/cdtn-sources";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { AlertTitle } from "src/components/alerts/AlertTitle";
 import { DiffChange } from "src/components/changes";
 import { ChangesGroup } from "src/components/changes/ChangeGroup";
@@ -35,7 +35,7 @@ query getAlerts($status: String!, $repository: String!) {
       {status: {_eq: $status}},
       {repository: {_eq: $repository}},
     ]
-  } order_by: [{created_at: asc},{info: asc}]) {
+  } order_by: [{created_at: desc},{info: asc}]) {
     id
     ref
     info
@@ -49,33 +49,19 @@ query getAlerts($status: String!, $repository: String!) {
 
 export function AlertPage() {
   const router = useRouter();
-  const [, initialHash = "todo"] = router.asPath.split("#");
-  const [hash, setHash] = useState(initialHash);
-  useEffect(() => {
-    console.log("useEffects");
-    function onHashChange(url) {
-      console.log("onHashChange");
-      const [, hash = "todo"] = url.split("#");
-      setHash(hash);
-    }
-
-    router.events.on("hashChangeComplete", onHashChange);
-    return function () {
-      console.log("unmount");
-      router.events.off("hashChangeComplete", onHashChange);
-    };
-  }, [router.events]);
 
+  const [repo, status = "todo"] = router.query.params;
+  const repository = repo.replace(/–/, "/");
   // https://formidable.com/open-source/urql/docs/basics/document-caching/#adding-typenames
-  const repository = router.query.repo.replace(/–/, "/");
   const context = useMemo(() => ({ additionalTypenames: ["alerts"] }), []);
   const [result] = useQuery({
     context,
     query: getAlertQuery,
-    variables: { repository, status: hash },
+    variables: { repository, status },
   });
+
   const { fetching, error, data } = result;
-  console.log("<AlertPage> render", result, hash, repository);
+  console.log("<AlertPage> render", result, repository, status);
 
   if (fetching) {
     return <Layout title="Gestion des alertes">Chargement...</Layout>;
@@ -110,9 +96,14 @@ export function AlertPage() {
     <Layout title="Gestion des alertes">
       <Tabs id="statustab">
         {statuses.map((status) => (
-          <Link key={status.name} href={`#${status.name}`} passHref>
+          <Link
+            key={status.name}
+            as={`/alerts/${repo}/${status.name}`}
+            href="/alerts/[[...params]]"
+            passHref
+          >
             <NavLink>
-              <TabItem controls="statustab" selected={status.name == hash}>
+              <TabItem controls="statustab" selected={status.name === status}>
                 {getStatusLabel(status.name)} ({status.alerts.aggregate.count})
               </TabItem>
             </NavLink>