Refactored to use app folder.

This commit is contained in:
Mike Cao 2023-09-29 05:29:22 -07:00
parent 40cfcd41e9
commit 9a52cdd2e1
258 changed files with 2025 additions and 2258 deletions

View file

@ -1,19 +0,0 @@
import { Row, Column, Flexbox } from 'react-basics';
import AppLayout from 'components/layout/AppLayout';
import useMessages from 'components/hooks/useMessages';
export default function Custom404() {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={formatMessage(labels.pageNotFound)}>
<Row>
<Column>
<Flexbox alignItems="center" justifyContent="center" flex={1} style={{ minHeight: 600 }}>
<h1>{formatMessage(labels.pageNotFound)}</h1>
</Flexbox>
</Column>
</Row>
</AppLayout>
);
}

View file

@ -1,69 +0,0 @@
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactBasicsProvider } from 'react-basics';
import Head from 'next/head';
import Script from 'next/script';
import { useRouter } from 'next/router';
import ErrorBoundary from 'components/common/ErrorBoundary';
import useLocale from 'components/hooks/useLocale';
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';
import 'react-basics/dist/styles.css';
import 'styles/variables.css';
import 'styles/locale.css';
import 'styles/index.css';
import 'chartjs-adapter-date-fns';
const client = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
},
},
});
export default function App({ Component, pageProps }) {
const { locale, messages } = useLocale();
const { basePath, pathname } = useRouter();
return (
<QueryClientProvider client={client}>
<IntlProvider locale={locale} messages={messages[locale]} onError={() => null}>
<ReactBasicsProvider>
<ErrorBoundary>
<Head>
<link rel="icon" href={`${basePath}/favicon.ico`} />
<link
rel="apple-touch-icon"
sizes="180x180"
href={`${basePath}/apple-touch-icon.png`}
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href={`${basePath}/favicon-32x32.png`}
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href={`${basePath}/favicon-16x16.png`}
/>
<link rel="manifest" href={`${basePath}/site.webmanifest`} />
<link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex,nofollow" />
</Head>
<Component {...pageProps} />
{!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
</ErrorBoundary>
</ReactBasicsProvider>
</IntlProvider>
</QueryClientProvider>
);
}

View file

@ -43,8 +43,7 @@ export default async (
return forbidden(res);
}
req.yup = schema;
await useValidate(req, res);
await useValidate(schema, req, res);
if (req.method === 'POST') {
const { username, password } = req.body;

View file

@ -1,22 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import TestConsole from 'components/pages/console/TestConsole';
export default function ({ disabled }) {
if (disabled) {
return null;
}
return (
<AppLayout>
<TestConsole />
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !process.env.ENABLE_TEST_CONSOLE,
},
};
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import Dashboard from 'components/pages/dashboard/Dashboard';
import useMessages from 'components/hooks/useMessages';
export default function DashboardPage() {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={formatMessage(labels.dashboard)}>
<Dashboard />
</AppLayout>
);
}

View file

@ -1,12 +0,0 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
export default function () {
const router = useRouter();
useEffect(() => {
router.push('/dashboard');
}, []);
return null;
}

View file

@ -1,22 +0,0 @@
import LoginLayout from 'components/pages/login/LoginLayout';
import LoginForm from 'components/pages/login/LoginForm';
export default function ({ disabled }) {
if (disabled) {
return null;
}
return (
<LoginLayout title="login">
<LoginForm />
</LoginLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.DISABLE_LOGIN,
},
};
}

View file

@ -1,36 +0,0 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import useApi from 'components/hooks/useApi';
import { setUser } from 'store/app';
import { removeClientAuthToken } from 'lib/client';
export default function ({ disabled }) {
const router = useRouter();
const { post } = useApi();
useEffect(() => {
async function logout() {
await post('/auth/logout');
}
if (!disabled) {
removeClientAuthToken();
logout();
router.push('/login');
return () => setUser(null);
}
}, [disabled, router, post]);
return null;
}
export async function getServerSideProps() {
return {
props: {
disabled: !!(process.env.DISABLE_LOGIN || process.env.CLOUD_MODE),
},
};
}

