Bug: Dashboard4 New API key screen not ported (#526)

* Bug: Dashboard4 New API key screen not ported Fixes #525 * Removed unused variables --------- Co-authored-by: Rajat Saxena <[email protected]>
codelitdev · Nov 22, 2024 · 3928312 · 3928312
1 parent e5a9ded
commit 3928312
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 28 deletions.
diff --git a/apps/web/app/dashboard4/(sidebar)/settings/apikeys/new/layout.tsx b/apps/web/app/dashboard4/(sidebar)/settings/apikeys/new/layout.tsx
@@ -0,0 +1,16 @@
+import { APIKEY_NEW_HEADER } from "@ui-config/strings";
+import type { Metadata, ResolvingMetadata } from "next";
+import { ReactNode } from "react";
+
+export async function generateMetadata(
+    _: any,
+    parent: ResolvingMetadata,
+): Promise<Metadata> {
+    return {
+        title: `${APIKEY_NEW_HEADER} | ${(await parent)?.title?.absolute}`,
+    };
+}
+
+export default function Layout({ children }: { children: ReactNode }) {
+    return children;
+}
diff --git a/apps/web/app/dashboard4/(sidebar)/settings/apikeys/new/page.tsx b/apps/web/app/dashboard4/(sidebar)/settings/apikeys/new/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useContext } from "react";
+import LoadingScreen from "@components/admin/loading-screen";
+import { checkPermission } from "@courselit/utils";
+import { AddressContext, ProfileContext } from "@components/contexts";
+import { UIConstants } from "@courselit/common-models";
+import DashboardContent from "@components/admin/dashboard-content";
+import { SITE_SETTINGS_PAGE_HEADING } from "@ui-config/strings";
+import dynamic from "next/dynamic";
+const { permissions } = UIConstants;
+
+const ApikeyNew = dynamic(
+    () => import("@/components/admin/settings/apikey/new"),
+);
+
+const breadcrumbs = [{ label: SITE_SETTINGS_PAGE_HEADING, href: "#" }];
+
+export default function Page() {
+    const address = useContext(AddressContext);
+    const profile = useContext(ProfileContext);
+
+    if (!checkPermission(profile.permissions!, [permissions.manageSettings])) {
+        return <LoadingScreen />;
+    }
+
+    return (
+        <DashboardContent breadcrumbs={breadcrumbs}>
+            <ApikeyNew prefix="/dashboard4" address={address} />
+        </DashboardContent>
+    );
+}
diff --git a/apps/web/components/admin/mails/sequences-list.tsx b/apps/web/components/admin/mails/sequences-list.tsx
@@ -151,7 +151,9 @@ const SequencesList = ({
                     <TableRow key={broadcast.sequenceId}>
                         <td className="py-4">
                             <Link
-                                href={`${prefix}/mails/${type}/${broadcast.sequenceId}/edit`}
+                                href={`${prefix}/mails/${type}/${broadcast.sequenceId}${
+                                    prefix === "/dashboard" ? "/edit" : ""
+                                }`}
                                 className="flex"
                             >
                                 {type === "broadcast" &&

diff --git a/apps/web/components/admin/settings/apikey/new.tsx b/apps/web/components/admin/settings/apikey/new.tsx
@@ -6,7 +6,7 @@ import {
     FormField,
     IconButton,
 } from "@courselit/components-library";
-import { AppDispatch, AppState } from "@courselit/state-management";
+import { AppDispatch } from "@courselit/state-management";
 import { FetchBuilder } from "@courselit/utils";
 import {
     APIKEY_NEW_BTN_CAPTION,
@@ -20,7 +20,6 @@ import {
 } from "@ui-config/strings";
 import Link from "next/link";
 import { FormEvent, useState } from "react";
-import { connect } from "react-redux";
 import {
     networkAction,
     setAppMessage,
@@ -29,14 +28,16 @@ import { Clipboard } from "@courselit/icons";
 
 interface NewApikeyProps {
     address: Address;
-    dispatch: AppDispatch;
-    networkAction: boolean;
+    dispatch?: AppDispatch;
+    loading?: boolean;
+    prefix: string;
 }
 
-function NewApikey({
+export default function NewApikey({
     address,
     dispatch,
-    networkAction: loading,
+    loading = false,
+    prefix,
 }: NewApikeyProps) {
     const [name, setName] = useState("");
     const [apikey, setApikey] = useState("");
@@ -46,9 +47,12 @@ function NewApikey({
 
         if (window.isSecureContext && navigator.clipboard) {
             navigator.clipboard.writeText(apikey);
-            dispatch(
-                setAppMessage(new AppMessage(APIKEY_NEW_GENERATED_KEY_COPIED)),
-            );
+            dispatch &&
+                dispatch(
+                    setAppMessage(
+                        new AppMessage(APIKEY_NEW_GENERATED_KEY_COPIED),
+                    ),
+                );
         }
     };
 
@@ -72,23 +76,25 @@ function NewApikey({
             .setIsGraphQLEndpoint(true)
             .build();
         try {
-            dispatch(networkAction(true));
+            dispatch && dispatch(networkAction(true));
             const response = await fetch.exec();
             if (response.apikey) {
                 setApikey(response.apikey.key);
             }
         } catch (err: any) {
-            dispatch(setAppMessage(new AppMessage(err.message)));
+            dispatch && dispatch(setAppMessage(new AppMessage(err.message)));
         } finally {
-            dispatch(networkAction(false));
+            dispatch && dispatch(networkAction(false));
         }
     };
 
     return (
         <div className="flex flex-col gap-4">
-            <Breadcrumbs aria-label="new-apikey-breadcrumbs">
-                <Link href="/dashboard/settings">Apikeys</Link>
-            </Breadcrumbs>
+            {prefix === "/dasboard" && (
+                <Breadcrumbs aria-label="new-apikey-breadcrumbs">
+                    <Link href="/dashboard/settings">Apikeys</Link>
+                </Breadcrumbs>
+            )}
             <h1 className="text-4xl font-semibold mb-4">{APIKEY_NEW_HEADER}</h1>
             <Form
                 method="post"
@@ -121,7 +127,7 @@ function NewApikey({
                                 <Clipboard fontSize="small" />
                             </IconButton>
                         </div>
-                        <Link href={`/dashboard/settings`}>
+                        <Link href={`${prefix}/settings?tab=API%20Keys`}>
                             <Button>{BUTTON_DONE_TEXT}</Button>
                         </Link>
                     </div>
@@ -131,7 +137,7 @@ function NewApikey({
                         <Button disabled={!name || loading} sx={{ mr: 1 }}>
                             {APIKEY_NEW_BTN_CAPTION}
                         </Button>
-                        <Link href={`/dashboard/products`}>
+                        <Link href={`${prefix}/settings?tab=API%20Keys`}>
                             <Button variant="soft">{BUTTON_CANCEL_TEXT}</Button>
                         </Link>
                     </div>
@@ -141,11 +147,11 @@ function NewApikey({
     );
 }
 
-const mapStateToProps = (state: AppState) => ({
-    address: state.address,
-    networkAction: state.networkAction,
-});
+// const mapStateToProps = (state: AppState) => ({
+//     address: state.address,
+//     networkAction: state.networkAction,
+// });
 
-const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch });
+// const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch });
 
-export default connect(mapStateToProps, mapDispatchToProps)(NewApikey);
+// export default connect(mapStateToProps, mapDispatchToProps)(NewApikey);
diff --git a/apps/web/components/admin/settings/index.tsx b/apps/web/components/admin/settings/index.tsx
@@ -939,7 +939,7 @@ const Settings = (props: SettingsProps) => {
                         <h2 className="text-lg font-semibold">
                             {APIKEY_EXISTING_HEADER}
                         </h2>
-                        <Link href="/dashboard/settings/apikeys/new">
+                        <Link href={`${props.prefix}/settings/apikeys/new`}>
                             <Button>{APIKEY_NEW_BUTTON}</Button>
                         </Link>
                     </div>

diff --git a/apps/web/pages/dashboard/settings/apikeys/new.tsx b/apps/web/pages/dashboard/settings/apikeys/new.tsx
@@ -1,5 +1,8 @@
 import dynamic from "next/dynamic";
 import { SITE_SETTINGS_PAGE_HEADING } from "../../../../ui-config/strings";
+import { Address } from "@courselit/common-models";
+import { AppDispatch } from "@courselit/state-management";
+import { connect } from "react-redux";
 
 const BaseLayout = dynamic(
     () => import("../../../../components/admin/base-layout"),
@@ -8,10 +11,32 @@ const ApikeyNew = dynamic(
     () => import("../../../../components/admin/settings/apikey/new"),
 );
 
-export default function SiteUsers() {
+function SiteUsers({
+    address,
+    dispatch,
+    loading,
+}: {
+    address: Address;
+    dispatch: AppDispatch;
+    loading: boolean;
+}) {
     return (
         <BaseLayout title={SITE_SETTINGS_PAGE_HEADING}>
-            <ApikeyNew />
+            <ApikeyNew
+                address={address}
+                dispatch={dispatch}
+                loading={loading}
+                prefix="/dashboard"
+            />
         </BaseLayout>
     );
 }
+
+const mapStateToProps = (state: AppState) => ({
+    address: state.address,
+    loading: state.networkAction,
+});
+
+const mapDispatchToProps = (dispatch: AppDispatch) => ({ dispatch });
+
+export default connect(mapStateToProps, mapDispatchToProps)(SiteUsers);
diff --git a/apps/web/ui-config/strings.ts b/apps/web/ui-config/strings.ts
@@ -541,7 +541,7 @@ export const APIKEY_NEW_BUTTON = "New API key";
 export const APIKEY_EXISTING_HEADER = "Your API keys";
 export const APIKEY_EXISTING_TABLE_HEADER_CREATED = "Created";
 export const APIKEY_EXISTING_TABLE_HEADER_NAME = "Name";
-export const APIKEY_NEW_HEADER = "Create new key";
+export const APIKEY_NEW_HEADER = "New API key";
 export const APIKEY_NEW_LABEL = "Name";
 export const APIKEY_NEW_BTN_CAPTION = "Create";
 export const APIKEY_NEW_GENERATED_KEY_HEADER = "Your new API key";