More Components with MillionJS

- Using MillionJS to optimize soo much

components/CodeBoard.tsx

@@ -5,20 +5,21 @@ import CodeMirror from '@uiw/react-codemirror';
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
 import { tags as t } from '@lezer/highlight';
 
+
 // React
 import React from 'react';
 
 // Props
-interface CodeBoardProps {
+type CodeBoardProps = {
   language?: Function | any;
   code?: string;
   theme?: 'light' | 'dark' | string;
   onChange?: Function | any;
   readOnly?: boolean;
   height?: string;
   width?: string;
-  style?: any
-}
+  styleProp?: any
+};
 
 const CodeBoard: React.FC<CodeBoardProps> = ({
   language,
@@ -28,12 +29,12 @@ const CodeBoard: React.FC<CodeBoardProps> = ({
   readOnly,
   height,
   width,
-  style
+  styleProp
 }) => {
   return (
     <>
       <CodeMirror
-        style={style}
+
         placeholder="Paste your code here."
         theme={
           theme == 'light'
@@ -68,6 +69,7 @@ const CodeBoard: React.FC<CodeBoardProps> = ({
                 ],
               })
         }
+        style={styleProp || { pointerEvents: 'auto' }}
         value={code}
         width={width || 'auto'}
         height={height || '200px'}

components/CreateModal.tsx

@@ -0,0 +1,132 @@
+// NextJS Stuff
+import { ChangeEvent, FormEvent } from 'react';
+
+// Styles
+import styles from '../styles/Index.module.css';
+
+// Icons
+import { FaBackward, FaCloudUploadAlt } from 'react-icons-ng/fa';
+
+// Our Imports
+import { extensions } from '../utils/extensions';
+import { BoardFile } from '../utils/board';
+
+type CreateModalProps = {
+  files: BoardFile[];
+  setFiles: Function;
+  uploadFile: Function;
+};
+
+const CreateModal: React.FC<CreateModalProps> = (
+  { files, setFiles, uploadFile }
+) => {
+  function updateLanguage(e: ChangeEvent<HTMLInputElement>) {
+    const value = e.target.value;
+    const box = document.getElementsByClassName('language-show')[0] as HTMLElement;
+
+    const l =
+      extensions.find((x) =>
+        x.key.includes('.' + value.replace('.', '^').split('^')[1])
+      )?.name || 'none';
+
+    box.innerHTML = l.charAt(0).toUpperCase() + l.slice(1);
+  }
+
+  function handleUpload(event: ChangeEvent<HTMLInputElement>) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = event.target;
+
+    const fls = (target as EventTarget & HTMLInputElement).files;
+    uploadFile(fls);
+  }
+
+  // Add File ---------------------------------
+  function newFile(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const dialog = document.querySelector<HTMLDialogElement>('dialog#newFile');
+    const box = document.getElementsByClassName('language-show')[0] as HTMLElement;
+
+    // @ts-ignore
+    if (event.target[0].value == '') return dialog.close();
+    // @ts-ignore
+    const name = event.target[0].value;
+
+    dialog.close(name);
+
+    if (!name) return alert('Provide a valid name !');
+    if (files.find((a) => a.name === name))
+      return alert('Name already taken !');
+    else {
+      setFiles((f) => [
+        ...f,
+        {
+          name: name,
+          language: (box.innerText || box.textContent).toLowerCase(),
+          value: '',
+        },
+      ]);
+    }
+  }
+
+  return (
+    <dialog id="newFile" open={false}>
+      <div>
+        <button
+          title="Back"
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+          onClick={() => {
+            document.querySelector<HTMLDialogElement>('#newFile').close();
+          }}
+          className={styles.denyCreate}>
+          <FaBackward title="Back" />
+        </button>
+        <h2>Add new file</h2>
+        <label
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+          }}
+          className={styles.upload}>
+          <input
+            type="file"
+            id="file-upload"
+            title="Upload"
+            multiple={false}
+            onChange={(event) => {
+              handleUpload(event);
+              document.querySelector<HTMLDialogElement>('#newFile').close();
+            }}
+          />
+          <FaCloudUploadAlt title="Upload" />
+        </label>
+      </div>
+
+      <form method="dialog" onSubmit={(event) => newFile(event)}>
+        <input
+          autoComplete="off"
+          onChange={(event) => updateLanguage(event)}
+          className="file-name"
+          name="filename"
+          type="text"
+          placeholder="untitled.js"></input>
+        <p>
+          <span className="language-show">Javascript</span>
+        </p>
+
+        <button title="Create new file" className={styles.create}>
+          Create
+        </button>
+      </form>
+    </dialog>
+  );
+};
+
+export default CreateModal;
+// Didnt use Million.block as it breaks its not updating the elements at onChange

components/DropZone.tsx