View file

@ -1,24 +0,0 @@
import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import ReportDetails from 'components/pages/reports/ReportDetails';
import { useApi, useMessages } from 'components/hooks';
export default function () {
const { formatMessage, labels } = useMessages();
const router = useRouter();
const { id } = router.query;
const { get, useQuery } = useApi();
const { data: report } = useQuery(['reports', id], () => get(`/reports/${id}`), {
enabled: !!id,
});
if (!id || !report) {
return null;
}
return (
<AppLayout title={formatMessage(labels.websites)}>
<ReportDetails reportId={report.id} reportType={report.type} />
</AppLayout>
);
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import ReportTemplates from 'components/pages/reports/ReportTemplates';
import { useMessages } from 'components/hooks';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={formatMessage(labels.reports)}>
<ReportTemplates />
</AppLayout>
);
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import FunnelReport from 'components/pages/reports/funnel/FunnelReport';
import useMessages from 'components/hooks/useMessages';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={`${formatMessage(labels.funnel)} - ${formatMessage(labels.reports)}`}>
<FunnelReport />
</AppLayout>
);
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import ReportsPage from 'components/pages/reports/ReportsPage';
import { useMessages } from 'components/hooks';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={formatMessage(labels.reports)}>
<ReportsPage />
</AppLayout>
);
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import InsightsReport from 'components/pages/reports/insights/InsightsReport';
import { useMessages } from 'components/hooks';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={`${formatMessage(labels.insights)} - ${formatMessage(labels.reports)}`}>
<InsightsReport />
</AppLayout>
);
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import RetentionReport from 'components/pages/reports/retention/RetentionReport';
import useMessages from 'components/hooks/useMessages';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={`${formatMessage(labels.retention)} - ${formatMessage(labels.reports)}`}>
<RetentionReport />
</AppLayout>
);
}

View file

@ -1,15 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
import useMessages from 'components/hooks/useMessages';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.profile)}`}>
<SettingsLayout>
<ProfileSettings />
</SettingsLayout>
</AppLayout>
);
}

View file

@ -1,31 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import TeamSettings from 'components/pages/settings/teams/TeamSettings';
import { useRouter } from 'next/router';
import useMessages from 'components/hooks/useMessages';
export default function ({ disabled }) {
const router = useRouter();
const { id } = router.query;
const { formatMessage, labels } = useMessages();
if (!id || disabled) {
return null;
}
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.teams)}`}>
<SettingsLayout>
<TeamSettings teamId={id} />
</SettingsLayout>
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

View file

@ -1,27 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import TeamsList from 'components/pages/settings/teams/TeamsList';
import useMessages from 'components/hooks/useMessages';
export default function ({ disabled }) {
const { formatMessage, labels } = useMessages();
if (disabled) {
return null;
}
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.teams)}`}>
<SettingsLayout>
<TeamsList />
</SettingsLayout>
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

View file

@ -1,31 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import UserSettings from 'components/pages/settings/users/UserSettings';
import { useRouter } from 'next/router';
import useMessages from 'components/hooks/useMessages';
export default function ({ disabled }) {
const router = useRouter();
const { id } = router.query;
const { formatMessage, labels } = useMessages();
if (!id || disabled) {
return null;
}
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.users)}`}>
<SettingsLayout>
<UserSettings userId={id} />
</SettingsLayout>
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

View file

@ -1,27 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import UsersList from 'components/pages/settings/users/UsersList';
import useMessages from 'components/hooks/useMessages';
export default function ({ disabled }) {
const { formatMessage, labels } = useMessages();
if (disabled) {
return null;
}
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.users)}`}>
<SettingsLayout>
<UsersList />
</SettingsLayout>
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

View file

@ -1,31 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import { useRouter } from 'next/router';
import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
import SettingsLayout from 'components/layout/SettingsLayout';
import useMessages from 'components/hooks/useMessages';
export default function ({ disabled }) {
const router = useRouter();
const { id } = router.query;
const { formatMessage, labels } = useMessages();
if (!id || disabled) {
return null;
}
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.websites)}`}>
<SettingsLayout>
<WebsiteSettings websiteId={id} />
</SettingsLayout>
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

