Merge pull request #15 from tytremblay/v0.1.1

v0.1.1
tytremblay · Sep 6, 2020 · 6ac7e83 · 6ac7e83
2 parents 7d5e9b9 + 1e1c113
commit 6ac7e83
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 129 deletions.
diff --git a/app/components/Home.tsx b/app/components/Home.tsx
@@ -1,19 +1,14 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { ThemeProvider } from '@material-ui/core/styles';
 import { Typography } from '@material-ui/core';
 import Box from '@material-ui/core/Box';
+import { ipcRenderer } from 'electron';
 import WorkflowManager from '../features/workflow/WorkflowManager';
-import { selectWorkflow } from '../features/workflow/workflowSlice';
+import { selectWorkflow, setTheme } from '../features/workflow/workflowSlice';
 import MatchesPanel from '../features/matches/MatchesPanel';
 import SplitterPanel from '../features/splitter/SplitterPanel';
-
-const useStyles = makeStyles({
-  steps: {
-    height: '100%',
-    maxHeight: 'fill-available',
-  },
-});
+import getTheme from '../utils/Theme';
 
 function handleWorkflow(step: number) {
   switch (step) {
@@ -31,15 +26,21 @@ function handleWorkflow(step: number) {
 }
 
 export default function Home(): JSX.Element {
-  const { currentStep } = useSelector(selectWorkflow);
-  const classes = useStyles();
+  const dispatch = useDispatch();
+  const { currentStep, theme } = useSelector(selectWorkflow);
+
+  useEffect(() => {
+    ipcRenderer.on('set-theme', (_, arg: string) => {
+      dispatch(setTheme(arg[0]));
+    });
+  }, []);
 
   return (
-    <>
+    <ThemeProvider theme={getTheme(theme)}>
       <div>
         <WorkflowManager />
       </div>
       <Box height="100%">{handleWorkflow(currentStep)}</Box>
-    </>
+    </ThemeProvider>
   );
 }
diff --git a/app/features/matches/matchesSlice.tsx b/app/features/matches/matchesSlice.tsx
@@ -31,6 +31,9 @@ export const getMatches = createAsyncThunk(
       (match) => {
         return compLevelSort.indexOf(match.comp_level);
       },
+      (match) => {
+        return match.match_number;
+      },
     ]);
 
     const matches = sortedMatches.map((tbaMatch: TbaMatch) =>
@@ -114,7 +117,7 @@ const matchesSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(getMatches.pending, (state, action) => {
+    builder.addCase(getMatches.pending, (state) => {
       state.loading = true;
     });
     builder.addCase(getMatches.fulfilled, (state, action) => {

diff --git a/app/features/workflow/workflowSlice.tsx b/app/features/workflow/workflowSlice.tsx
@@ -1,15 +1,17 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 // eslint-disable-next-line import/no-cycle
-import { AppThunk, RootState } from '../../store';
+import { RootState } from '../../store';
 
 export type WorkflowState = {
   steps: string[];
   currentStep: number;
+  theme: string;
 };
 
 const initialState: WorkflowState = {
-  steps: ['Matches', 'Split', 'Upload'],
+  steps: ['Matches', 'Split'],
   currentStep: 0,
+  theme: 'light',
 };
 
 const workflowSlice = createSlice({
@@ -18,24 +20,27 @@ const workflowSlice = createSlice({
   reducers: {
     nextStep: (state) => {
       if (state.currentStep < state.steps.length) {
-        state.currentStep++;
+        state.currentStep += 1;
       }
     },
     prevStep: (state) => {
       if (state.currentStep > 0) {
-        state.currentStep--;
+        state.currentStep -= 1;
       }
     },
     reset: (state) => {
       state.currentStep = 0;
     },
+    setTheme: (state, action: PayloadAction<string>) => {
+      state.theme = action.payload;
+    },
   },
 });
 
 export const selectWorkflow = (state: RootState) => {
   return state.workflow;
 };
 
-export const { nextStep, prevStep, reset } = workflowSlice.actions;
+export const { nextStep, prevStep, reset, setTheme } = workflowSlice.actions;
 
 export default workflowSlice.reducer;
diff --git a/app/main.dev.ts b/app/main.dev.ts
@@ -14,7 +14,7 @@ import path from 'path';
 import { app, BrowserWindow, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
-import MenuBuilder from './menu';
+import MenuBuilder from './menu/menu';
 
 import { split } from './ffmpeg/ffmpegCommands';
 import { SplitDetails } from './features/splitter/splitterSlice';
@@ -131,10 +131,8 @@ app.on('activate', () => {
 });
 
 ipcMain.on('split', async (event, allDetails: SplitDetails[]) => {
-  for (const details of allDetails) {
-    await split(event, details).catch((error) =>
-      event.reply('split-error', error)
-    );
-  }
+  allDetails.forEach((d) =>
+    split(event, d).catch((error) => event.reply('split-error', error))
+  );
   event.reply('split-end', 'Done');
 });
diff --git a/app/menu.ts → app/menu/menu.ts b/app/menu.ts → app/menu/menu.ts
@@ -6,30 +6,42 @@ import {
   MenuItemConstructorOptions,
 } from 'electron';
 
+import MenuTemplateBuilder from './menuTemplateBuilder';
+
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
   selector?: string;
   submenu?: DarwinMenuItemConstructorOptions[] | Menu;
 }
 
+function isDev(): boolean {
+  return (
+    process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true'
+  );
+}
+
 export default class MenuBuilder {
   mainWindow: BrowserWindow;
 
+  templateBuilder: MenuTemplateBuilder;
+
   constructor(mainWindow: BrowserWindow) {
     this.mainWindow = mainWindow;
+    this.templateBuilder = new MenuTemplateBuilder(
+      mainWindow,
+      process.platform,
+      isDev()
+    );
   }
 
   buildMenu(): Menu {
-    if (
-      process.env.NODE_ENV === 'development' ||
-      process.env.DEBUG_PROD === 'true'
-    ) {
+    if (isDev()) {
       this.setupDevelopmentEnvironment();
     }
 
     const template =
       process.platform === 'darwin'
         ? this.buildDarwinTemplate()
-        : this.buildDefaultTemplate();
+        : this.templateBuilder.getMenuOptions();
 
     const menu = Menu.buildFromTemplate(template);
     Menu.setApplicationMenu(menu);
@@ -189,98 +201,4 @@ export default class MenuBuilder {
 
     return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
   }
-
-  buildDefaultTemplate() {
-    const templateDefault = [
-      {
-        label: '&File',
-        submenu: [
-          {
-            label: '&Open',
-            accelerator: 'Ctrl+O',
-          },
-          {
-            label: '&Close',
-            accelerator: 'Ctrl+W',
-            click: () => {
-              this.mainWindow.close();
-            },
-          },
-        ],
-      },
-      {
-        label: '&View',
-        submenu:
-          process.env.NODE_ENV === 'development' ||
-          process.env.DEBUG_PROD === 'true'
-            ? [
-                {
-                  label: '&Reload',
-                  accelerator: 'Ctrl+R',
-                  click: () => {
-                    this.mainWindow.webContents.reload();
-                  },
-                },
-                {
-                  label: 'Toggle &Full Screen',
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen()
-                    );
-                  },
-                },
-                {
-                  label: 'Toggle &Developer Tools',
-                  accelerator: 'Alt+Ctrl+I',
-                  click: () => {
-                    this.mainWindow.webContents.toggleDevTools();
-                  },
-                },
-              ]
-            : [
-                {
-                  label: 'Toggle &Full Screen',
-                  accelerator: 'F11',
-                  click: () => {
-                    this.mainWindow.setFullScreen(
-                      !this.mainWindow.isFullScreen()
-                    );
-                  },
-                },
-              ],
-      },
-      {
-        label: 'Help',
-        submenu: [
-          {
-            label: 'Learn More',
-            click() {
-              shell.openExternal(
-                'https://github.com/tytremblay/frc-video-splitter-3'
-              );
-            },
-          },
-          {
-            label: 'Documentation',
-            click() {
-              shell.openExternal(
-                'https://github.com/tytremblay/frc-video-splitter-3/blob/master/README.md'
-              );
-            },
-          },
-          {
-            label: 'Submit Issues',
-            click() {
-              shell.openExternal(
-                'https://github.com/tytremblay/frc-video-splitter-3/issues'
-              );
-            },
-          },
-        ],
-      },
-    ];
-
-    return templateDefault;
-  }
 }