@@ -0,0 +1,60 @@
+// Styles
+import styles from '../styles/Index.module.css';
+
+// Icons
+import { FaCloudUploadAlt, FaWindowClose } from 'react-icons-ng/fa';
+
+// Our Imports
+import { BoardFile } from '../utils/board';
+
+type DropZoneProps = {
+  files?: BoardFile[];
+  drag?: boolean;
+};
+
+const DropZone: React.FC<DropZoneProps> = ({ files, drag }) => {
+
+  return (
+    <div
+      className={[styles.dropzone, styles.backdrop, drag ? 'droppy' : ''].join(
+        ' '
+      )}>
+      <div className={[styles.dropNotif, 'dropNotif'].join(' ')}>
+        <h2>{files.length >= 2 ? 'Oh no' : 'Drop it.'}</h2>
+        <p>
+          {files.length >= 2
+            ? "You've reached the file limit."
+            : "We'll handle the rest !"}
+        </p>
+        <div
+          className={styles.fileUploadBox}
+          style={{
+            border: `3px dashed ${
+              files.length >= 2 ? 'var(--red)' : 'var(--background-darker)'
+            }`,
+            color: files.length >= 2 ? 'var(--red)' : 'var(--special-color)',
+          }}>
+          <span style={{ fontSize: '64px', color: 'var(--special-color)' }}>
+            {files.length >= 2 ? (
+              <FaWindowClose
+                title="Not Allowed"
+                style={{ color: 'var(--red)' }}
+              />
+            ) : (
+              <FaCloudUploadAlt />
+            )}
+          </span>
+          <p>
+            {files.length >= 2
+              ? `There is a limit of 2 files per board at the moment. So we will not process this file. Delete one file and drop again.`
+              : ` We only accept program files and not images/audio/video. Just
+                drop it we will handle the rest.`}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DropZone;
+// Didnt use Million.block as it breaks its block rules

components/EditModal.tsx

@@ -0,0 +1,120 @@
+// ReactJS stuff
+import { ChangeEvent } from 'react';
+
+// Our Imports
+import { BoardFile } from '../utils/board';
+import { extensions } from '../utils/extensions';
+
+type FileSelectProps = {
+  fileName?: string;
+  setFileName?: Function;
+  currentFile?: BoardFile;
+  files?: BoardFile[];
+  setFiles?: Function;
+};
+
+const EditModal: React.FC<FileSelectProps> = ({
+  fileName,
+  setFileName,
+  currentFile,
+  files,
+  setFiles
+}) => {
+  function closeEdit() {
+    const div = document.querySelectorAll(`div.edit`);
+    const back = document.querySelector<HTMLElement>(`.backdrop`);
+
+    div.forEach((cls) => {
+      (cls as HTMLElement).style['display'] = 'none';
+    });
+    back.style['display'] = 'none';
+  }
+
+  function edit(event) {
+    event.preventDefault();
+    closeEdit();
+
+    const input = document.querySelector<HTMLInputElement>(
+      `.edit-${fileName.replaceAll('.', '-')}.edit form input`
+    );
+    if (!input) return;
+    const name = input.value;
+
+    const file = files.find((a) => a.name == fileName);
+
+    const box = document.getElementsByClassName(`${fileName}-language`)[0];
+
+    if (!name) return;
+    if (files.find((a) => a.name === name))
+      return alert('Name already taken !');
+    else {
+      file.name = name;
+      file.language = (
+        (box as HTMLElement).innerText || box.textContent
+      ).toLowerCase();
+
+      setFileName(name);
+    }
+  }
+
+  function updateEditLanguage(e: ChangeEvent<HTMLInputElement>, old) {
+    const value = e.target.value;
+    const box = document.getElementsByClassName(`${old}-language`)[0];
+
+    if (!box) return;
+
+    const language =
+      extensions.find((x) =>
+        x.key.includes('.' + value.replace('.', '^').split('^')[1])
+      )?.name ||
+      extensions.find((x) =>
+        x.key.includes('.' + value.split('.')[value.split('.').length - 1])
+      )?.name ||
+      'none';
+
+    box.innerHTML = language.charAt(0).toUpperCase() + language.slice(1);
+  }
+
+  function deleteFile(name: string) {
+    const removed = files.filter(function (item) {
+      return item.name !== name;
+    });
+
+    setFileName(removed[0].name);
+
+    setFiles(removed);
+  }
+
+  return (
+    <div className={`edit-${currentFile.name.replaceAll('.', '-')} edit`}>
+      {' '}
+      <form className="editForm" onSubmit={(event) => edit(event)}>
+        <input
+          onChange={(event) => updateEditLanguage(event, currentFile.name)}
+          className="file-name"
+          name="filename"
+          type="text"
+          placeholder={currentFile.name}
+          autoComplete="off"></input>
+        <p>
+          <span
+            className={['language-show-edit', currentFile.name + '-language'].join(
+              ' '
+            )}>
+            {currentFile.language.charAt(0).toUpperCase() + currentFile.language.slice(1)}
+          </span>
+        </p>
+
+        <button
+          title="Delete the file"
+          disabled={files.length == 1}
+          onClick={() => setTimeout(() => deleteFile(currentFile.name), 400)}>
+          Delete
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default EditModal;
+// Didnt use Million.block as it completely breaks apart