plane/apps/app/pages/projects/[projectId]/settings.tsx

225 lines
6.1 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useState } from "react";
2022-11-19 14:21:26 +00:00
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
2022-11-19 14:21:26 +00:00
// swr
import useSWR, { mutate } from "swr";
2022-11-19 14:21:26 +00:00
// react hook form
import { useForm } from "react-hook-form";
2022-11-19 14:21:26 +00:00
// headless ui
import { Tab } from "@headlessui/react";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
2022-11-19 14:21:26 +00:00
// layouts
import SettingsLayout from "layouts/settings-layout";
2022-12-15 04:17:56 +00:00
import AppLayout from "layouts/app-layout";
2022-11-19 14:21:26 +00:00
// service
import projectServices from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// fetch keys
import { PROJECT_DETAILS, PROJECTS_LIST } from "constants/fetch-keys";
2022-11-19 14:21:26 +00:00
// ui
2022-12-19 18:22:01 +00:00
import { Button, Spinner } from "ui";
2022-11-19 14:21:26 +00:00
import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
// types
import type { IProject, IWorkspace } from "types";
2022-11-19 14:21:26 +00:00
2022-12-19 15:00:09 +00:00
const GeneralSettings = dynamic(() => import("components/project/settings/general"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
2022-12-19 18:22:01 +00:00
const MembersSettings = dynamic(() => import("components/project/settings/members"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
2022-12-19 15:00:09 +00:00
const ControlSettings = dynamic(() => import("components/project/settings/control"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
2022-12-19 15:00:09 +00:00
const StatesSettings = dynamic(() => import("components/project/settings/states"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
2022-12-19 15:00:09 +00:00
const LabelsSettings = dynamic(() => import("components/project/settings/labels"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
2022-11-19 14:21:26 +00:00
const defaultValues: Partial<IProject> = {
name: "",
description: "",
2022-12-08 15:05:27 +00:00
identifier: "",
network: 0,
2022-11-19 14:21:26 +00:00
};
const ProjectSettings: NextPage = () => {
const {
register,
handleSubmit,
reset,
control,
setError,
2022-11-19 14:21:26 +00:00
formState: { errors, isSubmitting },
} = useForm<IProject>({
defaultValues,
});
const router = useRouter();
const { projectId } = router.query;
const { activeWorkspace, activeProject } = useUser();
2022-11-19 14:21:26 +00:00
const { setToastAlert } = useToast();
const { data: projectDetails } = useSWR<IProject>(
activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
2022-11-19 14:21:26 +00:00
activeWorkspace
? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
: null
);
useEffect(() => {
projectDetails &&
reset({
...projectDetails,
default_assignee: projectDetails.default_assignee?.id,
project_lead: projectDetails.project_lead?.id,
workspace: (projectDetails.workspace as IWorkspace).id,
});
}, [projectDetails, reset]);
const onSubmit = async (formData: IProject) => {
if (!activeWorkspace || !projectId) return;
2022-11-19 14:21:26 +00:00
const payload: Partial<IProject> = {
name: formData.name,
network: formData.network,
identifier: formData.identifier,
2022-11-19 14:21:26 +00:00
description: formData.description,
default_assignee: formData.default_assignee,
project_lead: formData.project_lead,
icon: formData.icon,
2022-11-19 14:21:26 +00:00
};
await projectServices
.updateProject(activeWorkspace.slug, projectId as string, payload)
.then((res) => {
mutate<IProject>(
PROJECT_DETAILS(projectId as string),
(prevData) => ({ ...prevData, ...res }),
false
);
2022-11-19 14:21:26 +00:00
mutate<IProject[]>(
PROJECTS_LIST(activeWorkspace.slug),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
},
false
);
setToastAlert({
title: "Success",
type: "success",
message: "Project updated successfully",
});
})
.catch((err) => {
console.log(err);
});
};
const sidebarLinks: Array<{
label: string;
href: string;
}> = [
{
label: "General",
href: "#",
},
{
label: "Control",
href: "#",
},
{
label: "States",
href: "#",
},
{
label: "Labels",
href: "#",
},
];
2022-11-19 14:21:26 +00:00
return (
2022-12-15 04:17:56 +00:00
<AppLayout
breadcrumbs={
2022-11-19 14:21:26 +00:00
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
2022-11-19 14:21:26 +00:00
</Breadcrumbs>
}
2022-12-15 04:17:56 +00:00
// links={sidebarLinks}
>
{projectDetails ? (
2022-12-19 18:22:01 +00:00
<div className="space-y-3 px-10">
<Tab.Group>
<Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap mb-8">
2022-12-19 18:22:01 +00:00
{["General", "Control", "Members", "States", "Labels"].map((tab, index) => (
<Tab key={index} as="div">
2022-12-19 18:22:01 +00:00
{({ selected }) => (
<Button theme="secondary" className={selected ? "border-theme" : ""}>
{tab}
</Button>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<form onSubmit={handleSubmit(onSubmit)}>
<Tab.Panel>
<GeneralSettings
control={control}
register={register}
errors={errors}
setError={setError}
isSubmitting={isSubmitting}
/>
</Tab.Panel>
<Tab.Panel>
<ControlSettings control={control} isSubmitting={isSubmitting} />
</Tab.Panel>
</form>
<Tab.Panel>
2022-12-19 18:22:01 +00:00
<MembersSettings projectId={projectId as string} />
</Tab.Panel>
<Tab.Panel>
<StatesSettings projectId={projectId as string} />
</Tab.Panel>
<Tab.Panel>
<LabelsSettings />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
2022-11-19 14:21:26 +00:00
</div>
) : (
<div className="h-full w-full flex justify-center items-center">
<Spinner />
</div>
)}
2022-12-15 04:17:56 +00:00
</AppLayout>
2022-11-19 14:21:26 +00:00
);
};
export default withAuth(ProjectSettings);