More efficient log-loading system

src/components/logReader.ts

@@ -1,5 +1,8 @@
 import logger from "./logger";
 import {parse as csvParse} from "csv-parse";
+import {settingList} from "./settings";
+import {platformCharacter} from "./paths";
+import {formatDate} from "./dateFormat";
 
 async function openLogFile(filePath:string, rawData:boolean) {
     const data = await fetch(filePath).then(function(response) {
@@ -94,6 +97,19 @@ async function getLogTime(filePath:string) {
                 pastYears--;
             }
             
+            const logTimeFormatted = formatDate(year, month, day) + " " + hour + ":" + minute + ":" + second;
+            
+            let logLengthFormatted = "00:00:00";
+            if(pastYears > 0) {
+                logLengthFormatted = pastYears + "y " + pastMonths + "m " + pastDays + "d " + pastHours + "h " + pastMinutes + "m " + pastSeconds + "s";
+            } else if(pastMonths > 0) {
+                logLengthFormatted = pastMonths + "m " + pastDays + "d " + pastHours + "h " + pastMinutes + "m " + pastSeconds + "s";
+            } else if(pastDays > 0) {
+                logLengthFormatted = pastDays + "d " + pastHours + "h " + pastMinutes + "m " + pastSeconds + "s";
+            } else {
+                logLengthFormatted = pastHours + "h " + pastMinutes + "m " + pastSeconds + "s";
+            }
+            
             return {
                 start: {
                     year,
@@ -102,7 +118,8 @@ async function getLogTime(filePath:string) {
                     hour,
                     minute,
                     second,
-                    millisecond
+                    millisecond,
+                    formatted: logTimeFormatted
                 },
                 length: {
                     years: pastYears,
@@ -111,7 +128,8 @@ async function getLogTime(filePath:string) {
                     hours: pastHours,
                     minutes: pastMinutes,
                     seconds: pastSeconds,
-                    milliseconds: pastMilliseconds
+                    milliseconds: pastMilliseconds,
+                    formatted: logLengthFormatted
                 }
             }
         } else {
@@ -124,6 +142,7 @@ async function getLogTime(filePath:string) {
                     minute: 0,
                     second: 0,
                     millisecond: 0,
+                    formatted: "Not Found"
                 },
                 length: {
                     years: 0,
@@ -132,13 +151,63 @@ async function getLogTime(filePath:string) {
                     hours: 0,
                     minutes: 0,
                     seconds: 0,
-                    milliseconds: 0
+                    milliseconds: 0,
+                    formatted: "Not Found"
                 }
             };
         }
     });
 }
 
+async function getAllLogs() {
+    const loadList = [];
+    
+    if(settingList.log.length > 0) {
+        const logs = settingList.log.substring(1).slice(0, -1).split('""');
+        
+        for(const log of logs) {
+            loadList.push({
+                name: log.split(platformCharacter())[log.split(platformCharacter()).length - 1].replace(".csv", ""),
+                path: log,
+                time: await getLogTime(log)
+            });
+        }
+    }
+    
+    return loadList;
+}
+
+let logList = await getAllLogs();
+
+async function reloadAllLogs() {
+    logList = await getAllLogs();
+}
+
+async function updateLogs() {
+    if(settingList.log.length > 0) {
+        const logs = settingList.log.substring(1).slice(0, -1).split('""');
+        for(const log of logs) {
+            if(!logList.some(x => x.path === log)) {
+                logList.push({
+                    name: log.split(platformCharacter())[log.split(platformCharacter()).length - 1].replace(".csv", ""),
+                    path: log,
+                    time: await getLogTime(log)
+                });
+            }
+        }
+        
+        for(const log of logList) {
+            if(!logs.some(x => x === log.path)) {
+                logList.splice(logList.indexOf(log), 1);
+            }
+        }
+    } else {
+        logList = [];
+    }
+}
+
 export {
-    getLogTime
+    reloadAllLogs,
+    logList,
+    updateLogs
 };

src/components/ui/mainPage.tsx

@@ -1,71 +1,19 @@
-import React, {useState, useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import { dialog } from "@electron/remote";
 import { settingList, updateSettings } from "../settings";
 import logger from "../logger";
 import {blender, blenderCmd} from "../blenderController";
 import openFolder from "../openFolder";
 import {platformCharacter} from "../paths";
-import {getLogTime} from "../logReader";
-import {formatDate} from "../dateFormat";
+import {logList, reloadAllLogs, updateLogs} from "../logReader";
 
 function MainPage() {
-    const [logs, setLogs] = useState(settingList.log);
     const [output, setOutput] = useState(settingList.output);
     const [logTable, setLogTable] = useState([<tr key={0}></tr>]);
     
     useEffect(() => {
-        
-        async function getData() {
-            const logList = settingList.log.substring(1).slice(0, -1).split('""');
-            
-            const logListName:string[] = [];
-            const logListTime:string[] = [];
-            const logListLength:string[] = [];
-            for(const log of logList) {
-                logListName.push(log.split(platformCharacter())[log.split(platformCharacter()).length - 1].replace(".csv", ""));
-                const logTime = await getLogTime(log);
-                const logTimeDisplay = formatDate(logTime.start.year, logTime.start.month, logTime.start.day) + " " + logTime.start.hour + ":" + logTime.start.minute + ":" + logTime.start.second;
-                logListTime.push(logTimeDisplay);
-                
-                let logLengthDisplay = "00:00:00";
-                if(logTime.length.years > 0) {
-                    logLengthDisplay = logTime.length.years + "y " + logTime.length.months + "m " + logTime.length.days + "d " + logTime.length.hours + "h " + logTime.length.minutes + "m " + logTime.length.seconds + "s";
-                } else if(logTime.length.months > 0) {
-                    logLengthDisplay = logTime.length.months + "m " + logTime.length.days + "d " + logTime.length.hours + "h " + logTime.length.minutes + "m " + logTime.length.seconds + "s";
-                } else if(logTime.length.days > 0) {
-                    logLengthDisplay = logTime.length.days + "d " + logTime.length.hours + "h " + logTime.length.minutes + "m " + logTime.length.seconds + "s";
-                } else {
-                    logLengthDisplay = logTime.length.hours + "h " + logTime.length.minutes + "m " + logTime.length.seconds + "s";
-                }
-                logListLength.push(logLengthDisplay);
-            }
-            
-            setLogTable(logListName.map((log, index) => {
-                return <tr key={index}>
-                    <td style={{
-                        fontWeight: "bold",
-                        fontStyle: "italic"
-                    }}>{index+1}.</td>
-                    <td id="logList-Name" title={logList[index]+"\n"+logListTime[index]+"\n"+logListLength[index]} onClick={() => openFolder(logList[index].substring(0, logList[index].lastIndexOf(platformCharacter())))}>{log}</td>
-                    <td style={{
-                        fontStyle: "italic",
-                        fontWeight: "lighter"
-                    }}>({logListLength[index]})</td>
-                    <td><button className="listButton" onClick={() => {
-                        const newLogs = settingList.log.replace('"'+logList[index]+'"', "");
-                        updateSettings({log:newLogs});
-                        setLogs(newLogs);
-                    }}>Delete</button></td>
-                </tr>
-            }));
-        }
-        
-        if(settingList.log == "") {
-            setLogTable([]);
-        } else {
-            getData();
-        }
-    }, [logs]);
+        updateLogTable(setLogTable);
+    }, []);
     
     return (
         <div id="content">
@@ -82,10 +30,11 @@ function MainPage() {
                 </tbody>
             </table>
             <div className="dataDiv">
-                <button id="openLogButton" onClick={() => addLog(setLogs)}>Add Log(s)</button>
-                <button id="deleteLogsButton" onClick={() => {
+                <button id="openLogButton" onClick={() => addLog(setLogTable)}>Add Log(s)</button>
+                <button id="deleteLogsButton" onClick={async () => {
                     updateSettings({log:""});
-                    setLogs("");
+                    await reloadAllLogs();
+                    updateLogTable(setLogTable);
                 }}>Delete All</button>
             </div>
             <div className="dataDiv" id="outputDiv">
@@ -97,7 +46,37 @@ function MainPage() {
     )
 }
 
-function addLog(updateHook:React.Dispatch<React.SetStateAction<string>>) {
+function updateLogTable(setLogTable:React.Dispatch<React.SetStateAction<JSX.Element[]>>) {
+    function getData() {
+        setLogTable(logList.map((log, index) => {
+            return <tr key={index}>
+                <td style={{
+                    fontWeight: "bold",
+                    fontStyle: "italic"
+                }}>{index+1}.</td>
+                <td id="logList-Name" title={log.path+"\n"+log.time.start.formatted+"\n"+log.time.length.formatted} onClick={() => openFolder(log.path.substring(0, log.path.lastIndexOf(platformCharacter())))}>{log.name}</td>
+                <td style={{
+                    fontStyle: "italic",
+                    fontWeight: "lighter"
+                }}>({log.time.length.formatted})</td>
+                <td><button className="listButton" onClick={async () => {
+                    const newLogs = settingList.log.replace('"'+log.path+'"', "");
+                    updateSettings({log:newLogs});
+                    await updateLogs();
+                    updateLogTable(setLogTable);
+                }}>Delete</button></td>
+            </tr>
+        }));
+    }
+    
+    if(settingList.log == "") {
+        setLogTable([]);
+    } else {
+        getData();
+    }
+}
+
+function addLog(setLogTable:React.Dispatch<React.SetStateAction<JSX.Element[]>>) {
     dialog.showOpenDialog({
         properties: [
             "multiSelections"
@@ -110,7 +89,7 @@ function addLog(updateHook:React.Dispatch<React.SetStateAction<string>>) {
                 ]
             }
         ]
-    }).then(result => {
+    }).then(async result => {
         let logStr = "";
         result.filePaths.forEach(value => {
             const logToAdd = "\"" + value + "\"";
@@ -122,7 +101,8 @@ function addLog(updateHook:React.Dispatch<React.SetStateAction<string>>) {
         });
         const newLogs = settingList.log + logStr;
         updateSettings({log:newLogs});
-        updateHook(newLogs);
+        await updateLogs();
+        updateLogTable(setLogTable);
     }).catch(err => {
         logger.errorMSG(err);
     });

src/components/ui/renderFinishPage.tsx

@@ -7,6 +7,7 @@ import VideoPlayer from "./videoPlayer";
 import path from 'path';
 import {platformCharacter} from "../paths";
 import {VideoJsPlayerOptions} from "video.js";
+import {logList} from "../logReader";
 
 const detailsStyle:CSSProperties = {
     display: "flex",
@@ -20,7 +21,7 @@ const detailsInnerStyle:CSSProperties = {
 function RenderFinishPage() {
     const [logPlaying, setLogPlaying] = React.useState(path.join(settingList.output, settingList.log.substring(1).slice(0, -1).split('""')[0].split(platformCharacter())[settingList.log.substring(1).slice(0, -1).split('""')[0].split(platformCharacter()).length - 1].replace(".csv", "."+settingList.videoFormat)));
     
-    const [logList, setLogList] = React.useState([<li key={0}></li>]);
+    const [outputList, setOutputList] = React.useState([<li key={0}></li>]);
     
     const videoPlayerOptions:VideoJsPlayerOptions = {
         controls: true,
@@ -34,16 +35,15 @@ function RenderFinishPage() {
     const [videoSource, setVideoSource] = React.useState({src: logPlaying, type: 'video/'+settingList.videoFormat.toUpperCase()});
     
     React.useEffect(() => {
-        setLogList(settingList.log.substring(1).slice(0, -1).split('""').map((inputLog, index) => {
-            const outputLogName = inputLog.split(platformCharacter())[inputLog.split(platformCharacter()).length - 1].replace(".csv", "");
-            const outputLogPath = path.join(settingList.output, outputLogName+"."+settingList.videoFormat);
+        setOutputList(logList.map((inputLog, index) => {
+            const outputLogPath = path.join(settingList.output, inputLog.name+"."+settingList.videoFormat);
             
             return <li key={index}>
                 <p style={{
                     textDecoration: logPlaying === outputLogPath ? "underline" : "none",
                 }} onClick={() => {
                     setLogPlaying(outputLogPath);
-                }} title={outputLogPath}>{outputLogName}</p>
+                }} title={outputLogPath}>{inputLog.name}</p>
             </li>
         }));
         
@@ -83,7 +83,7 @@ function RenderFinishPage() {
             }}>
                 <VideoPlayer options={videoPlayerOptions} src={videoSource} />
                 <ol>
-                    {logList}
+                    {outputList}
                 </ol>
             </div>
         </div>