diff --git a/README.md b/README.md index 5398c34..321b8c7 100644 --- a/README.md +++ b/README.md @@ -1,187 +1 @@ - - -
- -

- Electron React Boilerplate uses Electron, React, Redux, React Router, Webpack and React Hot Loader for rapid application development (HMR). -

- -
- -
- - - - - - - -
- -
-
- -
- -[![Build Status](azure-pipelines-image)](azure-pipelines-url) -[![Build Status][travis-image]][travis-url] -[![Appveyor Build Status][appveyor-image]][appveyor-url] -[![Dependency Status][david-image]][david-url] -[![DevDependency Status][david-dev-image]][david-dev-url] -[![Github Tag][github-tag-image]][github-tag-url] - -[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/electron-react-blpt) -[![OpenCollective](https://opencollective.com/electron-react-boilerplate/backers/badge.svg)](#backers) -[![OpenCollective](https://opencollective.com/electron-react-boilerplate/sponsors/badge.svg)](#sponsors) -[![Good first issues open][good-first-issue-image]][good-first-issue-url] -[![StackOverflow](https://img.shields.io/badge/stackoverflow-electron_react_boilerplate-blue.svg)](https://stackoverflow.com/questions/tagged/electron-react-boilerplate) - -
- -
- -![Electron Boilerplate Demo](https://cloud.githubusercontent.com/assets/3382565/10557547/b1f07a4e-74e3-11e5-8d27-79ab6947d429.gif) - -
- -## Install - -- **If you have installation or compilation issues with this project, please see [our debugging guide](https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/400)** - -First, clone the repo via git: - -```bash -git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name -``` - -And then install the dependencies with yarn. - -```bash -$ cd your-project-name -$ yarn -``` - -## Starting Development - -Start the app in the `dev` environment. This starts the renderer process in [**hot-module-replacement**](https://webpack.js.org/guides/hmr-react/) mode and starts a webpack dev server that sends hot updates to the renderer process: - -```bash -$ yarn dev -``` - -## Packaging for Production - -To package apps for the local platform: - -```bash -$ yarn package -``` - -## Docs - -See our [docs and guides here](https://electron-react-boilerplate.js.org/docs/installation) - -## Donations - -**Donations will ensure the following:** - -- 🔨 Long term maintenance of the project -- 🛣 Progress on the [roadmap](https://electron-react-boilerplate.js.org/docs/roadmap) -- 🐛 Quick responses to bug reports and help requests - -## Backers - -Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/electron-react-boilerplate#backer)] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -## Sponsors - -Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/electron-react-boilerplate-594#sponsor)] - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -## Maintainers - -- [Vikram Rangaraj](https://github.com/vikr01) -- [Amila Welihinda](https://github.com/amilajack) -- [C. T. Lin](https://github.com/chentsulin) -- [Jhen-Jie Hong](https://github.com/jhen0409) - -## License - -MIT © [Electron React Boilerplate](https://github.com/electron-react-boilerplate) - -[npm-image]: https://img.shields.io/npm/v/electron-react-boilerplate.svg?style=flat-square -[github-tag-image]: https://img.shields.io/github/tag/electron-react-boilerplate/electron-react-boilerplate.svg?label=version -[github-tag-url]: https://github.com/electron-react-boilerplate/electron-react-boilerplate/releases/latest -[travis-image]: https://travis-ci.com/electron-react-boilerplate/electron-react-boilerplate.svg?branch=master -[travis-url]: https://travis-ci.com/electron-react-boilerplate/electron-react-boilerplate -[appveyor-image]: https://ci.appveyor.com/api/projects/status/4m972s6e4nf52hx6/branch/master?svg=true -[appveyor-url]: https://ci.appveyor.com/project/electron-react-boilerplate/electron-react-boilerplate/branch/master -[azure-pipelines-image]: https://dev.azure.com/electron-react-boilerplate/electron-react-boilerplate/_apis/build/status/electron-react-boilerplate.electron-react-boilerplate?branchName=master -[azure-pipelines-url]: https://dev.azure.com/electron-react-boilerplate/electron-react-boilerplate/_build/latest?definitionId=1&branchName=master -[david-image]: https://img.shields.io/david/electron-react-boilerplate/electron-react-boilerplate.svg -[david-url]: https://david-dm.org/electron-react-boilerplate/electron-react-boilerplate -[david-dev-image]: https://img.shields.io/david/dev/electron-react-boilerplate/electron-react-boilerplate.svg?label=devDependencies -[david-dev-url]: https://david-dm.org/electron-react-boilerplate/electron-react-boilerplate?type=dev -[good-first-issue-image]: https://img.shields.io/github/issues/electron-react-boilerplate/electron-react-boilerplate/good%20first%20issue.svg?label=good%20first%20issues -[good-first-issue-url]: https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues?q=is%3Aopen+is%3Aissue+label%3A"good+first+issue" +The main process code isn't pretty, this is something I spun up quickly to help out a family member. diff --git a/app/app.global.css b/app/app.global.css index 8648496..10c25a9 100644 --- a/app/app.global.css +++ b/app/app.global.css @@ -16,32 +16,14 @@ body { ); font-family: Arial, Helvetica, Helvetica Neue, serif; overflow-y: hidden; -} - -h2 { margin: 0; - font-size: 2.25rem; - font-weight: bold; - letter-spacing: -0.025em; - color: #fff; } -p { - font-size: 24px; -} - -li { - list-style: none; -} - -a { - color: white; - opacity: 0.75; - text-decoration: none; -} +#root { + height: 100vh; + padding: 15px; + overflow: hidden; + display: flex; + flex-direction: column; -a:hover { - opacity: 1; - text-decoration: none; - cursor: pointer; } diff --git a/app/components/Home.tsx b/app/components/Home.tsx index 8333318..f8166f1 100644 --- a/app/components/Home.tsx +++ b/app/components/Home.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { ipcRenderer, remote } from 'electron'; import { Tabs, Tab, Card, InputGroup } from '@blueprintjs/core'; @@ -8,6 +8,7 @@ import FileUploader from './FileUploader'; import Progress from './Progress'; import Merge from './XLSX/Merge'; import Compare from './XLSX/Compare'; +import Find from './XLSX/Find'; import Toaster from './Toaster'; // import { Link } from 'react-router-dom'; @@ -24,9 +25,17 @@ export default function Home() { const [outputName, setOutputName] = useState('output'); const outputFullPath = `${outputPath}\\${outputName}.xlsx`; + // Auto set output path based on the files input + useEffect(() => { + if (files?.length > 0) { + const { path, name } = files[0]; + setOutputPath(path.replace(`\\${name}`, '')); + } + }, [files]); + const filesAvailable = files && files.length > 0; return ( -
+ <> } /> + } + /> -
+ +
+ App version: + {remote.app.getVersion()} +
+ ); } diff --git a/app/components/Toaster.tsx b/app/components/Toaster.tsx index 4d7d8ed..a83b3c4 100644 --- a/app/components/Toaster.tsx +++ b/app/components/Toaster.tsx @@ -8,12 +8,10 @@ function Toast() { const ref = useRef(); useEffect(() => { - ipcRenderer.on(Events.Message, (_, { type, message }) => { + ipcRenderer.on(Events.Message, (_, { intent, message }) => { const { current: toast } = ref; - if (type === 'log' || type === 'error') { - const intent = type === 'log' ? Intent.PRIMARY : Intent.DANGER; - toast.show({ message, intent }); - } + console.log(message, intent) + toast.show({ message, intent }); }); }, []); diff --git a/app/components/XLSX/Compare.tsx b/app/components/XLSX/Compare.tsx index ea392d8..c50f11d 100644 --- a/app/components/XLSX/Compare.tsx +++ b/app/components/XLSX/Compare.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { ipcRenderer } from 'electron'; -import { Button, InputGroup } from '@blueprintjs/core'; +import { Button, InputGroup, Checkbox } from '@blueprintjs/core'; import { Events } from '../../events'; @@ -12,6 +12,8 @@ type Props = { function Compare({ files, output }: Props) { const [columnA, setColumnA] = useState(''); const [columnB, setColumnB] = useState(''); + const [checked, setChecked] = useState(false); + const [wordToFind, setWordToFind] = useState(''); return ( <> @@ -28,6 +30,24 @@ function Compare({ files, output }: Props) { value={columnB} onChange={e => setColumnB(e.target.value)} /> + setChecked(c => !c)} + style={{ marginTop: 10, display: 'flex', alignItems: 'center' }} + > +
+ Find word in the compared columns? +
+ + {checked && ( + setWordToFind(e.target.value)} + /> + )}