github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #30 from dakshesh14/main

Browse Source 
fix: mutation error for project detail, feat: protecting all routes wrapper
This commit is contained in:
Vamsi Kurama 2022-12-12 19:03:13 +05:30 committed by GitHub
commit ba869c37db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
59 changed files with 556 additions and 302 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/app/.env.example Normal file
View File

@ -0,0 +1,4 @@
NEXT_PUBLIC_API_BASE_URL = "<-- endpoint goes here -->"
NEXT_PUBLIC_GOOGLE_CLIENTID = "<-- google client id goes here -->"
NEXT_PUBLIC_GITHUB_ID = "<-- github id goes here -->"
NEXT_PUBLIC_APP_ENVIRONMENT=development

2
apps/app/components/command-palette/addAsSubIssue.tsx
View File

@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
// icons

4
apps/app/components/command-palette/index.tsx
View File

@ -8,7 +8,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
// headless ui
import { Combobox, Dialog, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
import useTheme from "lib/hooks/useTheme";
@ -22,7 +22,7 @@ import {
} from "@heroicons/react/24/outline";
// components
import ShortcutsModal from "components/command-palette/shortcuts";
import CreateProjectModal from "components/project/CreateProjectModal";
import CreateProjectModal from "components/project/create-project-modal";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
// ui

9
apps/app/components/project/SendProjectInvitationModal.tsx
View File

@ -20,7 +20,7 @@ import { Button, Select, TextArea } from "ui";
import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
// types
import { ProjectMember, WorkspaceMember } from "types";
import { IProjectMemberInvitation } from "types";
type Props = {
isOpen: boolean;
@ -28,6 +28,11 @@ type Props = {
members: any[];
};
type ProjectMember = IProjectMemberInvitation & {
member_id: string;
user_id: string;
};
const defaultValues: Partial<ProjectMember> = {
email: "",
message: "",
@ -49,7 +54,7 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
const { setToastAlert } = useToast();
const { data: people } = useSWR<WorkspaceMember[]>(
const { data: people } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null,
{

75
apps/app/components/project/ConfirmProjectDeletion.tsx → apps/app/components/project/confirm-project-deletion.tsx
View File

@ -9,19 +9,26 @@ import useToast from "lib/hooks/useToast";
// icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui
import { Button } from "ui";
import { Button, Input } from "ui";
// types
import type { IProject } from "types";
type Props = {
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
data?: IProject;
onClose: () => void;
data: IProject | null;
};
const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, data, onClose }) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const [selectedProject, setSelectedProject] = useState<IProject | null>(null);
const [confirmProjectName, setConfirmProjectName] = useState("");
const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false);
const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject;
const { activeWorkspace, mutateProjects } = useUser();
const { setToastAlert } = useToast();
@ -29,13 +36,18 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
const cancelButtonRef = useRef(null);
const handleClose = () => {
setIsOpen(false);
setIsDeleteLoading(false);
const timer = setTimeout(() => {
setConfirmProjectName("");
setConfirmDeleteMyProject(false);
clearTimeout(timer);
}, 350);
onClose();
};
const handleDeletion = async () => {
setIsDeleteLoading(true);
if (!data || !activeWorkspace) return;
if (!data || !activeWorkspace || !canDelete) return;
await projectService
.deleteProject(activeWorkspace.slug, data.id)
.then(() => {
@ -54,8 +66,14 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
};
useEffect(() => {
data && setIsOpen(true);
}, [data, setIsOpen]);
if (data) setSelectedProject(data);
else {
const timer = setTimeout(() => {
setSelectedProject(null);
clearTimeout(timer);
}, 300);
}
}, [data]);
return (
<Transition.Root show={isOpen} as={React.Fragment}>
@ -104,11 +122,48 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
<div className="mt-2">
<p className="text-sm text-gray-500">
Are you sure you want to delete project - {`"`}
<span className="italic">{data?.name}</span>
<span className="italic">{selectedProject?.name}</span>
{`"`} ? All of the data related to the project will be permanently
removed. This action cannot be undone.
</p>
</div>
<div className="h-0.5 bg-gray-200 my-3" />
<div className="mt-3">
<p className="text-sm">
Enter the project name{" "}
<span className="font-semibold">{selectedProject?.name}</span> to
continue:
</p>
<Input
type="text"
placeholder="Project name"
className="mt-2"
value={confirmProjectName}
onChange={(e) => {
setConfirmProjectName(e.target.value);
}}
name="projectName"
/>
</div>
<div className="mt-3">
<p className="text-sm">
To confirm, type <span className="font-semibold">delete my project</span>{" "}
below:
</p>
<Input
type="text"
placeholder="Enter 'delete my project'"
className="mt-2"
onChange={(e) => {
if (e.target.value === "delete my project") {
setConfirmDeleteMyProject(true);
} else {
setConfirmDeleteMyProject(false);
}
}}
name="projectName"
/>
</div>
</div>
</div>
</div>
@ -117,7 +172,7 @@ const ConfirmProjectDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) =>
type="button"
onClick={handleDeletion}
theme="danger"
disabled={isDeleteLoading}
disabled={isDeleteLoading || !canDelete}
className="inline-flex sm:ml-3"
>
{isDeleteLoading ? "Deleting..." : "Delete"}

94
apps/app/components/project/CreateProjectModal.tsx → apps/app/components/project/create-project-modal.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback } from "react";
import React, { useState, useEffect } from "react";
// swr
import useSWR, { mutate } from "swr";
// react hook form
@ -8,6 +8,10 @@ import { Dialog, Transition } from "@headlessui/react";
// services
import projectServices from "lib/services/project.service";
import workspaceService from "lib/services/workspace.service";
// common
import { createSimilarString } from "constants/common";
// constants
import { NETWORK_CHOICES } from "constants/";
// fetch keys
import { PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
// hooks
@ -15,21 +19,19 @@ import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// ui
import { Button, Input, TextArea, Select } from "ui";
// common
import { debounce } from "constants/common";
// types
import { IProject, WorkspaceMember } from "types";
import { IProject } from "types";
type Props = {
isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
const defaultValues: Partial<IProject> = {
name: "",
identifier: "",
description: "",
network: 0,
};
const IsGuestCondition: React.FC<{
@ -60,11 +62,16 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
const { activeWorkspace, user } = useUser();
const { data: workspaceMembers } = useSWR<WorkspaceMember[]>(
const { data: workspaceMembers } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null,
{
shouldRetryOnError: false,
}
);
const [recommendedIdentifier, setRecommendedIdentifier] = useState<string[]>([]);
const { setToastAlert } = useToast();
const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
@ -75,12 +82,11 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
handleSubmit,
reset,
setError,
clearErrors,
watch,
setValue,
} = useForm<IProject>({
defaultValues,
reValidateMode: "onChange",
mode: "all",
});
const onSubmit = async (formData: IProject) => {
@ -111,6 +117,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
handleClose();
return;
}
err = err.data;
Object.keys(err).map((key) => {
const errorMessages = err[key];
setError(key as keyof IProject, {
@ -123,22 +130,6 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
const projectName = watch("name") ?? "";
const projectIdentifier = watch("identifier") ?? "";
const checkIdentifier = (slug: string, value: string) => {
projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
console.log(response);
if (response.exists) setError("identifier", { message: "Identifier already exists" });
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
useEffect(() => {
if (projectName && isChangeIdentifierRequired) {
setValue("identifier", projectName.replace(/ /g, "-").toUpperCase().substring(0, 3));
}
}, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
if (workspaceMembers) {
const isMember = workspaceMembers.find((member) => member.member.id === user?.id);
const isGuest = workspaceMembers.find(
@ -148,6 +139,30 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
if ((!isMember || isGuest) && isOpen) return <IsGuestCondition setIsOpen={setIsOpen} />;
}
useEffect(() => {
if (projectName && isChangeIdentifierRequired) {
setValue("identifier", projectName.replace(/ /g, "").toUpperCase().substring(0, 3));
}
}, [projectName, projectIdentifier, setValue, isChangeIdentifierRequired]);
useEffect(() => {
if (!projectName) return;
const suggestedIdentifier = createSimilarString(
projectName.replace(/ /g, "").toUpperCase().substring(0, 3)
);
setRecommendedIdentifier([
suggestedIdentifier + Math.floor(Math.random() * 101),
suggestedIdentifier + Math.floor(Math.random() * 101),
projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101),
projectIdentifier.toUpperCase().substring(0, 3) + Math.floor(Math.random() * 101),
]);
}, [errors.identifier]);
useEffect(() => {
return () => setIsChangeIdentifierRequired(true);
}, [isOpen]);
return (
<Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={handleClose}>
@ -234,11 +249,7 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
placeholder="Enter Project Identifier"
error={errors.identifier}
register={register}
onChange={(e: any) => {
setIsChangeIdentifierRequired(false);
if (!activeWorkspace || !e.target.value) return;
checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
}}
onChange={() => setIsChangeIdentifierRequired(false)}
validations={{
required: "Identifier is required",
minLength: {
@ -251,6 +262,27 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
},
}}
/>
{errors.identifier && (
<div className="mt-2">
<p>Ops! Identifier is already taken. Try one of the following:</p>
<div className="flex gap-x-2">
{recommendedIdentifier.map((identifier) => (
<button
key={identifier}
type="button"
className="text-sm text-gray-500 hover:text-gray-700 border p-2 py-0.5 rounded"
onClick={() => {
clearErrors("identifier");
setValue("identifier", identifier);
setIsChangeIdentifierRequired(false);
}}
>
{identifier}
</button>
))}
</div>
</div>
)}
</div>
</div>
</div>

2
apps/app/components/project/cycles/ConfirmCycleDeletion.tsx
View File

@ -4,7 +4,7 @@ import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import cycleService from "lib/services/cycles.services";
import cycleService from "lib/services/cycles.service";
// fetch api
import { CYCLE_LIST } from "constants/fetch-keys";
// hooks

2
apps/app/components/project/cycles/CreateUpdateCyclesModal.tsx
View File

@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
// headless
import { Dialog, Transition } from "@headlessui/react";
// services
import cycleService from "lib/services/cycles.services";
import cycleService from "lib/services/cycles.service";
// fetch keys
import { CYCLE_LIST } from "constants/fetch-keys";
// hooks

2
apps/app/components/project/cycles/CycleIssuesListModal.tsx
View File

@ -7,7 +7,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
// ui
import { Button } from "ui";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";

4
apps/app/components/project/cycles/CycleView.tsx
View File

@ -7,7 +7,7 @@ import useSWR, { mutate } from "swr";
// headless ui
import { Disclosure, Transition, Menu } from "@headlessui/react";
// services
import cycleServices from "lib/services/cycles.services";
import cycleServices from "lib/services/cycles.service";
// hooks
import useUser from "lib/hooks/useUser";
// components
@ -22,7 +22,7 @@ import type { CycleViewProps as Props, CycleIssueResponse, IssueResponse } from
import { CYCLE_ISSUES } from "constants/fetch-keys";
// constants
import { renderShortNumericDateFormat } from "constants/common";
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import { Draggable } from "react-beautiful-dnd";

8
apps/app/components/project/issues/BoardView/index.tsx
View File

@ -7,8 +7,8 @@ import useSWR from "swr";
import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext } from "react-beautiful-dnd";
// services
import stateServices from "lib/services/state.services";
import issuesServices from "lib/services/issues.services";
import stateServices from "lib/services/state.service";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
// fetching keys
@ -20,7 +20,7 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
// ui
import { Spinner } from "ui";
// types
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
import type { IState, IIssue, Properties, NestedKeyOf, IProjectMember } from "types";
import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
import { TrashIcon } from "@heroicons/react/24/outline";
@ -30,7 +30,7 @@ type Props = {
groupedByIssues: {
[key: string]: IIssue[];
};
members: ProjectMember[] | undefined;
members: IProjectMember[] | undefined;
};
const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues, members }) => {

13
apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx
View File

@ -4,7 +4,7 @@ import { mutate } from "swr";
// headless ui
import { Dialog, Transition } from "@headlessui/react";
// services
import stateServices from "lib/services/state.services";
import stateServices from "lib/services/state.service";
// fetch api
import { STATE_LIST } from "constants/fetch-keys";
// hooks
@ -43,7 +43,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
mutate<IState[]>(
STATE_LIST(data.project),
(prevData) => prevData?.filter((state) => state.id !== data?.id),
false,
false
);
handleClose();
})
@ -98,18 +98,15 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Delete State
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Are you sure you want to delete state - {`"`}
<span className="italic">{data?.name}</span>
{`"`} ? All of the data related to the state will be
permanently removed. This action cannot be undone.
{`"`} ? All of the data related to the state will be permanently removed.
This action cannot be undone.
</p>
</div>
</div>

2
apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx
View File

@ -8,7 +8,7 @@ import { TwitterPicker } from "react-color";
// headless
import { Dialog, Popover, Transition } from "@headlessui/react";
// services
import stateService from "lib/services/state.services";
import stateService from "lib/services/state.service";
// fetch keys
import { STATE_LIST } from "constants/fetch-keys";
// hooks

2
apps/app/components/project/issues/ConfirmIssueDeletion.tsx
View File

@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
// fetching keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
// services
import issueServices from "lib/services/issues.services";
import issueServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";

4
apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
View File

@ -11,7 +11,7 @@ import useUser from "lib/hooks/useUser";
import { PROJECT_MEMBERS } from "constants/fetch-keys";
// types
import type { Control } from "react-hook-form";
import type { IIssue, WorkspaceMember } from "types";
import type { IIssue } from "types";
import { UserIcon } from "@heroicons/react/24/outline";
import { SearchListbox } from "ui";
@ -23,7 +23,7 @@ type Props = {
const SelectAssignee: React.FC<Props> = ({ control }) => {
const { activeWorkspace, activeProject } = useUser();
const { data: people } = useSWR<WorkspaceMember[]>(
const { data: people } = useSWR(
activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
activeWorkspace && activeProject
? () => projectServices.projectMembers(activeWorkspace.slug, activeProject.id)

2
apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx
View File

@ -6,7 +6,7 @@ import { useForm, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
// fetching keys

2
apps/app/components/project/issues/CreateUpdateIssueModal/index.tsx
View File

@ -16,7 +16,7 @@ import {
// headless
import { Dialog, Menu, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";

6
apps/app/components/project/issues/ListView/index.tsx
View File

@ -10,14 +10,14 @@ import { Listbox, Transition } from "@headlessui/react";
// icons
import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// types
import { IIssue, IssueResponse, NestedKeyOf, Properties, WorkspaceMember } from "types";
import { IIssue, IssueResponse, NestedKeyOf, Properties } from "types";
// hooks
import useUser from "lib/hooks/useUser";
// fetch keys
import { PRIORITIES } from "constants/";
import { PROJECT_ISSUES_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
import workspaceService from "lib/services/workspace.service";
// constants
import { addSpaceIfCamelCase, classNames, renderShortNumericDateFormat } from "constants/common";
@ -60,7 +60,7 @@ const ListView: React.FC<Props> = ({
});
};
const { data: people } = useSWR<WorkspaceMember[]>(
const { data: people } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);

15
apps/app/components/project/issues/issue-detail/IssueDetailSidebar.tsx
View File

@ -6,8 +6,8 @@ import { Listbox, Transition } from "@headlessui/react";
// react hook form
import { useForm, Controller, UseFormWatch } from "react-hook-form";
// services
import stateServices from "lib/services/state.services";
import issuesServices from "lib/services/issues.services";
import stateServices from "lib/services/state.service";
import issuesServices from "lib/services/issues.service";
import workspaceService from "lib/services/workspace.service";
// hooks
import useUser from "lib/hooks/useUser";
@ -40,14 +40,7 @@ import {
} from "@heroicons/react/24/outline";
// types
import type { Control } from "react-hook-form";
import type {
IIssue,
IIssueLabels,
IssueResponse,
IState,
NestedKeyOf,
WorkspaceMember,
} from "types";
import type { IIssue, IIssueLabels, IssueResponse, IState, NestedKeyOf } from "types";
import { TwitterPicker } from "react-color";
import IssuesListModal from "components/project/issues/IssuesListModal";
@ -84,7 +77,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
: null
);
const { data: people } = useSWR<WorkspaceMember[]>(
const { data: people } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS(activeWorkspace.slug) : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);

2
apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
View File

@ -4,7 +4,7 @@ import { mutate } from "swr";
// react hook form
import { useForm } from "react-hook-form";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// fetch keys
import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
// components

2
apps/app/components/project/issues/my-issues/ChangeStateDropdown.tsx
View File

@ -8,7 +8,7 @@ import useUser from "lib/hooks/useUser";
import { addSpaceIfCamelCase, classNames } from "constants/common";
import { STATE_LIST } from "constants/fetch-keys";
// services
import stateServices from "lib/services/state.services";
import stateServices from "lib/services/state.service";
// ui
import { Listbox, Transition } from "@headlessui/react";
// types

4
apps/app/components/project/memberInvitations.tsx
View File

@ -28,7 +28,7 @@ type Props = {
slug: string;
invitationsRespond: string[];
handleInvitation: (project_invitation: any, action: "accepted" | "withdraw") => void;
setDeleteProject: React.Dispatch<React.SetStateAction<IProject | undefined>>;
setDeleteProject: (id: string | null) => void;
};
const ProjectMemberInvitations: React.FC<Props> = ({
@ -100,7 +100,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
<button
type="button"
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
onClick={() => setDeleteProject(project)}
onClick={() => setDeleteProject(project.id)}
>
<TrashIcon className="h-4 w-4 text-red-500" />
</button>

4
apps/app/components/project/settings/ControlSettings.tsx
View File

@ -15,7 +15,7 @@ import { Button } from "ui";
// icons
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { IProject, WorkspaceMember } from "types";
import { IProject } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
@ -27,7 +27,7 @@ type Props = {
const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
const { activeWorkspace } = useUser();
const { data: people } = useSWR<WorkspaceMember[]>(
const { data: people } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);

2
apps/app/components/project/settings/LabelsSettings.tsx
View File

@ -7,7 +7,7 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
// react-color
import { TwitterPicker } from "react-color";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
// headless ui

6
apps/app/components/workspace/SendWorkspaceInvitationModal.tsx
View File

@ -14,7 +14,7 @@ import { Button, Input, TextArea, Select } from "ui";
// hooks
import useToast from "lib/hooks/useToast";
// types
import { WorkspaceMember } from "types";
import { IWorkspaceMemberInvitation } from "types";
type Props = {
isOpen: boolean;
@ -30,7 +30,7 @@ const ROLE = {
20: "Admin",
};
const defaultValues: Partial<WorkspaceMember> = {
const defaultValues: Partial<IWorkspaceMemberInvitation> = {
email: "",
role: 5,
message: "",
@ -57,7 +57,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
formState: { errors, isSubmitting },
handleSubmit,
reset,
} = useForm<WorkspaceMember>({
} = useForm<IWorkspaceMemberInvitation>({
defaultValues,
reValidateMode: "onChange",
mode: "all",

4
apps/app/components/workspace/SingleInvitation.tsx
View File

@ -3,10 +3,10 @@ import Image from "next/image";
// react
import { useState } from "react";
// types
import { IWorkspaceInvitation } from "types";
import { IWorkspaceMemberInvitation } from "types";
type Props = {
invitation: IWorkspaceInvitation;
invitation: IWorkspaceMemberInvitation;
invitationsRespond: string[];
handleInvitation: any;
};

2
apps/app/constants/api-routes.ts
View File

@ -65,6 +65,8 @@ export const PROJECT_MEMBERS = (workspaceSlug: string, projectId: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`;
export const PROJECT_MEMBER_DETAIL = (workspaceSlug: string, projectId: string, memberId: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`;
export const PROJECT_VIEW_ENDPOINT = (workspaceSlug: string, projectId: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-views/`;
export const PROJECT_INVITATIONS = (workspaceSlug: string, projectId: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`;

9
apps/app/constants/common.ts
View File

@ -207,3 +207,12 @@ export const cosineSimilarity = (a: string, b: string) => {
return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
};
export const createSimilarString = (str: string) => {
const shuffled = str
.split("")
.sort(() => Math.random() - 0.5)
.join("");
return shuffled;
};

2
apps/app/constants/fetch-keys.ts
View File

@ -7,7 +7,7 @@ export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
export const PROJECT_DETAILS = "PROJECT_DETAILS";
export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
export const PROJECT_MEMBERS = (projectId: string) => `PROJECT_MEMBERS_${projectId}`;
export const PROJECT_INVITATIONS = "PROJECT_INVITATIONS";

2
apps/app/constants/index.ts
View File

@ -6,3 +6,5 @@ export const ROLE = {
15: "Member",
20: "Admin",
};
export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };

2
apps/app/constants/theme.context.constants.ts
View File

@ -2,3 +2,5 @@ export const TOGGLE_SIDEBAR = "TOGGLE_SIDEBAR";
export const REHYDRATE_THEME = "REHYDRATE_THEME";
export const SET_ISSUE_VIEW = "SET_ISSUE_VIEW";
export const SET_GROUP_BY_PROPERTY = "SET_GROUP_BY_PROPERTY";
export const SET_ORDER_BY_PROPERTY = "SET_ORDER_BY_PROPERTY";
export const SET_FILTER_ISSUES = "SET_FILTER_ISSUES";

62
apps/app/contexts/theme.context.tsx
View File

@ -5,6 +5,8 @@ import {
REHYDRATE_THEME,
SET_ISSUE_VIEW,
SET_GROUP_BY_PROPERTY,
SET_ORDER_BY_PROPERTY,
SET_FILTER_ISSUES,
} from "constants/theme.context.constants";
// components
import ToastAlert from "components/toast-alert";
@ -12,30 +14,30 @@ import ToastAlert from "components/toast-alert";
export const themeContext = createContext<ContextType>({} as ContextType);
// types
import type { IIssue, NestedKeyOf } from "types";
type Theme = {
collapsed: boolean;
issueView: "list" | "kanban" | null;
groupByProperty: NestedKeyOf<IIssue> | null;
};
import type { IIssue, NestedKeyOf, ProjectViewTheme as Theme } from "types";
type ReducerActionType = {
type:
| typeof TOGGLE_SIDEBAR
| typeof REHYDRATE_THEME
| typeof SET_ISSUE_VIEW
| typeof SET_ORDER_BY_PROPERTY
| typeof SET_FILTER_ISSUES
| typeof SET_GROUP_BY_PROPERTY;
payload?: Partial<Theme>;
};
type ContextType = {
collapsed: boolean;
orderBy: NestedKeyOf<IIssue> | null;
issueView: "list" | "kanban" | null;
groupByProperty: NestedKeyOf<IIssue> | null;
filterIssue: "activeIssue" | "backlogIssue" | null;
toggleCollapsed: () => void;
setIssueView: (display: "list" | "kanban") => void;
setGroupByProperty: (property: NestedKeyOf<IIssue> | null) => void;
setOrderBy: (property: NestedKeyOf<IIssue> | null) => void;
setFilterIssue: (property: "activeIssue" | "backlogIssue" | null) => void;
};
type StateType = Theme;
@ -45,6 +47,8 @@ export const initialState: StateType = {
collapsed: false,
issueView: "list",
groupByProperty: null,
orderBy: null,
filterIssue: null,
};
export const reducer: ReducerFunctionType = (state, action) => {
@ -87,6 +91,28 @@ export const reducer: ReducerFunctionType = (state, action) => {
...newState,
};
}
case SET_ORDER_BY_PROPERTY: {
const newState = {
...state,
orderBy: payload?.orderBy || null,
};
localStorage.setItem("theme", JSON.stringify(newState));
return {
...state,
...newState,
};
}
case SET_FILTER_ISSUES: {
const newState = {
...state,
filterIssue: payload?.filterIssue || null,
};
localStorage.setItem("theme", JSON.stringify(newState));
return {
...state,
...newState,
};
}
default: {
return state;
}
@ -120,6 +146,24 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
});
}, []);
const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => {
dispatch({
type: SET_ORDER_BY_PROPERTY,
payload: {
orderBy: property,
},
});
}, []);
const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => {
dispatch({
type: SET_FILTER_ISSUES,
payload: {
filterIssue: property,
},
});
}, []);
useEffect(() => {
dispatch({
type: REHYDRATE_THEME,
@ -135,6 +179,10 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
setIssueView,
groupByProperty: state.groupByProperty,
setGroupByProperty,
orderBy: state.orderBy,
setOrderBy,
filterIssue: state.filterIssue,
setFilterIssue,
}}
>
<ToastAlert />

6
apps/app/contexts/user.context.tsx
View File

@ -6,9 +6,9 @@ import { useRouter } from "next/router";
import useSWR from "swr";
// services
import userService from "lib/services/user.service";
import issuesServices from "lib/services/issues.services";
import stateServices from "lib/services/state.services";
import sprintsServices from "lib/services/cycles.services";
import issuesServices from "lib/services/issues.service";
import stateServices from "lib/services/state.service";
import sprintsServices from "lib/services/cycles.service";
import projectServices from "lib/services/project.service";
import workspaceService from "lib/services/workspace.service";
// constants

2
apps/app/layouts/AppLayout.tsx
View File

@ -8,7 +8,7 @@ import useUser from "lib/hooks/useUser";
import Container from "layouts/Container";
import Sidebar from "layouts/Navbar/Sidebar";
// components
import CreateProjectModal from "components/project/CreateProjectModal";
import CreateProjectModal from "components/project/create-project-modal";
// types
import type { Props } from "./types";

12
apps/app/layouts/Navbar/Sidebar.tsx
View File

@ -10,8 +10,6 @@ import authenticationService from "lib/services/authentication.service";
import useUser from "lib/hooks/useUser";
import useTheme from "lib/hooks/useTheme";
import useToast from "lib/hooks/useToast";
// components
import CreateProjectModal from "components/project/CreateProjectModal";
// headless ui
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
// icons
@ -108,7 +106,6 @@ const userLinks = [
const Sidebar: React.FC = () => {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [isCreateProjectModal, setCreateProjectModal] = useState(false);
const router = useRouter();
@ -124,7 +121,6 @@ const Sidebar: React.FC = () => {
return (
<nav className="h-full">
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
<Transition.Root show={sidebarOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
<Transition.Child
@ -557,7 +553,13 @@ const Sidebar: React.FC = () => {
<button
type="button"
className="group flex justify-center items-center gap-2 w-full rounded-md p-2 text-sm bg-theme text-white"
onClick={() => setCreateProjectModal(true)}
onClick={() => {
const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "p",
});
document.dispatchEvent(e);
}}
>
<PlusIcon className="h-5 w-5" />
{!sidebarCollapse && "Create Project"}

62
apps/app/lib/hooks/useIssuesFilter.tsx
View File

@ -1,4 +1,3 @@
import { useState } from "react";
// hooks
import useTheme from "./useTheme";
import useUser from "./useUser";
@ -7,14 +6,19 @@ import { groupBy, orderArrayBy } from "constants/common";
// constants
import { PRIORITIES } from "constants/";
// types
import type { IssueResponse, IIssue, NestedKeyOf } from "types";
import type { IssueResponse, IIssue } from "types";
const useIssuesFilter = (projectIssues?: IssueResponse) => {
const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme();
const [orderBy, setOrderBy] = useState<NestedKeyOf<IIssue> | null>(null);
const [filterIssue, setFilterIssue] = useState<"activeIssue" | "backlogIssue" | null>(null);
const {
issueView,
setIssueView,
groupByProperty,
setGroupByProperty,
orderBy,
setOrderBy,
filterIssue,
setFilterIssue,
} = useTheme();
const { states } = useUser();
@ -52,29 +56,29 @@ const useIssuesFilter = (projectIssues?: IssueResponse) => {
if (filterIssue !== null) {
if (filterIssue === "activeIssue") {
groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
const value = groupedByIssues[key];
const filteredValue = value.filter(
(issue) =>
issue.state_detail.group === "started" || issue.state_detail.group === "unstarted"
);
if (filteredValue.length > 0) {
acc[key] = filteredValue;
}
return acc;
}, {} as typeof groupedByIssues);
const filteredStates = states?.filter(
(state) => state.group === "started" || state.group === "unstarted"
);
groupedByIssues = Object.fromEntries(
filteredStates
?.sort((a, b) => a.sequence - b.sequence)
?.map((state) => [
state.name,
projectIssues?.results.filter((issue) => issue.state === state.id) ?? [],
]) ?? []
);
} else if (filterIssue === "backlogIssue") {
groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
const value = groupedByIssues[key];
const filteredValue = value.filter(
(issue) =>
issue.state_detail.group === "backlog" || issue.state_detail.group === "cancelled"
);
if (filteredValue.length > 0) {
acc[key] = filteredValue;
}
return acc;
}, {} as typeof groupedByIssues);
const filteredStates = states?.filter(
(state) => state.group === "backlog" || state.group === "cancelled"
);
groupedByIssues = Object.fromEntries(
filteredStates
?.sort((a, b) => a.sequence - b.sequence)
?.map((state) => [
state.name,
projectIssues?.results.filter((issue) => issue.state === state.id) ?? [],
]) ?? []
);
}
}

2
apps/app/lib/hooks/useIssuesProperties.tsx
View File

@ -4,7 +4,7 @@ import useSWR from "swr";
// api routes
import { ISSUE_PROPERTIES_ENDPOINT } from "constants/api-routes";
// services
import issueServices from "lib/services/issues.services";
import issueServices from "lib/services/issues.service";
// hooks
import useUser from "./useUser";
// types

0
apps/app/lib/services/cycles.services.ts → apps/app/lib/services/cycles.service.ts
View File

0
apps/app/lib/services/file.services.ts → apps/app/lib/services/file.service.ts
View File

0
apps/app/lib/services/issues.services.ts → apps/app/lib/services/issues.service.ts
View File

93
apps/app/lib/services/project.service.ts
View File

@ -10,9 +10,12 @@ import {
PROJECT_MEMBERS,
PROJECT_MEMBER_DETAIL,
USER_PROJECT_INVITATIONS,
PROJECT_VIEW_ENDPOINT,
} from "constants/api-routes";
// services
import APIService from "lib/services/api.service";
// types
import type { IProject, IProjectMember, IProjectMemberInvitation, ProjectViewTheme } from "types";
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@ -21,8 +24,8 @@ class ProjectServices extends APIService {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
async createProject(workspace_slug: string, data: any): Promise<any> {
return this.post(PROJECTS_ENDPOINT(workspace_slug), data)
async createProject(workspacSlug: string, data: Partial<IProject>): Promise<IProject> {
return this.post(PROJECTS_ENDPOINT(workspacSlug), data)
.then((response) => {
return response?.data;
})
@ -45,8 +48,8 @@ class ProjectServices extends APIService {
});
}
async getProjects(workspace_slug: string): Promise<any> {
return this.get(PROJECTS_ENDPOINT(workspace_slug))
async getProjects(workspacSlug: string): Promise<IProject[]> {
return this.get(PROJECTS_ENDPOINT(workspacSlug))
.then((response) => {
return response?.data;
})
@ -55,8 +58,8 @@ class ProjectServices extends APIService {
});
}
async getProject(workspace_slug: string, project_id: string): Promise<any> {
return this.get(PROJECT_DETAIL(workspace_slug, project_id))
async getProject(workspacSlug: string, projectId: string): Promise<IProject> {
return this.get(PROJECT_DETAIL(workspacSlug, projectId))
.then((response) => {
return response?.data;
})
@ -65,8 +68,12 @@ class ProjectServices extends APIService {
});
}
async updateProject(workspace_slug: string, project_id: string, data: any): Promise<any> {
return this.patch(PROJECT_DETAIL(workspace_slug, project_id), data)
async updateProject(
workspacSlug: string,
projectId: string,
data: Partial<IProject>
): Promise<IProject> {
return this.patch(PROJECT_DETAIL(workspacSlug, projectId), data)
.then((response) => {
return response?.data;
})
@ -75,8 +82,8 @@ class ProjectServices extends APIService {
});
}
async deleteProject(workspace_slug: string, project_id: string): Promise<any> {
return this.delete(PROJECT_DETAIL(workspace_slug, project_id))
async deleteProject(workspacSlug: string, projectId: string): Promise<any> {
return this.delete(PROJECT_DETAIL(workspacSlug, projectId))
.then((response) => {
return response?.data;
})
@ -85,8 +92,8 @@ class ProjectServices extends APIService {
});
}
async inviteProject(workspace_slug: string, project_id: string, data: any): Promise<any> {
return this.post(INVITE_PROJECT(workspace_slug, project_id), data)
async inviteProject(workspacSlug: string, projectId: string, data: any): Promise<any> {
return this.post(INVITE_PROJECT(workspacSlug, projectId), data)
.then((response) => {
return response?.data;
})
@ -95,8 +102,8 @@ class ProjectServices extends APIService {
});
}
async joinProject(workspace_slug: string, data: any): Promise<any> {
return this.post(JOIN_PROJECT(workspace_slug), data)
async joinProject(workspacSlug: string, data: any): Promise<any> {
return this.post(JOIN_PROJECT(workspacSlug), data)
.then((response) => {
return response?.data;
})
@ -115,8 +122,8 @@ class ProjectServices extends APIService {
});
}
async projectMembers(workspace_slug: string, project_id: string): Promise<any> {
return this.get(PROJECT_MEMBERS(workspace_slug, project_id))
async projectMembers(workspacSlug: string, projectId: string): Promise<IProjectMember[]> {
return this.get(PROJECT_MEMBERS(workspacSlug, projectId))
.then((response) => {
return response?.data;
})
@ -126,12 +133,12 @@ class ProjectServices extends APIService {
}
async updateProjectMember(
workspace_slug: string,
project_id: string,
workspacSlug: string,
projectId: string,
memberId: string,
data: any
): Promise<any> {
return this.put(PROJECT_MEMBER_DETAIL(workspace_slug, project_id, memberId), data)
data: Partial<IProjectMember>
): Promise<IProjectMember> {
return this.put(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId), data)
.then((response) => {
return response?.data;
})
@ -141,11 +148,11 @@ class ProjectServices extends APIService {
}
async deleteProjectMember(
workspace_slug: string,
project_id: string,
workspacSlug: string,
projectId: string,
memberId: string
): Promise<any> {
return this.delete(PROJECT_MEMBER_DETAIL(workspace_slug, project_id, memberId))
return this.delete(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
.then((response) => {
return response?.data;
})
@ -154,8 +161,11 @@ class ProjectServices extends APIService {
});
}
async projectInvitations(workspace_slug: string, project_id: string): Promise<any> {
return this.get(PROJECT_INVITATIONS(workspace_slug, project_id))
async projectInvitations(
workspacSlug: string,
projectId: string
): Promise<IProjectMemberInvitation[]> {
return this.get(PROJECT_INVITATIONS(workspacSlug, projectId))
.then((response) => {
return response?.data;
})
@ -165,11 +175,11 @@ class ProjectServices extends APIService {
}
async updateProjectInvitation(
workspace_slug: string,
project_id: string,
invitation_id: string
workspacSlug: string,
projectId: string,
invitationId: string
): Promise<any> {
return this.put(PROJECT_INVITATION_DETAIL(workspace_slug, project_id, invitation_id))
return this.put(PROJECT_INVITATION_DETAIL(workspacSlug, projectId, invitationId))
.then((response) => {
return response?.data;
})
@ -177,12 +187,27 @@ class ProjectServices extends APIService {
throw error?.response?.data;
});
}
async deleteProjectInvitation(
workspace_slug: string,
project_id: string,
invitation_id: string
workspacSlug: string,
projectId: string,
invitationId: string
): Promise<any> {
return this.delete(PROJECT_INVITATION_DETAIL(workspace_slug, project_id, invitation_id))
return this.delete(PROJECT_INVITATION_DETAIL(workspacSlug, projectId, invitationId))
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async setProjectView(
workspacSlug: string,
projectId: string,
data: ProjectViewTheme
): Promise<any> {
await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
.then((response) => {
return response?.data;
})

0
apps/app/lib/services/state.services.ts → apps/app/lib/services/state.service.ts
View File

77
apps/app/lib/services/workspace.service.ts
View File

@ -17,12 +17,15 @@ import APIService from "lib/services/api.service";
const { NEXT_PUBLIC_API_BASE_URL } = process.env;
// types
import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types";
class WorkspaceService extends APIService {
constructor() {
super(NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000");
}
async userWorkspaces(): Promise<any> {
async userWorkspaces(): Promise<IWorkspace[]> {
return this.get(USER_WORKSPACES)
.then((response) => {
return response?.data;
@ -32,7 +35,7 @@ class WorkspaceService extends APIService {
});
}
async createWorkspace(data: any): Promise<any> {
async createWorkspace(data: Partial<IWorkspace>): Promise<IWorkspace> {
return this.post(WORKSPACES_ENDPOINT, data)
.then((response) => {
return response?.data;
@ -42,17 +45,8 @@ class WorkspaceService extends APIService {
});
}
async updateWorkspace(workspace_slug: string, data: any): Promise<any> {
return this.patch(WORKSPACE_DETAIL(workspace_slug), data)
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async deleteWorkspace(workspace_slug: string): Promise<any> {
return this.delete(WORKSPACE_DETAIL(workspace_slug))
async updateWorkspace(workspaceSlug: string, data: Partial<IWorkspace>): Promise<IWorkspace> {
return this.patch(WORKSPACE_DETAIL(workspaceSlug), data)
.then((response) => {
return response?.data;
})
@ -61,8 +55,8 @@ class WorkspaceService extends APIService {
});
}
async inviteWorkspace(workspace_slug: string, data: any): Promise<any> {
return this.post(INVITE_WORKSPACE(workspace_slug), data)
async deleteWorkspace(workspaceSlug: string): Promise<any> {
return this.delete(WORKSPACE_DETAIL(workspaceSlug))
.then((response) => {
return response?.data;
})
@ -70,8 +64,19 @@ class WorkspaceService extends APIService {
throw error?.response?.data;
});
}
async joinWorkspace(workspace_slug: string, InvitationId: string, data: any): Promise<any> {
return this.post(JOIN_WORKSPACE(workspace_slug, InvitationId), data, {
async inviteWorkspace(workspaceSlug: string, data: any): Promise<any> {
return this.post(INVITE_WORKSPACE(workspaceSlug), data)
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async joinWorkspace(workspaceSlug: string, InvitationId: string, data: any): Promise<any> {
return this.post(JOIN_WORKSPACE(workspaceSlug, InvitationId), data, {
headers: {},
})
.then((response) => {
@ -92,7 +97,7 @@ class WorkspaceService extends APIService {
});
}
async userWorkspaceInvitations(): Promise<any> {
async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
return this.get(USER_WORKSPACE_INVITATIONS)
.then((response) => {
return response?.data;
@ -102,8 +107,8 @@ class WorkspaceService extends APIService {
});
}
async workspaceMembers(workspace_slug: string): Promise<any> {
return this.get(WORKSPACE_MEMBERS(workspace_slug))
async workspaceMembers(workspaceSlug: string): Promise<IWorkspaceMember[]> {
return this.get(WORKSPACE_MEMBERS(workspaceSlug))
.then((response) => {
return response?.data;
})
@ -112,8 +117,12 @@ class WorkspaceService extends APIService {
});
}
async updateWorkspaceMember(workspace_slug: string, memberId: string, data: any): Promise<any> {
return this.put(WORKSPACE_MEMBER_DETAIL(workspace_slug, memberId), data)
async updateWorkspaceMember(
workspaceSlug: string,
memberId: string,
data: Partial<IWorkspaceMember>
): Promise<IWorkspaceMember> {
return this.put(WORKSPACE_MEMBER_DETAIL(workspaceSlug, memberId), data)
.then((response) => {
return response?.data;
})
@ -122,8 +131,8 @@ class WorkspaceService extends APIService {
});
}
async deleteWorkspaceMember(workspace_slug: string, memberId: string): Promise<any> {
return this.delete(WORKSPACE_MEMBER_DETAIL(workspace_slug, memberId))
async deleteWorkspaceMember(workspaceSlug: string, memberId: string): Promise<any> {
return this.delete(WORKSPACE_MEMBER_DETAIL(workspaceSlug, memberId))
.then((response) => {
return response?.data;
})
@ -132,8 +141,8 @@ class WorkspaceService extends APIService {
});
}
async workspaceInvitations(workspace_slug: string): Promise<any> {
return this.get(WORKSPACE_INVITATIONS(workspace_slug))
async workspaceInvitations(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
return this.get(WORKSPACE_INVITATIONS(workspaceSlug))
.then((response) => {
return response?.data;
})
@ -142,8 +151,8 @@ class WorkspaceService extends APIService {
});
}
async getWorkspaceInvitation(invitation_id: string): Promise<any> {
return this.get(USER_WORKSPACE_INVITATION(invitation_id), { headers: {} })
async getWorkspaceInvitation(invitationId: string): Promise<IWorkspaceMemberInvitation> {
return this.get(USER_WORKSPACE_INVITATION(invitationId), { headers: {} })
.then((response) => {
return response?.data;
})
@ -152,8 +161,11 @@ class WorkspaceService extends APIService {
});
}
async updateWorkspaceInvitation(workspace_slug: string, invitation_id: string): Promise<any> {
return this.put(WORKSPACE_INVITATION_DETAIL(workspace_slug, invitation_id))
async updateWorkspaceInvitation(
workspaceSlug: string,
invitationId: string
): Promise<IWorkspaceMemberInvitation> {
return this.put(WORKSPACE_INVITATION_DETAIL(workspaceSlug, invitationId))
.then((response) => {
return response?.data;
})
@ -161,8 +173,9 @@ class WorkspaceService extends APIService {
throw error?.response?.data;
});
}
async deleteWorkspaceInvitations(workspace_slug: string, invitation_id: string): Promise<any> {
return this.delete(WORKSPACE_INVITATION_DETAIL(workspace_slug, invitation_id))
async deleteWorkspaceInvitations(workspaceSlug: string, invitationId: string): Promise<any> {
return this.delete(WORKSPACE_INVITATION_DETAIL(workspaceSlug, invitationId))
.then((response) => {
return response?.data;
})

4
apps/app/pages/create-workspace.tsx
View File

@ -8,6 +8,8 @@ import { useForm } from "react-hook-form";
import workspaceService from "lib/services/workspace.service";
// hooks
import useUser from "lib/hooks/useUser";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import DefaultLayout from "layouts/DefaultLayout";
// ui
@ -144,4 +146,4 @@ const CreateWorkspace: NextPage = () => {
);
};
export default CreateWorkspace;
export default withAuth(CreateWorkspace);

13
apps/app/pages/invitations.tsx
View File

@ -11,6 +11,8 @@ import userService from "lib/services/user.service";
import useUser from "lib/hooks/useUser";
// constants
import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import DefaultLayout from "layouts/DefaultLayout";
// components
@ -20,7 +22,7 @@ import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
// icons
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
// types
import type { IWorkspaceInvitation } from "types";
import type { IWorkspaceMemberInvitation } from "types";
import Link from "next/link";
const OnBoard: NextPage = () => {
@ -30,13 +32,12 @@ const OnBoard: NextPage = () => {
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
const { data: invitations, mutate } = useSWR<IWorkspaceInvitation[]>(
USER_WORKSPACE_INVITATIONS,
() => workspaceService.userWorkspaceInvitations()
const { data: invitations, mutate } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
workspaceService.userWorkspaceInvitations()
);
const handleInvitation = (
workspace_invitation: IWorkspaceInvitation,
workspace_invitation: IWorkspaceMemberInvitation,
action: "accepted" | "withdraw"
) => {
if (action === "accepted") {
@ -204,4 +205,4 @@ const OnBoard: NextPage = () => {
);
};
export default OnBoard;
export default withAuth(OnBoard);

6
apps/app/pages/me/my-issues.tsx
View File

@ -18,7 +18,9 @@ import { USER_ISSUE } from "constants/fetch-keys";
import { classNames } from "constants/common";
// services
import userService from "lib/services/user.service";
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// components
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
// icons
@ -278,4 +280,4 @@ const MyIssues: NextPage = () => {
);
};
export default MyIssues;
export default withAuth(MyIssues);

13
apps/app/pages/me/profile.tsx
View File

@ -8,15 +8,17 @@ import { useForm } from "react-hook-form";
import Dropzone, { useDropzone } from "react-dropzone";
// hooks
import useUser from "lib/hooks/useUser";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
// services
import userService from "lib/services/user.service";
import fileServices from "lib/services/file.services";
import fileServices from "lib/services/file.service";
// ui
import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
// types
import type { IIssue, IUser, IWorkspaceInvitation } from "types";
import type { IIssue, IUser, IWorkspaceMemberInvitation } from "types";
import {
ChevronRightIcon,
ClipboardDocumentListIcon,
@ -79,8 +81,9 @@ const Profile: NextPage = () => {
myProfile ? () => userService.userIssues() : null
);
const { data: invitations } = useSWR<IWorkspaceInvitation[]>(USER_WORKSPACE_INVITATIONS, () =>
workspaceService.userWorkspaceInvitations()
const { data: invitations } = useSWR<IWorkspaceMemberInvitation[]>(
USER_WORKSPACE_INVITATIONS,
() => workspaceService.userWorkspaceInvitations()
);
useEffect(() => {
@ -307,4 +310,4 @@ const Profile: NextPage = () => {
);
};
export default Profile;
export default withAuth(Profile);

8
apps/app/pages/projects/[projectId]/cycles.tsx
View File

@ -5,12 +5,14 @@ import type { NextPage } from "next";
// swr
import useSWR, { mutate } from "swr";
// services
import issuesServices from "lib/services/issues.services";
import sprintService from "lib/services/cycles.services";
import issuesServices from "lib/services/issues.service";
import sprintService from "lib/services/cycles.service";
// hooks
import useUser from "lib/hooks/useUser";
// fetching keys
import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
// components
@ -258,4 +260,4 @@ const ProjectSprints: NextPage = () => {
);
};
export default ProjectSprints;
export default withAuth(ProjectSprints);

6
apps/app/pages/projects/[projectId]/issues/[issueId].tsx
View File

@ -11,7 +11,7 @@ import { Controller, useForm } from "react-hook-form";
// headless ui
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import issuesServices from "lib/services/issues.service";
// fetch keys
import {
PROJECT_ISSUES_ACTIVITY,
@ -21,6 +21,8 @@ import {
} from "constants/fetch-keys";
// hooks
import useUser from "lib/hooks/useUser";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
// components
@ -606,4 +608,4 @@ const IssueDetail: NextPage = () => {
);
};
export default IssueDetail;
export default withAuth(IssueDetail);

4
apps/app/pages/projects/[projectId]/issues/index.tsx
View File

@ -34,7 +34,7 @@ import HeaderButton from "ui/HeaderButton";
import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
import { PlusIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
// types
import type { IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
import type { IIssue, Properties, NestedKeyOf } from "types";
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
{ name: "State", key: "state_detail.name" },
@ -86,7 +86,7 @@ const ProjectIssues: NextPage = () => {
projectId as string
);
const { data: members } = useSWR<ProjectMember[]>(
const { data: members } = useSWR(
activeWorkspace && activeProject
? PROJECT_MEMBERS(activeWorkspace.slug, activeProject.id)
: null,

10
apps/app/pages/projects/[projectId]/members.tsx
View File

@ -14,6 +14,8 @@ import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// fetching keys
import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
// components
@ -109,8 +111,7 @@ const ProjectMembers: NextPage = () => {
selectedRemoveMember
);
mutateMembers(
(prevData: any[]) =>
prevData?.filter((item: any) => item.id !== selectedRemoveMember),
(prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
false
);
}
@ -121,8 +122,7 @@ const ProjectMembers: NextPage = () => {
selectedInviteRemoveMember
);
mutateInvitations(
(prevData: any[]) =>
prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
(prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
false
);
}
@ -313,4 +313,4 @@ const ProjectMembers: NextPage = () => {
);
};
export default ProjectMembers;
export default withAuth(ProjectMembers);

17
apps/app/pages/projects/[projectId]/settings.tsx
View File

@ -9,6 +9,8 @@ import useSWR, { mutate } from "swr";
import { useForm } from "react-hook-form";
// headless ui
import { Tab } from "@headlessui/react";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
// service
@ -27,9 +29,12 @@ import type { IProject, IWorkspace } from "types";
const defaultValues: Partial<IProject> = {
name: "",
description: "",
identifier: "",
network: 0,
};
const ProjectSettings: NextPage = () => {
// FIXME: instead of using dynamic import inside component use it outside
const GeneralSettings = dynamic(() => import("components/project/settings/GeneralSettings"), {
loading: () => <p>Loading...</p>,
ssr: false,
@ -70,7 +75,7 @@ const ProjectSettings: NextPage = () => {
const { setToastAlert } = useToast();
const { data: projectDetails } = useSWR<IProject>(
activeWorkspace && projectId ? PROJECT_DETAILS : null,
activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
activeWorkspace
? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
: null
@ -87,7 +92,7 @@ const ProjectSettings: NextPage = () => {
}, [projectDetails, reset]);
const onSubmit = async (formData: IProject) => {
if (!activeWorkspace) return;
if (!activeWorkspace || !projectId) return;
const payload: Partial<IProject> = {
name: formData.name,
network: formData.network,
@ -99,7 +104,11 @@ const ProjectSettings: NextPage = () => {
await projectServices
.updateProject(activeWorkspace.slug, projectId as string, payload)
.then((res) => {
mutate<IProject>(PROJECT_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
mutate<IProject>(
PROJECT_DETAILS(projectId as string),
(prevData) => ({ ...prevData, ...res }),
false
);
mutate<IProject[]>(
PROJECTS_LIST(activeWorkspace.slug),
(prevData) => {
@ -181,4 +190,4 @@ const ProjectSettings: NextPage = () => {
);
};
export default ProjectSettings;
export default withAuth(ProjectSettings);

59
apps/app/pages/projects/index.tsx
View File

@ -1,28 +1,32 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
// next
import type { NextPage } from "next";
// hooks
import useUser from "lib/hooks/useUser";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
// components
import CreateProjectModal from "components/project/CreateProjectModal";
import ConfirmProjectDeletion from "components/project/ConfirmProjectDeletion";
import ProjectMemberInvitations from "components/project/memberInvitations";
import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
// ui
import { Button, Spinner } from "ui";
// types
import { IProject } from "types";
import {
Button,
Spinner,
HeaderButton,
Breadcrumbs,
BreadcrumbItem,
EmptySpace,
EmptySpaceItem,
} from "ui";
// services
import projectService from "lib/services/project.service";
import ProjectMemberInvitations from "components/project/memberInvitations";
// icons
import { ClipboardDocumentListIcon, PlusIcon } from "@heroicons/react/24/outline";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
import HeaderButton from "ui/HeaderButton";
const Projects: NextPage = () => {
const [isOpen, setIsOpen] = useState(false);
const [deleteProject, setDeleteProject] = useState<IProject | undefined>();
const [deleteProject, setDeleteProject] = useState<string | null>(null);
const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
const { projects, activeWorkspace, mutateProjects } = useUser();
@ -52,21 +56,12 @@ const Projects: NextPage = () => {
});
};
useEffect(() => {
if (isOpen) return;
const timer = setTimeout(() => {
setDeleteProject(undefined);
clearTimeout(timer);
}, 300);
}, [isOpen]);
return (
<AppLayout>
<CreateProjectModal isOpen={isOpen && !deleteProject} setIsOpen={setIsOpen} />
<ConfirmProjectDeletion
isOpen={isOpen && !!deleteProject}
setIsOpen={setIsOpen}
data={deleteProject}
isOpen={!!deleteProject}
onClose={() => setDeleteProject(null)}
data={projects?.find((item) => item.id === deleteProject) ?? null}
/>
{projects ? (
<>
@ -87,7 +82,10 @@ const Projects: NextPage = () => {
</span>
}
Icon={PlusIcon}
action={() => setIsOpen(true)}
action={() => {
const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
document.dispatchEvent(e);
}}
/>
</EmptySpace>
</div>
@ -98,7 +96,14 @@ const Projects: NextPage = () => {
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<h2 className="text-2xl font-medium">Projects</h2>
<HeaderButton Icon={PlusIcon} label="Add Project" onClick={() => setIsOpen(true)} />
<HeaderButton
Icon={PlusIcon}
label="Add Project"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "p", ctrlKey: true });
document.dispatchEvent(e);
}}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{projects.map((item) => (
@ -129,4 +134,4 @@ const Projects: NextPage = () => {
);
};
export default Projects;
export default withAuth(Projects);

6
apps/app/pages/workspace-member-invitation/[invitationId].tsx
View File

@ -35,12 +35,12 @@ const WorkspaceInvitation: NextPage = () => {
const { user } = useUser();
const { data: invitationDetail, error } = useSWR(
invitationId && WORKSPACE_INVITATION,
() => invitationId && workspaceService.getWorkspaceInvitation(invitationId as string)
const { data: invitationDetail, error } = useSWR(invitationId && WORKSPACE_INVITATION, () =>
invitationId ? workspaceService.getWorkspaceInvitation(invitationId as string) : null
);
const handleAccept = () => {
if (!invitationDetail) return;
workspaceService
.joinWorkspace(invitationDetail.workspace.slug, invitationDetail.id, {
accepted: true,

6
apps/app/pages/workspace/settings.tsx
View File

@ -7,7 +7,9 @@ import { useForm } from "react-hook-form";
import Dropzone from "react-dropzone";
// services
import workspaceService from "lib/services/workspace.service";
import fileServices from "lib/services/file.services";
import fileServices from "lib/services/file.service";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/AppLayout";
@ -232,4 +234,4 @@ const WorkspaceSettings = () => {
);
};
export default WorkspaceSettings;
export default withAuth(WorkspaceSettings);

16
apps/app/types/invitation.d.ts vendored
View File

@ -1,16 +0,0 @@
import { IWorkspace } from "./";
export interface IWorkspaceInvitation {
id: string;
workspace: IWorkspace;
created_at: Date;
updated_at: Date;
email: string;
accepted: boolean;
token: string;
message: string;
responded_at: Date;
role: number;
created_by: null;
updated_by: null;
}

43
apps/app/types/projects.d.ts vendored
View File

@ -1,4 +1,4 @@
import type { IWorkspace } from "./";
import type { IUserLite, IWorkspace } from "./";
export interface IProject {
id: string;
@ -15,3 +15,44 @@ export interface IProject {
created_by: string;
updated_by: string;
}
type ProjectViewTheme = {
collapsed: boolean;
issueView: "list" | "kanban" | null;
groupByProperty: NestedKeyOf<IIssue> | null;
filterIssue: "activeIssue" | "backlogIssue" | null;
orderBy: NestedKeyOf<IIssue> | null;
};
export interface IProjectMember {
member: IUserLite;
project: IProject;
workspace: IWorkspace;
comment: string;
role: 5 | 10 | 15 | 20;
view_props: ProjectViewTheme;
created_at: Date;
updated_at: Date;
created_by: string;
updated_by: string;
}
export interface IProjectMemberInvitation {
id: string;
project: IProject;
workspace: IWorkspace;
email: string;
accepted: boolean;
token: string;
message: string;
responded_at: Date;
role: 5 | 10 | 15 | 20;
created_at: Date;
updated_at: Date;
created_by: string;
updated_by: string;
}

8
apps/app/types/users.d.ts vendored
View File

@ -16,3 +16,11 @@ export interface IUser {
token: string;
[...rest: string]: any;
}
export interface IUserLite {
readonly id: string;
first_name: string;
last_name: string;
email: string;
avatar: string;
}

30
apps/app/types/workspace.d.ts vendored
View File

@ -1,4 +1,4 @@
import type { IUser } from "./";
import type { IUser, IUserLite } from "./";
export interface IWorkspace {
readonly id: string;
@ -13,26 +13,26 @@ export interface IWorkspace {
company_size: number;
}
export interface WorkspaceMember {
export interface IWorkspaceMemberInvitation {
readonly id: string;
email: string;
accepted: boolean;
token: string;
message: string;
responded_at: Date;
role: 5 | 10 | 15 | 20;
member: IUser;
workspace: IWorkspace | string;
workspace: IWorkspace;
}
export interface IWorkspaceMember {
readonly id: string;
user: IUserLite;
workspace: IWorkspace;
member: IUserLite;
role: 5 | 10 | 15 | 20;
company_role: string | null;
created_at: Date;
updated_at: Date;
created_by: string;
updated_by: string;
}
export interface ProjectMember {
readonly id: string;
readonly project: string;
email: string;
message: string;
role: 5 | 10 | 15 | 20;
member: any;
member_id: string;
user_id: string;
}