feat: add item settings page

src/components/item/header/ItemHeader.js

@@ -36,7 +36,7 @@ const ItemHeader = ({ onClick }) => {
   return (
     <div className={classes.root}>
       <Navigation item={item} user={user} />
-      <ItemHeaderActions item={item} onClick={onClick} />
+      {item && <ItemHeaderActions item={item} onClick={onClick} />}
     </div>
   );
 };

src/components/item/header/ItemHeaderActions.js

@@ -3,15 +3,17 @@ import IconButton from '@material-ui/core/IconButton';
 import PropTypes from 'prop-types';
 import EditIcon from '@material-ui/icons/Edit';
 import { Map } from 'immutable';
+import SettingsIcon from '@material-ui/icons/Settings';
+import { useHistory } from 'react-router';
 import InfoIcon from '@material-ui/icons/Info';
 import { makeStyles } from '@material-ui/core/styles';
 import ModeButton from './ModeButton';
 import { ITEM_TYPES } from '../../../enums';
-import DeleteButton from '../../common/DeleteButton';
 import { ItemLayoutModeContext } from '../../context/ItemLayoutModeContext';
 import { VIEW_ITEM_EDIT_ITEM_BUTTON_ID } from '../../../config/selectors';
 import ShareButton from '../../common/ShareButton';
 import { ITEM_TYPES_WITH_CAPTIONS } from '../../../config/constants';
+import { buildItemSettingsPath } from '../../../config/paths';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 const ItemHeaderActions = ({ onClick, item }) => {
   const classes = useStyles();
+  const { push } = useHistory();
   const type = item?.get('type');
   const isFile = type && type !== ITEM_TYPES.FOLDER;
   const id = item?.get('id');
@@ -45,17 +48,23 @@ const ItemHeaderActions = ({ onClick, item }) => {
     </IconButton>
   );
 
+  const onClickSettings = () => {
+    push(buildItemSettingsPath(id));
+  };
+
   return (
     <div className={classes.buttons}>
       {actions}
       {!isFile && <ModeButton />}
       {id && (
         <>
-          <ShareButton itemId={id} />
-          <DeleteButton itemIds={[id]} />
           <IconButton onClick={onClick} color="primary">
             <InfoIcon color="primary" />
           </IconButton>
+          <ShareButton itemId={id} />
+          <IconButton onClick={onClickSettings} color="primary">
+            <SettingsIcon />
+          </IconButton>
         </>
       )}
     </div>

src/components/item/settings/ItemLoginSetting.js

@@ -103,6 +103,7 @@ const ItemLoginSwitch = () => {
     >
       {Object.values(SETTINGS.ITEM_LOGIN.OPTIONS).map((value) => (
         <MenuItem
+          key={value}
           value={value}
           id={buildItemLoginSettingModeSelectOption(value)}
         >

src/config/paths.js

@@ -5,3 +5,5 @@ export const ITEMS_PATH = '/items';
 export const buildItemPath = (id = ':itemId') => `${ITEMS_PATH}/${id}`;
 export const REDIRECT_PATH = '/redirect';
 export const MEMBER_PROFILE_PATH = '/profile';
+export const buildItemSettingsPath = (id = ':itemId') =>
+  `${ITEMS_PATH}/${id}/settings`;

src/langs/en.json

@@ -83,6 +83,7 @@
     "Storage Used": "Storage Used",
     "Member Since": "Member Since",
     "Profile": "Profile",
-    "Member ID": "Member ID"
+    "Member ID": "Member ID",
+    "Size": "Size"
   }
 }

src/langs/fr.json

@@ -83,6 +83,7 @@
     "Storage Used": "Mémoire utilisée",
     "Member Since": "Membre depuis",
     "Profile": "Profil",
-    "Member ID": "ID de Membre"
+    "Member ID": "ID de Membre",
+    "Size": "Taille"
   }
 }