Add use load flag + isLoading status (#1512)

* add use load flag
cds-snc · Jan 10, 2023 · 2bd0d8c · 2bd0d8c
1 parent 4f1a3a3
commit 2bd0d8c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 17 deletions.
diff --git a/lib/hooks/index.ts b/lib/hooks/index.ts
@@ -1,4 +1,5 @@
 export { useFlag } from "./useFlag";
+export { useLoadFlag } from "./useLoadFlag";
 export { useRefresh } from "./useRefresh";
 export { useExternalScript } from "./useExternalScript";
 export { useFormTimer } from "./useFormTimer";

diff --git a/lib/hooks/useLoadFlag.ts b/lib/hooks/useLoadFlag.ts
@@ -0,0 +1,9 @@
+import useSWR from "swr";
+import axios from "axios";
+
+const fetcher = (url: string) => axios.get(url).then((response) => response.data);
+
+export const useLoadFlag = (key: string): { isLoading: boolean; status: boolean | undefined } => {
+  const { data, isLoading } = useSWR(`/api/flags/${key}/check`, fetcher);
+  return { isLoading, status: !!data?.status };
+};
diff --git a/package.json b/package.json
@@ -77,10 +77,10 @@
     "react": "18.2.0",
     "react-app-polyfill": "3.0.0",
     "react-dom": "18.2.0",
-    "react-i18next": "12.0.0",
+    "react-i18next": "12.1.4",
     "react-select": "5.7.0",
     "react-tabs": "4.2.1",
-    "swr": "1.3.0",
+    "swr": "2.0.0",
     "ts-command-line-args": "2.3.1",
     "ts-node": "10.9.1",
     "uuid": "8.3.2",

diff --git a/pages/signup/register.tsx b/pages/signup/register.tsx
@@ -1,20 +1,22 @@
 import React, { ReactElement } from "react";
 import { Formik } from "formik";
 import { Button, TextInput, Label, Alert, ErrorListItem, Description } from "@components/forms";
-import { useAuth, useFlag } from "@lib/hooks";
+import { useAuth, useLoadFlag } from "@lib/hooks";
 import { useTranslation } from "next-i18next";
 import { GetServerSideProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { Confirmation } from "@components/auth/Confirmation/Confirmation";
 import * as Yup from "yup";
 import { isValidGovEmail, isUpperCase, isLowerCase, isNumber, isSymbol } from "@lib/validation";
 import UserNavLayout from "@components/globals/layouts/UserNavLayout";
+import Loader from "@components/globals/Loader";
 import { authOptions } from "@pages/api/auth/[...nextauth]";
 import { unstable_getServerSession } from "next-auth/next";
 import Link from "next/link";
 import Head from "next/head";
 
 const Register = () => {
+  const { isLoading, status: registrationOpen } = useLoadFlag("accountRegistration");
   const {
     username,
     password,
@@ -28,7 +30,6 @@ const Register = () => {
     register,
   } = useAuth();
   const { t } = useTranslation(["signup", "common"]);
-  const registrationOpen = useFlag("accountRegistration");
 
   const validationSchema = Yup.object().shape({
     name: Yup.string()
@@ -74,6 +75,21 @@ const Register = () => {
       ),
   });
 
+  if (isLoading) {
+    return (
+      <>
+        <Head>
+          <title>{t("signUpRegistration.title")}</title>
+        </Head>
+        <Loader message={t("loading")} />
+      </>
+    );
+  }
+
+  if (!registrationOpen) {
+    return <div>{t("registrationClosed")}</div>;
+  }
+
   if (needsConfirmation) {
     return (
       <Confirmation
@@ -85,9 +101,6 @@ const Register = () => {
     );
   }
 
-  if (!registrationOpen) {
-    return <div>{t("registrationClosed")}</div>;
-  }
   return (
     <>
       <Head>

diff --git a/yarn.lock b/yarn.lock
@@ -2200,6 +2200,13 @@
   dependencies:
     regenerator-runtime "^0.13.10"
 
+"@babel/runtime@^7.20.6":
+  version "7.20.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
+  integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/template@7", "@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.3.3":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -13690,12 +13697,12 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-i18next@12.0.0:
-  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.0.0.tgz#634015a2c035779c5736ae4c2e5c34c1659753b1"
-  integrity sha512-/O7N6aIEAl1FaWZBNvhdIo9itvF/MO/nRKr9pYqRc9LhuC1u21SlfwpiYQqvaeNSEW3g3qUXLREOWMt+gxrWbg==
+react-i18next@12.1.4:
+  version "12.1.4"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.1.4.tgz#be0a60d3a45acc4321909f8a4b8cde16518a2926"
+  integrity sha512-XQND7jYtgM7ht5PH3yIZljCRpAMTlH/zmngM9ZjToqa+0BR6xuu8c7QF0WIIOEjcMTB2S3iOfpN/xG/ZrAnO6g==
   dependencies:
-    "@babel/runtime" "^7.14.5"
+    "@babel/runtime" "^7.20.6"
     html-parse-stringify "^3.0.1"
 
 react-i18next@^11.18.4:
@@ -13940,6 +13947,11 @@ regenerator-runtime@^0.13.10, regenerator-runtime@^0.13.7, regenerator-runtime@^
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz#ed07b19616bcbec5da6274ebc75ae95634bfc2ee"
   integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-transform@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
@@ -15122,10 +15134,12 @@ svgo@^2.7.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
-swr@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-1.3.0.tgz#c6531866a35b4db37b38b72c45a63171faf9f4e8"
-  integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
+swr@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.0.0.tgz#91d999359e2be92de1a41f6b6711d72be20ffdbd"
+  integrity sha512-IhUx5yPkX+Fut3h0SqZycnaNLXLXsb2ECFq0Y29cxnK7d8r7auY2JWNbCW3IX+EqXUg3rwNJFlhrw5Ye/b6k7w==
+  dependencies:
+    use-sync-external-store "^1.2.0"
 
 symbol-tree@^3.2.4:
   version "3.2.4"
@@ -15883,7 +15897,7 @@ use-isomorphic-layout-effect@^1.1.2:
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
 
-use-sync-external-store@1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==