mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update loading for different route

This commit is contained in:
hanif salafi 2024-12-24 22:44:47 +07:00
parent 07ab513348
commit 2585df309e
10 changed files with 355 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/[locale]/(protected)/dashboard/layout.tsx
View File

@ -1,5 +1,6 @@
import PageTitle from "@/components/page-title"; import PageTitle from "@/components/page-title";
import { Metadata } from "next"; import { Metadata } from "next";
import { Suspense } from "react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Media Hub | POLRI", title: "Media Hub | POLRI",
@ -8,7 +9,8 @@ export const metadata: Metadata = {
const Layout = ({ children }: { children: React.ReactNode }) => { const Layout = ({ children }: { children: React.ReactNode }) => {
return <> return <>
<PageTitle className="mb-6" /> <PageTitle className="mb-6" />
{children}</>; {children}
</>
}; };
export default Layout; export default Layout;

5
app/[locale]/(protected)/dashboard/page.tsx
View File

@ -1,3 +1,5 @@
'use client'
import { StatisticsBlock } from "@/components/blocks/statistics-block"; import { StatisticsBlock } from "@/components/blocks/statistics-block";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import DashboardDropdown from "@/components/dashboard-dropdown"; import DashboardDropdown from "@/components/dashboard-dropdown";
@ -11,10 +13,12 @@ import BlogTable from "../contributor/blog/components/blog-table";
import ContentTable from "./routine-task/components/content-table"; import ContentTable from "./routine-task/components/content-table";
import RecentActivity from "./routine-task/components/recent-activity"; import RecentActivity from "./routine-task/components/recent-activity";
import { Link } from "@/components/navigation"; import { Link } from "@/components/navigation";
import { Suspense } from "react";
const DashboardPage = () => { const DashboardPage = () => {
const t = useTranslations("AnalyticsDashboard"); const t = useTranslations("AnalyticsDashboard");
return ( return (
<Suspense>
<div> <div>
<div className="my-3"> <div className="my-3">
<Tabs defaultValue="routine-task" className="w-full"> <Tabs defaultValue="routine-task" className="w-full">
@ -167,6 +171,7 @@ const DashboardPage = () => {
</Tabs> </Tabs>
</div> </div>
</div> </div>
</Suspense>
); );
}; };

6
app/[locale]/(protected)/layout.tsx
View File

@ -4,11 +4,14 @@ import DashCodeSidebar from "@/components/partials/sidebar";
import DashCodeFooter from "@/components/partials/footer"; import DashCodeFooter from "@/components/partials/footer";
import ThemeCustomize from "@/components/partials/customizer"; import ThemeCustomize from "@/components/partials/customizer";
import DashCodeHeader from "@/components/partials/header"; import DashCodeHeader from "@/components/partials/header";
import MountedProvider from "@/providers/mounted.provider";
import { redirect } from "@/components/navigation";
const layout = async ({ children }: { children: React.ReactNode }) => { const layout = async ({ children }: { children: React.ReactNode }) => {
return ( return (
<MountedProvider
isProtected={true}
>
<LayoutProvider> <LayoutProvider>
<ThemeCustomize /> <ThemeCustomize />
<DashCodeHeader /> <DashCodeHeader />
@ -16,6 +19,7 @@ const layout = async ({ children }: { children: React.ReactNode }) => {
<LayoutContentProvider>{children}</LayoutContentProvider> <LayoutContentProvider>{children}</LayoutContentProvider>
<DashCodeFooter /> <DashCodeFooter />
</LayoutProvider> </LayoutProvider>
</MountedProvider>
); );
}; };

2
app/[locale]/(protected)/utility/settings/layout.tsx
View File

@ -1,7 +1,7 @@
import { Metadata } from "next"; import { Metadata } from "next";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Media Hub | POLRI", title: "Dashcode Next Js",
description: "Dashcode is a popular dashboard template.", description: "Dashcode is a popular dashboard template.",
}; };
const Layout = ({ children }: { children: React.ReactNode }) => { const Layout = ({ children }: { children: React.ReactNode }) => {

24
app/[locale]/(public)/error.tsx Normal file
View File

@ -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 (
<div className="space-y-4">
<Alert color="destructive" variant="soft">
<Info className="h-5 w-5" />
<AlertDescription>Something went wrong!</AlertDescription>
</Alert>
<Button onClick={() => reset()} color="destructive" size="sm">
Try again
</Button>
</div>
);
}

20
app/[locale]/(public)/layout.tsx Normal file
View File

@ -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 (
<MountedProvider
isProtected={false}
>
{children}
</MountedProvider>
);
};
export default layout;

2
app/[locale]/layout.tsx
View File

@ -34,11 +34,9 @@ export default async function RootLayout({
<NextIntlClientProvider messages={messages} locale={locale}> <NextIntlClientProvider messages={messages} locale={locale}>
<AuthProvider> <AuthProvider>
<ThemeProvider attribute="class" defaultTheme="light"> <ThemeProvider attribute="class" defaultTheme="light">
<MountedProvider>
<DirectionProvider direction={direction}> <DirectionProvider direction={direction}>
{children} {children}
</DirectionProvider> </DirectionProvider>
</MountedProvider>
<Toaster /> <Toaster />
<SonnerToaster /> <SonnerToaster />
</ThemeProvider> </ThemeProvider>

257
package-lock.json generated
View File

@ -102,6 +102,7 @@
"react-cssfx-loading": "^2.1.0", "react-cssfx-loading": "^2.1.0",
"react-datepicker": "^7.5.0", "react-datepicker": "^7.5.0",
"react-day-picker": "^8.10.1", "react-day-picker": "^8.10.1",
"react-dom": "^19.0.0",
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-geocode": "^0.2.3", "react-geocode": "^0.2.3",
"react-hook-form": "^7.52.1", "react-hook-form": "^7.52.1",
@ -1062,6 +1063,126 @@
"glob": "10.3.10" "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": { "node_modules/@next/swc-win32-x64-msvc": {
"version": "14.2.3", "version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz", "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" "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": { "node_modules/react-dropzone": {
"version": "14.3.5", "version": "14.3.5",
"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz", "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", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "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": { "node_modules/scroll-into-view-if-needed": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz", "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", "type": "github",
"url": "https://github.com/sponsors/wooorm" "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"
}
} }
} }
} }

1
package.json
View File

@ -103,6 +103,7 @@
"react-cssfx-loading": "^2.1.0", "react-cssfx-loading": "^2.1.0",
"react-datepicker": "^7.5.0", "react-datepicker": "^7.5.0",
"react-day-picker": "^8.10.1", "react-day-picker": "^8.10.1",
"react-dom": "^19.0.0",
"react-dropzone": "^14.2.3", "react-dropzone": "^14.2.3",
"react-geocode": "^0.2.3", "react-geocode": "^0.2.3",
"react-hook-form": "^7.52.1", "react-hook-form": "^7.52.1",

4
providers/mounted.provider.tsx
View File

@ -4,9 +4,9 @@ import Loader from "@/components/loader";
import { useMounted } from "@/hooks/use-mounted"; import { useMounted } from "@/hooks/use-mounted";
import React from "react"; import React from "react";
const MountedProvider = ({ children }: { children: React.ReactNode }) => { const MountedProvider = ({ children, isProtected }: { children: React.ReactNode, isProtected: Boolean }) => {
const mounted = useMounted(); const mounted = useMounted();
// if (!mounted) return <Loader /> if (!mounted) return isProtected ? <Loader /> : null;
return children; return children;
}; };