fix: minor ui fixes (#203)

* feat: added user auth

* fix: minor ui fixes

* refactor: removed unnecessary functions

* fix: build errors
This commit is contained in:
Aaryan Khandelwal 2023-01-29 12:25:20 +05:30 committed by GitHub
parent 8767816966
commit 2cb708c63b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 255 additions and 372 deletions

View file

@ -1,156 +0,0 @@
// FIXME: remove this page
import React, { useState } from "react";
// next
import Link from "next/link";
import { useRouter } from "next/router";
import useSWR from "swr";
import type { NextPage } from "next";
// services
import workspaceService from "services/workspace.service";
// hoc
// import withAuthWrapper from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/app-layout";
// ui
import { Button } from "components/ui";
// swr
import { USER_WORKSPACES } from "constants/fetch-keys";
const MyWorkspacesInvites: NextPage = () => {
const router = useRouter();
const [invitationsRespond, setInvitationsRespond] = useState<any>([]);
const { data: workspaces } = useSWR(USER_WORKSPACES, () => workspaceService.userWorkspaces(), {
shouldRetryOnError: false,
});
const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR<any[]>(
"WORKSPACE_INVITATIONS",
() => workspaceService.userWorkspaceInvitations()
);
const handleInvitation = (workspace_invitation: any, action: string) => {
if (action === "accepted") {
setInvitationsRespond((prevData: any) => [...prevData, workspace_invitation.workspace.id]);
} else if (action === "withdraw") {
setInvitationsRespond((prevData: any) =>
prevData.filter((item: string) => item !== workspace_invitation.workspace.id)
);
}
};
const submitInvitations = () => {
workspaceService
.joinWorkspaces({ workspace_ids: invitationsRespond })
.then(async (res) => {
console.log(res);
await mutateInvitations();
router.push("/");
})
.catch((err: any) => console.log(err));
};
return (
<AppLayout
meta={{
title: "Plane - My Workspace Invites",
}}
>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="relative rounded bg-gray-50 px-4 pt-5 pb-4 text-left shadow sm:w-full sm:max-w-2xl sm:p-6">
{(workspaceInvitations as any)?.length > 0 ? (
<>
<div>
<div className="mt-3 sm:mt-5">
<div className="mt-2">
<h2 className="mb-4 text-lg">Workspace Invitations</h2>
<div className="space-y-2">
{workspaceInvitations?.map((item: any) => (
<div className="relative flex items-start" key={item.id}>
<div className="flex h-5 items-center">
<input
id={`${item.id}`}
aria-describedby="workspaces"
name={`${item.id}`}
checked={
item.workspace.accepted ||
invitationsRespond.includes(item.workspace.id)
}
value={item.workspace.name}
onChange={() =>
handleInvitation(
item,
item.accepted
? "withdraw"
: invitationsRespond.includes(item.workspace.id)
? "withdraw"
: "accepted"
)
}
type="checkbox"
className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
/>
</div>
<div className="ml-3 flex w-full justify-between text-sm">
<label htmlFor={`${item.id}`} className="font-medium text-gray-700">
{item.workspace.name}
</label>
<div>
{invitationsRespond.includes(item.workspace.id) ? (
<div className="flex gap-x-2">
<p>Accepted</p>
<button
type="button"
onClick={() => handleInvitation(item, "withdraw")}
>
Withdraw
</button>
</div>
) : (
<button
type="button"
onClick={() => handleInvitation(item, "accepted")}
>
Join
</button>
)}
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
<div className="mt-4 flex justify-between">
<Link href={workspaces?.length === 0 ? "/create-workspace" : "/"}>
<button type="button" className="text-sm text-gray-700">
Skip
</button>
</Link>
<Button onClick={submitInvitations}>Submit</Button>
</div>
</>
) : (
<div>
<span>No Invitaions Found</span>
<p>
<Link href="/">
<a>Click Here </a>
</Link>
<span>to redirect home</span>
</p>
</div>
)}
</div>
</div>
</AppLayout>
);
};
export default MyWorkspacesInvites;