Move to separate files.

Author: lindapaiste

client/modules/IDE/components/Toolbar.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { setAutorefresh } from '../../actions/preferences';
+
+export default function AutoRefreshCheckbox() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const autorefresh = useSelector((state) => state.preferences.autorefresh);
+
+  return (
+    <div className="toolbar__autorefresh">
+      <input
+        id="autorefresh"
+        className="checkbox__autorefresh"
+        type="checkbox"
+        checked={autorefresh}
+        onChange={(event) => {
+          dispatch(setAutorefresh(event.target.checked));
+        }}
+      />
+      <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
+        {t('Toolbar.Auto-refresh')}
+      </label>
+    </div>
+  );
+}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { saveProject, setProjectName } from '../../actions/project';
+import { selectProjectId, selectProjectName } from '../../selectors/project';
+import { selectCanEditSketch } from '../../selectors/users';
+import EditableInput from '../EditableInput';
+
+export default function EditableProjectName() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const projectId = useSelector(selectProjectId);
+  const projectName = useSelector(selectProjectName);
+  const canEditProjectName = useSelector(selectCanEditSketch);
+
+  const handleProjectNameSave = (value) => {
+    const newProjectName = value.trim();
+    dispatch(setProjectName(newProjectName));
+    if (projectId) {
+      dispatch(saveProject());
+    }
+  };
+
+  return (
+    <EditableInput
+      value={projectName}
+      disabled={!canEditProjectName}
+      aria-label={t('Toolbar.EditSketchARIA')}
+      inputProps={{
+        maxLength: 128,
+        'aria-label': t('Toolbar.NewSketchNameARIA')
+      }}
+      validate={(text) => text.trim().length > 0}
+      onChange={handleProjectNameSave}
+    />
+  );
+}

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

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import PlayIcon from '../../../../images/play.svg';
+import { startAccessibleSketch, startSketch } from '../../actions/ide';
+import { setGridOutput, setTextOutput } from '../../actions/preferences';
+
+export default function PlayButton({ syncFileContent }) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const isPlaying = useSelector((state) => state.ide.isPlaying);
+  const infiniteLoop = useSelector((state) => state.ide.infiniteLoop);
+
+  return (
+    <>
+      <button
+        className="toolbar__play-sketch-button"
+        onClick={() => {
+          syncFileContent();
+          dispatch(startAccessibleSketch());
+          dispatch(setTextOutput(true));
+          dispatch(setGridOutput(true));
+        }}
+        aria-label={t('Toolbar.PlaySketchARIA')}
+        disabled={infiniteLoop}
+      >
+        <PlayIcon focusable="false" aria-hidden="true" />
+      </button>
+      <button
+        className={classNames(
+          'toolbar__play-button',
+          isPlaying && 'toolbar__play-button--selected'
+        )}
+        onClick={() => {
+          syncFileContent();
+          dispatch(startSketch());
+        }}
+        aria-label={t('Toolbar.PlayOnlyVisualSketchARIA')}
+        disabled={infiniteLoop}
+      >
+        <PlayIcon focusable="false" aria-hidden="true" />
+      </button>
+    </>
+  );
+}
+
+PlayButton.propTypes = {
+  syncFileContent: PropTypes.func.isRequired
+};

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

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import PreferencesIcon from '../../../../images/preferences.svg';
+import { openPreferences } from '../../actions/ide';
+
+export default function PreferencesButton() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const preferencesIsVisible = useSelector(
+    (state) => state.ide.preferencesIsVisible
+  );
+
+  return (
+    <button
+      className={classNames(
+        'toolbar__preferences-button',
+        preferencesIsVisible && 'toolbar__preferences-button--selected'
+      )}
+      onClick={() => dispatch(openPreferences())}
+      aria-label={t('Toolbar.OpenPreferencesARIA')}
+    >
+      <PreferencesIcon focusable="false" aria-hidden="true" />
+    </button>
+  );
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router';
+import { selectProjectOwner } from '../../selectors/project';
+
+export default function ProjectOwner() {
+  const { t } = useTranslation();
+
+  const owner = useSelector(selectProjectOwner);
+
+  if (!owner) return null;
+
+  return (
+    <p className="toolbar__project-owner">
+      {t('Toolbar.By')}{' '}
+      <Link to={`/${owner.username}/sketches`}>{owner.username}</Link>
+    </p>
+  );
+}