chore: update frontend actions

web/src/components/CreateShortcutDialog.tsx

@@ -66,24 +66,26 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="w-full flex flex-row justify-between items-center mb-4">
+      <div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
         <p className="text-base">{shortcutId ? "Edit Shortcut" : "Create Shortcut"}</p>
         <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
           <Icon.X className="w-5 h-auto text-gray-600" />
         </button>
       </div>
       <div className="w-full flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input className="rounded border px-2 py-2" type="text" placeholder="Name" value={name} onChange={handleNameInputChange} />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Name</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={name} onChange={handleNameInputChange} />
         </div>
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input className="rounded border px-2 py-2" type="text" placeholder="Link" value={link} onChange={handleLinkInputChange} />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Link</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={link} onChange={handleLinkInputChange} />
         </div>
-      </div>
-      <div className="w-full flex flex-row justify-end items-center mt-2">
-        <div className="flex flex-row justify-start items-center">
+        <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`border rounded px-2 py-1 border-green-600 text-green-600 ${requestState.isLoading ? "opacity-80" : ""}`}
+            className={`border rounded px-3 py-2 border-green-600 bg-green-600 text-white hover:bg-green-700 ${
+              requestState.isLoading ? "opacity-80" : ""
+            }`}
             onClick={handleSaveBtnClick}
           >
             Save

web/src/components/CreateWorkspaceDialog.tsx

@@ -63,30 +63,26 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="w-full flex flex-row justify-between items-center mb-4">
+      <div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
         <p className="text-base">{workspaceId ? "Edit Workspace" : "Create Workspace"}</p>
         <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
           <Icon.X className="w-5 h-auto text-gray-600" />
         </button>
       </div>
       <div className="w-full flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input className="rounded border px-2 py-2" type="text" placeholder="Name" value={name} onChange={handleNameInputChange} />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Name</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={name} onChange={handleNameInputChange} />
         </div>
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input
-            className="rounded border px-2 py-2"
-            type="text"
-            placeholder="Description"
-            value={description}
-            onChange={handleDescriptionInputChange}
-          />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Description</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={description} onChange={handleDescriptionInputChange} />
         </div>
-      </div>
-      <div className="w-full flex flex-row justify-end items-center mt-2">
-        <div className="flex flex-row justify-start items-center">
+        <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`border rounded px-2 py-1 border-green-600 text-green-600 ${requestState.isLoading ? "opacity-80" : ""}`}
+            className={`border rounded px-3 py-2 border-green-600 bg-green-600 text-white hover:bg-green-700 ${
+              requestState.isLoading ? "opacity-80" : ""
+            }`}
             onClick={handleSaveBtnClick}
           >
             Save

web/src/components/Header.tsx

