From 0be87c5c895bcc925351437a502f59ee65dec4b8 Mon Sep 17 00:00:00 2001
From: alvrba <alvaro.b72@gmail.com>
Date: Mon, 13 Jun 2022 11:38:12 +0200
Subject: [PATCH] fix: minor changes

---
 src/components/common/CollapseButton.js      | 11 +++++++----
 src/components/item/settings/ItemSettings.js | 10 +++++-----
 src/langs/en.json                            |  2 +-
 src/langs/fr.json                            |  2 +-
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/common/CollapseButton.js b/src/components/common/CollapseButton.js
index 7643830d5..57a013db0 100644
--- a/src/components/common/CollapseButton.js
+++ b/src/components/common/CollapseButton.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -15,15 +15,18 @@ import { BUTTON_TYPES } from '../../config/constants';
 const CollapseButton = ({ item, type, onClick }) => {
   const { t } = useTranslation();
 
-  const editItem = useMutation(MUTATION_KEYS.EDIT_ITEM);
+  const { mutate: editItem } = useMutation(MUTATION_KEYS.EDIT_ITEM);
   const [isCollapsible, setIsCollapsible] = useState(
     item?.settings?.isCollapsible,
   );
 
+  useEffect(() => {
+    setIsCollapsible(item?.settings?.isCollapsible);
+  }, [item]);
+
   const handleCollapse = () => {
-    setIsCollapsible(!isCollapsible);
 
-    editItem.mutate({
+    editItem({
       id: item.id,
       name: item.name,
       settings: {
diff --git a/src/components/item/settings/ItemSettings.js b/src/components/item/settings/ItemSettings.js
index 9392c53d3..29fc91791 100644
--- a/src/components/item/settings/ItemSettings.js
+++ b/src/components/item/settings/ItemSettings.js
@@ -37,12 +37,12 @@ const ItemSettings = ({ item }) => {
   const { t } = useTranslation();
   const classes = useStyles();
 
-  const editItem = useMutation(MUTATION_KEYS.EDIT_ITEM);
+  const { mutate: editItem } = useMutation(MUTATION_KEYS.EDIT_ITEM);
 
   const settings = item.get('settings');
 
   const handleChatbox = (event) => {
-    editItem.mutate({
+    editItem({
       id: item.get('id'),
       name: item.get('name'),
       settings: {
@@ -52,7 +52,7 @@ const ItemSettings = ({ item }) => {
   };
 
   const handlePinned = (event) => {
-    editItem.mutate({
+    editItem({
       id: item.get('id'),
       name: item.get('name'),
       settings: {
@@ -62,7 +62,7 @@ const ItemSettings = ({ item }) => {
   };
 
   const handleCollapse = (event) => {
-    editItem.mutate({
+    editItem({
       id: item.get('id'),
       name: item.get('name'),
       settings: {
@@ -104,7 +104,7 @@ const ItemSettings = ({ item }) => {
         color="primary"
       />
     );
-    return <FormControlLabel label={t('Collapsible item')} control={control} />;
+    return <FormControlLabel label={t('Collapse item')} control={control} />;
   };
 
   return (
diff --git a/src/langs/en.json b/src/langs/en.json
index 2b00e6ee6..b78320828 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -134,7 +134,7 @@
     "Pin": "Pin this item",
     "Unpin": "Unpin this item",
     "Show Chat": "Show Chat",
-    "Collapsible item": "Set as collapsible item",
+    "Collapse item": "Set as collapsible item",
     "Collapse": "Collapse",
     "Uncollapse": "Uncollapse",
     "Write the folder decription here…": "Write the folder decription here…",
diff --git a/src/langs/fr.json b/src/langs/fr.json
index 673b9879b..46e2c4387 100644
--- a/src/langs/fr.json
+++ b/src/langs/fr.json
@@ -135,7 +135,7 @@
     "Pin": "Epingler",
     "Unpin": "Détacher",
     "Show Chat": "Afficher le chat",
-    "Collapsible item": "Définir comme élément pliant",
+    "Collapse item": "Minimiser l'élément",
     "Collapse": "Collapse",
     "Uncollapse": "Uncollapse",
     "Write the folder decription here…": "Entrer la description du dossier ici…",