Merge pull request #14 from matheoleger/refacto

chore: move components to renderer/components
matheoleger · Apr 11, 2023 · a2a7b86 · a2a7b86
2 parents 9dc54cd + d542c18
commit a2a7b86
Show file tree

Hide file tree

Showing 20 changed files with 360 additions and 353 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,43 +1,43 @@
-import React, { useEffect } from "react";
-import { NewPrez } from "./components/NewPrez";
-import "./assets/css/App.css";
-import { HashRouter, Route, Routes } from "react-router-dom";
-import { SideBar } from "./components/SideBar";
-import { Home } from "./components/Home";
-import { Presentation } from "./components/Presentation";
-import { SlideViewer } from "./renderer/components/SlideViewer";
-import "highlight.js/styles/github.css";
-import { DualScreen } from "./renderer/components/DualScreen";
+import React, { useEffect } from 'react';
+import { NewPrez } from './renderer/pages/NewPrez';
+import './assets/css/App.css';
+import { HashRouter, Route, Routes } from 'react-router-dom';
+import { SideBar } from './renderer/components/SideBar';
+import { Home } from './renderer/pages/Home';
+import { Presentation } from './renderer/pages/Presentation';
+import { SlideViewer } from './renderer/pages/SlideViewer';
+import 'highlight.js/styles/github.css';
+import { DualScreen } from './renderer/pages/DualScreen';
 
 function App() {
-    useEffect(() => {
-        document.title = "CodePrez";
-    }, []);
-    return (
-        <div
-            style={{
-                backgroundColor: "#3A3939",
-                width: "100%",
-                height: "100%",
-            }}
-        >
-            <link
-                rel="stylesheet"
-                href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
-            />
-            <HashRouter>
-                <Routes>
-                    <Route path="/" Component={SideBar}>
-                        <Route path="/" Component={Home}></Route>
-                        <Route path="/add" Component={NewPrez}></Route>
-                        <Route path="/prez" Component={Presentation}></Route>
-                    </Route>
-                    <Route path="/viewer" Component={SlideViewer}></Route>
-                    <Route path="/dualScreen" Component={DualScreen}></Route>
-                </Routes>
-            </HashRouter>
-        </div>
-    );
+  useEffect(() => {
+    document.title = 'CodePrez';
+  }, []);
+  return (
+    <div
+      style={{
+        backgroundColor: '#3A3939',
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+      />
+      <HashRouter>
+        <Routes>
+          <Route path="/" Component={SideBar}>
+            <Route path="/" Component={Home}></Route>
+            <Route path="/add" Component={NewPrez}></Route>
+            <Route path="/prez" Component={Presentation}></Route>
+          </Route>
+          <Route path="/viewer" Component={SlideViewer}></Route>
+          <Route path="/dualScreen" Component={DualScreen}></Route>
+        </Routes>
+      </HashRouter>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
diff --git a/src/components/Presentation.tsx b/src/components/Presentation.tsx
diff --git a/src/components/Slide.tsx b/src/components/Slide.tsx
diff --git a/src/main/markdownRenderer.ts b/src/main/markdownRenderer.ts
@@ -7,11 +7,11 @@ import Token from "markdown-it/lib/token";
 import Renderer from "markdown-it/lib/renderer";
 
 type RendererRulesArguments = {
-    tokens: Token[], 
-    idx: number, 
-    options: MarkdownIt.Options, 
-    env: any, 
-    self: Renderer, 
+    tokens: Token[],
+    idx: number,
+    options: MarkdownIt.Options,
+    env: any,
+    self: Renderer,
     presentationPath: string
 }
 
@@ -26,7 +26,7 @@ export function markdownRenderer(presentationPath: string) {
         highlight: function (str: string, lang: string) {
             if (lang && hljs.getLanguage(lang)) {
                 try {
-                    if(lang == "bash") {
+                    if (lang === "bash") {
                         return (
                             '<pre class="hljs executable-command"><code class="command-to-execute">' +
                             hljs.highlight(str, {
@@ -45,7 +45,7 @@ export function markdownRenderer(presentationPath: string) {
                             "</code></pre>"
                         );
                     }
-                } catch (__) {}
+                } catch (__) { }
             }
 
             return (
@@ -59,15 +59,15 @@ export function markdownRenderer(presentationPath: string) {
     const md = MarkdownIt(markdownOptions);
 
     //Include images
-    md.renderer.rules.image = (tokens, idx, options, env, self) => imageRendererRules({tokens, idx, options, env, self, presentationPath});
+    md.renderer.rules.image = (tokens, idx, options, env, self) => imageRendererRules({ tokens, idx, options, env, self, presentationPath });
 
     //Include code via file
-    md.renderer.rules.link_open = (tokens, idx, options, env, self) => linkRendererRules({tokens, idx, options, env, self, presentationPath})
+    md.renderer.rules.link_open = (tokens, idx, options, env, self) => linkRendererRules({ tokens, idx, options, env, self, presentationPath })
 
     return md;
 }
 
-const imageRendererRules = ({tokens, idx, options, env, self, presentationPath}: RendererRulesArguments) => {
+const imageRendererRules = ({ tokens, idx, options, env, self, presentationPath }: RendererRulesArguments) => {
     const token = tokens[idx];
 
     const src = token.attrGet("src");
@@ -79,8 +79,8 @@ const imageRendererRules = ({tokens, idx, options, env, self, presentationPath}:
     const imageType = (imageTypeMatch) ? imageTypeMatch[0].slice(1) : "png";
 
     try {
-        if(src?.match(regexForSrc)) {
-            const imageContents = fs.readFileSync(path.join(presentationPath, src ?? ""), {encoding: 'base64'});
+        if (src?.match(regexForSrc)) {
+            const imageContents = fs.readFileSync(path.join(presentationPath, src ?? ""), { encoding: 'base64' });
             token.attrSet('src', `data:image/${imageType};base64,${imageContents}`)
         } else {
             token.attrSet('src', src ?? "")
@@ -92,23 +92,23 @@ const imageRendererRules = ({tokens, idx, options, env, self, presentationPath}:
     return self.renderToken(tokens, idx, options)
 }
 
-const linkRendererRules = ({tokens, idx, options, env, self, presentationPath}: RendererRulesArguments) => {
+const linkRendererRules = ({ tokens, idx, options, env, self, presentationPath }: RendererRulesArguments) => {
     const token = tokens[idx];
 
     const href = token.attrGet("href")
     const regexPathFile = /^\.\/(.+\.\w+)/gm;
     const relativeCodeFilePath = href?.match(regexPathFile) ?? [];
 
-    if(relativeCodeFilePath.length) {
+    if (relativeCodeFilePath.length) {
         const codeFilePath = path.join(presentationPath, relativeCodeFilePath[0] ?? "")
-        return codeFileRendererRules({codeFilePath: codeFilePath, href});
+        return codeFileRendererRules({ codeFilePath: codeFilePath, href });
     } else {
         return self.renderToken(tokens, idx, options);
     }
 
 }
 
-const codeFileRendererRules = ({codeFilePath, href}: CodeFileRendererRulesArguments) => {
+const codeFileRendererRules = ({ codeFilePath, href }: CodeFileRendererRulesArguments) => {
 
     const regexLineNumber = /#(\d+)-(\d+)/;
     const regexFileExtension = /\.(\w+)(?:#\d+-\d+)?$/;
@@ -119,18 +119,18 @@ const codeFileRendererRules = ({codeFilePath, href}: CodeFileRendererRulesArgume
 
     const fileExtension = href?.match(regexFileExtension) ?? [];
 
-    const file = fs.readFileSync(codeFilePath, { encoding: 'utf8' });    
-    const lines = file.split("\n").slice(Number(startNumber)-1, Number(endNumber));
+    const file = fs.readFileSync(codeFilePath, { encoding: 'utf8' });
+    const lines = file.split("\n").slice(Number(startNumber) - 1, Number(endNumber));
 
     const codeToDisplay = (lineNumbers.length) ? lines.join("\n") : file;
 
     // I must use a concatenate string instead of `` because of tabulation and break line
     return (
         "<pre class='hljs'><code>" +
-            hljs.highlight(codeToDisplay, {
-                    language: fileExtension[1] || "",
-                    ignoreIllegals: true,
-                }).value +
+        hljs.highlight(codeToDisplay, {
+            language: fileExtension[1] || "",
+            ignoreIllegals: true,
+        }).value +
         "</code></pre>"
-    )   
+    )
 }
diff --git a/src/main/openAndCloseCodePrezFiles.ts b/src/main/openAndCloseCodePrezFiles.ts
@@ -12,7 +12,6 @@ const decompressCodePrezArchive = async (
 ) => {
     try {
         const files = await decompress(archivePath, presentationPath);
-        // console.log(files.find((file) => file.path == "presentation.md")?.data.toString());
         return files;
     } catch (e) {
         console.error(e);
@@ -32,16 +31,16 @@ export const openCodePrezArchive = async (archivePath: string) => {
     if (!files) return;
 
     const presentationFileContent = files
-        .find((file) => file.path == "presentation.md")
+        .find((file) => file.path === "presentation.md")
         ?.data.toString();
 
     const plainPresentationConfig = files
-        .find((file) => file.path == "config.json")
+        .find((file) => file.path === "config.json")
         ?.data.toString();
     const presentationConfig = JSON.parse(plainPresentationConfig ?? "{}");
 
     const presentationStyle = files
-        .find((file) => file.path == "style.css")
+        .find((file) => file.path === "style.css")
         ?.data.toString();
 
     return { presentationConfig, presentationFileContent, presentationPath, presentationStyle };
@@ -52,7 +51,7 @@ export const deleteCodePrezTempFolder = async () => {
 
     try {
         fs.rmSync(presentationPath, { recursive: true });
-    } catch(e) {
+    } catch (e) {
         console.error(e);
         return;
     }

diff --git a/src/components/ButtonAddFile.tsx → src/renderer/components/ButtonAddFile.tsx b/src/components/ButtonAddFile.tsx → src/renderer/components/ButtonAddFile.tsx
@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler } from 'react';
-import '../assets/css/ButtonAddFile.css';
+import '../../assets/css/ButtonAddFile.css';
 interface ButtonAddFileProps {
   title: string;
   action: MouseEventHandler;