Merge pull request #13 from newrice/dev

[fix] カテゴリが存在しない時でもカテゴリ追加可能に
newrice · Feb 21, 2021 · 4064555 · 4064555
2 parents 9cf8bce + a128bdf
commit 4064555
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 45 deletions.
diff --git a/src/features/categories/CategoryList.tsx b/src/features/categories/CategoryList.tsx
@@ -5,8 +5,9 @@ import {
   SortableElement,
   SortableHandle,
 } from "react-sortable-hoc";
-import { IconButton, SvgIcon } from "@material-ui/core";
+import { Button, IconButton, SvgIcon } from "@material-ui/core";
 import DragHandleIcon from "@material-ui/icons/DragHandle";
+import AddIcon from "@material-ui/icons/Add";
 import clone from "lodash/cloneDeep";
 import {
   endAddornmentClass,
@@ -82,29 +83,34 @@ const CategoryList = ({
 
   return (
     // divがないとsortableできない
-    <div>
-      {items.map((category, index) =>
-        isN999(category) ? (
-          <div>
-            <DragHandle iconElem={<SvgIcon />} disabled />
-            <N999CategoryItem
+    <>
+      <div>
+        {items.map((category, index) =>
+          isN999(category) ? (
+            <div>
+              <DragHandle iconElem={<SvgIcon />} disabled />
+              <N999CategoryItem
+                key={`category-item-${category.id}`}
+                item={category}
+                onAddClick={handleAdd}
+              />
+            </div>
+          ) : (
+            <SortableNormal
               key={`category-item-${category.id}`}
               item={category}
-              onAddClick={handleAdd}
+              index={index}
+              onChangeName={handleNameChange(index)}
+              onDisableClick={handleDisableClick(index, !category.disabled)}
+              onRemoveClick={handleRemoveClick(index)}
             />
-          </div>
-        ) : (
-          <SortableNormal
-            key={`category-item-${category.id}`}
-            item={category}
-            index={index}
-            onChangeName={handleNameChange(index)}
-            onDisableClick={handleDisableClick(index, !category.disabled)}
-            onRemoveClick={handleRemoveClick(index)}
-          />
-        ),
-      )}
-    </div>
+          ),
+        )}
+      </div>
+      <Button onClick={handleAdd} size="small">
+        <AddIcon />
+      </Button>
+    </>
   );
 };
 

diff --git a/src/features/categories/categoriesSlice.ts b/src/features/categories/categoriesSlice.ts
@@ -5,6 +5,7 @@ import { RootState } from "../../app/rootReducer";
 import { AppThunk } from "../../app/store";
 import { ICategory } from "../../types";
 import { isApiError } from "../../utils";
+// import { categoriesData } from "../../__mock__/data";
 
 export const initialState: ICategory[] = [];
 

diff --git a/src/features/categories/controller.tsx b/src/features/categories/controller.tsx
@@ -31,7 +31,7 @@ const CategoriesController = (): JSX.Element => {
 
   useEffect(() => {
     dispatch(fetchCategories(currentGroup.id));
-  }, [dispatch, fetchCategories, refresh, currentGroup]);
+  }, [refresh]);
 
   const responseHandler = (
     res: IApiResponseBase<undefined>,

diff --git a/src/features/costs/components/EditCostForm.tsx b/src/features/costs/components/EditCostForm.tsx
@@ -32,7 +32,6 @@ const EditCostForm = React.memo(
     onRequestStart,
     onRequestEnd,
   }: IEditCostForm): JSX.Element => {
-    console.log("*** EditCostForm");
     const { t } = useTranslation();
     const [cost, setCost] = useState<ICostResponse | null>(item);
     useEffect(() => {

diff --git a/src/features/costs/components/NewCostForm.tsx b/src/features/costs/components/NewCostForm.tsx
@@ -39,7 +39,7 @@ const NewCostForm = React.memo(
     onRequestStart,
     onRequestEnd,
   }: INewCostForm): JSX.Element => {
-    console.log("*** NewCostDetailForm");
+    // console.log("*** NewCostDetailForm");
     const { t } = useTranslation();
     const [cost, setCost] = useState<ICost>(baseCost(currentUserId));
 

diff --git a/src/features/costs/components/SummaryUser.tsx b/src/features/costs/components/SummaryUser.tsx
@@ -17,6 +17,8 @@ const getPaymentLabelKey = (payment: number) => {
   return str;
 };
 
+const copyButtonClass = "margin-rl-8";
+
 const equaler = (costs: ICost[], length: number) => {
   const all = getTotal(costs);
   const num = Math.floor(all / length);
@@ -55,7 +57,10 @@ export class UserSummary extends AbstractSumary {
         <Typography key={`summary-user-${user.id}`}>
           {getUserPaymentString(user.id)}
         </Typography>
-        <IconButton onClick={this.handleCopy(user.id)}>
+        <IconButton
+          onClick={this.handleCopy(user.id)}
+          className={copyButtonClass}
+        >
           <FileCopyIcon />
         </IconButton>
       </div>

diff --git a/src/features/costs/list/NewCostDialog.tsx b/src/features/costs/list/NewCostDialog.tsx
@@ -8,7 +8,7 @@ const paperClass = "underlay-paper-base input-dialog-base";
 
 const NewCostDialog = React.memo((props: INewCostForm): JSX.Element => {
   const [open, setOpen] = useState<boolean>(false);
-  console.log("*** NewCostDialog");
+  // console.log("*** NewCostDialog");
   const handleOpen = useCallback(() => {
     setOpen(true);
   }, []);

diff --git a/src/features/group/groupSlice.ts b/src/features/group/groupSlice.ts
@@ -74,7 +74,7 @@ export const fetchCurrentGroupUsers = (
     const { error } = isApiError(repoDetails, true);
     if (!error) {
       const { body } = repoDetails;
-      if (body && !isEmpty(body) && isArray(body)) {
+      if (body && !isEmpty(body.users) && isArray(body.users)) {
         dispatch(setCurrentGroupUser(body.users as IUser[]));
       } else {
         dispatch(setCurrentGroupUser(initialState.currentGroupUsers));

diff --git a/src/features/group/view/GroupAdd.tsx b/src/features/group/view/GroupAdd.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from "react";
-import { IconButton } from "@material-ui/core";
+import { Button } from "@material-ui/core";
 import SaveIcon from "@material-ui/icons/Save";
 import { GroupNameField } from "./GroupNameTextField";
 import { IRequestHandler } from "../../../types";
@@ -25,9 +25,9 @@ export const GroupAdd = ({
         onNameChange={handleNameChange}
         className={formFieldCommonClass}
       />
-      <IconButton disabled={!name} onClick={handleAdd}>
+      <Button disabled={!name} onClick={handleAdd}>
         <SaveIcon />
-      </IconButton>
+      </Button>
     </>
   );
 };

diff --git a/src/features/group/view/GroupDrawer.tsx b/src/features/group/view/GroupDrawer.tsx
@@ -12,11 +12,6 @@ import GroupAdd from "./GroupAdd";
 
 const drawerClass = clsx("border-top-radius");
 const formClass = clsx("column-container");
-const rowClass = clsx(
-  "row-container",
-  "jc-center-container",
-  "ai-flex-end-container",
-);
 
 type GroupDrawer = "Add" | "Edit" | "Exit" | "Invite" | "List";
 
@@ -35,9 +30,7 @@ const Drawer = ({ open, onClose, children }: IDrawer) => (
       className: drawerClass,
     }}
   >
-    <div className={formClass}>
-      <div className={rowClass}>{children}</div>
-    </div>
+    <div className={formClass}>{children}</div>
   </InsideAppDrawer>
 );
 

diff --git a/src/features/group/view/GroupEdit.tsx b/src/features/group/view/GroupEdit.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, IconButton, makeStyles, Theme } from "@material-ui/core";
+import { Button, makeStyles, Theme } from "@material-ui/core";
 import SaveIcon from "@material-ui/icons/Save";
+import clsx from "clsx";
 import { GroupNameField } from "./GroupNameTextField";
 import { IGroup, IRequestHandler } from "../../../types";
 import { edit } from "./functions";
@@ -13,6 +14,7 @@ interface IGroupEdit extends IRequestHandler {
 }
 
 const rowClass = "row-container jc-center-container";
+const buttonClass = "flex-auto margin-tb-8";
 const formFieldCommonClass = "input-field-base margin-tb-8";
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -58,21 +60,27 @@ export const GroupEdit = ({
         onNameChange={handleNameChange}
         className={formFieldCommonClass}
       />
-      <IconButton disabled={!newName} onClick={handleSavename}>
+      <Button
+        size="small"
+        disabled={!newName}
+        onClick={handleSavename}
+        className={buttonClass}
+      >
         <SaveIcon />
-      </IconButton>
+      </Button>
       <div className={rowClass}>
         <Button
           onClick={handleExitClick}
           variant="outlined"
-          className={classes.exitButton}
+          className={clsx(buttonClass, classes.exitButton)}
         >
           {t("LABEL_EXIT_GROUP")}
         </Button>
         <Button
           onClick={handleInviteClick}
           variant="outlined"
           color="secondary"
+          className={buttonClass}
         >
           {t("LABEL_INVITE")}
         </Button>

diff --git a/src/features/group/view/GroupList.tsx b/src/features/group/view/GroupList.tsx
@@ -3,7 +3,11 @@ import { useDispatch, useSelector } from "react-redux";
 import { Button, List } from "@material-ui/core";
 import AddIcon from "@material-ui/icons/Add";
 import GroupListItem from "./GroupListItem";
-import { selectCurrentGroup, setCurrentGroup } from "../groupSlice";
+import {
+  selectCurrentGroup,
+  setCurrentGroup,
+  setIsGroupDialogOpen,
+} from "../groupSlice";
 import { selectCurrentUser } from "../../user/userSlice";
 import { IGroup } from "../../../types";
 import { isEqual } from "../../../utils";
@@ -20,10 +24,11 @@ export const GroupList = React.memo(
     const currentGroup = useSelector(selectCurrentGroup);
     const handleSelect = useCallback((group: IGroup) => {
       dispatch(setCurrentGroup(group));
+      dispatch(setIsGroupDialogOpen(false));
     }, []);
     return (
       <>
-        <List component="nav" aria-label="contacts">
+        <List style={{ width: "100%" }}>
           {groups.map(group => (
             <GroupListItem
               key={`group-list-${group.id}`}

diff --git a/src/features/i18n/resource_ja.ts b/src/features/i18n/resource_ja.ts
@@ -47,7 +47,7 @@ const ja: II18n = {
   LABEL_LOGIN: "ログイン",
   LABEL_SIGNUP: "サインアップ",
   LABEL_INVITE: "招待",
-  LABEL_EXIT_GROUP: "退会する",
+  LABEL_EXIT_GROUP: "退会",
   LABEL_ACTIVATION: "有効化",
   LABEL_INVALIDATION: "無効化",
   // menu labels