refactor: note inputs

src/components/settingsInputs.jsx

@@ -14,9 +14,12 @@
  You should have received a copy of the GNU General Public License
  along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
-
+/* eslint-disable react-refresh/only-export-components */
 import { CheckBox } from "./checkbox";
 import { inputStyle, settingsAddInput } from "./styles";
+import { ButtonWithIcon } from "./button";
+import { Complete } from "../components/openai";
+import { DocumentTextIcon } from "@heroicons/react/24/outline";
 
 function SettingsCheckBox({ label, title, className, settingName, onClick }) {
   return (
@@ -109,10 +112,73 @@ function SettingsSection({ name, children }) {
   );
 }
 
+function NoteNameInput({ value, onChange, preview }) {
+  return (
+    <input
+      type="text"
+      className={`mb-2 md:w-1/6 w-full ${inputStyle} ${
+        preview ? "hidden" : ""
+      }`}
+      placeholder={locals.NoteName}
+      maxLength={64}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+
+function NoteTextArea({ value, onChange, preview }) {
+  return (
+    <textarea
+      className={`
+    ${inputStyle}
+    w-full
+    ${preview ? "hidden" : ""}
+  `}
+      rows="10"
+      placeholder={locals.NotePlaceholder}
+      maxLength={5000}
+      onChange={onChange}
+      value={value}
+    ></textarea>
+  );
+}
+
+function NotesAdditionalSettings() {
+  return (
+    <>
+      {settings.additionalFeatures && (
+        <div className="justify-self-start lg:justify-self-start">
+          <SettingsSection name={locals.AdditionalFeatures}>
+            {!!settings.openAiKey && (
+              <ButtonWithIcon
+                icon={DocumentTextIcon}
+                text={locals.AIComplete}
+                className="m-1"
+                w="w-full"
+                onClick={() => {
+                  Complete(setText, textUpdate);
+                }}
+              />
+            )}
+            <SettingsCheckBox
+              label={locals.CollabEdit}
+              settingName="CollabEdit"
+            />
+          </SettingsSection>
+        </div>
+      )}
+    </>
+  );
+}
+
 export {
   SettingsCheckBox,
   SettingsTextInput,
   SettingsSelectInput,
   SettingsSection,
   setSetting,
+  NoteNameInput,
+  NoteTextArea,
+  NotesAdditionalSettings,
 };

src/pages/create.jsx

@@ -16,10 +16,7 @@
  */
 
 import { ButtonWithIcon } from "../components/button";
-import {
+import { ChevronDoubleRightIcon } from "@heroicons/react/24/outline";
-  ChevronDoubleRightIcon,
-  DocumentTextIcon,
-} from "@heroicons/react/24/outline";
 import { CheckBox } from "../components/checkbox";
 import { useState } from "react";
 import RenderMarkdown from "../components/markdown";
@@ -33,11 +30,11 @@ import remarkStringify from "remark-stringify";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import {
+  NoteNameInput,
+  NoteTextArea,
+  NotesAdditionalSettings,
   SettingsCheckBox,
-  SettingsSection,
 } from "../components/settingsInputs";
-import { inputStyle } from "../components/styles";
-import { Complete } from "../components/openai";
 
 function nameUpdate(val, force) {
   if (Date.now() - window.lastSocketUpdate > window.socketTimeout || force) {
@@ -127,13 +124,7 @@ function CreateNote() {
         />
       </div>
 
-      <input
+      <NoteNameInput
-        type="text"
-        className={`mb-2 md:w-1/6 w-full ${inputStyle} ${
-          preview ? "hidden" : ""
-        }`}
-        placeholder={locals.NoteName}
-        maxLength={64}
         value={localStorage.getItem("NoteName") || ""}
         onChange={(e) => {
           setName(e.target.value);
@@ -146,16 +137,11 @@ function CreateNote() {
             }, window.socketTimeout);
           }
         }}
+        preview={preview}
       />
-      <textarea
+
-        className={`
+      <NoteTextArea
-          ${inputStyle}
+        value={localStorage.getItem("NoteText") || ""}
-          w-full
-          ${preview ? "hidden" : ""}
-        `}
-        rows="10"
-        placeholder={locals.NotePlaceholder}
-        maxLength={5000}
         onChange={(e) => {
           setText(e.target.value);
           localStorage.setItem("NoteText", e.target.value);
@@ -167,8 +153,8 @@ function CreateNote() {
             }, window.socketTimeout);
           }
         }}
-        value={localStorage.getItem("NoteText") || ""}
+        preview={preview}
-      ></textarea>
+      />
 
       {preview && (
         <div className="grid grid-cols-1 lg:grid-cols-2">
@@ -213,27 +199,7 @@ function CreateNote() {
           />
         </div>
 
-        {settings.additionalFeatures && (
+        <NotesAdditionalSettings />
-          <div className="justify-self-start lg:justify-self-start">
-            <SettingsSection name={locals.AdditionalFeatures}>
-              {!!settings.openAiKey && (
-                <ButtonWithIcon
-                  icon={DocumentTextIcon}
-                  text={locals.AIComplete}
-                  className="m-1"
-                  w="w-full"
-                  onClick={() => {
-                    Complete(setText, textUpdate);
-                  }}
-                />
-              )}
-              <SettingsCheckBox
-                label={locals.CollabEdit}
-                settingName="CollabEdit"
-              />
-            </SettingsSection>
-          </div>
-        )}
       </div>
     </div>
   );