From a49f83418fdc60a268846afb38661e1ebc689d1a Mon Sep 17 00:00:00 2001
From: Linda Paiste <lindapaiste@gmail.com>
Date: Sun, 13 Aug 2023 17:12:54 -0500
Subject: [PATCH] move ProjectName to a separate file

---
 .../IDE/components/Header/ProjectName.jsx     | 28 +++++++++++++++++++
 .../modules/IDE/components/Header/Toolbar.jsx | 16 ++---------
 2 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 client/modules/IDE/components/Header/ProjectName.jsx

diff --git a/client/modules/IDE/components/Header/ProjectName.jsx b/client/modules/IDE/components/Header/ProjectName.jsx
new file mode 100644
index 0000000000..489a2105ac
--- /dev/null
+++ b/client/modules/IDE/components/Header/ProjectName.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { useSketchActions } from '../../hooks';
+import { selectProjectName } from '../../selectors/project';
+import EditableInput from '../EditableInput';
+
+export default function ProjectName() {
+  const { t } = useTranslation();
+
+  const { changeSketchName, canEditProjectName } = useSketchActions();
+
+  const projectName = useSelector(selectProjectName);
+
+  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={changeSketchName}
+    />
+  );
+}
diff --git a/client/modules/IDE/components/Header/Toolbar.jsx b/client/modules/IDE/components/Header/Toolbar.jsx
index eb0689e303..dc3731cec6 100644
--- a/client/modules/IDE/components/Header/Toolbar.jsx
+++ b/client/modules/IDE/components/Header/Toolbar.jsx
@@ -15,12 +15,11 @@ import {
   setGridOutput,
   setTextOutput
 } from '../../actions/preferences';
-import { useSketchActions } from '../../hooks';
 
 import PlayIcon from '../../../../images/play.svg';
 import StopIcon from '../../../../images/stop.svg';
 import PreferencesIcon from '../../../../images/preferences.svg';
-import EditableInput from '../EditableInput';
+import ProjectName from './ProjectName';
 
 const Toolbar = (props) => {
   const { isPlaying, infiniteLoop, preferencesIsVisible } = useSelector(
@@ -31,7 +30,6 @@ const Toolbar = (props) => {
   const dispatch = useDispatch();
 
   const { t } = useTranslation();
-  const { changeSketchName, canEditProjectName } = useSketchActions();
 
   const playButtonClass = classNames({
     'toolbar__play-button': true,
@@ -96,17 +94,7 @@ const Toolbar = (props) => {
         </label>
       </div>
       <div className="toolbar__project-name-container">
-        <EditableInput
-          value={project.name}
-          disabled={!canEditProjectName}
-          aria-label={t('Toolbar.EditSketchARIA')}
-          inputProps={{
-            maxLength: 128,
-            'aria-label': t('Toolbar.NewSketchNameARIA')
-          }}
-          validate={(text) => text.trim().length > 0}
-          onChange={changeSketchName}
-        />
+        <ProjectName />
         {(() => {
           if (project.owner) {
             return (