@@ -3,7 +3,6 @@ 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();
@@ -16,9 +15,9 @@ const Header: React.FC = () => {
   };
 
   return (
-    <div className={styles.header}>
+    <div className="w-full bg-amber-50">
       <div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
-        <span>Corgi</span>
+        <span className="text-xl font-mono font-medium">Corgi</span>
         <div className="relative">
           <div className="flex flex-row justify-end items-center" onClick={() => toggleShowDropdown()}>
             <span>{user?.name}</span>

web/src/components/ShortcutListView.tsx

@@ -1,17 +1,44 @@
+import { shortcutService } from "../services";
+import Dropdown from "./common/Dropdown";
+import showCreateShortcutDialog from "./CreateShortcutDialog";
+
 interface Props {
+  workspaceId: WorkspaceId;
   shortcutList: Shortcut[];
 }
 
 const ShortcutListView: React.FC<Props> = (props: Props) => {
-  const { shortcutList } = props;
+  const { workspaceId, shortcutList } = props;
+
+  const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
+    shortcutService.deleteShortcutById(shortcut.id);
+  };
 
   return (
     <div className="w-full flex flex-col justify-start items-start">
       {shortcutList.map((shortcut) => {
         return (
-          <div key={shortcut.id} className="w-full flex flex-col justify-start items-start border px-6 py-4 mb-2 rounded-lg">
-            <span className="text-xl font-medium">{shortcut.name}</span>
-            <span className="text-base text-gray-600">{shortcut.link}</span>
+          <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
+            <div className="flex flex-col justify-start items-start">
+              <span className="text-lg font-medium">{shortcut.name}</span>
+              <span className="text-base text-gray-600">{shortcut.link}</span>
+            </div>
+            <Dropdown>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                onClick={() => showCreateShortcutDialog(workspaceId, shortcut.id)}
+              >
+                Edit
+              </span>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                onClick={() => {
+                  handleDeleteShortcutButtonClick(shortcut);
+                }}
+              >
+                Delete
+              </span>
+            </Dropdown>
           </div>
         );
       })}

web/src/components/WorkspaceListView.tsx

@@ -1,4 +1,8 @@
 import { useNavigate } from "react-router-dom";
+import { workspaceService } from "../services";
+import workspace from "../store/modules/workspace";
+import Dropdown from "./common/Dropdown";
+import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
 
 interface Props {
   workspaceList: Workspace[];
@@ -12,15 +16,37 @@ const WorkspaceListView: React.FC<Props> = (props: Props) => {
     navigate(`/workspace/${workspace.id}`);
   };
 
+  const handleDeleteWorkspaceButtonClick = (workspace: Workspace) => {
+    workspaceService.deleteWorkspaceById(workspace.id);
+  };
+
   return (
     <div className="w-full flex flex-col justify-start items-start">
       {workspaceList.map((workspace) => {
         return (
-          <div key={workspace.id} className="w-full flex flex-col justify-start items-start border px-6 py-4 mb-2 rounded-lg">
-            <span className="text-xl font-medium" onClick={() => gotoWorkspaceDetailPage(workspace)}>
-              {workspace.name}
-            </span>
-            <span className="text-base text-gray-600">{workspace.description}</span>
+          <div key={workspace.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
+            <div className="flex flex-col justify-start items-start">
+              <span className="text-lg font-medium cursor-pointer hover:underline" onClick={() => gotoWorkspaceDetailPage(workspace)}>
+                {workspace.name}
+              </span>
+              <span className="text-base text-gray-600">{workspace.description}</span>
+            </div>
+            <Dropdown>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                onClick={() => showCreateWorkspaceDialog(workspace.id)}
+              >
+                Edit
+              </span>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                onClick={() => {
+                  handleDeleteWorkspaceButtonClick(workspace);
+                }}
+              >
+                Delete
+              </span>
+            </Dropdown>
           </div>
         );
       })}

web/src/components/common/DatePicker.tsx

@@ -1,120 +0,0 @@
-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<DatePickerProps> = (props: DatePickerProps) => {
-  const { className, datestamp, handleDateStampChange } = props;
-  const [currentDateStamp, setCurrentDateStamp] = useState<DateStamp>(getMonthFirstDayDateStamp(datestamp));
-
-  useEffect(() => {
-    setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
-  }, [datestamp]);
-
-  const firstDate = new Date(currentDateStamp);
-  const firstDateDay = firstDate.getDay() === 0 ? 7 : firstDate.getDay();
-  const dayList = [];
-  for (let i = 1; i < firstDateDay; i++) {
-    dayList.push({
-      date: 0,
-      datestamp: firstDate.getTime() - DAILY_TIMESTAMP * (7 - i),
-    });
-  }
-  const dayAmount = getMonthDayAmount(currentDateStamp);
-  for (let i = 1; i <= dayAmount; i++) {
-    dayList.push({
-      date: i,
-      datestamp: firstDate.getTime() + DAILY_TIMESTAMP * (i - 1),
-    });
-  }
-
-  const handleDateItemClick = (datestamp: DateStamp) => {
-    handleDateStampChange(datestamp);
-  };
-
-  const handleChangeMonthBtnClick = (i: -1 | 1) => {
-    const year = firstDate.getFullYear();
-    const month = firstDate.getMonth() + 1;
-    let nextDateStamp = 0;
-    if (month === 1 && i === -1) {
-      nextDateStamp = new Date(`${year - 1}/12/1`).getTime();
-    } else if (month === 12 && i === 1) {
-      nextDateStamp = new Date(`${year + 1}/1/1`).getTime();
-    } else {
-      nextDateStamp = new Date(`${year}/${month + i}/1`).getTime();
-    }
-    setCurrentDateStamp(getMonthFirstDayDateStamp(nextDateStamp));
-  };
-
-  return (
-    <div className={`date-picker-wrapper ${className}`}>
-      <div className="date-picker-header">
-        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}>
-          <Icon.ChevronLeft className="icon-img" />
-        </span>
-        <span className="normal-text">
-          {firstDate.getFullYear()}/{firstDate.getMonth() + 1}
-        </span>
-        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
-          <Icon.ChevronRight className="icon-img" />
-        </span>
-      </div>
-      <div className="date-picker-day-container">
-        <div className="date-picker-day-header">
-          <span className="day-item">Mon</span>
-          <span className="day-item">Tue</span>
-          <span className="day-item">Web</span>
-          <span className="day-item">Thu</span>
-          <span className="day-item">Fri</span>
-          <span className="day-item">Sat</span>
-          <span className="day-item">Sun</span>
-        </div>
-
-        {dayList.map((d) => {
-          if (d.date === 0) {
-            return (
-              <span key={d.datestamp} className="day-item null">
-                {""}
-              </span>
-            );
-          } else {
-            return (
-              <span
-                key={d.datestamp}
-                className={`day-item ${d.datestamp === datestamp ? "current" : ""}`}
-                onClick={() => handleDateItemClick(d.datestamp)}
-              >
-                {d.date}
-              </span>
-            );
-          }
-        })}
-      </div>
-    </div>
-  );
-};
-
-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;