activity dialog moved to dynamic imports

next.config.js

@@ -14,4 +14,8 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+
+module.exports = withBundleAnalyzer(nextConfig);

package-lock.json

@@ -27,6 +27,7 @@
         "slugify": "^1.6.6"
       },
       "devDependencies": {
+        "@next/bundle-analyzer": "^13.4.12",
         "@types/node": "18.15.3",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.11",
@@ -2077,6 +2078,15 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
+    "node_modules/@next/bundle-analyzer": {
+      "version": "13.4.12",
+      "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.12.tgz",
+      "integrity": "sha512-WjeNsoWGAkbn7XU2jBVkaI7/DVfg2mzRF7spTohsknnwQ/dDgSHlgZj80mt1/SHYconWjZSY0KIWFaxR4/mNsA==",
+      "dev": true,
+      "dependencies": {
+        "webpack-bundle-analyzer": "4.7.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.2.4",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.2.4.tgz",
@@ -2341,6 +2351,12 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.21",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
+      "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
+      "dev": true
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.6",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
@@ -2553,6 +2569,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2925,6 +2950,15 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3108,6 +3142,12 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -4053,6 +4093,21 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -4687,6 +4742,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4767,6 +4828,15 @@
         "obliterator": "^1.6.1"
       }
     },
+    "node_modules/mrmime": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
+      "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5012,6 +5082,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "dev": true,
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -5469,6 +5548,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sirv": {
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
+      "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.20",
+        "mrmime": "^1.0.0",
+        "totalist": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/sister": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
@@ -5732,6 +5825,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -5845,6 +5947,29 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.7.0.tgz",
+      "integrity": "sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "chalk": "^4.1.0",
+        "commander": "^7.2.0",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "opener": "^1.5.2",
+        "sirv": "^1.0.7",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5926,6 +6051,27 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/ws": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "slugify": "^1.6.6"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^13.4.12",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",

src/features/theme_page/index.tsx

@@ -3,7 +3,7 @@ import { View } from "./view";
 import { ViewModel } from "./view_model";
 import { ReactNode } from "react";
 
-export function ThemePage({
+export default function ThemePage({
   theme,
   home,
   adminTools,

src/features/theme_page/view/activity_dialog.tsx

@@ -0,0 +1,27 @@
+import { Activity as IActivity } from "@/core/models/entities/learning_unit";
+import { Activity } from "@/features/activity";
+import { poppins } from "@/pages/_app";
+import { Dialog } from "@mui/material";
+
+export default function ActivityDialog({
+  isActivityDialogOpen,
+  closeActivity,
+  activeActivity,
+}: {
+  isActivityDialogOpen: boolean;
+  closeActivity: VoidFunction;
+  activeActivity?: IActivity<any>;
+}) {
+  return (
+    <Dialog
+      className={poppins.className}
+      open={isActivityDialogOpen}
+      onClose={closeActivity}
+      fullWidth
+      maxWidth="md"
+      scroll="body"
+    >
+      {activeActivity && <Activity activity={activeActivity} />}
+    </Dialog>
+  );
+}

src/features/theme_page/view/index.tsx

@@ -1,16 +1,16 @@
-import { Button, Dialog, IconButton, Tab, Tabs } from "@mui/material";
 import { TabPanels } from "./tab_panels";
 import { useBaseViewModelContext } from "../view_model/context_providers/base_view_model";
 import { BaseViewModel } from "../model/base_view_model";
-import { Activity } from "@/features/activity";
-import { poppins } from "@/pages/_app";
 import { AppBar } from "@/features/app_bar";
 import { Banner } from "./banner/banner";
 import Head from "next/head";
 import styles from "./styles.module.scss";
 import { Footer } from "@/features/footer";
-import { TabBar } from "./tab_bar/tab_bar";
+import { TabBar } from "./tab_bar";
 import { ReactNode } from "react";
+import dynamic from "next/dynamic";
+
+const ActivityDialog = dynamic(() => import("./activity_dialog"));
 
 export function View({
   home,
@@ -48,16 +48,13 @@ export function View({
       </div>
       <Footer />
       {adminTools}
-      <Dialog
-        className={poppins.className}
-        open={isActivityDialogOpen}
-        onClose={closeActivity}
-        fullWidth
-        maxWidth="md"
-        scroll="body"
-      >
-        {activeActivity && <Activity activity={activeActivity} />}
-      </Dialog>
+      {
+        <ActivityDialog
+          isActivityDialogOpen={isActivityDialogOpen}
+          activeActivity={activeActivity ?? undefined}
+          closeActivity={closeActivity}
+        />
+      }
     </>
   );
 }

src/features/theme_page/view/tab_bar.tsx

@@ -1,6 +1,6 @@
 import { Tab, Tabs } from "@mui/material";
-import { useBaseViewModelContext } from "../../view_model/context_providers/base_view_model";
-import { BaseViewModel } from "../../model/base_view_model";
+import { useBaseViewModelContext } from "../view_model/context_providers/base_view_model";
+import { BaseViewModel } from "../model/base_view_model";
 
 export function TabBar() {
   const { lessons, activeLesson, setActiveLesson } =

src/middleware.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import * as jose from "jose";
 
 export async function middleware(req: NextRequest) {
+  console.debug("---middleware-entry--", Date.now());
   const isLoginPage = req.nextUrl.pathname === "/admin/login";
   const loginUrl = new URL("/admin/login", new URL(req.url).origin);
   const successUrl = new URL("/admin", new URL(req.url).origin);
@@ -11,10 +12,13 @@ export async function middleware(req: NextRequest) {
       const jwt = req.cookies.get("token")!.value;
       const secret = new TextEncoder().encode(process.env.JWT_SECRET_KEY!);
 
+      console.debug("---middleware-1--", Date.now());
       await jose.jwtVerify(jwt, secret);
+      console.debug("---middleware-2--", Date.now());
 
       if (isLoginPage) return NextResponse.redirect(successUrl);
     } catch (error) {
+      console.debug("---middleware-?--", Date.now());
       if (isLoginPage) return NextResponse.next();
 
       return NextResponse.redirect(loginUrl);
@@ -23,6 +27,7 @@ export async function middleware(req: NextRequest) {
     return NextResponse.redirect(loginUrl);
   }
 
+  console.debug("---middleware-exit--", Date.now());
   return NextResponse.next();
 }
 

src/pages/admin/temalar/[theme]/index.tsx

@@ -1,5 +1,5 @@
 import { Theme } from "@/core/models/entities/learning_unit";
-import { ThemePage as ThemePageElement } from "@/features/theme_page";
+import TP from "@/features/theme_page";
 import { useEffect, useState } from "react";
 import { AdminTools } from "@/features/admin_tools";
 import { usePathname } from "next/navigation";
@@ -22,13 +22,7 @@ export default function ThemePage() {
   }, [pathname]);
 
   if (themeData) {
-    return (
-      <ThemePageElement
-        home="/admin"
-        theme={themeData}
-        adminTools={<AdminTools />}
-      />
-    );
+    return <TP home="/admin" theme={themeData} adminTools={<AdminTools />} />;
   }
 
   return (

src/pages/api/admin/temalar/[theme]/index.ts

@@ -41,7 +41,14 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 
     if (type === "publishChanges") {
       try {
-        console.debug("atıyorum---", Date.now());
+        console.debug(
+          "atıyorum---",
+          Date.now(),
+          type,
+          themeId,
+          req.query,
+          req.body
+        );
         await res.revalidate(`/temalar/${themeId}`);
         console.debug("topluyorum---", Date.now());
         //await res.revalidate("/");

src/pages/temalar/[theme].tsx

@@ -1,11 +1,12 @@
 import { GetServerSidePropsContext } from "next";
 import { ThemeReposityImplementation } from "@/core/models/repositories/theme_repository_implementation";
 import { Theme } from "@/core/models/entities/learning_unit";
-import { ThemePage as ThemePageElement } from "@/features/theme_page";
+import TP from "@/features/theme_page";
 
 export default function ThemePage({ themeData }: { themeData: Theme }) {
   console.debug("ThemePage---", Date.now());
-  return <ThemePageElement home="/" theme={Theme.from(themeData)} />;
+
+  return <TP home="/" theme={Theme.from(themeData)} />;
 }
 
 export async function getStaticProps(context: GetServerSidePropsContext) {