Update file language on renaming.

components/Tabs.tsx

@@ -17,7 +17,7 @@ import {
 } from "./Dialog";
 import { Plus, X } from "phosphor-react";
 import { styled } from "../stitches.config";
-import { capitalize } from "../utils/helpers";
+import { capitalize, getFileExtention } from "../utils/helpers";
 import ContextMenu, { ContentMenuOption } from "./ContextMenu";
 
 const ErrorText = styled(Text, {
@@ -103,7 +103,7 @@ export const Tabs = ({
       if (!tabname) {
         return { error: `Please enter ${label.toLocaleLowerCase()} name.` };
       }
-      let ext = (tabname.includes(".") && tabname.split(".").pop()) || "";
+      let ext = getFileExtention(tabname);
 
       if (!ext && defaultExtension) {
         ext = defaultExtension;
@@ -115,7 +115,7 @@ export const Tabs = ({
       if (extensionRequired && !ext) {
         return { error: "File extension is required!" };
       }
-      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+      if (allowedExtensions && ext && !allowedExtensions.includes(ext)) {
         return { error: "This file extension is not allowed!" };
       }
       if (

pages/develop/[[...slug]].tsx

@@ -10,10 +10,11 @@ import Box from "../../components/Box";
 import Button from "../../components/Button";
 import Popover from "../../components/Popover";
 import RunScript from "../../components/RunScript";
-import state from "../../state";
+import state, { IFile } from "../../state";
 import { compileCode } from "../../state/actions";
 import { getSplit, saveSplit } from "../../state/actions/persistSplits";
 import { styled } from "../../stitches.config";
+import { getFileExtention } from "../../utils/helpers";
 
 const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
   ssr: false,
@@ -148,6 +149,8 @@ const CompilerSettings = () => {
 const Home: NextPage = () => {
   const snap = useSnapshot(state);
 
+  const activeFile = snap.files[snap.active] as IFile | undefined;
+  const activeFileExt = getFileExtention(activeFile?.name);
   return (
     <Split
       direction="vertical"
@@ -156,12 +159,11 @@ const Home: NextPage = () => {
       gutterAlign="center"
       gutterSize={4}
       style={{ height: "calc(100vh - 60px)" }}
-      onDragEnd={(e) => saveSplit("developVertical", e)}
+      onDragEnd={e => saveSplit("developVertical", e)}
     >
       <main style={{ display: "flex", flex: 1, position: "relative" }}>
         <HooksEditor />
-        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
-          "c" && (
+        {activeFileExt === "c" && (
           <Hotkeys
             keyName="command+b,ctrl+b"
             onKeyDown={() =>
@@ -197,8 +199,7 @@ const Home: NextPage = () => {
             </Flex>
           </Hotkeys>
         )}
-        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
-          "js" && (
+        {activeFileExt === "js" && (
           <Hotkeys
             keyName="command+b,ctrl+b"
             onKeyDown={() =>
@@ -216,7 +217,7 @@ const Home: NextPage = () => {
                 gap: "$2",
               }}
             >
-              <RunScript file={snap.files[snap.active]} />
+              <RunScript file={activeFile as IFile} />
             </Flex>
           </Hotkeys>
         )}
@@ -236,8 +237,7 @@ const Home: NextPage = () => {
             logs={snap.logs}
           />
         </Flex>
-        {snap.files[snap.active]?.name?.split(".")?.[1]?.toLowerCase() ===
-          "js" && (
+        {activeFileExt === "js" && (
           <Flex
             css={{
               flex: 1,

state/actions/createNewFile.ts

@@ -1,17 +1,18 @@
+import { getFileExtention } from '../../utils/helpers';
 import state, { IFile } from '../index';
 
-const languageMapping = {
+const languageMapping: Record<string, string | undefined> = {
   'ts': 'typescript',
   'js': 'javascript',
   'md': 'markdown',
   'c': 'c',
   'h': 'c',
-  'other': ''
-} /* Initializes empty file to global state */
+}
+
 export const createNewFile = (name: string) => {
-  const tempName = name.split('.');
-  const fileExt = tempName[tempName.length - 1] || 'other';
-  const emptyFile: IFile = { name, language: languageMapping[fileExt as 'ts' | 'js' | 'md' | 'c' | 'h' | 'other'], content: "" };
+  const ext = getFileExtention(name) || ''
+
+  const emptyFile: IFile = { name, language: languageMapping[ext] || '', content: '' };
   state.files.push(emptyFile);
   state.active = state.files.length - 1;
 };
@@ -20,5 +21,8 @@ export const renameFile = (oldName: string, nwName: string) => {
   const file = state.files.find(file => file.name === oldName)
   if (!file) throw Error(`No file exists with name ${oldName}`)
 
+  const ext = getFileExtention(nwName) || ''
+  const language = languageMapping[ext] || ''
   file.name = nwName
+  file.language = language
 };

utils/helpers.ts

@@ -12,4 +12,10 @@ export const capitalize = (value?: string) => {
     if (!value) return '';
 
     return value[0].toLocaleUpperCase() + value.slice(1);
+}
+
+export const getFileExtention = (filename?: string): string | undefined => {
+    if (!filename) return
+    const ext = (filename.includes('.') && filename.split('.').pop()) || undefined
+    return ext
 }