feat: create codeprez file

index.ts

@@ -1,5 +1,7 @@
 import { app, BrowserWindow } from 'electron';
 import { join } from "path";
+import { createArchive } from './src/main/createArchive';
+import { openFileDialog, saveFileDialog } from './src/main/dialogs';
 
 const createWindow = () => {
     const win = new BrowserWindow({
@@ -19,7 +21,19 @@ const createWindow = () => {
     } else {
         win.loadURL("http://localhost:3000");
     }
-    win.maximize();  
+    win.maximize();
+
+    // Add File
+    win.webContents.ipc.on('open-dialog', async (e, data) => {
+        const file = await openFileDialog(data.type);
+        win.webContents.send('set-file', file);
+    })
+
+    // Create .CodePrez with files
+    win.webContents.ipc.on('create-codeprez', async (e, data) => {
+        const file = (await saveFileDialog())!;
+        await createArchive(data, file);
+    })
 
     return win;
 }

package.json

@@ -7,10 +7,12 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
+    "@types/archiver": "^5.3.2",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "archiver": "^5.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.tsx

@@ -1,25 +1,12 @@
 import React from 'react';
-import logo from './assets/logo.svg';
+import { NewPrez } from './components/NewPrez';
 import './assets/css/App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <div
+      style={{ backgroundColor: '#3A3939', width: '100%', height: '100%' }}
+    ></div>
   );
 }
 

src/assets/css/index.css

