diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..4262cf36 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +node_modules +dist +dist/bundle.js.map +dist/bundle.js +package-lock.json +dist/bundle.js.map +dist/bundle.js +npm-debug.log diff --git a/index.html b/index.html new file mode 100644 index 00000000..91e377ab --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Hello React! + + + +
+ + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..6f3e0d07 --- /dev/null +++ b/package.json @@ -0,0 +1,57 @@ +{ + "name": "sureify.pbpraveen.me", + "version": "1.0.0", + "description": "React Tutorial with Typescript", + "main": "index.js", + "scripts": { + "clean": "rm -rf /dist", + "build": "webpack --mode=development", + "dev": "set NODE_ENV=dev && npm run clean && npm run build && webpack-dev-server --mode=development --content-base dist/", + "start": "" + }, + "author": "Praveen Kumar", + "license": "ISC", + "dependencies": { + "@blueprintjs/core": "^3.29.0", + "@blueprintjs/datetime": "^3.18.3", + "@blueprintjs/select": "^3.13.4", + "@blueprintjs/table": "^3.8.10", + "@types/lodash": "^4.14.157", + "@types/pure-render-decorator": "^0.2.28", + "@types/react": "^16.0.36", + "@types/react-addons-css-transition-group": "^15.0.3", + "@types/react-dom": "^16.0.3", + "@types/react-redux": "^7.1.9", + "babel-loader": "^8.1.0", + "babel-preset-es2015": "^6.24.1", + "babel-preset-react": "^6.24.1", + "es6-promise": "^4.2.8", + "firebase": "^4.11.0", + "html-webpack-plugin": "^4.3.0", + "lodash": "^4.17.15", + "react": "^16.2.0", + "react-addons-css-transition-group": "^15.6.2", + "react-dom": "^16.2.0", + "react-redux": "^7.2.0", + "redux": "^4.0.5", + "redux-thunk": "^2.3.0", + "runtypes": "^4.3.0", + "style-loader": "^1.2.1", + "url-loader": "^4.1.0", + "webpack": "^4.43.0", + "whatwg-fetch": "^3.1.0" + }, + "devDependencies": { + "awesome-typescript-loader": "^5.2.1", + "css-loader": "^3.6.0", + "extract-text-webpack-plugin": "^2.1.2", + "mini-css-extract-plugin": "^0.9.0", + "node-sass": "^4.14.1", + "postcss-loader": "^3.0.0", + "sass-loader": "^8.0.2", + "source-map-loader": "^1.0.1", + "typescript": "^3.9.6", + "webpack-cli": "^3.3.12", + "webpack-dev-server": "^3.11.0" + } +} diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 00000000..727a91d7 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1 @@ +export * from './tasks'; \ No newline at end of file diff --git a/src/components/tasks/AddTaskForm.tsx b/src/components/tasks/AddTaskForm.tsx new file mode 100644 index 00000000..0758fde0 --- /dev/null +++ b/src/components/tasks/AddTaskForm.tsx @@ -0,0 +1,190 @@ +import * as React from 'react'; +import { Dialog, Classes, Button, Intent } from '@blueprintjs/core'; +import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core'; +import { DateInput, IDateFormatProps } from "@blueprintjs/datetime"; +import { Task, UIOption, Priority } from '../../models'; +import { StoreUtils } from '../../store'; +import { Sf } from '../../services'; + +export interface AddTaskFormProps { + openModal?: boolean; + onClose?: (value?: any) => any; + taskRecord?: Task; + mode?: 'add' | 'edit' | 'view'; +} + +export interface AddTaskFormState { + openModal?: boolean; + taskRecord?: Task; + mode?: 'add' | 'edit' | 'view'; +} + +export class AddTaskForm extends React.Component +{ + + + constructor(props: AddTaskFormProps) { + super(props); + this.state = { + openModal: props.openModal, + taskRecord: props.taskRecord || new Task(), + mode: props.taskRecord ? 'edit' : 'add' + } + } + + public componentWillReceiveProps(nextProps: AddTaskFormProps) { + if (nextProps.taskRecord) { + const taskRecord = JSON.parse(JSON.stringify(nextProps.taskRecord)); + taskRecord.dueDate = new Date(taskRecord.dueDate); + this.setState({ openModal: nextProps.openModal, taskRecord: nextProps.taskRecord, mode: nextProps.mode ? nextProps.mode : 'edit' }) + } else { + this.setState({ openModal: nextProps.openModal, taskRecord: undefined, mode: 'add' }) + } + } + + + public render() { + const state = this.state; + const jsDateFormatter: IDateFormatProps = { + // note that the native implementation of Date functions differs between browsers + formatDate: date => date.toLocaleDateString(), + parseDate: str => new Date(str), + placeholder: "MM/DD/YYYY", + }; + const taskRecord = state.taskRecord ? JSON.parse(JSON.stringify(state.taskRecord)) : state.taskRecord; + const dueDate = taskRecord && taskRecord.dueDate && new Date(taskRecord.dueDate); + return ( + +
+ + this.handleOnChange('title', e.target.value)} type='text' id="text-summary" /> + + +