+
+ {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
+ +
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default function showCreateShortcutDialog(workspaceId: WorkspaceId, shortcutId?: ShortcutId): void {
+ generateDialog(
+ {
+ className: "px-2 sm:px-0",
+ },
+ CreateShortcutDialog,
+ {
+ workspaceId,
+ shortcutId,
+ }
+ );
+}
diff --git a/web/src/components/CreateWorkspaceDialog.tsx b/web/src/components/CreateWorkspaceDialog.tsx
new file mode 100644
index 0000000..c4ed434
--- /dev/null
+++ b/web/src/components/CreateWorkspaceDialog.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { workspaceService } from "../services";
+import useLoading from "../hooks/useLoading";
+import Icon from "./Icon";
+import { generateDialog } from "./Dialog";
+import toastHelper from "./Toast";
+
+interface Props extends DialogProps {
+ workspaceId?: WorkspaceId;
+}
+
+const CreateWorkspaceDialog: React.FC
+
+
+
+
+ {workspaceId ? "Edit Workspace" : "Create Workspace"}
+ +
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default function showCreateWorkspaceDialog(workspaceId?: WorkspaceId): void {
+ generateDialog(
+ {
+ className: "px-2 sm:px-0",
+ },
+ CreateWorkspaceDialog,
+ {
+ workspaceId,
+ }
+ );
+}
diff --git a/web/src/components/Dialog/BaseDialog.tsx b/web/src/components/Dialog/BaseDialog.tsx
new file mode 100644
index 0000000..7d92fa6
--- /dev/null
+++ b/web/src/components/Dialog/BaseDialog.tsx
@@ -0,0 +1,89 @@
+import { useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { ANIMATION_DURATION } from "../../helpers/consts";
+import store from "../../store";
+import "../../less/base-dialog.less";
+
+interface DialogConfig {
+ className: string;
+ clickSpaceDestroy?: boolean;
+}
+
+interface Props extends DialogConfig, DialogProps {
+ children: React.ReactNode;
+}
+
+const BaseDialog: React.FC
+
+
+
+
+ );
+};
+
+export function generateDialog e.stopPropagation()}>
+ {children}
+
+
+
+ {title}
+ +
+
+
+ );
+};
+
+interface CommonDialogProps {
+ title: string;
+ content: string;
+ className?: string;
+ style?: DialogStyle;
+ closeBtnText?: string;
+ confirmBtnText?: string;
+ onClose?: () => void;
+ onConfirm?: () => void;
+}
+
+export const showCommonDialog = (props: CommonDialogProps) => {
+ generateDialog(
+ {
+ className: `common-dialog ${props?.className ?? ""}`,
+ },
+ CommonDialog,
+ props
+ );
+};
diff --git a/web/src/components/Dialog/index.ts b/web/src/components/Dialog/index.ts
new file mode 100644
index 0000000..d6e6507
--- /dev/null
+++ b/web/src/components/Dialog/index.ts
@@ -0,0 +1 @@
+export { generateDialog } from "./BaseDialog";
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
new file mode 100644
index 0000000..6109e30
--- /dev/null
+++ b/web/src/components/Header.tsx
@@ -0,0 +1,42 @@
+import { useNavigate } from "react-router-dom";
+import { useAppSelector } from "../store";
+import { userService } from "../services";
+import useToggle from "../hooks/useToggle";
+import Icon from "./Icon";
+import styles from "../less/header.module.less";
+
+const Header: React.FC = () => {
+ const navigate = useNavigate();
+ const { user } = useAppSelector((state) => state.user);
+ const [showDropdown, toggleShowDropdown] = useToggle(false);
+
+ const handleSignOutButtonClick = async () => {
+ await userService.doSignOut();
+ navigate("/auth");
+ };
+
+ return (
+ {content}
+
+
+ {closeBtnText}
+
+
+ {confirmBtnText}
+
+
+
+
+ );
+};
+
+export default Header;
diff --git a/web/src/components/Icon.ts b/web/src/components/Icon.ts
new file mode 100644
index 0000000..89606cc
--- /dev/null
+++ b/web/src/components/Icon.ts
@@ -0,0 +1,3 @@
+import * as Icon from "react-feather";
+
+export default Icon;
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
new file mode 100644
index 0000000..020bce8
--- /dev/null
+++ b/web/src/components/ShortcutListView.tsx
@@ -0,0 +1,22 @@
+interface Props {
+ shortcutList: Shortcut[];
+}
+
+const ShortcutListView: React.FC
+ Corgi
+
+
+
+ toggleShowDropdown()}>
+ {user?.name}
+
+
+ handleSignOutButtonClick()}>
+ Sign out
+
+
+
+ {shortcutList.map((shortcut) => {
+ return (
+
+ );
+};
+
+export default ShortcutListView;
diff --git a/web/src/components/Toast.tsx b/web/src/components/Toast.tsx
new file mode 100644
index 0000000..e440d56
--- /dev/null
+++ b/web/src/components/Toast.tsx
@@ -0,0 +1,110 @@
+import { useEffect } from "react";
+import { createRoot, Root } from "react-dom/client";
+import "../less/toast.less";
+
+type ToastType = "normal" | "success" | "info" | "error";
+
+type ToastConfig = {
+ type: ToastType;
+ content: string;
+ duration: number;
+};
+
+type ToastItemProps = {
+ type: ToastType;
+ content: string;
+ duration: number;
+ destory: FunctionType;
+};
+
+const Toast: React.FC
+ {shortcut.name}
+ {shortcut.link}
+
+ );
+ })}
+
+
+ );
+};
+
+// toast animation duration.
+const TOAST_ANIMATION_DURATION = 400;
+
+const initialToastHelper = () => {
+ const shownToastContainers: [Root, HTMLDivElement][] = [];
+ let shownToastAmount = 0;
+
+ const wrapperClassName = "toast-list-container";
+ const tempDiv = document.createElement("div");
+ tempDiv.className = wrapperClassName;
+ document.body.appendChild(tempDiv);
+ const toastWrapper = tempDiv;
+
+ const showToast = (config: ToastConfig) => {
+ const tempDiv = document.createElement("div");
+ const toast = createRoot(tempDiv);
+ tempDiv.className = `toast-wrapper ${config.type}`;
+ toastWrapper.appendChild(tempDiv);
+ shownToastAmount++;
+ shownToastContainers.push([toast, tempDiv]);
+
+ const cbs = {
+ destory: () => {
+ tempDiv.classList.add("destory");
+
+ setTimeout(() => {
+ if (!tempDiv.parentElement) {
+ return;
+ }
+
+ shownToastAmount--;
+ if (shownToastAmount === 0) {
+ for (const [root, tempDiv] of shownToastContainers) {
+ root.unmount();
+ tempDiv.remove();
+ }
+ shownToastContainers.splice(0, shownToastContainers.length);
+ }
+ }, TOAST_ANIMATION_DURATION);
+ },
+ };
+
+ toast.render({props.content}
+
+ {workspaceList.map((workspace) => {
+ return (
+
+ );
+};
+
+export default WorkspaceListView;
diff --git a/web/src/components/common/DatePicker.tsx b/web/src/components/common/DatePicker.tsx
new file mode 100644
index 0000000..c98ea1b
--- /dev/null
+++ b/web/src/components/common/DatePicker.tsx
@@ -0,0 +1,120 @@
+import { useEffect, useState } from "react";
+import { DAILY_TIMESTAMP } from "../../helpers/consts";
+import Icon from "../Icon";
+import "../../less/common/date-picker.less";
+
+interface DatePickerProps {
+ className?: string;
+ datestamp: DateStamp;
+ handleDateStampChange: (datastamp: DateStamp) => void;
+}
+
+const DatePicker: React.FC
+ gotoWorkspaceDetailPage(workspace)}>
+ {workspace.name}
+
+ {workspace.description}
+
+ );
+ })}
+
+
+ );
+};
+
+function getMonthDayAmount(datestamp: DateStamp): number {
+ const dateTemp = new Date(datestamp);
+ const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
+ const nextMonthDate =
+ currentDate.getMonth() === 11
+ ? new Date(`${currentDate.getFullYear() + 1}/1/1`)
+ : new Date(`${currentDate.getFullYear()}/${currentDate.getMonth() + 2}/1`);
+
+ return (nextMonthDate.getTime() - currentDate.getTime()) / DAILY_TIMESTAMP;
+}
+
+function getMonthFirstDayDateStamp(timestamp: TimeStamp): DateStamp {
+ const dateTemp = new Date(timestamp);
+ const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
+ return currentDate.getTime();
+}
+
+export default DatePicker;
diff --git a/web/src/components/common/Dropdown.tsx b/web/src/components/common/Dropdown.tsx
new file mode 100644
index 0000000..e90db05
--- /dev/null
+++ b/web/src/components/common/Dropdown.tsx
@@ -0,0 +1,40 @@
+import { ReactNode, useEffect, useRef } from "react";
+import useToggle from "../../hooks/useToggle";
+import Icon from "../Icon";
+import "../../less/common/dropdown.less";
+
+interface DropdownProps {
+ children?: ReactNode;
+ className?: string;
+}
+
+const Dropdown: React.FC
+ handleChangeMonthBtnClick(-1)}>
+
+
+
+
+ Mon
+ Tue
+ Web
+ Thu
+ Fri
+ Sat
+ Sun
+
+
+ {dayList.map((d) => {
+ if (d.date === 0) {
+ return (
+
+ {""}
+
+ );
+ } else {
+ return (
+ handleDateItemClick(d.datestamp)}
+ >
+ {d.date}
+
+ );
+ }
+ })}
+ toggleDropdownStatus()}>
+
+
+ );
+};
+
+export default Dropdown;
diff --git a/web/src/components/common/OnlyWhen.tsx b/web/src/components/common/OnlyWhen.tsx
new file mode 100644
index 0000000..c366fbe
--- /dev/null
+++ b/web/src/components/common/OnlyWhen.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface OnlyWhenProps {
+ children: ReactNode;
+ when: boolean;
+}
+
+const OnlyWhen: React.FC{children}
+
+
+ );
+};
+
+export default memo(Selector);
diff --git a/web/src/css/index.css b/web/src/css/index.css
new file mode 100644
index 0000000..36f860c
--- /dev/null
+++ b/web/src/css/index.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+html,
+#root {
+ @apply text-base w-full h-full;
+ font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei",
+ "WenQuanYi Micro Hei", sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+ "Noto Color Emoji";
+}
diff --git a/web/src/helpers/api.ts b/web/src/helpers/api.ts
new file mode 100644
index 0000000..b58c35b
--- /dev/null
+++ b/web/src/helpers/api.ts
@@ -0,0 +1,100 @@
+import axios from "axios";
+
+type ResponseObject
+ {currentItem.text}
+
+
+
+
+ {dataSource.length > 0 ? (
+ dataSource.map((d) => {
+ return (
+
+ {
+ handleItemClick(d);
+ }}
+ >
+ {d.text}
+
+ );
+ })
+ ) : (
+ Null
+ )} +
+
+ );
+};
+
+export default Auth;
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
new file mode 100644
index 0000000..9b9d1b4
--- /dev/null
+++ b/web/src/pages/Home.tsx
@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { workspaceService } from "../services";
+import { useAppSelector } from "../store";
+import useLoading from "../hooks/useLoading";
+import Icon from "../components/Icon";
+import Header from "../components/Header";
+import WorkspaceListView from "../components/WorkspaceListView";
+import showCreateWorkspaceDialog from "../components/CreateWorkspaceDialog";
+
+const Home: React.FC = () => {
+ const { workspaceList } = useAppSelector((state) => state.workspace);
+ const loadingState = useLoading();
+
+ useEffect(() => {
+ Promise.all([workspaceService.fetchWorkspaceList()]).finally(() => {
+ loadingState.setFinish();
+ });
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ 
+
+
+ Corgi
+
+
+
+ Email
+
+
+
+ Password
+
+
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
new file mode 100644
index 0000000..f1f59ea
--- /dev/null
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { shortcutService, workspaceService } from "../services";
+import { useAppSelector } from "../store";
+import useLoading from "../hooks/useLoading";
+import Icon from "../components/Icon";
+import toastHelper from "../components/Toast";
+import Header from "../components/Header";
+import ShortcutListView from "../components/ShortcutListView";
+import { unknownWorkspace } from "../store/modules/workspace";
+import showCreateShortcutDialog from "../components/CreateShortcutDialog";
+
+interface State {
+ workspace: Workspace;
+}
+
+const WorkspaceDetail: React.FC = () => {
+ const navigate = useNavigate();
+ const params = useParams();
+ const { shortcutList } = useAppSelector((state) => state.shortcut);
+ const [state, setState] = useState
+
+ )}
+ Workspace List
+ showCreateWorkspaceDialog()}
+ >
+
+
+
+ );
+};
+
+export default WorkspaceDetail;
diff --git a/web/src/services/README.md b/web/src/services/README.md
new file mode 100644
index 0000000..bcf4597
--- /dev/null
+++ b/web/src/services/README.md
@@ -0,0 +1,6 @@
+# Services
+
+What should service do?
+
+- request data api and throw error;
+- dispatch state actions;
diff --git a/web/src/services/globalService.ts b/web/src/services/globalService.ts
new file mode 100644
index 0000000..a0ff100
--- /dev/null
+++ b/web/src/services/globalService.ts
@@ -0,0 +1,23 @@
+import store from "../store";
+import { setGlobalState } from "../store/modules/global";
+import userService from "./userService";
+
+const globalService = {
+ getState: () => {
+ return store.getState().global;
+ },
+
+ initialState: async () => {
+ const defaultGlobalState = {};
+
+ try {
+ await userService.initialState();
+ } catch (error) {
+ // do nth
+ }
+
+ store.dispatch(setGlobalState(defaultGlobalState));
+ },
+};
+
+export default globalService;
diff --git a/web/src/services/index.ts b/web/src/services/index.ts
new file mode 100644
index 0000000..bdedad6
--- /dev/null
+++ b/web/src/services/index.ts
@@ -0,0 +1,6 @@
+import globalService from "./globalService";
+import shortcutService from "./shortcutService";
+import userService from "./userService";
+import workspaceService from "./workspaceService";
+
+export { globalService, shortcutService, userService, workspaceService };
diff --git a/web/src/services/shortcutService.ts b/web/src/services/shortcutService.ts
new file mode 100644
index 0000000..f148ee7
--- /dev/null
+++ b/web/src/services/shortcutService.ts
@@ -0,0 +1,63 @@
+import * as api from "../helpers/api";
+import store from "../store/";
+import { createShortcut, deleteShortcut, patchShortcut, setShortcuts } from "../store/modules/shortcut";
+
+const convertResponseModelShortcut = (shortcut: Shortcut): Shortcut => {
+ return {
+ ...shortcut,
+ createdTs: shortcut.createdTs * 1000,
+ updatedTs: shortcut.updatedTs * 1000,
+ };
+};
+
+const shortcutService = {
+ getState: () => {
+ return store.getState().shortcut;
+ },
+
+ fetchWorkspaceShortcuts: async (workspaceId: WorkspaceId) => {
+ const { data } = (
+ await api.getShortcutList({
+ workspaceId,
+ })
+ ).data;
+ const shortcuts = data.map((s) => convertResponseModelShortcut(s));
+ store.dispatch(setShortcuts(shortcuts));
+ return shortcuts;
+ },
+
+ getMyAllShortcuts: async () => {
+ const { data } = (await api.getShortcutList()).data;
+ const shortcuts = data.map((s) => convertResponseModelShortcut(s));
+ store.dispatch(setShortcuts(shortcuts));
+ },
+
+ getShortcutById: (id: ShortcutId) => {
+ for (const s of shortcutService.getState().shortcutList) {
+ if (s.id === id) {
+ return s;
+ }
+ }
+
+ return null;
+ },
+
+ createShortcut: async (shortcutCreate: ShortcutCreate) => {
+ const { data } = (await api.createShortcut(shortcutCreate)).data;
+ const shortcut = convertResponseModelShortcut(data);
+ store.dispatch(createShortcut(shortcut));
+ },
+
+ patchShortcut: async (shortcutPatch: ShortcutPatch) => {
+ const { data } = (await api.patchShortcut(shortcutPatch)).data;
+ const shortcut = convertResponseModelShortcut(data);
+ store.dispatch(patchShortcut(shortcut));
+ },
+
+ deleteShortcutById: async (shortcutId: ShortcutId) => {
+ await api.deleteShortcutById(shortcutId);
+ store.dispatch(deleteShortcut(shortcutId));
+ },
+};
+
+export default shortcutService;
diff --git a/web/src/services/userService.ts b/web/src/services/userService.ts
new file mode 100644
index 0000000..c116f1c
--- /dev/null
+++ b/web/src/services/userService.ts
@@ -0,0 +1,66 @@
+import * as api from "../helpers/api";
+import store from "../store";
+import { setUser, patchUser } from "../store/modules/user";
+
+export const convertResponseModelUser = (user: User): User => {
+ return {
+ ...user,
+ createdTs: user.createdTs * 1000,
+ updatedTs: user.updatedTs * 1000,
+ };
+};
+
+const userService = {
+ getState: () => {
+ return store.getState().user;
+ },
+
+ initialState: async () => {
+ try {
+ const { data: user } = (await api.getMyselfUser()).data;
+ if (user) {
+ store.dispatch(setUser(convertResponseModelUser(user)));
+ }
+ } catch (error) {
+ // do nth
+ }
+ },
+
+ doSignIn: async () => {
+ const { data: user } = (await api.getMyselfUser()).data;
+ if (user) {
+ store.dispatch(setUser(convertResponseModelUser(user)));
+ } else {
+ userService.doSignOut();
+ }
+ return user;
+ },
+
+ doSignOut: async () => {
+ store.dispatch(setUser());
+ await api.signout();
+ },
+
+ getUserById: async (userId: UserId) => {
+ const { data: user } = (await api.getUserById(userId)).data;
+ if (user) {
+ return convertResponseModelUser(user);
+ } else {
+ return undefined;
+ }
+ },
+
+ patchUser: async (userPatch: UserPatch): Promise
+
+ )}
+ handleBackToHome()}
+ >
+
+ Workspace: {state?.workspace.name}
+ showCreateShortcutDialog(state.workspace.id)}
+ >
+
+