Merge branch 'develop' into piyush/fix-direct-modification-html

Author: raclim

client/components/SkipLink.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const SkipLink = ({ targetId, text }) => {
+  const [focus, setFocus] = useState(false);
+  const { t } = useTranslation();
+  const handleFocus = () => {
+    setFocus(true);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+  };
+  const linkClasses = classNames('skip_link', { focus });
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={linkClasses}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {t(`SkipLink.${text}`)}
+    </a>
+  );
+};
+
+SkipLink.propTypes = {
+  targetId: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default SkipLink;

client/components/createRedirectWithUsername.jsx

@@ -1,29 +1,24 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import browserHistory from '../browserHistory';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
-  React.useEffect(() => {
-    if (username == null) {
-      return;
+const RedirectToUser = ({ url = '/:username/sketches' }) => {
+  const history = useHistory();
+  const username = useSelector((state) =>
+    state.user ? state.user.username : null
+  );
+  useEffect(() => {
+    if (username) {
+      history.replace(url.replace(':username', username));
     }
-
-    browserHistory.replace(url.replace(':username', username));
-  }, [username]);
+  }, [history, url, username]);
 
   return null;
 };
 
-function mapStateToProps(state) {
-  return {
-    username: state.user ? state.user.username : null
-  };
-}
-
-const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
-
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+RedirectToUser.propTypes = {
+  url: PropTypes.string.isRequired
+};
 
-export default createRedirectWithUsername;
+export default RedirectToUser;

client/constants.js

@@ -52,8 +52,6 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
-export const CONSOLE_EVENT = 'CONSOLE_EVENT';
-export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
@@ -140,3 +138,6 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
+
+export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';

client/index.jsx

@@ -9,6 +9,7 @@ import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
+import SkipLink from './components/SkipLink';
 
 require('./styles/main.scss');
 
@@ -23,6 +24,7 @@ const App = () => (
   <Provider store={store}>
     <ThemeProvider>
       <Router history={browserHistory}>
+        <SkipLink targetId="play-sketch" text="PlaySketch" />
         <Routing />
       </Router>
     </ThemeProvider>

client/modules/IDE/actions/console.js

@@ -1,14 +1 @@
-import * as ActionTypes from '../../../constants';
-
-export function clearConsole() {
-  return {
-    type: ActionTypes.CLEAR_CONSOLE
-  };
-}
-
-export function dispatchConsoleEvent(messages) {
-  return {
-    type: ActionTypes.CONSOLE_EVENT,
-    event: messages
-  };
-}
+export { dispatchConsoleEvent, clearConsole } from '../reducers/console';

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

@@ -4,14 +4,88 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
+import styled from 'styled-components';
 import MenuItem from '../../../../components/Dropdown/MenuItem';
 import TableDropdown from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
+import { remSize, prop } from '../../../../theme';
 
+const SketchsTableRow = styled.tr`
+  &&& {
+    margin: ${remSize(10)};
+    height: ${remSize(72)};
+    font-size: ${remSize(16)};
+  }
+  &:nth-child(odd) {
+    background: ${prop('tableRowStripeColor')};
+  }
+
+  > th:nth-child(1) {
+    padding-left: ${remSize(12)};
+  }
+
+  > td {
+    padding-left: ${remSize(8)};
+  }
+
+  a {
+    color: ${prop('primaryTextColor')};
+  }
+
+  &.is-deleted > * {
+    font-style: italic;
+  }
+  @media (max-width: 770px) {
+    &&& {
+      margin: 0;
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      padding: ${remSize(15)};
+      height: fit-content;
+      gap: ${remSize(8)};
+      border: 1px solid ${prop('modalBorderColor')};
+      background-color: ${prop('searchBackgroundColor')};
+      > th {
+        padding-left: 0;
+        width: 100%;
+        font-weight: bold;
+        margin-bottom: ${remSize(6)};
+      }
+      > td {
+        padding-left: 0;
+        width: 30%;
+        font-size: ${remSize(14)};
+        color: ${prop('modalBorderColor')};
+      }
+    }
+  }
+`;
+const SketchesTableName = styled.span`
+  &&& {
+    display: flex;
+    align-items: center;
+  }
+`;
+const SketchlistDropdownColumn = styled.td`
+  &&& {
+    position: relative;
+    width: ${remSize(60)};
+  }
+  @media (max-width: 770px) {
+    &&& {
+      position: absolute;
+      top: 0;
+      right: ${remSize(4)};
+      width: auto !important;
+      margin: ${remSize(8)};
+    }
+  }
+`;
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
@@ -66,6 +140,7 @@ const CollectionListRowBase = (props) => {
 
   const handleRenameEnter = (e) => {
     if (e.key === 'Enter') {
+      e.preventDefault();
       updateName();
       closeAll();
     }
@@ -113,7 +188,7 @@ const CollectionListRowBase = (props) => {
           <input
             value={renameValue}
             onChange={handleRenameChange}
-            onKeyUp={handleRenameEnter}
+            onKeyDown={handleRenameEnter}
             onBlur={handleRenameBlur}
             onClick={(e) => e.stopPropagation()}
             ref={renameInput}
@@ -126,18 +201,18 @@ const CollectionListRowBase = (props) => {
   const { collection, mobile } = props;
 
   return (
-    <tr className="sketches-table__row" key={collection.id}>
+    <SketchsTableRow key={collection.id}>
       <th scope="row">
-        <span className="sketches-table__name">{renderCollectionName()}</span>
+        <SketchesTableName>{renderCollectionName()}</SketchesTableName>
       </th>
       <td>{formatDateCell(collection.createdAt, mobile)}</td>
       <td>{formatDateCell(collection.updatedAt, mobile)}</td>
       <td>
         {mobile && 'sketches: '}
         {(collection.items || []).length}
       </td>
-      <td className="sketch-list__dropdown-column">{renderActions()}</td>
-    </tr>
+      <SketchlistDropdownColumn>{renderActions()}</SketchlistDropdownColumn>
+    </SketchsTableRow>
   );
 };
 

client/modules/IDE/components/Editor/index.jsx

@@ -137,7 +137,7 @@ class Editor extends React.Component {
           asi: true,
           eqeqeq: false,
           '-W041': false,
-          esversion: 7
+          esversion: 11
         }
       },
       colorpicker: {

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

@@ -61,6 +61,7 @@ const Toolbar = (props) => {
       </button>
       <button
         className={playButtonClass}
+        id="play-sketch"
         onClick={() => {
           props.syncFileContent();
           dispatch(startSketch());

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,71 +1,65 @@
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
 import { throttle } from 'lodash';
 import { withTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
-class Searchbar extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchValue: this.props.searchTerm
-    };
-    this.throttledSearchChange = throttle(this.searchChange, 500);
-  }
+const Searchbar = ({
+  searchTerm,
+  setSearchTerm,
+  resetSearchTerm,
+  searchLabel,
+  t
+}) => {
+  const [searchValue, setSearchValue] = useState(searchTerm);
 
-  componentWillUnmount() {
-    this.props.resetSearchTerm();
-  }
+  const throttledSearchChange = useCallback(
+    throttle((value) => {
+      setSearchTerm(value.trim());
+    }, 500),
+    []
+  );
 
-  handleResetSearch = () => {
-    this.setState({ searchValue: '' }, () => {
-      this.props.resetSearchTerm();
-    });
+  const handleResetSearch = () => {
+    setSearchValue('');
+    resetSearchTerm();
   };
 
-  searchChange = () => {
-    this.props.setSearchTerm(this.state.searchValue.trim());
+  const handleSearchChange = (e) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    throttledSearchChange(value.trim());
   };
 
-  handleSearchChange = (e) => {
-    this.setState({ searchValue: e.target.value }, () => {
-      this.throttledSearchChange(this.state.searchValue.trim());
-    });
-  };
+  useEffect(() => {
+    setSearchValue(searchTerm);
+  }, [searchTerm]);
 
-  render() {
-    const { searchValue } = this.state;
-    return (
-      <div
-        className={`searchbar ${
-          searchValue === '' ? 'searchbar--is-empty' : ''
-        }`}
-      >
-        <div className="searchbar__button">
-          <SearchIcon
-            className="searchbar__icon"
-            focusable="false"
-            aria-hidden="true"
-          />
-        </div>
-        <input
-          className="searchbar__input"
-          type="text"
-          value={searchValue}
-          placeholder={this.props.searchLabel}
-          onChange={this.handleSearchChange}
+  return (
+    <div
+      className={`searchbar ${searchValue === '' ? 'searchbar--is-empty' : ''}`}
+    >
+      <div className="searchbar__button">
+        <SearchIcon
+          className="searchbar__icon"
+          focusable="false"
+          aria-hidden="true"
         />
-        <button
-          className="searchbar__clear-button"
-          onClick={this.handleResetSearch}
-        >
-          {this.props.t('Searchbar.ClearTerm')}
-        </button>
       </div>
-    );
-  }
-}
+      <input
+        className="searchbar__input"
+        type="text"
+        value={searchValue}
+        placeholder={searchLabel}
+        onChange={handleSearchChange}
+      />
+      <button className="searchbar__clear-button" onClick={handleResetSearch}>
+        {t('Searchbar.ClearTerm')}
+      </button>
+    </div>
+  );
+};
 
 Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,