From 65bd4b2ff736af3c24ea178637da4b57d501c5a7 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Mon, 3 Aug 2020 13:52:07 -0400
Subject: [PATCH] [#1526] Refactor FileName component

- Create function parseFileName to separate a file name into first
  letter, last letter, middle, extension
---
 client/modules/IDE/components/FileNode.jsx | 52 ++++++++++++++--------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 7bfaa5de..4e54460b 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -10,39 +10,53 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
 import FileIcon from '../../../images/file.svg';
 
-function FileName({ name }) {
+function parseFileName(name) {
   const nameArray = name.split('.');
   if (nameArray.length > 1) {
     const extension = `.${nameArray[nameArray.length - 1]}`;
-    const fileName = nameArray.slice(0, -1).join('');
-    const firstLetter = fileName[0];
-    const lastLetter = fileName[fileName.length - 1];
-    const middleText = fileName.slice(1, -1);
-    return (
-      <span className="sidebar__file-item-name-text">
-        <span>{firstLetter}</span>
-        {fileName.length > 2 &&
-          <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
-        }
-        {fileName.length > 1 &&
-          <span>{lastLetter}</span>
-        }
-        <span>{extension}</span>
-      </span>
-    );
+    const baseName = nameArray.slice(0, -1).join('');
+    const firstLetter = baseName[0];
+    const lastLetter = baseName[baseName.length - 1];
+    const middleText = baseName.slice(1, -1);
+    return {
+      baseName,
+      firstLetter,
+      lastLetter,
+      middleText,
+      extension
+    };
   }
   const firstLetter = name[0];
   const lastLetter = name[name.length - 1];
   const middleText = name.slice(1, -1);
+  return {
+    baseName: name,
+    firstLetter,
+    lastLetter,
+    middleText
+  };
+}
+
+function FileName({ name }) {
+  const {
+    baseName,
+    firstLetter,
+    lastLetter,
+    middleText,
+    extension
+  } = parseFileName(name);
   return (
     <span className="sidebar__file-item-name-text">
       <span>{firstLetter}</span>
-      {name.length > 2 &&
+      {baseName.length > 2 &&
         <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
       }
-      {name.length > 1 &&
+      {baseName.length > 1 &&
         <span>{lastLetter}</span>
       }
+      {extension &&
+        <span>{extension}</span>
+      }
     </span>
   );
 }