@@ -1,6 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
 :root {
+  width:100%;
+  height:100%;
   --black-grey: #1B1B1B;
   --dark-grey: #3A3939;
   --light-grey: #5F5F5F;
@@ -15,6 +17,8 @@
 
 body {
   margin: 0;
+  width:100%;
+  height: 100vh;
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -25,6 +29,16 @@ body {
   color: var(--white);
 }
 
+h1 {
+  border:#B4B4B4 1px solid;
+  text-align: center;
+  color: white;
+  padding:0.5em 1em;
+  margin:10px;
+  border-radius: 10px;
+}
+
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/components/ButtonAddFile.css

@@ -0,0 +1,38 @@
+.file-info {
+    background-color: rgba(199, 198, 198, 0.076) ;
+    width:300px;
+    padding : 0.5em 1em;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: self-end;
+    justify-content: space-between;
+    align-items:center;
+}
+
+.file-info>button{
+    text-align: center;
+    width: 40px;
+    height: 40px;
+    padding-top: 5px;
+    border:none;
+    background-color: var(--light-grey);
+    border-radius: 10px;
+    color:white;
+}
+.file-info>button:hover{
+    background-color: var(--pink);
+    cursor: pointer;
+}
+
+.label-choose-file {
+    color:var(--light-grey);
+    font-style: italic;
+}
+
+.label-filename {
+    color: var(--pink);
+    font-weight: 800;
+
+}

src/components/ButtonAddFile.tsx

@@ -0,0 +1,30 @@
+import { FC, MouseEventHandler } from 'react';
+import './ButtonAddFile.css';
+interface ButtonAddFileProps {
+  title: string;
+  action: MouseEventHandler;
+  fileName: string;
+}
+export const ButtonAddFile: FC<ButtonAddFileProps> = ({
+  title,
+  action,
+  fileName,
+}) => {
+  return (
+    <div className="file-info">
+      <div className="name">
+        <p>{title}</p>
+        <p className={fileName ? 'label-filename' : 'label-choose-file'}>
+          {fileName ? fileName : 'Aucun fichier sélectionné'}
+        </p>
+      </div>
+      <button onClick={action} className="add">
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+        />
+        <span className="material-symbols-outlined">add</span>
+      </button>
+    </div>
+  );
+};

src/components/NewPrez.css

@@ -0,0 +1,56 @@
+.new-prez {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: white;
+    margin:100px;
+}
+
+.principal-infos {
+    display: flex;
+    flex-wrap: wrap;
+    gap:50px;
+    justify-content: center;
+    align-items:last baseline;
+}
+
+.principal-infos>.info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.principal-infos>.info>input{
+    -webkit-appearance: none;
+    padding: 10px 10px 10px 10px;
+    border:none;
+    color:white;
+    background-color: #5F5F5F;
+    border-radius: 5px;
+}
+
+.block-files{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2em;
+    margin: 1em 0;
+}
+
+
+
+
+.sendingButton{
+    cursor: pointer;
+    border:none;
+    border-radius: 10px;
+    padding: 1em 2em;
+    background-color: var(--pink);
+}
+
+.error{
+    margin:1em;
+    color:red;
+}

src/components/NewPrez.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import React from 'react';
+import './NewPrez.css';
+import { ButtonAddFile } from './ButtonAddFile';
+
+export const NewPrez = () => {
+  const [title, setTitle] = useState('');
+  const [duration, setDuration] = useState('');
+  const [participants, setParticipants] = useState('');
+
+  const [markdownFile, setMarkdownFile] = useState<string>('');
+  const [cssFile, setCssFile] = useState<string>('');
+  const [assetsFile, setAssetsFile] = useState<string>('');
+  const [envFile, setEnvFile] = useState<string>('');
+
+  const [error, setError] = useState<boolean>(false);
+
+  const getFileName = (filePath: string) => {
+    const arrayString = filePath.split('/');
+    return arrayString[arrayString.length - 1];
+  };
+
+  const openMarkdownFile = () => {
+    window.api.openFileDialog('md', setMarkdownFile);
+  };
+
+  const openCssFile = () => {
+    window.api.openFileDialog('css', setCssFile);
+  };
+
+  const openEnvFile = () => {
+    window.api.openFileDialog('env', setEnvFile);
+  };
+
+  const openAssetsFile = () => {
+    window.api.openFileDialog('assets', setAssetsFile);
+  };
+
+  const createCodePrez = () => {
+    if (!cssFile || !markdownFile || !title) {
+      setError(true);
+      return;
+    }
+    window.api.createCodePrez({
+      assetsDirectoryPath: assetsFile,
+      cssFilePath: cssFile,
+      duration,
+      envDirectoryPath: envFile,
+      mdFilePath: markdownFile,
+      participants,
+      title,
+    });
+  };
+  return (
+    <div className="new-prez">
+      <h1>Nouvelle Présentation</h1>
+
+      <div className="principal-infos">
+        <div className="info">
+          <label>Titre de la présentation *</label>
+          <input
+            type="text"
+            placeholder="Titre..."
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+        <div className="info">
+          <label>Durée</label>
+          <input
+            type="text"
+            placeholder="Durée..."
+            value={duration}
+            onChange={(e) => setDuration(e.target.value)}
+          />
+        </div>
+        <div className="info">
+          <label>Participants</label>
+          <input
+            type="text"
+            placeholder="Participants..."
+            value={participants}
+            onChange={(e) => setParticipants(e.target.value)}
+          />
+        </div>
+      </div>
+      <div className="block-files">
+        <ButtonAddFile
+          title="Fichier Markdown (.md) *"
+          action={openMarkdownFile}
+          fileName={markdownFile ? getFileName(markdownFile) : ''}
+        ></ButtonAddFile>
+        <ButtonAddFile
+          title="Fichier CSS (.css) *"
+          action={openCssFile}
+          fileName={cssFile ? getFileName(cssFile) : ''}
+        ></ButtonAddFile>
+        <ButtonAddFile
+          title="Dossier Assets (images, etc.)"
+          action={openAssetsFile}
+          fileName={assetsFile ? getFileName(assetsFile) : ''}
+        ></ButtonAddFile>
+        <ButtonAddFile
+          title="Dossier Env"
+          action={openEnvFile}
+          fileName={envFile ? getFileName(envFile) : ''}
+        ></ButtonAddFile>
+      </div>
+      <p>* Champs requis</p>
+      {error && (
+        <span className="error">Merci de remplir tous les champs requis</span>
+      )}
+      <button className="sendingButton" onClick={createCodePrez}>
+        Générer la présentation
+      </button>
+    </div>
+  );
+};