From 2585df309eccc98b0ec4ca2bf93d353f13bc5172 Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Tue, 24 Dec 2024 22:44:47 +0700 Subject: [PATCH] feat: update loading for different route --- app/[locale]/(protected)/dashboard/layout.tsx | 6 +- app/[locale]/(protected)/dashboard/page.tsx | 297 +++++++++--------- app/[locale]/(protected)/layout.tsx | 20 +- .../(protected)/utility/settings/layout.tsx | 2 +- app/[locale]/(public)/error.tsx | 24 ++ app/[locale]/(public)/layout.tsx | 20 ++ app/[locale]/layout.tsx | 8 +- package-lock.json | 257 ++++++++------- package.json | 1 + providers/mounted.provider.tsx | 4 +- 10 files changed, 355 insertions(+), 284 deletions(-) create mode 100644 app/[locale]/(public)/error.tsx create mode 100644 app/[locale]/(public)/layout.tsx diff --git a/app/[locale]/(protected)/dashboard/layout.tsx b/app/[locale]/(protected)/dashboard/layout.tsx index e4864452..2db12ef5 100644 --- a/app/[locale]/(protected)/dashboard/layout.tsx +++ b/app/[locale]/(protected)/dashboard/layout.tsx @@ -1,5 +1,6 @@ import PageTitle from "@/components/page-title"; import { Metadata } from "next"; +import { Suspense } from "react"; export const metadata: Metadata = { title: "Media Hub | POLRI", @@ -7,8 +8,9 @@ export const metadata: Metadata = { }; const Layout = ({ children }: { children: React.ReactNode }) => { return <> - - {children}; + + {children} + }; export default Layout; diff --git a/app/[locale]/(protected)/dashboard/page.tsx b/app/[locale]/(protected)/dashboard/page.tsx index b44c2581..079e6488 100644 --- a/app/[locale]/(protected)/dashboard/page.tsx +++ b/app/[locale]/(protected)/dashboard/page.tsx @@ -1,3 +1,5 @@ +'use client' + import { StatisticsBlock } from "@/components/blocks/statistics-block"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import DashboardDropdown from "@/components/dashboard-dropdown"; @@ -11,162 +13,165 @@ import BlogTable from "../contributor/blog/components/blog-table"; import ContentTable from "./routine-task/components/content-table"; import RecentActivity from "./routine-task/components/recent-activity"; import { Link } from "@/components/navigation"; +import { Suspense } from "react"; const DashboardPage = () => { const t = useTranslations("AnalyticsDashboard"); return ( -
-
- - - - - Tugas Rutin - - - Penugasan - - - Jadwal - - - Indeks - - - - -
-
- - -
- - - -
- - -
-
-
-
- - - - {"Total Produksi Konten"} - - - - - - - -
-
- - - {"Table"} - - - - - - -
-
- - -
-
- - -
-
- Table Penugasan + +
+
+ + + + + Tugas Rutin + + + Penugasan + + + Jadwal + + + Indeks + + + + +
+
+ + +
+ + +
-
- - - -
-
+ - - - - +
-
- - -
-
- - - - - -
-
- - -
-
- - -
-
- Table Indeks -
-
- - - -
-
+
+
+ + + + {"Total Produksi Konten"} + + + + + + - - - - +
+
+ + + {"Table"} + + + + + + +
-
- - + + +
+
+ + +
+
+ Table Penugasan +
+
+ + + +
+
+ + + + + +
+
+ + +
+
+ + + + + +
+
+ + +
+
+ + +
+
+ Table Indeks +
+
+ + + +
+
+ + + + + +
+
+ + +
-
+ ); }; diff --git a/app/[locale]/(protected)/layout.tsx b/app/[locale]/(protected)/layout.tsx index 7b614c86..2f7a1241 100644 --- a/app/[locale]/(protected)/layout.tsx +++ b/app/[locale]/(protected)/layout.tsx @@ -4,18 +4,22 @@ import DashCodeSidebar from "@/components/partials/sidebar"; import DashCodeFooter from "@/components/partials/footer"; import ThemeCustomize from "@/components/partials/customizer"; import DashCodeHeader from "@/components/partials/header"; +import MountedProvider from "@/providers/mounted.provider"; -import { redirect } from "@/components/navigation"; const layout = async ({ children }: { children: React.ReactNode }) => { return ( - - - - - {children} - - + + + + + + {children} + + + ); }; diff --git a/app/[locale]/(protected)/utility/settings/layout.tsx b/app/[locale]/(protected)/utility/settings/layout.tsx index 5666cfeb..9804c128 100644 --- a/app/[locale]/(protected)/utility/settings/layout.tsx +++ b/app/[locale]/(protected)/utility/settings/layout.tsx @@ -1,7 +1,7 @@ import { Metadata } from "next"; export const metadata: Metadata = { - title: "Media Hub | POLRI", + title: "Dashcode Next Js", description: "Dashcode is a popular dashboard template.", }; const Layout = ({ children }: { children: React.ReactNode }) => { diff --git a/app/[locale]/(public)/error.tsx b/app/[locale]/(public)/error.tsx new file mode 100644 index 00000000..d2e5230b --- /dev/null +++ b/app/[locale]/(public)/error.tsx @@ -0,0 +1,24 @@ +"use client"; // Error components must be Client Components + +import { useEffect } from "react"; +import { Button } from "@/components/ui/button"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { Info } from "lucide-react"; + +export default function Error({ error, reset }: { + error: Error & { digest?: string } + reset: () => void +}) { + return ( +
+ + + Something went wrong! + + +
+ ); +} + diff --git a/app/[locale]/(public)/layout.tsx b/app/[locale]/(public)/layout.tsx new file mode 100644 index 00000000..7832197d --- /dev/null +++ b/app/[locale]/(public)/layout.tsx @@ -0,0 +1,20 @@ +import LayoutProvider from "@/providers/layout.provider"; +import LayoutContentProvider from "@/providers/content.provider"; +import DashCodeSidebar from "@/components/partials/sidebar"; +import DashCodeFooter from "@/components/partials/footer"; +import ThemeCustomize from "@/components/partials/customizer"; +import DashCodeHeader from "@/components/partials/header"; +import MountedProvider from "@/providers/mounted.provider"; + +const layout = async ({ children }: { children: React.ReactNode }) => { + + return ( + + {children} + + ); +}; + +export default layout; diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index ea2073b5..47c0c6ec 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -34,11 +34,9 @@ export default async function RootLayout({ - - - {children} - - + + {children} + diff --git a/package-lock.json b/package-lock.json index 520c4320..9dae9a41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -102,6 +102,7 @@ "react-cssfx-loading": "^2.1.0", "react-datepicker": "^7.5.0", "react-day-picker": "^8.10.1", + "react-dom": "^19.0.0", "react-dropzone": "^14.2.3", "react-geocode": "^0.2.3", "react-hook-form": "^7.52.1", @@ -1062,6 +1063,126 @@ "glob": "10.3.10" } }, + "node_modules/@next/swc-darwin-arm64": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz", + "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", + "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", + "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", + "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", + "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", + "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", + "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", + "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-win32-x64-msvc": { "version": "14.2.3", "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", @@ -10808,6 +10929,17 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-dom": { + "version": "19.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz", + "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==", + "dependencies": { + "scheduler": "^0.25.0" + }, + "peerDependencies": { + "react": "^19.0.0" + } + }, "node_modules/react-dropzone": { "version": "14.3.5", "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz", @@ -11747,6 +11879,11 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, + "node_modules/scheduler": { + "version": "0.25.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz", + "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==" + }, "node_modules/scroll-into-view-if-needed": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz", @@ -13828,126 +13965,6 @@ "type": "github", "url": "https://github.com/sponsors/wooorm" } - }, - "node_modules/@next/swc-darwin-arm64": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz", - "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-darwin-x64": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz", - "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz", - "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz", - "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz", - "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-linux-x64-musl": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz", - "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz", - "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==", - "cpu": [ - "arm64" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.2.3", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz", - "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==", - "cpu": [ - "ia32" - ], - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10" - } } } } diff --git a/package.json b/package.json index f75a0032..0e09e809 100644 --- a/package.json +++ b/package.json @@ -103,6 +103,7 @@ "react-cssfx-loading": "^2.1.0", "react-datepicker": "^7.5.0", "react-day-picker": "^8.10.1", + "react-dom": "^19.0.0", "react-dropzone": "^14.2.3", "react-geocode": "^0.2.3", "react-hook-form": "^7.52.1", diff --git a/providers/mounted.provider.tsx b/providers/mounted.provider.tsx index 240057cb..95aee641 100644 --- a/providers/mounted.provider.tsx +++ b/providers/mounted.provider.tsx @@ -4,9 +4,9 @@ import Loader from "@/components/loader"; import { useMounted } from "@/hooks/use-mounted"; import React from "react"; -const MountedProvider = ({ children }: { children: React.ReactNode }) => { +const MountedProvider = ({ children, isProtected }: { children: React.ReactNode, isProtected: Boolean }) => { const mounted = useMounted(); - // if (!mounted) return + if (!mounted) return isProtected ? : null; return children; };