fix: mutate projects list after joining (#1944)

Co-authored-by: Aaryan Khandelwal <aaryan610@Aaryans-MacBook-Pro.local>
This commit is contained in:
Aaryan Khandelwal 2023-08-23 15:44:27 +05:30 committed by GitHub
parent a8fdd42cb9
commit 2d1406953e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 4 deletions

View File

@ -19,6 +19,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
const handleJoin = () => { const handleJoin = () => {
setIsJoiningLoading(true); setIsJoiningLoading(true);
onJoin() onJoin()
.then(() => { .then(() => {
setIsJoiningLoading(false); setIsJoiningLoading(false);
@ -59,7 +60,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
<div className="space-y-5"> <div className="space-y-5">
<Dialog.Title <Dialog.Title
as="h3" as="h3"

View File

@ -48,7 +48,7 @@ export const ProjectSidebarList: FC = () => {
const { projects: allProjects } = useProjects(); const { projects: allProjects } = useProjects();
const joinedProjects = allProjects?.filter((p) => p.sort_order); const joinedProjects = allProjects?.filter((p) => p.is_member);
const favoriteProjects = allProjects?.filter((p) => p.is_favorite); const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
const orderedJoinedProjects: IProject[] | undefined = joinedProjects const orderedJoinedProjects: IProject[] | undefined = joinedProjects
@ -201,7 +201,7 @@ export const ProjectSidebarList: FC = () => {
key={project.id} key={project.id}
draggableId={project.id} draggableId={project.id}
index={index} index={index}
isDragDisabled={project.sort_order === null} isDragDisabled={!project.is_member}
> >
{(provided, snapshot) => ( {(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps}> <div ref={provided.innerRef} {...provided.draggableProps}>

View File

@ -28,6 +28,8 @@ import type { NextPage } from "next";
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
// helper // helper
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types
import { IProject } from "types";
const ProjectsPage: NextPage = () => { const ProjectsPage: NextPage = () => {
// router // router
@ -39,7 +41,7 @@ const ProjectsPage: NextPage = () => {
const { user } = useUserAuth(); const { user } = useUserAuth();
// context data // context data
const { activeWorkspace } = useWorkspaces(); const { activeWorkspace } = useWorkspaces();
const { projects } = useProjects(); const { projects, mutateProjects } = useProjects();
// states // states
const [deleteProject, setDeleteProject] = useState<string | null>(null); const [deleteProject, setDeleteProject] = useState<string | null>(null);
const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null); const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
@ -101,6 +103,14 @@ const ProjectsPage: NextPage = () => {
}) })
.then(async () => { .then(async () => {
mutate(PROJECT_MEMBERS(project.id)); mutate(PROJECT_MEMBERS(project.id));
mutateProjects<IProject[]>(
(prevData) =>
(prevData ?? []).map((p) => ({
...p,
is_member: p.id === project.id ? true : p.is_member,
})),
false
);
setSelectedProjectToJoin(null); setSelectedProjectToJoin(null);
}) })
.catch(() => { .catch(() => {