Merge branch 'develop' into develop

Author: reach2saksham

client/constants.js

@@ -130,8 +130,6 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
 
 export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
-export const SET_ASSETS = 'SET_ASSETS';
-export const DELETE_ASSET = 'DELETE_ASSET';
 
 export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
 export const SET_SORTING = 'SET_SORTING';

client/modules/IDE/actions/assets.js

@@ -1,14 +1,9 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
+import { assetsActions } from '../reducers/assets';
 
-function setAssets(assets, totalSize) {
-  return {
-    type: ActionTypes.SET_ASSETS,
-    assets,
-    totalSize
-  };
-}
+const { setAssets, deleteAsset } = assetsActions;
 
 export function getAssets() {
   return async (dispatch) => {
@@ -26,13 +21,6 @@ export function getAssets() {
   };
 }
 
-export function deleteAsset(assetKey) {
-  return {
-    type: ActionTypes.DELETE_ASSET,
-    key: assetKey
-  };
-}
-
 export function deleteAssetRequest(assetKey) {
   return async (dispatch) => {
     try {

client/modules/IDE/actions/collections.js

@@ -6,7 +6,6 @@ import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
 
-// eslint-disable-next-line
 export function getCollections(username) {
   return (dispatch) => {
     dispatch(startLoader());
@@ -16,8 +15,7 @@ export function getCollections(username) {
     } else {
       url = '/collections';
     }
-    console.log(url);
-    apiClient
+    return apiClient
       .get(url)
       .then((response) => {
         dispatch({

client/modules/IDE/components/AddToCollectionList.jsx

@@ -1,23 +1,19 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
-import * as ProjectActions from '../actions/project';
-import * as ProjectsActions from '../actions/projects';
-import * as CollectionsActions from '../actions/collections';
-import * as ToastActions from '../actions/toast';
-import * as SortingActions from '../actions/sorting';
-import getSortedCollections from '../selectors/collections';
 import Loader from '../../App/components/loader';
+import {
+  addToCollection,
+  getCollections,
+  removeFromCollection
+} from '../actions/collections';
+import getSortedCollections from '../selectors/collections';
 import QuickAddList from './QuickAddList';
 import { remSize } from '../../../theme';
 
-const projectInCollection = (project, collection) =>
-  collection.items.find((item) => item.projectId === project.id) != null;
-
 export const CollectionAddSketchWrapper = styled.div`
   width: ${remSize(600)};
   max-width: 100%;
@@ -31,166 +27,67 @@ export const QuickAddWrapper = styled.div`
   height: 100%;
 `;
 
-class CollectionList extends React.Component {
-  constructor(props) {
-    super(props);
+const AddToCollectionList = ({ projectId }) => {
+  const { t } = useTranslation();
 
-    if (props.projectId) {
-      props.getProject(props.projectId);
-    }
+  const dispatch = useDispatch();
 
-    this.props.getCollections(this.props.user.username);
+  const username = useSelector((state) => state.user.username);
 
-    this.state = {
-      hasLoadedData: false
-    };
-  }
+  const collections = useSelector(getSortedCollections);
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.loading === true && this.props.loading === false) {
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        hasLoadedData: true
-      });
-    }
-  }
+  // TODO: improve loading state
+  const loading = useSelector((state) => state.loading);
+  const [hasLoadedData, setHasLoadedData] = useState(false);
+  const showLoader = loading && !hasLoadedData;
 
-  getTitle() {
-    if (this.props.username === this.props.user.username) {
-      return this.props.t('AddToCollectionList.Title');
-    }
-    return this.props.t('AddToCollectionList.AnothersTitle', {
-      anotheruser: this.props.username
-    });
-  }
+  useEffect(() => {
+    dispatch(getCollections(username)).then(() => setHasLoadedData(true));
+  }, [dispatch, username]);
 
-  handleCollectionAdd = (collection) => {
-    this.props.addToCollection(collection.id, this.props.project.id);
+  const handleCollectionAdd = (collection) => {
+    dispatch(addToCollection(collection.id, projectId));
   };
 
-  handleCollectionRemove = (collection) => {
-    this.props.removeFromCollection(collection.id, this.props.project.id);
+  const handleCollectionRemove = (collection) => {
+    dispatch(removeFromCollection(collection.id, projectId));
   };
 
-  render() {
-    const { collections, project } = this.props;
-    const hasCollections = collections.length > 0;
-    const collectionWithSketchStatus = collections.map((collection) => ({
-      ...collection,
-      url: `/${collection.owner.username}/collections/${collection.id}`,
-      isAdded: projectInCollection(project, collection)
-    }));
-
-    let content = null;
-
-    if (this.props.loading && !this.state.hasLoadedData) {
-      content = <Loader />;
-    } else if (hasCollections) {
-      content = (
-        <QuickAddList
-          items={collectionWithSketchStatus}
-          onAdd={this.handleCollectionAdd}
-          onRemove={this.handleCollectionRemove}
-          t={this.props.t}
-        />
-      );
-    } else {
-      content = this.props.t('AddToCollectionList.Empty');
+  const collectionWithSketchStatus = collections.map((collection) => ({
+    ...collection,
+    url: `/${collection.owner.username}/collections/${collection.id}`,
+    isAdded: collection.items.some((item) => item.projectId === projectId)
+  }));
+
+  const getContent = () => {
+    if (showLoader) {
+      return <Loader />;
+    } else if (collections.length === 0) {
+      return t('AddToCollectionList.Empty');
     }
-
     return (
-      <CollectionAddSketchWrapper>
-        <QuickAddWrapper>
-          <Helmet>
-            <title>{this.getTitle()}</title>
-          </Helmet>
-          {content}
-        </QuickAddWrapper>
-      </CollectionAddSketchWrapper>
+      <QuickAddList
+        items={collectionWithSketchStatus}
+        onAdd={handleCollectionAdd}
+        onRemove={handleCollectionRemove}
+      />
     );
-  }
-}
-
-const ProjectShape = PropTypes.shape({
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  createdAt: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
-  user: PropTypes.shape({
-    username: PropTypes.string.isRequired
-  }).isRequired
-});
-
-const ItemsShape = PropTypes.shape({
-  createdAt: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
-  project: ProjectShape
-});
+  };
 
-CollectionList.propTypes = {
-  user: PropTypes.shape({
-    username: PropTypes.string,
-    authenticated: PropTypes.bool.isRequired
-  }).isRequired,
-  projectId: PropTypes.string.isRequired,
-  getCollections: PropTypes.func.isRequired,
-  getProject: PropTypes.func.isRequired,
-  addToCollection: PropTypes.func.isRequired,
-  removeFromCollection: PropTypes.func.isRequired,
-  collections: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      description: PropTypes.string,
-      createdAt: PropTypes.string.isRequired,
-      updatedAt: PropTypes.string.isRequired,
-      items: PropTypes.arrayOf(ItemsShape)
-    })
-  ).isRequired,
-  username: PropTypes.string,
-  loading: PropTypes.bool.isRequired,
-  project: PropTypes.shape({
-    id: PropTypes.string,
-    owner: PropTypes.shape({
-      id: PropTypes.string
-    })
-  }),
-  t: PropTypes.func.isRequired
+  return (
+    <CollectionAddSketchWrapper>
+      <QuickAddWrapper>
+        <Helmet>
+          <title>{t('AddToCollectionList.Title')}</title>
+        </Helmet>
+        {getContent()}
+      </QuickAddWrapper>
+    </CollectionAddSketchWrapper>
+  );
 };
 
-CollectionList.defaultProps = {
-  project: {
-    id: undefined,
-    owner: undefined
-  },
-  username: undefined
+AddToCollectionList.propTypes = {
+  projectId: PropTypes.string.isRequired
 };
 
-function mapStateToProps(state, ownProps) {
-  return {
-    user: state.user,
-    collections: getSortedCollections(state),
-    sorting: state.sorting,
-    loading: state.loading,
-    project: ownProps.project || state.project,
-    projectId: ownProps && ownProps.params ? ownProps.prams.project_id : null
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators(
-    Object.assign(
-      {},
-      CollectionsActions,
-      ProjectsActions,
-      ProjectActions,
-      ToastActions,
-      SortingActions
-    ),
-    dispatch
-  );
-}
-
-export default withTranslation()(
-  connect(mapStateToProps, mapDispatchToProps)(CollectionList)
-);
+export default AddToCollectionList;

client/modules/IDE/components/IDEOverlays.jsx

@@ -78,10 +78,7 @@ export default function IDEOverlays() {
           actions={<CollectionSearchbar />}
           isFixedHeight
         >
-          <AddToCollectionList
-            projectId={params.project_id}
-            username={params.username}
-          />
+          <AddToCollectionList projectId={params.project_id} />
         </Overlay>
       )}
       {shareModalVisible && (

client/modules/IDE/components/SketchList.jsx

@@ -418,9 +418,7 @@ class SketchList extends React.Component {
             }
           >
             <AddToCollectionList
-              project={this.state.sketchToAddToCollection}
-              username={this.props.username}
-              user={this.props.user}
+              projectId={this.state.sketchToAddToCollection.id}
             />
           </Overlay>
         )}

client/modules/IDE/pages/IDEView.jsx

@@ -102,6 +102,7 @@ const IDEView = () => {
   const [consoleSize, setConsoleSize] = useState(150);
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
+  const [MaxSize, setMaxSize] = useState(window.innerWidth);
 
   const cmRef = useRef({});
 
@@ -146,6 +147,17 @@ const IDEView = () => {
       }
     };
   }, [shouldAutosave, dispatch]);
+  useEffect(() => {
+    const updateInnerWidth = (e) => {
+      setMaxSize(e.target.innerWidth);
+    };
+
+    window.addEventListener('resize', updateInnerWidth);
+
+    return () => {
+      window.removeEventListener('resize', updateInnerWidth);
+    };
+  }, [setMaxSize]);
 
   const consoleCollapsedSize = 29;
   const currentConsoleSize = ide.consoleIsExpanded
@@ -179,6 +191,7 @@ const IDEView = () => {
                 <Sidebar />
                 <SplitPane
                   split="vertical"
+                  maxSize={MaxSize * 0.965}
                   defaultSize="50%"
                   onChange={() => {
                     setIsOverlayVisible(true);