@strapi/admin 4.3.4 → 4.3.7

package/admin/src/content-manager/components/SelectMany/index.js

@@ -17,6 +17,7 @@ function SelectMany({
   name,
   isDisabled,
   isLoading,
+  loadingMessage,
   onInputChange,
   onMenuClose,
   onMenuOpen,
@@ -46,7 +47,7 @@ function SelectMany({
         id={name}
         filterOption={(candidate, input) => {
           if (!isEmpty(value)) {
-            const isSelected = value.findIndex(item => item.id === candidate.value.id) !== -1;
+            const isSelected = value.findIndex((item) => item.id === candidate.value.id) !== -1;
 
             if (isSelected) {
               return false;
@@ -61,6 +62,7 @@ function SelectMany({
         }}
         mainField={mainField}
         isLoading={isLoading}
+        loadingMessage={loadingMessage}
         isMulti
         isSearchable
         options={options}
@@ -119,6 +121,7 @@ SelectMany.propTypes = {
   displayNavigationLink: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  loadingMessage: PropTypes.func.isRequired,
   mainField: PropTypes.shape({
     name: PropTypes.string.isRequired,
     schema: PropTypes.shape({

package/admin/src/content-manager/components/SelectOne/SingleValue.js

@@ -22,7 +22,7 @@ const StyledBullet = styled.div`
   cursor: pointer;
 `;
 
-const SingleValue = props => {
+const SingleValue = (props) => {
   const { formatMessage } = useIntl();
   const Component = components.SingleValue;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
@@ -43,13 +43,13 @@ const SingleValue = props => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.data.label || '-'}</Typography>
+          <Typography ellipsis>{props.data.label ?? '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.data.label || '-'}</Component>;
+  return <Component {...props}>{props.data.label ?? '-'}</Component>;
 };
 
 SingleValue.propTypes = {

package/admin/src/content-manager/components/SelectOne/index.js

@@ -14,6 +14,7 @@ function SelectOne({
   name,
   isDisabled,
   isLoading,
+  loadingMessage,
   onChange,
   onInputChange,
   onMenuClose,
@@ -37,6 +38,7 @@ function SelectOne({
         isClearable
         isDisabled={isDisabled}
         isLoading={isLoading}
+        loadingMessage={loadingMessage}
         mainField={mainField}
         options={options}
         onChange={onChange}
@@ -70,6 +72,7 @@ SelectOne.propTypes = {
   components: PropTypes.object,
   isDisabled: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  loadingMessage: PropTypes.func.isRequired,
   mainField: PropTypes.shape({
     name: PropTypes.string.isRequired,
     schema: PropTypes.shape({

package/admin/src/content-manager/components/SelectWrapper/Option.js

@@ -20,7 +20,7 @@ const StyledBullet = styled.div`
   cursor: pointer;
 `;
 
-const Option = props => {
+const Option = (props) => {
   const { formatMessage } = useIntl();
   const Component = components.Option;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');
@@ -41,13 +41,13 @@ const Option = props => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.label || '-'}</Typography>
+          <Typography ellipsis>{props.label ?? '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.label || '-'}</Component>;
+  return <Component {...props}>{props.label ?? '-'}</Component>;
 };
 
 Option.defaultProps = {

package/admin/src/content-manager/components/SelectWrapper/index.js

@@ -64,13 +64,8 @@ function SelectWrapper({
   const [{ query }] = useQueryParams();
   // Disable the input in case of a polymorphic relation
   const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
-  const {
-    addRelation,
-    modifiedData,
-    moveRelation,
-    onChange,
-    onRemoveRelation,
-  } = useCMEditViewDataManager();
+  const { addRelation, modifiedData, moveRelation, onChange, onRemoveRelation } =
+    useCMEditViewDataManager();
   const { pathname } = useLocation();
 
   const value = get(modifiedData, name, null);
@@ -80,11 +75,11 @@ function SelectWrapper({
   const [isOpen, setIsOpen] = useState(false);
 
   const filteredOptions = useMemo(() => {
-    return options.filter(option => {
+    return options.filter((option) => {
       if (!isEmpty(value)) {
         // SelectMany
         if (Array.isArray(value)) {
-          return findIndex(value, o => o.id === option.value.id) === -1;
+          return findIndex(value, (o) => o.id === option.value.id) === -1;
         }
 
         // SelectOne
@@ -95,13 +90,8 @@ function SelectWrapper({
     });
   }, [options, value]);
 
-  const {
-    endPoint,
-    containsKey,
-    defaultParams,
-    shouldDisplayRelationLink,
-    paramsToKeep,
-  } = queryInfos;
+  const { endPoint, containsKey, defaultParams, shouldDisplayRelationLink, paramsToKeep } =
+    queryInfos;
 
   const isSingle = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
     relationType
@@ -116,11 +106,11 @@ function SelectWrapper({
       return [value.id];
     }
 
-    return value.map(val => val.id);
+    return value.map((val) => val.id);
   }, [isSingle, value]);
 
   const getData = useCallback(
-    async source => {
+    async (source) => {
       // Currently polymorphic relations are not handled
       if (isMorph) {
         setIsLoading(false);
@@ -149,19 +139,19 @@ function SelectWrapper({
           { params, cancelToken: source.token }
         );
 
-        const formattedData = data.map(obj => {
+        const formattedData = data.map((obj) => {
           return { value: obj, label: obj[mainField.name] };
         });
 
-        setOptions(prevState =>
+        setOptions((prevState) =>
           prevState.concat(formattedData).filter((obj, index) => {
-            const objIndex = prevState.findIndex(el => el.value.id === obj.value.id);
+            const objIndex = prevState.findIndex((el) => el.value.id === obj.value.id);
 
             if (objIndex === -1) {
               return true;
             }
 
-            return prevState.findIndex(el => el.value.id === obj.value.id) === index;
+            return prevState.findIndex((el) => el.value.id === obj.value.id) === index;
           })
         );
         setIsLoading(false);
@@ -197,7 +187,7 @@ function SelectWrapper({
 
   const handleInputChange = (inputValue, { action }) => {
     if (action === 'input-change') {
-      setState(prevState => {
+      setState((prevState) => {
         if (prevState.contains === inputValue) {
           return prevState;
         }
@@ -210,7 +200,7 @@ function SelectWrapper({
   };
 
   const handleMenuScrollToBottom = () => {
-    setState(prevState => ({
+    setState((prevState) => ({
       ...prevState,
       start: prevState.start + 20,
     }));
@@ -221,11 +211,11 @@ function SelectWrapper({
     setIsOpen(false);
   };
 
-  const handleChange = value => {
+  const handleChange = (value) => {
     onChange({ target: { name, value: value ? value.value : value } });
   };
 
-  const handleAddRelation = value => {
+  const handleAddRelation = (value) => {
     if (!isEmpty(value)) {
       addRelation({ target: { name, value } });
     }
@@ -292,6 +282,12 @@ function SelectWrapper({
         isDisabled={isDisabled}
         isLoading={isLoading}
         isClearable
+        loadingMessage={() =>
+          formatMessage({
+            id: getTrad('DynamicTable.relation-loading'),
+            defaultMessage: 'Relations are loading',
+          })
+        }
         mainField={mainField}
         move={moveRelation}
         name={name}

package/admin/src/content-manager/components/SelectWrapper/utils/connect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function connect(WrappedComponent, select) {
-  return function(props) {
+  return (props) => {
     // eslint-disable-next-line react/prop-types
     const selectors = select(props);
 

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -38,16 +38,11 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
 
-  const {
-    componentsDataStructure,
-    contentTypeDataStructure,
-    data,
-    isLoading,
-    status,
-  } = useSelector(selectCrudReducer);
+  const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
+    useSelector(selectCrudReducer);
 
   const cleanReceivedData = useCallback(
-    data => {
+    (data) => {
       const cleaned = removePasswordFieldsFromData(
         data,
         allLayoutData.contentType,
@@ -100,7 +95,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
 
-    const fetchData = async source => {
+    const fetchData = async (source) => {
       dispatch(getData());
 
       setIsCreatingEntry(true);
@@ -142,7 +137,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   }, [cleanReceivedData, push, slug, dispatch, searchToSend, rawQuery, toggleNotification]);
 
   const displayErrors = useCallback(
-    err => {
+    (err) => {
       const errorPayload = err.response.data;
       let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
@@ -159,7 +154,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   );
 
   const onDelete = useCallback(
-    async trackerProperty => {
+    async (trackerProperty) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

package/admin/src/content-manager/components/SingleTypeFormWrapper/utils/getRequestUrl.js

@@ -1,5 +1,5 @@
 import { getRequestUrl } from '../../../utils';
 
-const requestURL = path => getRequestUrl(`single-types/${path}`);
+const requestURL = (path) => getRequestUrl(`single-types/${path}`);
 
 export default requestURL;

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -37,7 +37,7 @@ const Editor = ({
     });
 
     CodeMirror.commands.newlineAndIndentContinueMarkdownList = newlineAndIndentContinueMarkdownList;
-    editorRef.current.on('change', doc => {
+    editorRef.current.on('change', (doc) => {
       onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
     });
   }, [editorRef, textareaRef, name, placeholder]);

package/admin/src/content-manager/components/Wysiwyg/EditorLayout.js

@@ -78,7 +78,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
               overflow="hidden"
               width="70%"
               height="70%"
-              onClick={e => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
             >
               <Flex height="100%" alignItems="flex-start">
                 <BoxWithBorder flex="1" height="100%">

package/admin/src/content-manager/components/Wysiwyg/WysiwygFooter.js

@@ -28,7 +28,7 @@ const WysiwygFooter = ({ onToggleExpand }) => {
 };
 
 WysiwygFooter.defaultProps = {
-  onToggleExpand: () => {},
+  onToggleExpand() {},
 };
 
 WysiwygFooter.propTypes = {

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -45,7 +45,7 @@ const WysiwygNav = ({
   const buttonMoreRef = useRef();
 
   const handleTogglePopover = () => {
-    setVisiblePopover(prev => !prev);
+    setVisiblePopover((prev) => !prev);
   };
 
   if (disabled || isPreviewMode) {
@@ -110,7 +110,7 @@ const WysiwygNav = ({
             id="selectTitle"
             placeholder={selectPlaceholder}
             size="S"
-            onChange={value => onActionClick(value, editorRef)}
+            onChange={(value) => onActionClick(value, editorRef)}
           >
             <Option value="h1">h1</Option>
             <Option value="h2">h2</Option>
@@ -233,8 +233,8 @@ const WysiwygNav = ({
 
 WysiwygNav.defaultProps = {
   isPreviewMode: false,
-  onActionClick: () => {},
-  onToggleMediaLib: () => {},
+  onActionClick() {},
+  onToggleMediaLib() {},
   onTogglePreviewMode: undefined,
 };
 

package/admin/src/content-manager/components/Wysiwyg/index.js

@@ -52,11 +52,11 @@ const Wysiwyg = ({
 
   const MediaLibraryDialog = components['media-library'];
 
-  const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
-  const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
+  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+  const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
   const handleToggleExpand = () => {
     setIsPreviewMode(false);
-    setIsExpandMode(prev => !prev);
+    setIsExpandMode((prev) => !prev);
   };
 
   const handleActionClick = (value, currentEditorRef, togglePopover) => {
@@ -100,8 +100,8 @@ const Wysiwyg = ({
     }
   };
 
-  const handleSelectAssets = files => {
-    const formattedFiles = files.map(f => ({
+  const handleSelectAssets = (files) => {
+    const formattedFiles = files.map((f) => ({
       alt: f.alternativeText || f.name,
       url: prefixFileUrlWithBackendUrl(f.url),
       mime: f.mime,

package/admin/src/content-manager/components/Wysiwyg/utils/utils.js

@@ -30,7 +30,7 @@ export const replaceText = (markdownName, textToChange) => {
   return editedText;
 };
 
-export const insertText = markdownName => {
+export const insertText = (markdownName) => {
   let editedText;
   // object to calculate text that will be selected after insert of markdown
   let selection = { start: markdownName.length, end: 0 };
@@ -75,7 +75,7 @@ export const insertText = markdownName => {
   return { editedText, selection };
 };
 
-export const insertListOrTitle = markdown => {
+export const insertListOrTitle = (markdown) => {
   let textToInsert;
 
   switch (markdown) {
@@ -140,8 +140,8 @@ export const listHandler = (editor, listType) => {
     const selections = doc.listSelections();
     let remove = null;
 
-    editor.current.operation(function() {
-      selections.forEach(function(selection) {
+    editor.current.operation(function () {
+      selections.forEach(function (selection) {
         const pos = [selection.head.line, selection.anchor.line].sort();
 
         // Remove if the first text starts with it

package/admin/src/content-manager/hooks/useContentTypeLayout/index.js

@@ -7,7 +7,7 @@ const useContentTypeLayout = () => {
   const currentLayout = useSelector(selectLayout);
 
   const getComponentLayout = useCallback(
-    componentUid => {
+    (componentUid) => {
       return get(currentLayout, ['components', componentUid], {});
     },
     [currentLayout]

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/index.js

@@ -7,10 +7,10 @@ import reducer, { initialState } from './reducer';
 import { makeSelectModelAndComponentSchemas } from '../../pages/App/selectors';
 import { getRequestUrl } from '../../utils';
 
-const useFetchContentTypeLayout = contentTypeUID => {
+const useFetchContentTypeLayout = (contentTypeUID) => {
   const [{ error, isLoading, layout, layouts }, dispatch] = useReducer(reducer, initialState);
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
-  const { schemas } = useSelector(state => schemasSelector(state), shallowEqual);
+  const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
   const isMounted = useRef(true);
 
   const getData = useCallback(
@@ -68,7 +68,7 @@ const useFetchContentTypeLayout = contentTypeUID => {
   }, [contentTypeUID, getData]);
 
   const updateLayout = useCallback(
-    data => {
+    (data) => {
       dispatch({
         type: 'UPDATE_LAYOUT',
         newLayout: formatLayouts(data, schemas),

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/reducer.js

@@ -9,7 +9,7 @@ export const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA': {
         draftState.isLoading = true;

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -1,7 +1,7 @@
 import { cloneDeep, get, set } from 'lodash';
 import { getRequestUrl, mergeMetasWithSchema } from '../../../utils';
 
-const getRelationModel = (targetModel, models) => models.find(model => model.uid === targetModel);
+const getRelationModel = (targetModel, models) => models.find((model) => model.uid === targetModel);
 
 // editRelations is an array of strings...
 const formatEditRelationsLayoutWithMetas = (contentTypeConfiguration, models) => {
@@ -46,7 +46,7 @@ const formatLayouts = (initialData, models) => {
   set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
   set(data, ['contentType', 'layouts', 'list'], formattedListLayout);
 
-  Object.keys(data.components).forEach(compoUID => {
+  Object.keys(data.components).forEach((compoUID) => {
     const formattedCompoEditLayout = formatLayoutWithMetas(
       data.components[compoUID],
       ctUid,
@@ -63,7 +63,7 @@ const createMetasSchema = (initialData, models) => {
   const data = mergeMetasWithSchema(cloneDeep(initialData), models, 'contentType');
   const { components, contentType } = data;
 
-  const formatMetadatas = targetSchema => {
+  const formatMetadatas = (targetSchema) => {
     return Object.keys(targetSchema.metadatas).reduce((acc, current) => {
       const schema = get(targetSchema, ['attributes', current], {});
       let metadatas = targetSchema.metadatas[current];
@@ -96,7 +96,7 @@ const createMetasSchema = (initialData, models) => {
 
   set(data, ['contentType', 'metadatas'], formatMetadatas(contentType));
 
-  Object.keys(components).forEach(compoUID => {
+  Object.keys(components).forEach((compoUID) => {
     const currentCompo = components[compoUID];
     const updatedMetas = formatMetadatas(currentCompo);
 
@@ -108,7 +108,7 @@ const createMetasSchema = (initialData, models) => {
 
 const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
   const formatted = contentTypeConfiguration.layouts.edit.reduce((acc, current) => {
-    const row = current.map(attribute => {
+    const row = current.map((attribute) => {
       const fieldSchema = get(contentTypeConfiguration, ['attributes', attribute.name], {});
 
       const data = {
@@ -241,8 +241,8 @@ const generateRelationQueryInfosForComponents = (
   return queryInfos;
 };
 
-const getDisplayedModels = models =>
-  models.filter(model => model.isDisplayed).map(({ uid }) => uid);
+const getDisplayedModels = (models) =>
+  models.filter((model) => model.isDisplayed).map(({ uid }) => uid);
 
 export default formatLayouts;
 export {

package/admin/src/content-manager/hooks/useFindRedirectionLink/index.js

@@ -3,7 +3,7 @@ import { useQueryParams } from '@strapi/helper-plugin';
 import selectMenuLinks from './selectors';
 import getRedirectionLink from './utils/getRedirectionLink';
 
-const useFindRedirectionLink = slug => {
+const useFindRedirectionLink = (slug) => {
   const [{ rawQuery }] = useQueryParams();
   const collectionTypesMenuLinks = useSelector(selectMenuLinks);
   const redirectionLink = getRedirectionLink(collectionTypesMenuLinks, slug, rawQuery);

package/admin/src/content-manager/hooks/useFindRedirectionLink/selectors.js

@@ -1,4 +1,4 @@
-const selectMenuLinks = state => {
+const selectMenuLinks = (state) => {
   const cmState = state['content-manager_app'];
 
   return cmState.collectionTypeLinks;

package/admin/src/content-manager/hooks/useSyncRbac/reducer.js

@@ -12,7 +12,7 @@ export const initialState = {
 
 const rbacManagerReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case SET_PERMISSIONS: {
         draftState.permissions = Object.entries(action.permissions).reduce((acc, current) => {

package/admin/src/content-manager/hooks/useSyncRbac/selectors.js

@@ -1,4 +1,4 @@
-export const selectPermissions = state => state['content-manager_rbacManager'].permissions;
+export const selectPermissions = (state) => state['content-manager_rbacManager'].permissions;
 
-export const selectCollectionTypePermissions = state =>
+export const selectCollectionTypePermissions = (state) =>
   state.rbacProvider.collectionTypesRelatedPermissions;

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -22,19 +22,19 @@ import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
 const matchByTitle = (links, search) =>
-  matchSorter(links, toLower(search), { keys: [item => toLower(item.title)] });
+  matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] });
 
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
   const { formatMessage } = useIntl();
   const modelLinksSelector = useMemo(makeSelectModelLinks, []);
   const { collectionTypeLinks, singleTypeLinks } = useSelector(
-    state => modelLinksSelector(state),
+    (state) => modelLinksSelector(state),
     shallowEqual
   );
 
-  const toIntl = links =>
-    links.map(link => {
+  const toIntl = (links) =>
+    links.map((link) => {
       return {
         ...link,
         title: formatMessage({ id: link.title, defaultMessage: link.title }),
@@ -52,7 +52,7 @@ const LeftMenu = () => {
         defaultMessage: 'Collection Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), object =>
+      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), (object) =>
         object.title.toLowerCase()
       ),
     },
@@ -63,7 +63,7 @@ const LeftMenu = () => {
         defaultMessage: 'Single Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlSingleTypeLinks, search), object =>
+      links: sortBy(matchByTitle(intlSingleTypeLinks, search), (object) =>
         object.title.toLowerCase()
       ),
     },
@@ -96,7 +96,7 @@ const LeftMenu = () => {
         })}
       />
       <SubNavSections>
-        {menu.map(section => {
+        {menu.map((section) => {
           const label = formatMessage(
             { id: section.title.id, defaultMessage: section.title.defaultMessage },
             section.title.values
@@ -108,7 +108,7 @@ const LeftMenu = () => {
               label={label}
               badgeLabel={section.links.length.toString()}
             >
-              {section.links.map(link => {
+              {section.links.map((link) => {
                 const search = link.search ? `?${link.search}` : '';
 
                 return (

package/admin/src/content-manager/pages/App/index.js

@@ -28,7 +28,7 @@ const cmPermissions = permissions.contentManager;
 const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
-  const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], model =>
+  const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], (model) =>
     model.title.toLowerCase()
   );
   const { pathname } = useLocation();
@@ -114,7 +114,7 @@ const App = () => {
 
 export { App };
 
-export default () => {
+export default function () {
   const { formatMessage } = useIntl();
 
   return (
@@ -125,4 +125,4 @@ export default () => {
       <App />
     </>
   );
-};
+}

package/admin/src/content-manager/pages/App/reducer.js

@@ -15,7 +15,7 @@ const initialState = {
 };
 
 const mainReducer = (state = initialState, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case GET_DATA: {
         draftState.status = 'loading';