View file

@ -1,27 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import SettingsLayout from 'components/layout/SettingsLayout';
import WebsitesList from 'components/pages/settings/websites/WebsitesList';
import useMessages from 'components/hooks/useMessages';
export default function ({ disabled }) {
const { formatMessage, labels } = useMessages();
if (disabled) {
return null;
}
return (
<AppLayout title={`${formatMessage(labels.settings)} - ${formatMessage(labels.websites)}`}>
<SettingsLayout>
<WebsitesList />
</SettingsLayout>
</AppLayout>
);
}
export async function getServerSideProps() {
return {
props: {
disabled: !!process.env.CLOUD_MODE,
},
};
}

View file

@ -1,21 +0,0 @@
import { useRouter } from 'next/router';
import ShareLayout from 'components/layout/ShareLayout';
import WebsiteDetailsPage from 'components/pages/websites/WebsiteDetailsPage';
import useShareToken from 'components/hooks/useShareToken';
export default function () {
const router = useRouter();
const { id } = router.query;
const shareId = id?.[0];
const shareToken = useShareToken(shareId);
if (!shareToken) {
return null;
}
return (
<ShareLayout>
<WebsiteDetailsPage websiteId={shareToken.websiteId} />
</ShareLayout>
);
}

View file

@ -1,19 +0,0 @@
import { useEffect } from 'react';
import { Loading } from 'react-basics';
import { useRouter } from 'next/router';
import { setClientAuthToken } from 'lib/client';
export default function () {
const router = useRouter();
const { token, url } = router.query;
useEffect(() => {
if (url && token) {
setClientAuthToken(token);
router.push(url);
}
}, [router, url, token]);
return <Loading size="xl" />;
}

View file

@ -1,20 +0,0 @@
import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import WebsiteEventDataPage from 'components/pages/websites/WebsiteEventDataPage';
import useMessages from 'components/hooks/useMessages';
export default function () {
const { formatMessage, labels } = useMessages();
const router = useRouter();
const { id } = router.query;
if (!id) {
return null;
}
return (
<AppLayout title={formatMessage(labels.websites)}>
<WebsiteEventDataPage websiteId={id} />
</AppLayout>
);
}

View file

@ -1,20 +0,0 @@
import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import WebsiteDetailsPage from 'components/pages/websites/WebsiteDetailsPage';
import useMessages from 'components/hooks/useMessages';
export default function () {
const { formatMessage, labels } = useMessages();
const router = useRouter();
const { id } = router.query;
if (!id) {
return null;
}
return (
<AppLayout title={formatMessage(labels.websites)}>
<WebsiteDetailsPage websiteId={id} />
</AppLayout>
);
}

View file

@ -1,18 +0,0 @@
import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import RealtimePage from 'components/pages/realtime/RealtimePage';
export default function () {
const router = useRouter();
const { id: websiteId } = router.query;
if (!websiteId) {
return null;
}
return (
<AppLayout>
<RealtimePage websiteId={websiteId} />
</AppLayout>
);
}

View file

@ -1,18 +0,0 @@
import { useRouter } from 'next/router';
import AppLayout from 'components/layout/AppLayout';
import WebsiteReportsPage from 'components/pages/websites/WebsiteReportsPage';
export default function () {
const router = useRouter();
const { id: websiteId } = router.query;
if (!websiteId) {
return null;
}
return (
<AppLayout>
<WebsiteReportsPage websiteId={websiteId} />
</AppLayout>
);
}

View file

@ -1,13 +0,0 @@
import AppLayout from 'components/layout/AppLayout';
import WebsitesPage from 'components/pages/websites/WebsitesPage';
import useMessages from 'components/hooks/useMessages';
export default function () {
const { formatMessage, labels } = useMessages();
return (
<AppLayout title={formatMessage(labels.websites)}>
<WebsitesPage />
</AppLayout>
);
}