fix: bug fixes (#397)

* Add more html page titles

* Make tables responsive

* fix react query keys

* Add tooltip to sidebar toggle

* fix: trim inputs

* fix inputs
This commit is contained in:
Philip Okugbe
2024-10-13 17:09:45 +01:00
committed by GitHub
parent fa3c8a03e1
commit 36e720920b
38 changed files with 681 additions and 612 deletions

View File

@ -1,11 +1,12 @@
import { ForgotPasswordForm } from "@/features/auth/components/forgot-password-form";
import { getAppName } from "@/lib/config";
import { Helmet } from "react-helmet-async";
export default function ForgotPassword() {
return (
<>
<Helmet>
<title>Forgot Password - Docmost</title>
<title>Forgot Password - {getAppName()}</title>
</Helmet>
<ForgotPasswordForm />
</>

View File

@ -1,12 +1,13 @@
import { Helmet } from "react-helmet-async";
import { InviteSignUpForm } from "@/features/auth/components/invite-sign-up-form.tsx";
import {getAppName} from "@/lib/config.ts";
export default function InviteSignup() {
return (
<>
<Helmet>
<title>Invitation Signup - Docmost</title>
</Helmet>
<Helmet>
<title>Invitation Signuo - {getAppName()}</title>
</Helmet>
<InviteSignUpForm />
</>
);

View File

@ -1,11 +1,12 @@
import { LoginForm } from "@/features/auth/components/login-form";
import { Helmet } from "react-helmet-async";
import {getAppName} from "@/lib/config.ts";
export default function LoginPage() {
return (
<>
<Helmet>
<title>Login - Docmost</title>
<title>Login - {getAppName()}</title>
</Helmet>
<LoginForm />
</>

View File

@ -4,6 +4,7 @@ import { Link, useSearchParams } from "react-router-dom";
import { useVerifyUserTokenQuery } from "@/features/auth/queries/auth-query";
import { Button, Container, Group, Text } from "@mantine/core";
import APP_ROUTE from "@/lib/app-route";
import {getAppName} from "@/lib/config.ts";
export default function PasswordReset() {
const [searchParams] = useSearchParams();
@ -21,7 +22,7 @@ export default function PasswordReset() {
return (
<>
<Helmet>
<title>Password Reset - Docmost</title>
<title>Password Reset - {getAppName()}</title>
</Helmet>
<Container my={40}>
<Text size="lg" ta="center">
@ -45,7 +46,7 @@ export default function PasswordReset() {
return (
<>
<Helmet>
<title>Password Reset - Docmost</title>
<title>Password Reset - {getAppName()}</title>
</Helmet>
<PasswordResetForm resetToken={resetToken} />
</>

View File

@ -3,6 +3,7 @@ import { SetupWorkspaceForm } from "@/features/auth/components/setup-workspace-f
import { Helmet } from "react-helmet-async";
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {getAppName} from "@/lib/config.ts";
export default function SetupWorkspace() {
const {
@ -32,7 +33,7 @@ export default function SetupWorkspace() {
return (
<>
<Helmet>
<title>Setup Workspace - Docmost</title>
<title>Setup Workspace - {getAppName()}</title>
</Helmet>
<SetupWorkspaceForm />
</>

View File

@ -1,15 +1,22 @@
import { Container, Space } from "@mantine/core";
import {Container, Space} from "@mantine/core";
import HomeTabs from "@/features/home/components/home-tabs";
import SpaceGrid from "@/features/space/components/space-grid.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function Home() {
return (
<Container size={"800"} pt="xl">
<SpaceGrid />
return (
<>
<Helmet>
<title>Home - {getAppName()}</title>
</Helmet>
<Container size={"800"} pt="xl">
<SpaceGrid/>
<Space h="xl" />
<Space h="xl"/>
<HomeTabs />
</Container>
);
<HomeTabs/>
</Container>
</>
);
}

View File

@ -1,15 +1,20 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import AccountTheme from "@/features/user/components/account-theme.tsx";
import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
import { Divider } from "@mantine/core";
import {Divider} from "@mantine/core";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function AccountPreferences() {
return (
<>
<SettingsTitle title="Preferences" />
<AccountTheme />
<Divider my={"md"} />
<PageWidthPref />
</>
);
return (
<>
<Helmet>
<title>Preferences - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Preferences"/>
<AccountTheme/>
<Divider my={"md"}/>
<PageWidthPref/>
</>
);
}

View File

@ -4,10 +4,15 @@ import ChangePassword from "@/features/user/components/change-password";
import { Divider } from "@mantine/core";
import AccountAvatar from "@/features/user/components/account-avatar";
import SettingsTitle from "@/components/settings/settings-title.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function AccountSettings() {
return (
<>
<Helmet>
<title>My Profile - {getAppName()}</title>
</Helmet>
<SettingsTitle title="My Profile" />
<AccountAvatar />

View File

@ -1,13 +1,18 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import GroupMembersList from "@/features/group/components/group-members";
import GroupDetails from "@/features/group/components/group-details";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function GroupInfo() {
return (
<>
<SettingsTitle title="Manage Group" />
<GroupDetails />
<GroupMembersList />
</>
);
return (
<>
<Helmet>
<title>Manage Group - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Manage Group"/>
<GroupDetails/>
<GroupMembersList/>
</>
);
}

View File

@ -3,12 +3,17 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
import { Group } from "@mantine/core";
import CreateGroupModal from "@/features/group/components/create-group-modal";
import useUserRole from "@/hooks/use-user-role.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function Groups() {
const { isAdmin } = useUserRole();
return (
<>
<Helmet>
<title>Groups - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Groups" />
<Group my="md" justify="flex-end">

View File

@ -1,21 +1,26 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import SpaceList from "@/features/space/components/space-list.tsx";
import useUserRole from "@/hooks/use-user-role.tsx";
import { Group } from "@mantine/core";
import {Group} from "@mantine/core";
import CreateSpaceModal from "@/features/space/components/create-space-modal.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function Spaces() {
const { isAdmin } = useUserRole();
const {isAdmin} = useUserRole();
return (
<>
<SettingsTitle title="Spaces" />
return (
<>
<Helmet>
<title>Spaces - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Spaces"/>
<Group my="md" justify="flex-end">
{isAdmin && <CreateSpaceModal />}
</Group>
<Group my="md" justify="flex-end">
{isAdmin && <CreateSpaceModal/>}
</Group>
<SpaceList />
</>
);
<SpaceList/>
</>
);
}

View File

@ -1,62 +1,67 @@
import WorkspaceInviteModal from "@/features/workspace/components/members/components/workspace-invite-modal";
import { Group, SegmentedControl, Space, Text } from "@mantine/core";
import {Group, SegmentedControl, Space, Text} from "@mantine/core";
import WorkspaceMembersTable from "@/features/workspace/components/members/components/workspace-members-table";
import SettingsTitle from "@/components/settings/settings-title.tsx";
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import {useEffect, useState} from "react";
import {useNavigate, useSearchParams} from "react-router-dom";
import WorkspaceInvitesTable from "@/features/workspace/components/members/components/workspace-invites-table.tsx";
import useUserRole from "@/hooks/use-user-role.tsx";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function WorkspaceMembers() {
const [segmentValue, setSegmentValue] = useState("members");
const [searchParams] = useSearchParams();
const { isAdmin } = useUserRole();
const navigate = useNavigate();
const [segmentValue, setSegmentValue] = useState("members");
const [searchParams] = useSearchParams();
const {isAdmin} = useUserRole();
const navigate = useNavigate();
useEffect(() => {
const currentTab = searchParams.get("tab");
if (currentTab === "invites") {
setSegmentValue(currentTab);
}
}, [searchParams.get("tab")]);
useEffect(() => {
const currentTab = searchParams.get("tab");
if (currentTab === "invites") {
setSegmentValue(currentTab);
}
}, [searchParams.get("tab")]);
const handleSegmentChange = (value: string) => {
setSegmentValue(value);
if (value === "invites") {
navigate(`?tab=${value}`);
} else {
navigate("");
}
};
const handleSegmentChange = (value: string) => {
setSegmentValue(value);
if (value === "invites") {
navigate(`?tab=${value}`);
} else {
navigate("");
}
};
return (
<>
<SettingsTitle title="Members" />
return (
<>
<Helmet>
<title>Members - {getAppName()}</title>
</Helmet>
<SettingsTitle title="Members"/>
{/* <WorkspaceInviteSection /> */}
{/* <Divider my="lg" /> */}
{/* <WorkspaceInviteSection /> */}
{/* <Divider my="lg" /> */}
<Group justify="space-between">
<SegmentedControl
value={segmentValue}
onChange={handleSegmentChange}
data={[
{ label: "Members", value: "members" },
{ label: "Pending", value: "invites" },
]}
withItemsBorders={false}
/>
<Group justify="space-between">
<SegmentedControl
value={segmentValue}
onChange={handleSegmentChange}
data={[
{label: "Members", value: "members"},
{label: "Pending", value: "invites"},
]}
withItemsBorders={false}
/>
{isAdmin && <WorkspaceInviteModal />}
</Group>
{isAdmin && <WorkspaceInviteModal/>}
</Group>
<Space h="lg" />
<Space h="lg"/>
{segmentValue === "invites" ? (
<WorkspaceInvitesTable />
) : (
<WorkspaceMembersTable />
)}
</>
);
{segmentValue === "invites" ? (
<WorkspaceInvitesTable/>
) : (
<WorkspaceMembersTable/>
)}
</>
);
}

View File

@ -1,11 +1,16 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function WorkspaceSettings() {
return (
<>
<SettingsTitle title="General" />
<WorkspaceNameForm />
</>
);
return (
<>
<Helmet>
<title>Workspace Settings - {getAppName()}</title>
</Helmet>
<SettingsTitle title="General"/>
<WorkspaceNameForm/>
</>
);
}

View File

@ -1,15 +1,22 @@
import { Container } from "@mantine/core";
import {Container} from "@mantine/core";
import SpaceHomeTabs from "@/features/space/components/space-home-tabs.tsx";
import { useParams } from "react-router-dom";
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
import {useParams} from "react-router-dom";
import {useGetSpaceBySlugQuery} from "@/features/space/queries/space-query.ts";
import {getAppName} from "@/lib/config.ts";
import {Helmet} from "react-helmet-async";
export default function SpaceHome() {
const { spaceSlug } = useParams();
const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
const {spaceSlug} = useParams();
const {data: space} = useGetSpaceBySlugQuery(spaceSlug);
return (
<Container size={"800"} pt="xl">
{space && <SpaceHomeTabs />}
</Container>
);
return (
<>
<Helmet>
<title>{space?.name || 'Overview'} - {getAppName()}</title>
</Helmet>
<Container size={"800"} pt="xl">
{space && <SpaceHomeTabs/>}
</Container>
</>
);
}

View File

@ -1,23 +0,0 @@
import { Title, Text, Stack } from '@mantine/core';
import { ThemeToggle } from '@/components/theme-toggle';
export function Welcome() {
return (
<Stack>
<Title ta="center" mt={100}>
<Text
inherit
variant="gradient"
component="span"
gradient={{ from: 'pink', to: 'yellow' }}
>
Welcome
</Text>
</Title>
<Text ta="center" size="lg" maw={580} mx="auto" mt="xl">
Welcome to something new and interesting.
</Text>
<ThemeToggle />
</Stack>
);
}