feat: simple Mesure OK

electron-app/ecoindex-app/package.json

@@ -53,13 +53,15 @@
   "license": "MIT",
   "dependencies": {
     "@rauschma/stringio": "^1.4.0",
+    "@tailwindcss/forms": "^0.5.7",
     "clsx": "^2.1.1",
     "electron-squirrel-startup": "^1.0.1",
     "fix-path": "^4.0.0",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "shell-env": "^4.0.1",
     "tailwind-merge": "^2.3.0"

electron-app/ecoindex-app/src/interface.d.ts

@@ -12,7 +12,7 @@ export interface IElectronAPI {
   getWorkDir: (newDir: string) => Promise<string>
   isNodeInstalled: () => Promise<boolean>
   isLighthouseEcoindexPluginInstalled: () => Promise<boolean>
-  runFakeMesure: () => void
+  simpleMesures: (urlsList: SimpleUrlInput[]) => void
 }
 
 declare global {

electron-app/ecoindex-app/src/main/main.ts

@@ -45,7 +45,7 @@ const createWindow = (): void => {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
-  ipcMain.handle(channels.FAKE_RUN, handleRunFakeMesure)
+  ipcMain.handle(channels.SIMPLE_MESURES, handlerSimpleMesures)
   ipcMain.handle(channels.SELECT_FOLDER, handleSelectFolder)
   ipcMain.handle(channels.GET_NODE_VERSION, getNodeVersion)
   ipcMain.handle(channels.GET_WORKDIR, handleWorkDir)
@@ -198,8 +198,15 @@ const handleWorkDir = async (event: IpcMainEvent, newDir: string) => {
   return await workDir
 }
 
-async function handleRunFakeMesure(event: IpcMainEvent) {
+async function handlerSimpleMesures(
+  event: IpcMainEvent,
+  urlsList: SimpleUrlInput[],
+) {
+  if (!urlsList || urlsList.length === 0) {
+    throw new Error('Urls list is empty')
+  }
   console.log('fake mesure start...')
+
   // create stream to log the output. TODO: use specified path
   const _workDir = await workDir
   if (!_workDir || _workDir === '') {
@@ -209,6 +216,9 @@ async function handleRunFakeMesure(event: IpcMainEvent) {
   const logFilePath = `${_workDir}/logfile.txt`
   const logStream = fs.createWriteStream(logFilePath)
   logStream.write('fake mesure start...\n')
+  console.log(`Urls list: ${JSON.stringify(urlsList)}`)
+  logStream.write(`Urls list: ${urlsList}`)
+
   try {
     const _shellEnv = await shellEnv()
     logStream.write(`Shell Env: ${JSON.stringify(_shellEnv, null, 2)}\n`)
@@ -221,23 +231,25 @@ async function handleRunFakeMesure(event: IpcMainEvent) {
     logStream.write(`Npm dir: ${npmDir}\n`)
     console.log(`Npm dir: ${npmDir}`)
 
+    const command = [
+      `${npmDir}/lighthouse-plugin-ecoindex/cli/index.js`,
+      'collect',
+    ]
+    urlsList.forEach(url => {
+      if (url.value) {
+        command.push('-u')
+        command.push(url.value)
+      }
+    })
+    command.push('-o')
+    command.push('html')
+    command.push('--output-path')
+    command.push(_workDir)
     // Fake mesure and path. TODO: use specified path and urls
-    const childProcess: ChildProcess = spawn(
-      `${nodeDir}`,
-      [
-        `${npmDir}/lighthouse-plugin-ecoindex/cli/index.js`,
-        'collect',
-        '-u',
-        'https://novagaia.fr/',
-        '-u',
-        'https://novagaia.fr/a-propos/',
-        '-o',
-        'html',
-        '--output-path',
-        _workDir,
-      ],
-      { stdio: ['pipe', 'pipe', process.stderr], shell: true },
-    )
+    const childProcess: ChildProcess = spawn(`${nodeDir}`, command, {
+      stdio: ['pipe', 'pipe', process.stderr],
+      shell: true,
+    })
 
     childProcess.on('exit', (code, signal) => {
       logStream.write(

electron-app/ecoindex-app/src/main/preload.ts

@@ -15,7 +15,8 @@ contextBridge.exposeInMainWorld('versions', {
 contextBridge.exposeInMainWorld('electronAPI', {
   handleSelectFolder: () => ipcRenderer.invoke(channels.SELECT_FOLDER),
   // run runFakeMesure on click on button fake
-  runFakeMesure: () => ipcRenderer.invoke(channels.FAKE_RUN),
+  simpleMesures: (urlsList: SimpleUrlInput[]) =>
+    ipcRenderer.invoke(channels.SIMPLE_MESURES, urlsList),
   getWorkDir: (newDir: string) =>
     ipcRenderer.invoke(channels.GET_WORKDIR, newDir),
   sendLogToFront: (callback: any) =>

electron-app/ecoindex-app/src/renderer/App.tsx

@@ -4,23 +4,37 @@ import { useEffect, useState } from 'react'
 import { Route, MemoryRouter as Router, Routes } from 'react-router-dom'
 
 import iconAsso from '../../assets/asso.svg'
-import icon from '../../assets/icon.svg'
-import { cn } from '../shared/tailwind-helper'
 import { AlertBox } from './components/Alert'
+import { PopinLoading } from './components/loading-popin'
+import { SimpleUrlsList } from './components/simple-urls'
+
+type InputField = {
+  value: string
+}
 
 function Hello() {
-  const [data, setdata] = useState('')
+  const [nodeVersion, setNodeVersion] = useState('')
+  // let nodeVersion = 'loading...'
   const [workDir, setWorkDir] = useState('chargement...')
   const [appReady, setAppReady] = useState(false)
+  // let appReady = false
+  let loadingScreen = 0
+  const [urlsList, setUrlsList] = useState<InputField[]>([
+    { value: 'https://www.ecoindex.fr/' },
+    { value: 'https://www.ecoindex.fr/a-propos/' },
+  ])
   const [
     isLighthouseEcoindexPluginInstalled,
     setIsLighthouseEcoindexPluginInstalled,
   ] = useState(true)
+  // let isLighthouseEcoindexPluginInstalled = false
   const [isNodeInstalled, setIsNodeInstalled] = useState(true)
+  // let isNodeInstalled = false
+
   // Run runFakeMesure on click on button fake
-  const fakeMesure = () => {
-    console.log('fake button clicked')
-    window.electronAPI.runFakeMesure()
+  const simpleMesures = () => {
+    console.log('Simple mesures clicked')
+    window.electronAPI.simpleMesures(urlsList)
   }
 
   const openFile = async () => {
@@ -32,24 +46,45 @@ function Hello() {
     echoElement.innerText = value
   }
 
+  const increment = () => {
+    console.log('increment')
+    loadingScreen = loadingScreen + 1
+    const counter = document.getElementById('counter') as HTMLElement
+    counter.innerText = `Loading... ${loadingScreen}/4`
+    const loadingPopin = document.getElementById('loadingPopin') as HTMLElement
+    if (loadingScreen === 4) {
+      loadingPopin.style.display = 'none'
+    }
+  }
+
   useEffect(() => {
     const fetchNodeVersion = async () => {
       const result = await window.versions.getNodeVersion()
-      setdata(result)
+      setNodeVersion(result)
+      // nodeVersion = result
+      increment()
     }
     const fetchWorkDir = async () => {
       const result = await window.electronAPI.getWorkDir('')
       setWorkDir(result)
+      increment()
     }
     const fetchNodeInstalled = async () => {
       const result = await window.electronAPI.isNodeInstalled()
       setIsNodeInstalled(result)
+      // isNodeInstalled = result
+      setAppReady(result && isLighthouseEcoindexPluginInstalled)
+
+      increment()
     }
 
     const fetchLighthouseEcoindexPluginInstalled = async () => {
       const result =
         await window.electronAPI.isLighthouseEcoindexPluginInstalled()
       setIsLighthouseEcoindexPluginInstalled(result)
+      // isLighthouseEcoindexPluginInstalled = result
+      setAppReady(result && isNodeInstalled)
+      increment()
     }
 
     fetchNodeVersion()
@@ -59,15 +94,15 @@ function Hello() {
   }, [])
 
   useEffect(() => {
-    setAppReady(isLighthouseEcoindexPluginInstalled && isNodeInstalled)
+    // setAppReady(isLighthouseEcoindexPluginInstalled && isNodeInstalled)
     console.log(`>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>`)
     console.log('isNodeInstalled', isNodeInstalled)
     console.log(
       'isLighthouseEcoindexPluginInstalled',
       isLighthouseEcoindexPluginInstalled,
     )
     console.log(`>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>`)
-  }, [isLighthouseEcoindexPluginInstalled, isNodeInstalled])
+  }, [isNodeInstalled, isLighthouseEcoindexPluginInstalled])
 
   useEffect(() => {
     console.log(`************************************`)
@@ -76,7 +111,7 @@ function Hello() {
   }, [appReady])
 
   return (
-    <div>
+    <div className="relative">
       <main className="flex flex-col justify-between p-4 h-screen">
         <div className="flex flex-col gap-2 items-center">
           <div className="logo-ecoindex">
@@ -87,15 +122,6 @@ function Hello() {
           <h1 className="font-black text-xl text-ecoindex-green">
             Mesures launcher 👋
           </h1>
-          {/* <div className="flex gap-2 items-center text-sm text-gray-500 font-medium">
-            <p>
-              Plugin installed:{' '}
-              <span id="isLighthouseEcoindexPluginInstalled"></span>
-            </p>
-            <p>
-              Node installed: <span id="isNodeInstalled"></span>
-            </p>
-          </div> */}
           <AlertBox visible={!isLighthouseEcoindexPluginInstalled}>
             <span>Lighthouse Ecoindex plugin is not installed!</span>
             <button className="btn btn-green-outlined">Install</button>
@@ -104,6 +130,9 @@ function Hello() {
             <span>Node is not installed!</span>
             <button className="btn btn-green-outlined">Install</button>
           </AlertBox>
+          <h2 className="text-ecoindex-green font-medium text-lg">
+            1. Select ouput folder
+          </h2>
           <div className="flex gap-2 items-center w-full">
             <p id="filePath" className="echo min-h-8 grid place-items-center">
               {workDir}
@@ -115,25 +144,34 @@ function Hello() {
               onClick={openFile}
               className="btn btn-green whitespace-nowrap"
             >
-              Select output folder
+              Browse
             </button>
           </div>
+          <SimpleUrlsList
+            urlsList={urlsList}
+            setUrlsList={setUrlsList}
+            visible={true}
+          />
+          <h2 className="text-ecoindex-green font-medium text-lg">
+            3. Launch the mesures
+          </h2>
           <button
             type="button"
-            id="btn-fake"
+            id="btn-simple-mesures"
             disabled={!appReady}
-            onClick={fakeMesure}
+            onClick={simpleMesures}
             className="btn btn-green"
           >
-            Fake Measure
+            Mesures
           </button>
           {/* display here the echoReadable line */}
           <p className="text-sm text-ecoindex-green font-medium">console</p>
           <textarea id="echo" className="echo h-36" readOnly></textarea>
         </div>
         <div className="text-sm text-center">
           <p className="text-xs">
-            Host Informations : Node.js({data ? data : 'loading...'})
+            Host Informations : Node.js(
+            {nodeVersion ? nodeVersion : 'loading...'})
           </p>
           <p className="text-xs">
             Internal Electron informations : Chrome (v{window.versions.chrome()}
@@ -154,6 +192,9 @@ function Hello() {
           </p>
         </div>
       </main>
+      <PopinLoading id="loadingPopin">
+        <p id="counter">Loading... 0/4</p>
+      </PopinLoading>
     </div>
   )
 }

electron-app/ecoindex-app/src/renderer/components/loading-popin.tsx

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from 'react'
+
+import { cn } from '../../shared/tailwind-helper'
+
+export interface ILayout {
+  children: ReactNode
+  visible?: boolean
+  id?: string
+}
+export const PopinLoading: FC<ILayout> = ({ id, children, visible = true }) => {
+  return (
+    <div
+      id={id}
+      className={cn('h-screen w-screen absolute top-0 left-0 z-10', {
+        hidden: !visible,
+      })}
+    >
+      <div className="w-full h-full absolute bg-white opacity-70"></div>
+      <div className="w-full h-full absolute grid place-content-center">
+        <div className=" px-4 py-3 bg-ecoindex-green shadow-lg shadow-ecoindex-green-200 rounded-full !text-ecoindex-green-50 font-black">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}