Add leftmenu

packages/strapi-helper-plugin/lib/src/components/StyledLeftMenu/index.js

@@ -1,103 +0,0 @@
-/**
- *
- * StyledLeftMenu
- *
- */
-
-import styled from 'styled-components';
-
-import colors from '../../assets/styles/colors';
-import sizes from '../../assets/styles/sizes';
-
-const StyledLeftMenu = styled.div`
-  width: 100%;
-  min-height: calc(100vh - ${sizes.header.height});
-  background-color: ${colors.leftMenu.mediumGrey};
-  padding-top: 0.5rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  h3 {
-    margin: 0;
-    padding-left: 1rem;
-    line-height: 1.3rem;
-    color: #919bae;
-    letter-spacing: 0.1rem;
-    font-family: Lato;
-    font-size: 1.1rem;
-    font-weight: bold;
-    text-transform: uppercase;
-  }
-  section {
-    margin-top: 3.2rem;
-    font-size: 1.3rem;
-    ul.menu-list {
-      margin-top: 1.1rem;
-      padding: 0;
-      font-size: 1.3rem;
-      list-style-type: none;
-      li {
-        margin-bottom: 0.2rem;
-      }
-      button,
-      a {
-        padding: 0.9rem 1rem;
-        width: 100%;
-        outline: none;
-        p {
-          position: relative;
-          display: flex;
-          justify-content: space-between;
-          width: 100%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          line-height: 1.6rem;
-          padding-left: ${sizes.margin * 2.2}px;
-          margin-bottom: 0;
-          span {
-            font-style: italic;
-            &:first-of-type {
-              text-transform: capitalize;
-              font-style: inherit;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              margin-right: 5px;
-            }
-          }
-          i {
-            position: absolute;
-            left: 0;
-            margin-right: 1rem;
-          }
-        }
-      }
-      button {
-        i {
-          top: calc(50% - ${sizes.margin * 0.6}px);
-        }
-      }
-      a {
-        display: block;
-        text-decoration: none;
-        p {
-          color: ${colors.leftMenu.black};
-        }
-        i {
-          font-size: 11px;
-          top: calc(50% - ${sizes.margin * 0.5}px);
-          color: ${colors.leftMenu.grey};
-        }
-        &.active {
-          background-color: ${colors.leftMenu.lightGrey};
-          font-weight: 700;
-          i {
-            color: ${colors.leftMenu.black};
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default StyledLeftMenu;

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from 'react';
+import React, { memo, useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { request, LoadingIndicatorPage } from 'strapi-helper-plugin';
 import DataManagerContext from '../../contexts/DataManagerContext';
@@ -12,12 +12,15 @@ const DataManagerProvider = ({ children }) => {
   const { signal } = abortController;
 
   const [reducerState, dispatch] = useReducer(reducer, initialState, init);
-  const { isLoading } = reducerState.toJS();
+  const { components, contentTypes, isLoading } = reducerState.toJS();
 
   useEffect(() => {
     const getData = async () => {
-      const [{ data: componentsArray }] = await Promise.all(
-        ['components'].map(endPoint => {
+      const [
+        { data: componentsArray },
+        { data: contentTypesArray },
+      ] = await Promise.all(
+        ['components', 'content-types'].map(endPoint => {
           return request(`/${pluginId}/${endPoint}`, {
             method: 'GET',
             signal,
@@ -28,14 +31,23 @@ const DataManagerProvider = ({ children }) => {
       dispatch({
         type: 'GET_DATA_SUCCEEDED',
         components: createDataObject(componentsArray),
+        contentTypes: createDataObject(contentTypesArray),
       });
     };
 
     getData();
-  }, [signal]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  console.log({ contentTypes, components });
 
   return (
-    <DataManagerContext.Provider>
+    <DataManagerContext.Provider
+      value={{
+        components,
+        contentTypes,
+      }}
+    >
       {isLoading ? <LoadingIndicatorPage /> : children}
     </DataManagerContext.Provider>
   );
@@ -45,4 +57,4 @@ DataManagerProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default DataManagerProvider;
+export default memo(DataManagerProvider);

packages/strapi-plugin-content-type-builder/admin/src/containers/DataManagerProvider/reducer.js

@@ -2,6 +2,7 @@ import { fromJS } from 'immutable';
 
 const initialState = fromJS({
   components: {},
+  contentTypes: {},
   isLoading: true,
 });
 
@@ -10,6 +11,7 @@ const reducer = (state, action) => {
     case 'GET_DATA_SUCCEEDED':
       return state
         .update('components', () => fromJS(action.components))
+        .update('contentTypes', () => fromJS(action.contentTypes))
         .update('isLoading', () => false);
     default:
       return state;

packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js

@@ -4,89 +4,33 @@
  *
  */
 
-import React, { useContext } from 'react';
-import { FormattedMessage } from 'react-intl';
+import React from 'react';
 import { groupBy } from 'lodash';
 
 import { LeftMenuList } from 'strapi-helper-plugin';
-
 import pluginId from '../../pluginId';
-
-import MenuContext from '../../containers/MenuContext';
 import CustomLink from '../../components/CustomLink';
+import useDataManager from '../../hooks/useDataManager';
 import Wrapper from './Wrapper';
 
-const displayNotificationCTNotSaved = () => {
-  strapi.notification.info(
-    `${pluginId}.notification.info.contentType.creating.notSaved`
-  );
-};
+// const displayNotificationCTNotSaved = () => {
+//   strapi.notification.info(
+//     `${pluginId}.notification.info.contentType.creating.notSaved`
+//   );
+// };
 
 function LeftMenu() {
-  const { canOpenModal, groups, models, push } = useContext(MenuContext);
-
-  const getComponents = () => {
-    // TODO : Replace groupsBy param with category when available
-    const componentsObj = groupBy(groups, 'uid');
-
-    return Object.keys(componentsObj).map(key => {
-      const links = [
-        ...componentsObj[key].map(compo => {
-          return {
-            ...compo,
-            to: getLinkRoute('components', compo, key),
-            title: getLinkTitle(compo),
-          };
-        }),
-      ];
-
-      return { name: key, links };
-    });
-  };
-
-  const notSavedLabel = () => {
-    return <FormattedMessage id={`${pluginId}.contentType.temporaryDisplay`} />;
-  };
-
-  const getLinkRoute = (param, item, category = null) => {
-    const { name, source, uid } = item;
-
-    const cat = category ? `${category}/` : '';
-    const base = `/plugins/${pluginId}/${param}/${cat}${uid || name}`;
-    const to = source ? `${base}&source=${source}` : base;
-
-    return to;
-  };
-
-  const getLinkTitle = item => {
-    const { name, isTemporary } = item;
-    return (
-      <p>
-        <span>{name}</span>
-        {isTemporary && notSavedLabel()}
-      </p>
-    );
-  };
-
-  const openCreateModal = type => {
-    if (canOpenModal) {
-      push({
-        search: `modalType=${type}&settingType=base&actionType=create`,
-      });
-    } else {
-      displayNotificationCTNotSaved();
-    }
-  };
-
-  const getModels = [
-    ...models.map(model => {
-      return {
-        ...model,
-        to: getLinkRoute('models', model),
-        title: getLinkTitle(model),
-      };
-    }),
-  ];
+  const { components, contentTypes } = useDataManager();
+  const grouped = groupBy(components, 'category');
+  const componentsData = Object.keys(grouped).map(category => ({
+    name: category,
+    title: category,
+    links: grouped[category].map(compo => ({
+      name: compo.uid,
+      to: `/plugins/${pluginId}/component-categories/${category}/${compo.uid}`,
+      title: compo.schema.name,
+    })),
+  }));
 
   const data = [
     {
@@ -99,10 +43,14 @@ function LeftMenu() {
         Component: CustomLink,
         componentProps: {
           id: `${pluginId}.button.model.create`,
-          onClick: () => openCreateModal('model'),
+          onClick: () => {},
         },
       },
-      links: getModels,
+      links: Object.keys(contentTypes).map(uid => ({
+        name: uid,
+        title: contentTypes[uid].schema.name,
+        to: `/plugins/${pluginId}/content-types/${uid}`,
+      })),
     },
     {
       name: 'components',
@@ -114,10 +62,10 @@ function LeftMenu() {
         Component: CustomLink,
         componentProps: {
           id: `${pluginId}.button.component.create`,
-          onClick: () => openCreateModal('group'),
+          onClick: () => {},
         },
       },
-      links: getComponents(),
+      links: componentsData,
     },
   ];
 

packages/strapi-plugin-content-type-builder/admin/src/containers/ListPage/index.js

@@ -1,11 +1,18 @@
 import React from 'react';
+import { ViewContainer } from 'strapi-helper-plugin';
+import LeftMenu from '../LeftMenu';
 
-const ListPage = props => {
-  console.log(props);
-  React.useEffect(() => {
-    console.log('moiutn');
-  }, []);
-  return <div>Coming soon</div>;
+const ListPage = () => {
+  return (
+    <ViewContainer>
+      <div className="container-fluid">
+        <div className="row">
+          <LeftMenu />
+          <div className="col-md-9">List here</div>
+        </div>
+      </div>
+    </ViewContainer>
+  );
 };
 
 export default ListPage;