Refactored settings components.

This commit is contained in:
Mike Cao 2023-01-09 23:59:26 -08:00
parent d827b79c72
commit 7450b76e6d
91 changed files with 736 additions and 353 deletions

View file

@ -1,13 +1,17 @@
import Layout from 'components/layout/Layout';
import { FormattedMessage } from 'react-intl';
import { useIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
notFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
});
export default function Custom404() {
const { formatMessage } = useIntl();
return (
<Layout>
<div className="row justify-content-center">
<h1>
<FormattedMessage id="message.page-not-found" defaultMessage="Page not found" />
</h1>
<h1 style={{ textAlign: 'center' }}>{formatMessage(messages.notFound)}</h1>
</div>
</Layout>
);

View file

@ -1,9 +1,12 @@
import { IntlProvider } from 'react-intl';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Head from 'next/head';
import { useRouter } from 'next/router';
import useLocale from 'hooks/useLocale';
import useConfig from 'hooks/useConfig';
import 'react-basics/dist/styles.css';
import 'styles/variables.css';
import 'styles/locale.css';
import 'styles/index.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/600.css';
@ -12,6 +15,7 @@ const client = new QueryClient();
export default function App({ Component, pageProps }) {
const { locale, messages } = useLocale();
const { basePath } = useRouter();
useConfig();
const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
@ -23,6 +27,18 @@ export default function App({ Component, pageProps }) {
return (
<QueryClientProvider client={client}>
<IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
<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" />
</Head>
<Component {...pageProps} />
</IntlProvider>
</QueryClientProvider>

View file

@ -1,5 +1,5 @@
import Layout from 'components/layout/Layout';
import TestConsole from 'components/pages/TestConsole';
import TestConsole from 'components/pages/console/TestConsole';
import useRequireLogin from 'hooks/useRequireLogin';
export default function ConsolePage({ pageDisabled }) {

View file

@ -1,6 +1,6 @@
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import Dashboard from 'components/pages/Dashboard';
import Dashboard from 'components/pages/dashboard/Dashboard';
import useConfig from 'hooks/useConfig';
import useRequireLogin from 'hooks/useRequireLogin';

View file

@ -1,5 +1,5 @@
import Layout from 'components/layout/Layout';
import LoginForm from 'components/forms/LoginForm';
import LoginForm from 'components/pages/login/LoginForm';
export default function LoginPage({ pageDisabled }) {
if (pageDisabled) {

View file

@ -1,17 +0,0 @@
import Settings from 'components/pages/Settings';
import ProfileSettings from 'components/pages/ProfileSettings';
import useUser from 'hooks/useUser';
export default function TeamsPage() {
const user = useUser();
if (!user) {
return null;
}
return (
<Settings>
<ProfileSettings />
</Settings>
);
}

View file

@ -1,5 +1,5 @@
import Layout from 'components/layout/Layout';
import RealtimeDashboard from 'components/pages/RealtimeDashboard';
import RealtimeDashboard from 'components/pages/realtime/RealtimeDashboard';
import useRequireLogin from 'hooks/useRequireLogin';
export default function RealtimePage() {

10
pages/settings/index.js Normal file
View file

@ -0,0 +1,10 @@
export default () => null;
export async function getServerSideProps() {
return {
redirect: {
destination: '/settings/websites',
permanent: true,
},
};
}

View file

@ -0,0 +1,10 @@
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
export default function ProfilePage() {
return (
<SettingsLayout>
<ProfileSettings />
</SettingsLayout>
);
}

View file

@ -1,5 +1,5 @@
import Settings from 'components/pages/Settings';
import TeamDetails from 'components/pages/TeamDetails';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import TeamDetails from 'components/pages/settings/teams/TeamDetails';
import useUser from 'hooks/useUser';
import { useRouter } from 'next/router';
@ -13,8 +13,8 @@ export default function TeamDetailPage() {
}
return (
<Settings>
<SettingsLayout>
<TeamDetails teamId={id} />
</Settings>
</SettingsLayout>
);
}

View file

@ -0,0 +1,17 @@
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import TeamsList from 'components/pages/settings/teams/TeamsList';
import useUser from 'hooks/useUser';
export default function TeamsPage() {
const user = useUser();
if (!user) {
return null;
}
return (
<SettingsLayout>
<TeamsList />
</SettingsLayout>
);
}

View file

@ -1,5 +1,5 @@
import Settings from 'components/pages/Settings';
import UserSettings from 'components/pages/UserSettings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import UserSettings from 'components/pages/settings/users/UserSettings';
import useUser from 'hooks/useUser';
import { useRouter } from 'next/router';
@ -13,8 +13,8 @@ export default function TeamDetailPage() {
}
return (
<Settings>
<SettingsLayout>
<UserSettings userId={id} />
</Settings>
</SettingsLayout>
);
}

View file

@ -1,8 +1,8 @@
import Settings from 'components/pages/Settings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import useConfig from 'hooks/useConfig';
import useUser from 'hooks/useUser';
import UsersList from 'components/pages/UsersList';
import UsersList from 'components/pages/settings/users/UsersList';
export default function UsersPage() {
const user = useUser();
@ -13,8 +13,8 @@ export default function UsersPage() {
}
return (
<Settings>
<SettingsLayout>
<UsersList />
</Settings>
</SettingsLayout>
);
}

View file

@ -1,7 +1,7 @@
import { useRouter } from 'next/router';
import WebsiteSettings from 'components/pages/WebsiteSettings';
import WebsiteDetails from 'components/pages/settings/websites/WebsiteDetails';
import useUser from 'hooks/useUser';
import Settings from 'components/pages/Settings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
export default function WebsiteSettingsPage() {
const user = useUser();
@ -13,8 +13,8 @@ export default function WebsiteSettingsPage() {
}
return (
<Settings>
<WebsiteSettings websiteId={id} />
</Settings>
<SettingsLayout>
<WebsiteDetails websiteId={id} />
</SettingsLayout>
);
}

View file

@ -1,7 +1,7 @@
import Settings from 'components/pages/Settings';
import SettingsLayout from 'components/pages/settings/SettingsLayout';
import useConfig from 'hooks/useConfig';
import useRequireLogin from 'hooks/useRequireLogin';
import WebsitesList from 'components/pages/WebsitesList';
import WebsitesList from 'components/pages/settings/websites/WebsitesList';
export default function WebsitesPage() {
const { user } = useRequireLogin();
@ -12,8 +12,8 @@ export default function WebsitesPage() {
}
return (
<Settings>
<SettingsLayout>
<WebsitesList />
</Settings>
</SettingsLayout>
);
}

View file

@ -1,6 +1,6 @@
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/pages/WebsiteDetails';
import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
import useShareToken from 'hooks/useShareToken';
export default function SharePage() {

View file

@ -1,17 +0,0 @@
import Settings from 'components/pages/Settings';
import TeamsList from 'components/pages/TeamsList';
import useUser from 'hooks/useUser';
export default function TeamsPage() {
const user = useUser();
if (!user) {
return null;
}
return (
<Settings>
<TeamsList />
</Settings>
);
}

View file

@ -1,6 +1,6 @@
import { useRouter } from 'next/router';
import Layout from 'components/layout/Layout';
import WebsiteDetails from 'components/pages/WebsiteDetails';
import WebsiteDetails from 'components/pages/websites/WebsiteDetails';
import useRequireLogin from 'hooks/useRequireLogin';
export default function DetailsPage() {