Merge master update & npm update

.babelrc

@@ -1,9 +1,9 @@
 {
     "presets": [
         "@babel/preset-env",
-        "@babel/preset-react", 
+        "@babel/preset-react"
     ],
     "plugins": [
-        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-class-properties"
     ]
 }

.github/workflows/main.yml

@@ -0,0 +1,37 @@
+name: Build/release
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [windows-latest, ubuntu-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v2
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.github_token }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.gitignore

@@ -1,7 +1,131 @@
-node_modules
-.vs
-build
+
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
 .env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# rollup.js default build output
+dist/
+build/
+
+# Uncomment the public line if your project uses Gatsby
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# https://create-react-app.dev/docs/using-the-public-folder/#docsNav
+# public
+
+# Storybook build outputs
+.out
+.storybook-out
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
 
-app/relationtester.js
+# DynamoDB Local files
+.dynamodb/
+
+# Temporary folders
+tmp/
+temp/
+
+#  
 app/*.sqlite3
+
+### react ###
+.DS_*
+*.log
+logs
+**/*.backup.*
+**/*.back.*
+
+.vs
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+
+# End of https://www.gitignore.io/api/node

README.md

@@ -1,5 +1,5 @@
 # Thinkord
-<img src="./src/asset/thinkord.png" width="600">
+<img src="./app/asset/thinkord.png" width="600">
 
 Thinkord is a open source desktop application dedicated to helping people comveniently capture their thoughts.  
 
@@ -41,10 +41,10 @@ npm run win
 After packaging the application, folder dist would be created and you could click .exe to install(deploy) it to your local machine.
 
 # Architecture
-<img src="./src/asset/architecture.png">  
+<img src="./app/asset/architecture.png">  
 
 •	React  
-    A Javascript front-end development architecture, originally developed by Facebook. We use it to build timeline note and control bar. 
+    A Javascript front-end development architecture, originally developed by Facebook. We use it to build collection note and control bar. 
 
 •	Electron & Node.js  
     A cross-platform desktop application development framework, developed by GitHub. We use it to invoke APIs that interact with the operating system. Such as screenshots, screen recording, audio recording.

src/components/AudioBlock.jsx → app/components/AudioBlock.jsx

@@ -1,81 +1,79 @@
-import React, { useState } from 'react';
-import Button from 'react-bootstrap/Button';
-import BlockTitle from '../components/BlockTitle';
-import BlockDescription from '../components/BlockDescription';
-
-import { speech2text } from '../renderer/speech2text';
-
-// import icon
-import BlockIcon from"../asset/timeline/microphone.svg"
-import TrashIcon from"../asset/timeline/trash-alt.svg"
-import AngleIcon from"../asset/timeline/angle-up.svg"
-import MarkIcon from"../asset/timeline/bookmark.svg"
-import MarkFullIcon from"../asset/timeline/bookmark-full.svg"
-
-export default function AudioBlock(props) {
-    const scaleid = "scale_" + props.block.timestamp;
-    const checkid = "check_" + props.block.timestamp;
-
-    const [scaling, setScaling] = useState(true);
-
-    //fold or open the content of block
-    const handleScaling = () => {
-        if (scaling) {
-            document.getElementById(scaleid).classList.remove("rotate-open");
-            document.getElementById(scaleid).classList.toggle("rotate-close");
-        } else {
-            document.getElementById(scaleid).classList.remove("rotate-close");
-            document.getElementById(scaleid).classList.toggle("rotate-open");
-        }
-        setScaling(!scaling);
-    }
-
-    const handleSpeech2Text = () => {
-        if (process.env.SPEECH_SERVICE_SUBSCRIPTION_KEY) {
-            let path = props.block.paths[0];
-            speech2text(path, props.block.timestamp, props.handleSpeechText);
-        } else {
-            alert('Please provide your Azure speech service key');
-        }
-    }
-
-    return (
-        <div id={props.block.timestamp} className="audioBlock blockContent" >
-            <div className="borderLine"></div>
-            <BlockTitle className="blockTitle" time={props.block.timestamp} onChangeTitle={props.handleTitle} title={props.block.title} />
-
-            <button className="iconBtn removeBtn" onClick={props.delBlock.bind(this, props.block.timestamp)}><img src={TrashIcon}></img></button>
-            <form className="checkContainer">
-                <input className="check" id={checkid} type="checkbox" /><label className="checkmark" htmlFor={checkid}></label>
-            </form>
-            <div className="iconBtn markBtn">
-                <img src={props.block.mark ? MarkFullIcon : MarkIcon} onClick={props.handleMark.bind(this, props.block.timestamp)}></img>
-            </div>
-            <div className="timeINFO date">{props.addDate}</div>
-            <div className="timeINFO time">{props.addTime}</div>
-            <div className="blockIcon"><img src={BlockIcon}></img></div>
-            <button className="iconBtn scaleBtn" onClick={handleScaling}><img src={AngleIcon} id={scaleid}></img></button>
-            {scaling &&
-                <div className="blockMain">
-                    <audio controls="controls">
-                        <source src={props.block.paths[0]} />
-                    </audio>
-                    <div className="card">
-                        <div className="card-body">
-                            <h5 className="card-title">Text in the audio</h5>
-                            <p className="card-text">{props.block.speechText}</p>
-                            <button onClick={handleSpeech2Text} type="button" className="btn btn-outline-success">Speech2text</button>
-                        </div>
-                    </div>
-                    <BlockDescription
-                        description={props.block.description}
-                        addDescription={props.addDescription}
-                        time={props.block.timestamp}
-                        handleLinker={props.handleLinker}
-                    />
-                </div>
-            }
-        </div>
-    )
-}
-
+import React, { useState } from 'react';
+import BlockTitle from './BlockTitle';
+import BlockDescription from './BlockDescription';
+
+import { speech2text } from '../media-capturer/speech2text';
+
+// Icons
+import BlockIcon from "../asset/collection/microphone.svg";
+import TrashIcon from "../asset/collection/trash-alt.svg";
+import AngleIcon from "../asset/collection/angle-up.svg";
+import MarkIcon from "../asset/collection/bookmark.svg";
+import MarkFullIcon from "../asset/collection/bookmark-full.svg";
+
+export default function AudioBlock(props) {
+    const scaleid = "scale_" + props.block.timestamp;
+    const checkid = "check_" + props.block.timestamp;
+
+    const [scaling, setScaling] = useState(true);
+
+    //fold or open the content of block
+    const handleScaling = () => {
+        if (scaling) {
+            document.getElementById(scaleid).classList.remove("rotate-open");
+            document.getElementById(scaleid).classList.toggle("rotate-close");
+        } else {
+            document.getElementById(scaleid).classList.remove("rotate-close");
+            document.getElementById(scaleid).classList.toggle("rotate-open");
+        }
+        setScaling(!scaling);
+    }
+
+    const handleSpeech2Text = () => {
+        if (process.env.SPEECH_SERVICE_SUBSCRIPTION_KEY) {
+            let path = props.block.paths[0];
+            speech2text(path, props.block.timestamp, props.handleSpeechText);
+        } else {
+            alert('Please provide your Azure speech service key');
+        }
+    }
+
+    return (
+        <div id={props.block.timestamp} className="audioBlock blockContent" >
+            <div className="borderLine"></div>
+            <BlockTitle className="blockTitle" time={props.block.timestamp} onChangeTitle={props.handleTitle} title={props.block.title} />
+
+            <button className="iconBtn removeBtn" onClick={props.delBlock.bind(this, props.block.timestamp)}><img src={TrashIcon}></img></button>
+            <form className="checkContainer">
+                <input className="check" id={checkid} type="checkbox" /><label className="checkmark" htmlFor={checkid}></label>
+            </form>
+            <div className="iconBtn markBtn">
+                <img src={props.block.mark ? MarkFullIcon : MarkIcon} onClick={props.handleMark.bind(this, props.block.timestamp)}></img>
+            </div>
+            <div className="timeINFO date">{props.addDate}</div>
+            <div className="timeINFO time">{props.addTime}</div>
+            <div className="blockIcon"><img src={BlockIcon}></img></div>
+            <button className="iconBtn scaleBtn" onClick={handleScaling}><img src={AngleIcon} id={scaleid}></img></button>
+            {scaling &&
+                <div className="blockMain">
+                    <audio controls="controls">
+                        <source src={props.block.paths[0]} />
+                    </audio>
+                    <div className="card">
+                        <div className="card-body">
+                            <h5 className="card-title">Text in the audio</h5>
+                            <p className="card-text">{props.block.speechText}</p>
+                            <button onClick={handleSpeech2Text} type="button" className="btn btn-outline-success">Speech2text</button>
+                        </div>
+                    </div>
+                    <BlockDescription
+                        description={props.block.description}
+                        addDescription={props.addDescription}
+                        time={props.block.timestamp}
+                        handleLinker={props.handleLinker}
+                    />
+                </div>
+            }
+        </div>
+    )
+}