Merge pull request #796 from cam-inc/develop

Release app 2.12.0, website 0.4.0

packages/app/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @viron/app
 
+## 2.12.0
+
+### Minor Changes
+
+- 432e1773: retains group toggle open status
+- c4320f59: ability to modify endpoints
+
+### Patch Changes
+
+- a61140ed: Fixed missing localization on Groups page
+
 ## 2.11.5
 
 ### Patch Changes

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viron/app",
-  "version": "2.11.5",
+  "version": "2.12.0",
   "engines": {
     "node": ">=18.14.0",
     "npm": ">=9.3.1"

packages/app/src/errors/index.ts

@@ -86,6 +86,11 @@ export class EndpointDuplicatedError extends EndpointError {
   name = 'Endpoint Duplicated Error';
 }
 
+export class EndpointUndefinedError extends EndpointError {
+  code = '#endpointUndefined';
+  name = 'Endpoint Undefined Error';
+}
+
 export class EndpointExportError extends EndpointError {
   code = '#endpointExport';
   name = 'Endpoint Export Error';

packages/app/src/hooks/endpoint.ts

@@ -19,6 +19,7 @@ import {
   OASError,
   UnexpectedError,
   getHTTPError,
+  EndpointUndefinedError,
 } from '~/errors';
 import { useI18n } from '~/hooks/i18n';
 import { remove, KEY, set } from '~/storage';
@@ -28,6 +29,7 @@ import {
   useEndpointListUngroupedGlobalStateValue,
   useEndpointGroupListGlobalStateSet,
   useEndpointGroupListSortedGlobalStateValue,
+  useEndpointGroupListGlobalState,
 } from '~/store';
 import {
   Endpoint,
@@ -174,6 +176,17 @@ export type UseEndpointReturn = {
         error: null;
       }
   >;
+  editEndpoint: (
+    currentId: string,
+    endpoint: Endpoint,
+    options?: { resolveDuplication: boolean }
+  ) =>
+    | {
+        error: BaseError;
+      }
+    | {
+        error: null;
+      };
   removeEndpoint: (endpointId: EndpointID) => void;
   addGroup: (endpointGroup: EndpointGroup) => {
     error: EndpointGroupError | null;
@@ -366,6 +379,46 @@ export const useEndpoint = (): UseEndpointReturn => {
     [endpointList, setEndpointList]
   );
 
+  const editEndpoint = useCallback<UseEndpointReturn['editEndpoint']>(
+    (
+      currentId,
+      endpoint,
+      { resolveDuplication } = { resolveDuplication: false }
+    ) => {
+      const index = endpointList.findIndex((item) => item.id === currentId);
+      if (index === -1) {
+        return {
+          error: new EndpointUndefinedError(),
+        };
+      }
+
+      if (
+        endpointList.some(
+          (item, idx) => item.id === endpoint.id && idx !== index
+        )
+      ) {
+        if (resolveDuplication) {
+          endpoint.id = `${endpoint.id}-${Math.random()}`;
+        } else {
+          return {
+            error: new EndpointDuplicatedError(),
+          };
+        }
+      }
+
+      setEndpointList((currVal) => [
+        ...currVal.slice(0, index),
+        endpoint,
+        ...currVal.slice(index + 1),
+      ]);
+
+      return {
+        error: null,
+      };
+    },
+    [endpointList, setEndpointList]
+  );
+
   const prepareSigninEmail = useCallback<
     UseEndpointReturn['prepareSigninEmail']
   >((endpoint, authentication, defaultValues = {}) => {
@@ -889,6 +942,7 @@ export const useEndpoint = (): UseEndpointReturn => {
       prepareSigninOAuthCallback,
       prepareSignout,
       addEndpoint,
+      editEndpoint,
       removeEndpoint,
       addGroup,
       removeGroup,
@@ -911,6 +965,7 @@ export const useEndpoint = (): UseEndpointReturn => {
       prepareSigninOAuthCallback,
       prepareSignout,
       addEndpoint,
+      editEndpoint,
       removeEndpoint,
       addGroup,
       removeGroup,
@@ -922,3 +977,19 @@ export const useEndpoint = (): UseEndpointReturn => {
   );
   return ret;
 };
+
+export const useEndpointGroupToggle = (id: string) => {
+  const [endpointGroups, setEndpointGroups] = useEndpointGroupListGlobalState();
+  const endpointGroup = endpointGroups.find((group) => group.id === id);
+  const isOpen = endpointGroup?.isOpen ?? false;
+
+  const toggle = () => {
+    setEndpointGroups((groups) => {
+      return groups.map((group) => {
+        return group.id === id ? { ...group, isOpen: !isOpen } : group;
+      });
+    });
+  };
+
+  return { isOpen, toggle };
+};

packages/app/src/locales/en/common.json

@@ -63,6 +63,16 @@
     "addButtonLabel": "Create",
     "cancelButtonLabel": "Cancel"
   },
+  "editEndpoint":{
+    "title": "Edit an $t(endpoint)",
+    "idInputLabel": "ID",
+    "urlInputLabel": "URL",
+    "groupInputLabel": "$t(group)",
+    "groupInputDescription": "You can add the $t(endpoint) to any group. Groups can be added from the dashboard.",
+    "updateButtonLabel": "Update",
+    "cancelButtonLabel": "Cancel"
+  },
+  "endpointEditButtonLabel":"Edit",
   "endpointInformationButtonLabel": "Information",
   "endpointQRCodeShareButtonLabel": "QR Code",
   "removeEndpointButtonLabel": "Remove",
@@ -83,5 +93,13 @@
   "insertButtonLabel":"Insert",
   "appendButtonLabel":"Append",
   "removeButtonLabel":"Remove",
-  "submitButtonLabel":"Submit"
+  "submitButtonLabel":"Submit",
+  "cancelButtonLabel":"Cancel",
+  "moveUpButtonLabel":"Move Up",
+  "moveDownButtonLabel":"Move Down",
+  "menuButtonLabel":"Menu",
+  "removeModal":{
+    "title":"Remove a Group",
+    "description":"Really want to remove it? The endpoints in the group will remain ungrouped."
+  }
 }

packages/app/src/locales/ja/common.json

@@ -63,6 +63,16 @@
     "addButtonLabel": "追加する",
     "cancelButtonLabel": "キャンセル"
   },
+  "editEndpoint":{
+    "title": "$t(endpoint)の編集",
+    "idInputLabel": "タイトル",
+    "urlInputLabel": "URL",
+    "groupInputLabel": "グループへ追加",
+    "groupInputDescription": "管理画面を任意のグループに追加できます。グループの追加はダッシュボードから行えます。",
+    "updateButtonLabel": "更新する",
+    "cancelButtonLabel": "キャンセル"
+  },
+  "endpointEditButtonLabel":"編集",
   "endpointInformationButtonLabel": "詳細情報",
   "endpointQRCodeShareButtonLabel": "QRコードの共有",
   "removeEndpointButtonLabel": "削除",
@@ -83,5 +93,13 @@
   "insertButtonLabel":"挿入",
   "appendButtonLabel":"追加",
   "removeButtonLabel":"削除",
-  "submitButtonLabel":"更新"
+  "submitButtonLabel":"更新",
+  "cancelButtonLabel":"キャンセル",
+  "moveUpButtonLabel":"上に移動",
+  "moveDownButtonLabel":"下に移動",
+  "menuButtonLabel":"メニュー",
+  "removeModal":{
+    "title":"グループを削除する",
+    "description":"本当に削除しますか? グループ内のエンドポイントはグループ化されないままになります。"
+  }
 }

packages/app/src/pages/dashboard/endpoints/_/body/index.tsx

@@ -7,7 +7,7 @@ import Head from '~/components/head';
 import ChevronDownIcon from '~/components/icon/chevronDown/outline';
 import ChevronRightIcon from '~/components/icon/chevronRight/outline';
 import PlusIcon from '~/components/icon/plus/outline';
-import { useEndpoint } from '~/hooks/endpoint';
+import { useEndpoint, useEndpointGroupToggle } from '~/hooks/endpoint';
 import { Trans, useTranslation } from '~/hooks/i18n';
 import { Props as LayoutProps } from '~/layouts/';
 import Modal, { useModal } from '~/portals/modal';
@@ -143,19 +143,16 @@ type GroupProps = {
   list: Endpoint[];
 };
 const Group: React.FC<GroupProps> = ({ group, list }) => {
-  const [isOpened, setIsOpened] = useState<boolean>(!!list.length);
-  const handleToggleClick = () => {
-    setIsOpened((currVal) => !currVal);
-  };
+  const { isOpen, toggle } = useEndpointGroupToggle(group.id);
 
-  const ToggleIcon = isOpened ? ChevronDownIcon : ChevronRightIcon;
+  const ToggleIcon = isOpen ? ChevronDownIcon : ChevronRightIcon;
 
   return (
     <div>
       {/* Head */}
       <button
         className="flex gap-1 w-full hover:bg-thm-on-background-faint py-2 rounded"
-        onClick={handleToggleClick}
+        onClick={toggle}
       >
         <span className="p-0.5">
           <ToggleIcon className="w-4 h-4" />
@@ -177,7 +174,7 @@ const Group: React.FC<GroupProps> = ({ group, list }) => {
         className={classnames(
           'grid grid-cols-1 @[740px]:grid-cols-2 @[995px]:grid-cols-3 gap-6 mt-2 py-2',
           {
-            hidden: !isOpened,
+            hidden: !isOpen,
           }
         )}
       >