🗂 #8 Add file upload field

src/main/main.ts

@@ -86,6 +86,7 @@ const createWindow = () => {
 	mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)
 
 	mainWindow.once('ready-to-show', () => {
+		setupIpcMain(mainWindow)
 		mainWindow.show()
 	})
 
@@ -133,5 +134,3 @@ app.whenReady().then(() => {
 app.on('before-quit', () => {
 	appIsQuitting = true
 })
-
-setupIpcMain(mainWindow)

src/renderer/main-window/components/FileUploadField.tsx

@@ -0,0 +1,48 @@
+import { ipcRenderer } from 'electron'
+import React from 'react'
+import { IpcMainMessage } from '../../../types'
+
+interface Props {
+	label: string
+	buttonLabel: string
+	placeholder: string
+	filePath: string
+	ipcMessage: IpcMainMessage
+	onType: (text: string) => unknown
+}
+
+const FileUploadField = ({
+	label,
+	buttonLabel,
+	placeholder,
+	filePath,
+	ipcMessage,
+	onType,
+}: Props) => {
+	return (
+		<div className='field'>
+			<label className='label'>{label}</label>
+			<div className='is-flex'>
+				<input
+					className='input'
+					type='text'
+					placeholder={placeholder}
+					value={filePath}
+					onInput={(e) => {
+						onType((e.target as HTMLInputElement).value)
+					}}
+				/>
+				<button
+					className='button is-primary is-outlined ml-3'
+					onClick={() => {
+						ipcRenderer.send(ipcMessage)
+					}}
+				>
+					{buttonLabel}
+				</button>
+			</div>
+		</div>
+	)
+}
+
+export default FileUploadField

src/renderer/main-window/components/TextInputField.tsx

@@ -7,7 +7,7 @@ interface Props {
 	onType: (text: string) => unknown
 }
 
-export const TextInputField = ({ label, placeholder, text, onType }: Props) => {
+const TextInputField = ({ label, placeholder, text, onType }: Props) => {
 	return (
 		<div className='field'>
 			<label className='label'>{label}</label>
@@ -23,3 +23,5 @@ export const TextInputField = ({ label, placeholder, text, onType }: Props) => {
 		</div>
 	)
 }
+
+export default TextInputField

src/renderer/main-window/pages/GeneratePage.tsx

@@ -1,6 +1,8 @@
+import { ipcRenderer } from 'electron'
 import React, { useContext, useState } from 'react'
-import { Page } from '../../../types'
-import { TextInputField } from '../components/TextInputField'
+import { IpcMainMessage, IpcRendererMessage, Maybe, Page } from '../../../types'
+import FileUploadField from '../components/FileUploadField'
+import TextInputField from '../components/TextInputField'
 import ActivePageContext from '../context/ActivePageContext'
 
 const GeneratePage = () => {
@@ -9,16 +11,36 @@ const GeneratePage = () => {
 	if (activePage !== thisPage) return
 
 	const [collectionName, setCollectionName] = useState('')
+	const [songFoldersLocation, setSongFoldersLocation] = useState('')
+
+	ipcRenderer.on(
+		IpcRendererMessage.USER_CHOSE_SONG_FOLDERS_LOCATION,
+		(e, folderPath: Maybe<string>) => {
+			if (folderPath) {
+				setSongFoldersLocation(folderPath)
+			}
+		}
+	)
 
 	return (
 		<>
 			<h1 className='title'>Generate Instrument Parts and Master</h1>
+
 			<TextInputField
 				label='Collection Name'
 				placeholder='Insect Concert'
 				text={collectionName}
 				onType={setCollectionName}
 			/>
+
+			<FileUploadField
+				label='Song Folders Location'
+				placeholder='/Users/Colin/Desktop'
+				buttonLabel='Choose Folder'
+				filePath={songFoldersLocation}
+				ipcMessage={IpcMainMessage.CHOOSE_SONG_FOLDERS_LOCATION}
+				onType={setSongFoldersLocation}
+			/>
 		</>
 	)
 }

src/renderer/main-window/pages/SeparatePage.tsx

@@ -1,6 +1,8 @@
+import { ipcRenderer } from 'electron'
 import React, { useContext, useState } from 'react'
-import { Page } from '../../../types'
-import { TextInputField } from '../components/TextInputField'
+import { IpcMainMessage, IpcRendererMessage, Maybe, Page } from '../../../types'
+import FileUploadField from '../components/FileUploadField'
+import TextInputField from '../components/TextInputField'
 import ActivePageContext from '../context/ActivePageContext'
 
 const SeparatePage = () => {
@@ -9,16 +11,36 @@ const SeparatePage = () => {
 	if (activePage !== thisPage) return
 
 	const [songTitle, setSongTitle] = useState('')
+	const [pdfSource, setPdfSource] = useState('')
+
+	ipcRenderer.on(
+		IpcRendererMessage.USER_CHOSE_PDF_SOURCE_FILE,
+		(e, filePath: Maybe<string>) => {
+			if (filePath) {
+				setPdfSource(filePath)
+			}
+		}
+	)
 
 	return (
 		<>
 			<h1 className='title'>Separate Song Parts</h1>
+
 			<TextInputField
 				label='Song Title'
 				placeholder='Hey Judy'
 				text={songTitle}
 				onType={setSongTitle}
 			/>
+
+			<FileUploadField
+				label='PDF Source'
+				placeholder='/Users/Colin/Desktop/Hey_Judy-Score_and_Parts.pdf'
+				buttonLabel='Choose File'
+				filePath={pdfSource}
+				ipcMessage={IpcMainMessage.CHOOSE_PDF_SOURCE_FILE}
+				onType={setPdfSource}
+			/>
 		</>
 	)
 }

src/types.ts

@@ -1,3 +1,5 @@
+type Maybe<T> = T | undefined
+
 enum Page {
 	SEPARATE,
 	GENERATE,
@@ -34,6 +36,7 @@ enum IpcRendererMessage {
 }
 
 export {
+	Maybe,
 	Page,
 	ActivePageContextType,
 	Tab,

webpack.main.config.js

@@ -4,6 +4,7 @@ module.exports = {
 	 * that runs in the main process.
 	 */
 	entry: './src/main/main.ts',
+	target: 'electron-main',
 	// Put your normal webpack config below here
 	module: {
 		rules: require('./webpack.rules'),

webpack.renderer.config.js

@@ -13,6 +13,7 @@ rules.push({
 })
 
 module.exports = {
+	target: 'electron-renderer',
 	module: {
 		rules,
 	},