aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update frontend modules

Browse Source
This commit is contained in:
Steven
2023-06-22 18:07:28 +08:00
parent bd627fb250
commit 98fb1264c3
27 changed files with 22 additions and 3884 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
web/src/components/Header.tsx
View File

@ -1,31 +1,12 @@
import { useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import { useAppSelector } from "../store";
import { userService } from "../services";
import Icon from "./Icon";
import Dropdown from "./common/Dropdown";
import CreateWorkspaceDialog from "./CreateWorkspaceDialog";
interface State {
showCreateWorkspaceDialog: boolean;
}
const Header: React.FC = () => {
const params = useParams();
const navigate = useNavigate();
const { user } = useAppSelector((state) => state.user);
const { workspaceList } = useAppSelector((state) => state.workspace);
const [state, setState] = useState<State>({
showCreateWorkspaceDialog: false,
});
const activedWorkspace = workspaceList.find((workspace) => workspace.name === params.workspaceName ?? "");
const handleCreateWorkspaceButtonClick = () => {
setState({
...state,
showCreateWorkspaceDialog: true,
});
};
const handleSignOutButtonClick = async () => {
await userService.doSignOut();
@ -41,43 +22,6 @@ const Header: React.FC = () => {
<img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
Shortify
</Link>
{workspaceList.length > 0 && activedWorkspace !== undefined && (
<>
<span className="font-mono mx-1 text-gray-200">/</span>
<Dropdown
trigger={
<button className="flex flex-row justify-end items-center cursor-pointer">
<span className="font-mono">{activedWorkspace?.title}</span>
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
</button>
}
actions={
<>
{workspaceList.map((workspace) => {
return (
<Link
key={workspace.id}
to={`/${workspace.name}`}
className="w-full px-3 leading-10 flex flex-row justify-between items-center text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<span className="truncate">{workspace.title}</span>
{workspace.name === activedWorkspace?.name && <Icon.Check className="w-4 h-auto ml-1 shrink-0" />}
</Link>
);
})}
<hr className="w-full border-t my-1 border-t-gray-100" />
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 rounded cursor-pointer hover:bg-gray-100"
onClick={handleCreateWorkspaceButtonClick}
>
<Icon.Plus className="w-4 h-auto mr-2" /> Create Workspace
</button>
</>
}
actionsClassName="!w-48 !-left-4"
></Dropdown>
</>
)}
</div>
<div className="relative flex-shrink-0">
{user ? (
@ -114,24 +58,6 @@ const Header: React.FC = () => {
</div>
</div>
</div>
{state.showCreateWorkspaceDialog && (
<CreateWorkspaceDialog
onClose={() => {
setState({
...state,
showCreateWorkspaceDialog: false,
});
}}
onConfirm={(workspace: Workspace) => {
setState({
...state,
showCreateWorkspaceDialog: false,
});
navigate(`/${workspace.name}`);
}}
/>
)}
</>
);
};