feat: env-based feature flag for backoffice (#621)

Co-authored-by: Enzo Vieira <enzovieira16@hotmail.com>

.env.local.sample

@@ -1,2 +1,3 @@
-NEXT_PUBLIC_API_URL=http://localhost:4000
-NEXT_PUBLIC_QRCODE_HOST=seium.org
+NEXT_PUBLIC_API_URL=http://locahost:4000
+NEXT_PUBLIC_QRCODE_HOST=seium.org
+NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG=true

components/FeatureFlags/BackOfficeWrapper.tsx

@@ -0,0 +1,13 @@
+type BackOfficeWrapperProps = {
+  children: React.ReactNode;
+};
+
+export default function BackOfficeWrapper({
+  children,
+}: BackOfficeWrapperProps) {
+  if (process.env.NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG === "true") {
+    return <>{children}</>;
+  }
+
+  return null;
+}

components/Navbar/index.jsx

@@ -11,6 +11,7 @@ import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { useAuth } from "@context/Auth";
 import JoinUs from "@components/JoinUs";
 import styles from "./style.module.css";
+import BackOfficeWrapper from "@components/FeatureFlags/BackOfficeWrapper";
 
 const navigation = [
   { name: "Schedule", slug: "/schedule" },
@@ -76,15 +77,17 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                             {item.name}
                           </Link>
                         ))}
-                        {isAuthenticated ? null : (
-                          <Link
-                            key="login"
-                            href="/login"
-                            className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100"
-                          >
-                            Login
-                          </Link>
-                        )}
+                        <BackOfficeWrapper>
+                          {isAuthenticated ? null : (
+                            <Link
+                              key="login"
+                              href="/login"
+                              className="font-iregular text-sm text-white text-opacity-40 hover:text-opacity-100"
+                            >
+                              Login
+                            </Link>
+                          )}
+                        </BackOfficeWrapper>
                       </div>
                       {isAuthenticated ? (
                         <Menu as="div" className="relative z-50 ml-3">
@@ -186,17 +189,19 @@ export default function Navbar({ bgColor, fgColor, button, children }) {
                     </Link>
                   </Disclosure.Button>
                 ))}
-              {!isAuthenticated && (
-                <Disclosure.Button
-                  key="login"
-                  as="a"
-                  className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
-                >
-                  <Link key="login" href="/login">
-                    Login
-                  </Link>
-                </Disclosure.Button>
-              )}
+              <BackOfficeWrapper>
+                {!isAuthenticated && (
+                  <Disclosure.Button
+                    key="login"
+                    as="a"
+                    className="block rounded-md py-6 text-center font-ibold text-3xl text-white hover:text-quinary"
+                  >
+                    <Link key="login" href="/login">
+                      Login
+                    </Link>
+                  </Disclosure.Button>
+                )}
+              </BackOfficeWrapper>
               {isAuthenticated && (
                 <Disclosure.Button
                   key="login"

layout/Home/Home.tsx

@@ -7,6 +7,7 @@ import Footer from "@components/Footer";
 function Home() {
   return (
     <Navbar bgColor="secondary" button="quinary" fgColor="white">
+      {/* FIXME: The parameter could probably be better in some way */}
       <Hero />
       <Schedule />
       <Sponsors />

layout/Sponsor/Visitors/Visitors.tsx

@@ -53,6 +53,7 @@ const SponsorVisitors: React.FC = () => {
           setVisitors(response.data);
         }
       })
+      // FIXME: This should be displayed as a toast notification
       .catch((error) => console.log(error));
   }, [user]);
 

middleware.ts

@@ -0,0 +1,24 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  if (process.env.NEXT_PUBLIC_BACKOFFICE_FEATURE_FLAG === "false") {
+    return NextResponse.redirect(new URL("/404", request.url));
+  }
+}
+
+export const config = {
+  matcher: [
+    "/attendee/:path*",
+    "/attendees/:path*",
+    "/badge/:path*",
+    "/product/:path*",
+    "/register/:path*",
+    "/sponsor/:path*",
+    "/staff/:path*",
+    "/forgot-password/:path*",
+    "/login/:path*",
+    "/reset/:path*",
+    "/signup/:path*",
+  ],
+};

pages/_app.tsx

@@ -3,7 +3,7 @@ import Header from "@components/Header";
 
 import "../styles/globals.css";
 
-function MyApp({ Component, pageProps }) {
+function App({ Component, pageProps }) {
   return (
     <AuthProvider>
       <Header />
@@ -12,4 +12,4 @@ function MyApp({ Component, pageProps }) {
   );
 }
 
-export default MyApp;
+export default App;