Merge pull request #2390 from dewanshDT/dewanshmobile/stuff

The My stuff Page in mobile 🧸

Author: lindapaiste

client/common/icons.jsx

@@ -18,12 +18,12 @@ import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
-
 import Folder from '../images/folder-padded.svg';
-
 import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
+import Add from '../images/add.svg';
+import Filter from '../images/filter.svg';
 import Cross from '../images/cross.svg';
 
 // HOC that adds the right web accessibility props
@@ -100,3 +100,5 @@ export const CrossIcon = withLabel(Cross);
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
+export const AddIcon = withLabel(Add);
+export const FilterIcon = withLabel(Filter);

client/images/add.svg

@@ -11,6 +11,10 @@ import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../../../images/more.svg';
+
+const formatDateCell = (date, mobile = false) =>
+  dates.format(date, { showTime: !mobile });
 
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
@@ -146,7 +150,11 @@ class CollectionListRowBase extends React.Component {
             'CollectionListRow.ToggleCollectionOptionsARIA'
           )}
         >
-          <DownFilledTriangleIcon title="Menu" />
+          {this.props.mobile ? (
+            <MoreIconSvg focusable="false" aria-hidden="true" />
+          ) : (
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          )}
         </button>
         {optionsOpen && (
           <ul className="sketch-list__action-dialogue">
@@ -228,16 +236,10 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
+        <td>{formatDateCell(collection.createdAt, mobile)}</td>
+        <td>{formatDateCell(collection.updatedAt, mobile)}</td>
         <td>
-          {mobile && 'Created: '}
-          {dates.format(collection.createdAt)}
-        </td>
-        <td>
-          {mobile && 'Updated: '}
-          {dates.format(collection.updatedAt)}
-        </td>
-        <td>
-          {mobile && '# sketches: '}
+          {mobile && 'sketches: '}
           {(collection.items || []).length}
         </td>
         <td className="sketch-list__dropdown-column">{this.renderActions()}</td>

client/images/filter.svg

@@ -2,7 +2,6 @@ import React, { useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
 import { sortBy } from 'lodash';
 import classNames from 'classnames';
@@ -15,6 +14,7 @@ import AsteriskIcon from '../../../../images/p5-asterisk.svg';
 import IconButton from '../../../../components/mobile/IconButton';
 import {
   AccountIcon,
+  AddIcon,
   EditorIcon,
   MoreIcon,
   CrossIcon
@@ -26,14 +26,15 @@ import {
   showKeyboardShortcutModal
 } from '../../actions/ide';
 import { logoutUser } from '../../../User/actions';
-import { useSketchActions } from '../../hooks';
+import { useSketchActions, useWhatPage } from '../../hooks';
 import { CmControllerContext } from '../../pages/IDEView';
 import { selectSketchPath } from '../../selectors/project';
 import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
 import Overlay from '../../../App/components/Overlay';
 import ProjectName from './ProjectName';
+import CollectionCreate from '../../../User/components/CollectionCreate';
 
 const Nav = styled(NavBar)`
   background: ${prop('MobilePanel.default.background')};
@@ -80,7 +81,7 @@ const Title = styled.div`
   }
 `;
 
-const Options = styled.div`
+export const Options = styled.div`
   margin-left: auto;
   display: flex;
   /* transform: translateX(${remSize(12)}); */
@@ -202,33 +203,28 @@ const MobileNav = () => {
 
   const { t } = useTranslation();
 
-  const { pathname } = useLocation();
   const editorLink = useSelector(selectSketchPath);
+  const pageName = useWhatPage();
 
   // TODO: remove the switch and use a props like mobileTitle <Nav layout=“dashboard” mobileTitle={t(‘Login’)} />
   function resolveTitle() {
-    switch (pathname) {
-      case '/':
-        return project.name;
-      case '/login':
+    switch (pageName) {
+      case 'login':
         return t('LoginView.Login');
-      case '/signup':
+      case 'signup':
         return t('LoginView.SignUp');
-      case '/account':
+      case 'account':
         return t('AccountView.Settings');
-      case '/p5/sketches':
-      case '/p5/collections':
+      case 'examples':
         return t('Nav.File.Examples');
-      case `/${user.username}/assets`:
-      case `/${user.username}/collections`:
-      case `/${user.username}/sketches`:
+      case 'myStuff':
         return 'My Stuff';
       default:
         return project.name;
     }
   }
 
-  const title = useMemo(resolveTitle, [project, pathname]);
+  const title = useMemo(resolveTitle, [pageName]);
 
   const Logo = AsteriskIcon;
   return (
@@ -242,10 +238,9 @@ const MobileNav = () => {
           <h5>by {project?.owner?.username}</h5>
         )}
       </Title>
-
       {/* check if the user is in login page */}
-      {pathname === '/login' || pathname === '/signup' ? (
-        // showing the login page
+      {pageName === 'login' || pageName === 'signup' ? (
+        // showing the CrossIcon
         <Options>
           <div>
             <Link to={editorLink}>
@@ -254,8 +249,9 @@ const MobileNav = () => {
           </div>
         </Options>
       ) : (
+        // Menus for other pages
         <Options>
-          {/* checking if user is logged in or not */}
+          {pageName === 'myStuff' && <StuffMenu />}
           {user.authenticated ? (
             <AccountMenu />
           ) : (
@@ -280,6 +276,39 @@ const MobileNav = () => {
   );
 };
 
+const StuffMenu = () => {
+  const { isOpen, handlers } = useMenuProps('stuff');
+  const { newSketch } = useSketchActions();
+
+  const [createCollectionVisible, setCreateCollectionVisible] = useState(false);
+
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <IconButton icon={AddIcon} {...handlers} />
+      <ul className={isOpen ? 'opened' : ''}>
+        <ParentMenuContext.Provider value="stuff">
+          <NavMenuItem onClick={() => newSketch()}>
+            {t('DashboardView.NewSketch')}
+          </NavMenuItem>
+          <NavMenuItem onClick={() => setCreateCollectionVisible(true)}>
+            {t('DashboardView.CreateCollection')}
+          </NavMenuItem>
+        </ParentMenuContext.Provider>
+      </ul>
+      {createCollectionVisible && (
+        <Overlay
+          title={t('DashboardView.CreateCollectionOverlay')}
+          closeOverlay={() => setCreateCollectionVisible(false)}
+        >
+          <CollectionCreate />
+        </Overlay>
+      )}
+    </div>
+  );
+};
+
 const AccountMenu = () => {
   const user = useSelector((state) => state.user);
   const dispatch = useDispatch();

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -23,6 +23,7 @@ import getConfig from '../../../utils/getConfig';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../../images/more.svg';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -198,7 +199,11 @@ class SketchListRowBase extends React.Component {
           onFocus={this.onFocusComponent}
           aria-label={this.props.t('SketchList.ToggleLabelARIA')}
         >
-          <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          {this.props.mobile ? (
+            <MoreIconSvg focusable="false" aria-hidden="true" />
+          ) : (
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          )}
         </button>
         {optionsOpen && (
           <ul className="sketch-list__action-dialogue">
@@ -311,14 +316,8 @@ class SketchListRowBase extends React.Component {
           onClick={this.handleRowClick}
         >
           <th scope="row">{name}</th>
-          <td>
-            {mobile && 'Created: '}
-            {formatDateCell(sketch.createdAt, mobile)}
-          </td>
-          <td>
-            {mobile && 'Updated: '}
-            {formatDateCell(sketch.updatedAt, mobile)}
-          </td>
+          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
+          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>

client/modules/IDE/components/Header/MobileNav.jsx

@@ -1 +1,2 @@
 export { default as useSketchActions } from './useSketchActions';
+export { default as useWhatPage } from './useWhatPage';

client/modules/IDE/components/SketchList.jsx

@@ -29,6 +29,7 @@ export default function useKeyDownHandlers(keyHandlers) {
    * @type {(function(KeyboardEvent): void)}
    */
   const handleEvent = useCallback((e) => {
+    if (!e.key) return;
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {

client/modules/IDE/hooks/index.js

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+/**
+ *
+ * @returns {"home" | "myStuff" | "login" | "signup" | "account" | "examples"}
+ */
+const useWhatPage = () => {
+  const username = useSelector((state) => state.user.username);
+  const { pathname } = useLocation();
+
+  const pageName = useMemo(() => {
+    const myStuffPattern = new RegExp(
+      `(/${username}/(sketches/?$|collections|assets)/?)`
+    );
+
+    if (myStuffPattern.test(pathname)) return 'myStuff';
+    else if (pathname === '/login') return 'login';
+    else if (pathname === '/signup') return 'signup';
+    else if (pathname === '/account') return 'account';
+    else if (pathname === '/p5/collections' || pathname === '/p5/sketches')
+      return 'examples';
+    return 'home';
+  }, [pathname, username]);
+
+  return pageName;
+};
+
+export default useWhatPage;

client/modules/IDE/hooks/useKeyDownHandlers.js

@@ -1,7 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import MediaQuery from 'react-responsive';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { FilterIcon } from '../../../common/icons';
+import IconButton from '../../../components/mobile/IconButton';
+import { Options } from '../../IDE/components/Header/MobileNav';
+import { toggleDirectionForField } from '../../IDE/actions/sorting';
 
 export const TabKey = {
   assets: 'assets',
@@ -31,8 +38,19 @@ Tab.propTypes = {
   to: PropTypes.string.isRequired
 };
 
+// It is good for right now, because we need to separate the nav dropdown logic from the navBar before we can use it here
+const FilterOptions = styled(Options)`
+  > div > button:focus + ul,
+  > div > ul > button:focus ~ div > ul {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+
 const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+
   return (
     <ul className="dashboard-header__switcher">
       <div className="dashboard-header__tabs">
@@ -57,6 +75,56 @@ const DashboardTabSwitcher = ({ currentTab, isOwner, username }) => {
           </Tab>
         )}
       </div>
+      <MediaQuery maxWidth={770}>
+        {(mobile) =>
+          mobile &&
+          currentTab !== TabKey.assets && (
+            <FilterOptions>
+              <div>
+                <IconButton icon={FilterIcon} />
+                <ul>
+                  <li>
+                    <button
+                      onClick={() => dispatch(toggleDirectionForField('name'))}
+                    >
+                      {t('CollectionList.HeaderName')}
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      onClick={() =>
+                        dispatch(toggleDirectionForField('createdAt'))
+                      }
+                    >
+                      {t('CollectionList.HeaderCreatedAt')}
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      onClick={() =>
+                        dispatch(toggleDirectionForField('updatedAt'))
+                      }
+                    >
+                      {t('CollectionList.HeaderUpdatedAt')}
+                    </button>
+                  </li>
+                  {currentTab === TabKey.collections && (
+                    <li>
+                      <button
+                        onClick={() =>
+                          dispatch(toggleDirectionForField('numItems'))
+                        }
+                      >
+                        {t('CollectionList.HeaderNumItems')}
+                      </button>
+                    </li>
+                  )}
+                </ul>
+              </div>
+            </FilterOptions>
+          )
+        }
+      </MediaQuery>
     </ul>
   );
 };