Refactor file loading and code retrieval logic

app/app/files/edit/page.tsx

@@ -3,6 +3,9 @@
 import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import TextEditor from "@/components/TextEditor";
+import LanguageSelector from "@/components/TextEditor/LanguageSelector";
+import { languages } from "@/components/TextEditor/LanguageSelector/languages";
+
 import BreadCrumbs from "@/components/BreadCrumbs";
 import ServerIcon from "@/components/Icons/Server";
 import FolderIcon from "@/components/Icons/Folder";
@@ -14,6 +17,11 @@ function Page() {
   const serverId = searchParams.get("serverid") || "";
   const path = searchParams.get("path") || "";
   const [code, setCode] = useState("");
+  const [language, setLanguage] = useState("plaintext");
+
+  const setLanguageHandler = (event: any) => {
+    setLanguage(event.target.value);
+  };
 
   useEffect(
     function () {
@@ -36,7 +44,7 @@ function Page() {
 
   return (
     <>
-      <div className="flex mb-4">
+      <div className="flex mb-4 justify-between">
         <BreadCrumbs>
           <li>
             <div className="mr-2">
@@ -72,9 +80,14 @@ function Page() {
               );
             })}
         </BreadCrumbs>
-        <button className="ml-auto btn btn-accent">Save</button>
+        <div className="flex justify-end gap-4">
+          <LanguageSelector onChange={setLanguageHandler} />
+          <button className="ml-auto btn btn-base-100 text-success">
+            Save
+          </button>
         </div>
-      <TextEditor code={code} />
+      </div>
+      <TextEditor code={code} language={language} />
     </>
   );
 }

app/components/TextEditor/LanguageSelector/index.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { languages } from "./languages";
+
+interface LanguageSelectorProps {
+  onChange: (event: any) => void;
+  defaultLanguage?: string;
+}
+
+const Index = (props: LanguageSelectorProps) => {
+  const { onChange } = props;
+  let { defaultLanguage } = props;
+
+  if (!defaultLanguage) {
+    defaultLanguage = "plaintext";
+  }
+
+  const [selectedLanguage, setSelectedLanguage] =
+    useState<string>(defaultLanguage);
+
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedLanguage(event.target.value);
+    onChange(event);
+  };
+
+  return (
+    <select
+      className="select bg-base-200 text-base-content w-full max-w-xs"
+      value={selectedLanguage}
+      onChange={handleChange}
+    >
+      {Object.entries(languages).map(([key, value]) => (
+        <option
+          disabled={selectedLanguage === key}
+          selected={selectedLanguage === key}
+          key={key}
+          value={key}
+        >
+          {value}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Index;