feat: add settings page

graasp · Oct 13, 2021 · 32606c3 · 32606c3
1 parent 6cdc85c
commit 32606c3
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 3 deletions.
diff --git a/src/components/item/settings/ItemSettings.js b/src/components/item/settings/ItemSettings.js
@@ -1,8 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import { useTranslation } from 'react-i18next';
-import { makeStyles } from '@material-ui/core';
+import {
+  FormControlLabel,
+  FormGroup,
+  makeStyles,
+  Switch,
+} from '@material-ui/core';
+import { MUTATION_KEYS } from '@graasp/query-client';
+import { useMutation } from '../../../config/queryClient';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -17,17 +25,74 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const ItemSettings = () => {
+const ItemSettings = ({ item }) => {
   const { t } = useTranslation();
   const classes = useStyles();
 
+  const editItem = useMutation(MUTATION_KEYS.EDIT_ITEM);
+
+  const settings = item.get('settings');
+
+  const handleChatbox = (event) => {
+    settings.showChatbox = event.target.checked;
+
+    editItem.mutate({
+      id: item.get('id'),
+      // use item login tag id
+      name: item.get('name'),
+      settings,
+    });
+  };
+
+  const handlePinned = (event) => {
+    settings.isPinned = event.target.checked;
+
+    editItem.mutate({
+      id: item.get('id'),
+      // use item login tag id
+      name: item.get('name'),
+      settings,
+    });
+  };
+
   return (
     <Container disableGutters className={classes.wrapper}>
       <Typography variant="h4" className={classes.title}>
         {t('Settings')}
       </Typography>
+
+      <FormGroup>
+        <FormControlLabel
+          label="Pin Item"
+          control={
+            (
+              <Switch
+                onChange={handlePinned}
+                checked={settings.isPinned}
+                color="primary"
+              />
+            )
+          }
+        />
+        <FormControlLabel
+          label="Show Chatbox"
+          control={
+            (
+              <Switch
+                onChange={handleChatbox}
+                checked={settings.showChatbox}
+                color="primary"
+              />
+            )
+          }
+        />
+      </FormGroup>
     </Container>
   );
 };
 
+ItemSettings.propTypes = {
+  item: PropTypes.instanceOf(Map).isRequired,
+};
+
 export default ItemSettings;
diff --git a/yarn.lock b/yarn.lock
@@ -1742,7 +1742,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.15.4
   resolution: "@babel/runtime@npm:7.15.4"
   dependencies: