fixed db initialization issue and implemented formik for building forms

Simon Townsend · Simon Townsend · commit c548abea05bb · 2018-07-27T16:12:15.000-05:00
diff --git a/package.json b/package.json
@@ -9,8 +9,10 @@
     "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
   },
   "dependencies": {
+    "@types/fs-extra": "^5.0.4",
     "bluebird": "^3.5.1",
     "bootstrap": "^4.1.3",
+    "formik": "^1.0.2",
     "fs-extra": "^7.0.0",
     "jquery": "^3.0.0",
     "popper.js": "^1.14.3",
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -4,9 +4,8 @@ import { app, BrowserWindow, Event, ipcMain } from 'electron'
 import * as path from 'path'
 import { format as formatUrl } from 'url'
 import SQL from 'sql.js';
-import * as Promise from 'bluebird';
 import { DB_FILE_READY, GET_DB_FILE, WRITE_DB_DATA } from '../shared/constants/message-types';
-const fs = Promise.promisifyAll(require('fs-extra'));
+import * as fs from 'fs-extra';
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -73,12 +72,15 @@ const databaseFilePath = path.join(app.getPath('userData'), 'databases/starter.d
 ipcMain.on(GET_DB_FILE, async (event:Event) => {
 
   try {
-    let dbFile:Uint8Array|null = await fs.readFile(databaseFilePath);
-    if (!dbFile) {
-        const db = new SQL.Database();
-        dbFile = db.export();
-        const buffer = new Buffer(dbFile);
-        await fs.writeFile(databaseFilePath, buffer);
+    
+    let dbFile:Uint8Array|null;
+    if (fs.pathExistsSync(databaseFilePath)) {
+      dbFile = await fs.readFile(databaseFilePath);
+    } else {
+      const db = new SQL.Database();
+      dbFile = db.export();
+      const buffer = new Buffer(dbFile);
+      await fs.writeFile(databaseFilePath, buffer);
     }
     
     event.sender.send(DB_FILE_READY, dbFile);
diff --git a/src/renderer/actions/index.ts b/src/renderer/actions/index.ts
@@ -9,6 +9,9 @@ import { DB_FILE_READY, GET_DB_FILE, WRITE_DB_DATA } from '../../shared/constant
 export class ActionTypes {
   static readonly DB_READY = 'DB_READY'; 
   static readonly FETCH_DB = 'FETCH_DB';
+  static readonly SAVE_USER = 'SAVE_USER';
+  static readonly FETCH_USER = 'FETCH_USER';
+  static readonly SET_USER = 'SET_USER';
 }
     
 export function fetchDb() {
@@ -28,19 +31,46 @@ export function fetchDb() {
                 type: 'sqljs',
                 database: dbFile,
                 entities: [UserEntity],
+                synchronize: true,
                 autoSave: true,
                 autoSaveCallback: async (data: Uint8Array) => {
                     ipcRenderer.send(WRITE_DB_DATA, data);
                 }
             });
         }
         
-        dispatch(dbReadyAction(db));
+        dispatch(dbReady(db));
     });
   }
 }
 
-export const dbReadyAction = (db:Connection) => ({
+export const dbReady = (db:Connection) => ({
   type: ActionTypes.DB_READY,
   payload: db
+});
+
+export function fetchUser() {
+  return async (dispatch:Dispatch<AnyAction>, getState:()=>any) => {
+    const { db } = getState();
+    const userRepo = db.getRepository(UserEntity);
+    const user = await userRepo.findOne(1);
+    dispatch(setUser(user));
+  }
+}
+
+export function saveUser(userForm:any) {
+  return async (dispatch:Dispatch<AnyAction>, getState:()=>any) => {  
+    const { db } = getState();
+    const userRepo = db.getRepository(UserEntity);
+    const user = new UserEntity(userForm);
+    await userRepo.save(user);
+    
+    const savedUser = await userRepo.findOne({name: user.name});
+    dispatch(setUser(savedUser));
+  }
+}
+
+export const setUser = (user: UserEntity) => ({
+  type: ActionTypes.SET_USER,
+  payload: user
 });
diff --git a/src/renderer/components/Root.tsx b/src/renderer/components/Root.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import './Root.scss';
-import { User } from './User';
 import { SyncLoader } from 'react-spinners';
 import { Connection } from 'typeorm';
+import UserContainer from '../containers/UserContainer';
 
 interface RootProps {
     db:Connection,
@@ -15,7 +15,7 @@ export class Root extends React.Component<RootProps, any> {
         this.props.fetchDb();
     }
     
-    render(){
+    render(): any {
         let Content;
         if (!this.props.db) {
            Content = (
@@ -31,9 +31,7 @@ export class Root extends React.Component<RootProps, any> {
                         </p>
                     </div>
                     <div className="flex-row">
-                        <User
-                            db={this.props.db}
-                        />
+                        <UserContainer />
                     </div>
                 </div>
             );
diff --git a/src/renderer/components/User.tsx b/src/renderer/components/User.tsx
@@ -1,86 +1,82 @@
 import * as React from 'react';
 import './User.scss';
-import { FormEvent } from 'react';
 
 import { UserEntity } from '../entities/UserEntity';
-import { Connection } from '../../../node_modules/typeorm';
-
+import { Formik } from 'formik';
 
 interface UserProps {
-    db: Connection
+    fetchUser: Function;
+    saveUser: Function;
+    user: UserEntity|null;
 }
 export class User extends React.Component<UserProps, any> {
-    constructor(props: any){
-        super(props);
-        this.state = {
-            formName: ""
-        }
-        
-        this.handleInputChange = this.handleInputChange.bind(this);
-        this.handleFormSubmit = this.handleFormSubmit.bind(this);
-    }
-    
-    async componentDidMount() {
-        let userRepo = this.props.db.getRepository(UserEntity);
-        let user = await userRepo.findOne(1);
-        let newState:any = {userRepo};
-        if (user) {
-            newState.user = user;
-        }
-        
-        this.setState(newState);
-    }
     
-    async handleFormSubmit(event: any) {
-        event.preventDefault();
-        
-        if (this.state.formName) {
-            let user = await this.state.userRepo.findOne({name: this.state.formName});
-            if (!user) {
-                user = new UserEntity();
-                user.name = this.state.formName;
-                await this.state.userRepo.save(user);
-                
-                let savedUser = await this.state.userRepo.findOne({name: this.state.formName});
-                this.setState({user: savedUser});
-            }
+    componentDidMount() {
+        if (!this.props.user) {
+            this.props.fetchUser();
         }
     }
-    
-    handleInputChange(event: FormEvent<HTMLInputElement>) {
-        const target = event.currentTarget;
-        const value = target.type === 'checkbox' ? target.checked : target.value;
-        const name = target.name;
-
-        this.setState({
-            [name]: value
-        });
-    }
 
     render(){
         let content;
-        if (this.state.user) {
+        const user = this.props.user;
+        if (user) {
             content =  (
                 <div className='text-center'>   
-                    <span>You're {this.state.user.name}!</span>
+                    <span>You're {user.name}!</span>
                 </div>
             )
         } else {
             content = (
                 <div className='col-sm-6 offset-sm-3'>
-                    <form onSubmit={this.handleFormSubmit}>
-                        <div className="form-group">
-                            <label>Name</label>
-                            <input 
-                                name="formName"
-                                value={this.state.formName}
-                                onChange={this.handleInputChange}
-                                type="text" 
-                                className="form-control"
-                                placeholder="Enter Name" />
-                        </div>
-                        <button type="submit" className="btn btn-primary">Submit</button>
-                    </form>
+                    <Formik
+                        initialValues={{
+                            name: ''   
+                        }}
+                        validate={values => {
+                            let errors:any = {};
+                            if (values.name.length < 2) {
+                                errors.name = 'Name must be greater than 2 characters';
+                            }
+                            return errors;
+                        }}
+                        onSubmit={(
+                            values,
+                            { setSubmitting, setErrors /* setValues and other goodies */ }
+                        ) => {
+                            this.props.saveUser(values);
+                        }}
+                        render={({
+                            values,
+                            errors,
+                            touched,
+                            handleChange,
+                            handleBlur,
+                            handleSubmit,
+                            isSubmitting,
+                        }) => (
+                            <form onSubmit={handleSubmit}>
+                                <div className="form-group">
+                                    <label>Name</label>
+                                    <input
+                                        type="text"
+                                        name="name"
+                                        className="form-control"
+                                        onChange={handleChange}
+                                        onBlur={handleBlur}
+                                        value={values.name}
+                                    />
+                                    {touched.name && errors.name && <div>{errors.name}</div>}
+                                </div>
+                                <button 
+                                    type="submit"
+                                    className="btn btn-primary"
+                                    disabled={isSubmitting}>
+                                    Submit
+                                </button>
+                            </form>
+                        )}
+                    />
                 </div>
             )
         }
diff --git a/src/renderer/containers/UserContainer.tsx b/src/renderer/containers/UserContainer.tsx
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux'
+import { User } from '../components/User'
+import { saveUser, fetchUser } from '../actions';
+import { ThunkDispatch } from 'redux-thunk';
+
+​const mapStateToProps = (state:any) => {
+  return {
+    user: state.user,
+  }
+}
+​
+const mapDispatchToProps = (dispatch:ThunkDispatch<any,any,any>) => {
+  return {
+    saveUser: (userForm:any) => dispatch(saveUser(userForm)),
+    fetchUser: () => dispatch(fetchUser())
+  }
+}
+​
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(User)
diff --git a/src/renderer/entities/UserEntity.ts b/src/renderer/entities/UserEntity.ts
@@ -8,5 +8,10 @@ export class UserEntity {
  
     @Column()
     name!: string;
-
+    
+    constructor(userForm:any = null) {
+        if (userForm) {
+            this.name = userForm.name;
+        }
+    }
 }
diff --git a/src/renderer/reducers/index.ts b/src/renderer/reducers/index.ts
@@ -4,11 +4,15 @@ const initialState = {
   db: null
 };
 
+const set = (state:any, newState:any):any  => {
+  return Object.assign({}, state, newState);
+}
 const rootReducer = (state = initialState, action:any) => {
   switch (action.type) {
     case ActionTypes.DB_READY:
-      return Object.assign({}, state, {db: action.payload});
-      
+      return set(state, {db: action.payload});
+    case ActionTypes.SET_USER:
+      return set(state, {user: action.payload});
     default:
       return state;
   }
diff --git a/yarn.lock b/yarn.lock
