Merge branch 'develop' into fixes-#2221/random-character-getting-deleted

Author: raclim

client/components/AddRemoveButton.jsx

@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"

client/components/NavBasic.jsx

@@ -2,7 +2,6 @@
 // multiple files
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
-
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 

client/components/OverlayManager.jsx

@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
 import translations from '../translations/locales/en-US/translations.json';
 
 i18n.use(initReactI18next).init({

client/components/PreviewNav.jsx

@@ -28,7 +28,12 @@ function EditableInput({
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current?.focus();
+      const inputElement = inputRef.current;
+      inputElement.setSelectionRange(
+        inputElement.value.length,
+        inputElement.value.length
+      );
+      inputElement.focus();
     }
   }, [isEditing]);
   React.useEffect(() => {

client/constants.js

@@ -10,7 +10,7 @@ import * as FileActions from '../actions/files';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
-import FileIcon from '../../../images/file.svg';
+import FileTypeIcon from './FileTypeIcon';
 
 function parseFileName(name) {
   const nameArray = name.split('.');
@@ -256,6 +256,7 @@ class FileNode extends React.Component {
     const isRoot = this.props.name === 'root';
 
     const { t } = this.props;
+    const { extension } = parseFileName(this.props.name);
 
     return (
       <div className={itemClass}>
@@ -267,7 +268,11 @@ class FileNode extends React.Component {
             <span className="file-item__spacer"></span>
             {isFile && (
               <span className="sidebar__file-item-icon">
-                <FileIcon focusable="false" aria-hidden="true" />
+                <FileTypeIcon
+                  fileExtension={extension}
+                  focusable="false"
+                  aria-hidden="true"
+                />
               </span>
             )}
             {isFolder && (

client/i18n-test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoLogoHtml5, IoLogoCss3, IoLogoJavascript } from 'react-icons/io';
+import { TbFileTypeXml, TbTxt, TbCsv } from 'react-icons/tb';
+import { VscJson } from 'react-icons/vsc';
+import FileIcon from '../../../images/file.svg';
+
+export default function FileTypeIcon({ fileExtension }) {
+  switch (fileExtension) {
+    case '.html':
+      return (
+        <span>
+          <IoLogoHtml5 />
+        </span>
+      );
+    case '.css':
+      return (
+        <span>
+          <IoLogoCss3 />
+        </span>
+      );
+    case '.js':
+      return (
+        <span>
+          <IoLogoJavascript />
+        </span>
+      );
+    case '.json':
+      return (
+        <span>
+          <VscJson />
+        </span>
+      );
+    case '.xml':
+      return (
+        <span>
+          <TbFileTypeXml />
+        </span>
+      );
+    case '.txt':
+      return (
+        <span>
+          <TbTxt />
+        </span>
+      );
+    case '.csv':
+      return (
+        <span>
+          <TbCsv />
+        </span>
+      );
+    default:
+      return <FileIcon focusable="false" aria-hidden="true" />;
+  }
+}
+
+FileTypeIcon.propTypes = {
+  fileExtension: PropTypes.string.isRequired
+};

client/modules/IDE/components/EditableInput.jsx

@@ -238,7 +238,9 @@ const MobileNav = () => {
       <Title>
         <h1>{title === project.name ? <ProjectName /> : title}</h1>
         {project?.owner && title === project.name && (
-          <h5>by {project?.owner?.username}</h5>
+          <Link to={`/${project.owner.username}/sketches`}>
+            by {project?.owner?.username}
+          </Link>
         )}
       </Title>
       {/* check if the user is in login page */}