diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e6ebe4ef --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local +.package-lock.json + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/package.json b/package.json new file mode 100644 index 00000000..534badcf --- /dev/null +++ b/package.json @@ -0,0 +1,45 @@ +{ + "name": "my-app", + "version": "0.1.0", + "private": true, + "dependencies": { + "@microsoft/sp-office-ui-fabric-core": "^1.10.0", + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.5.0", + "@testing-library/user-event": "^7.2.1", + "@types/jest": "^24.9.1", + "@types/node": "^12.12.42", + "@types/react": "^16.9.35", + "@types/react-datepicker": "^2.11.0", + "@types/react-dom": "^16.9.8", + "@uifabric/icons": "^7.3.47", + "node-sass": "^4.14.1", + "office-ui-fabric-react": "^7.116.1", + "react": "^16.13.1", + "react-datepicker": "^2.16.0", + "react-dom": "^16.13.1", + "react-scripts": "3.4.1", + "typescript": "^3.7.5" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..bcd5dfd6 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..6100c66d --- /dev/null +++ b/public/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + Todo App + + + + +
+ + + + \ No newline at end of file diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 00000000..fc44b0a3 Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 00000000..a4e47a65 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 00000000..58b3b4eb --- /dev/null +++ b/src/App.scss @@ -0,0 +1,22 @@ +@import './../node_modules/office-ui-fabric-react/dist/sass/_References.scss'; +// @import './../node_modules/office-ui-fabric-core/dist/css/fabric.min.css'; +@import './../node_modules/office-ui-fabric-react/dist/sass/Fabric.scss'; + + +.row { + @include ms-Grid-row; + @include ms-fontColor-black; + // background-color: $ms-color-themeDark; + // padding: 20px; +} + +.column { + @include ms-Grid-col; + @include ms-lg6; + @include ms-xl6; +} + +.App { + // text-align: center; + // background: #61dafb; +} diff --git a/src/ITodo.ts b/src/ITodo.ts new file mode 100644 index 00000000..22a5865f --- /dev/null +++ b/src/ITodo.ts @@ -0,0 +1,9 @@ +export interface ITask { + id: number; + currentState: string, + title: string; + description: string; + createdAt: Date; + dueDate: Date; + priority: string; +} diff --git a/src/Tasks.tsx b/src/Tasks.tsx new file mode 100644 index 00000000..24b854d8 --- /dev/null +++ b/src/Tasks.tsx @@ -0,0 +1,182 @@ +import React, { Component } from 'react' +import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel'; +import { TextField } from 'office-ui-fabric-react/lib/TextField'; +import DatePicker from "react-datepicker"; +import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup'; +import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; +import { Label } from 'office-ui-fabric-react/lib/Label'; +import "react-datepicker/dist/react-datepicker.css"; +import { ITask } from './ITodo'; +import { PrimaryButton } from 'office-ui-fabric-react/lib/Button'; + +const options: IChoiceGroupOption[] = [ + { key: 'None', text: 'None' }, + { key: 'low', text: 'low' }, + { key: 'medium', text: 'medium' }, + { key: 'high', text: 'high' }, +]; +export default class Tasks extends Component { + + constructor(props: any) { + super(props); + let curretDate: Date = new Date(); + this.state = { + loading: false, + task: { + id: curretDate.getTime(), + currentState: "", + title: "", + description: "", + createdAt: curretDate, + dueDate: null, + priority: "None", + } as ITask + } + } + + public componentWillReceiveProps(nexProps: any) { + let task: ITask = null; + let curretDate: Date = new Date(); + if (!nexProps.selectedTask) { + task = { + id: curretDate.getTime(), + currentState: "", + title: "", + description: "", + createdAt: curretDate, + dueDate: null, + priority: "None", + }; + } + else { + task = nexProps.selectedTask; + } + this.setState({ + task + }); + } + + + + render(): JSX.Element { + + let { task, loading } = this.state; + + return ( + this.props.closeTaskPanel()} + type={PanelType.custom} + customWidth='888px' + closeButtonAriaLabel="Close" + headerText="Task"> + { + loading ? + + + + : +
+
+
+ + , newValue?: string) => { + let tempTask: ITask = { ...task }; + tempTask.title = !newValue ? "" : newValue; + this.setState({ + task: tempTask + }); + } + } + required + /> +
+
+ +
+
+ , newValue?: string) => { + let tempTask: ITask = { ...task }; + tempTask.description = !newValue ? "" : newValue; + this.setState({ + task: tempTask + }); + } + } + /> +
+
+ +
+
+ , option?: IChoiceGroupOption) => { + + let tempTask: ITask = { ...task }; + tempTask.priority = !option ? "" : option.key; + this.setState({ + task: tempTask + }); + }} + label="Priority:" + /> +
+
+ + { + let tempTask: ITask = { ...task }; + tempTask.dueDate = date; + this.setState({ + task: tempTask + }); + }} + /> +
+
+ +
+
+
+
+ { + this.setState({ + loading: true + }, () => { + setTimeout(() => { + this.setState({ + loading: false + }, () => this.props.saveTask(task)); + }, 2500) + }) + + } + } + /> +
+
+ +
+ } +
+ ) + } +} diff --git a/src/Todo.tsx b/src/Todo.tsx new file mode 100644 index 00000000..887b30e8 --- /dev/null +++ b/src/Todo.tsx @@ -0,0 +1,173 @@ +import React from 'react'; +import './App.scss'; +import { PrimaryButton, IconButton } from 'office-ui-fabric-react/lib/Button'; +import { initializeIcons } from '@uifabric/icons'; +import { ITask } from './ITodo'; +import Tasks from './Tasks'; + +initializeIcons(); + +class Todo extends React.Component { + + constructor(props: any) { + super(props); + this.state = { + selectedTask: null, + data: [ + { + id: 0, + currentState: "Open", + title: "First Item", + description: "First Item", + createdAt: new Date(), + dueDate: new Date(), + priority: "high", + } as ITask + ] as ITask[], + isOpenTaskPanel: false, + } + + } + + public closeTaskPanel = (): void => { + this.setState({ + isOpenTaskPanel: false, + selectedTask: null + }) + } + + public saveTask = (task: ITask): void => { + let data: ITask[] = [...this.state.data]; + + let indexOfItem: number = data.findIndex((item: ITask) => item.id === task.id); + + if (indexOfItem === -1) { + task.currentState = "Open"; + data.push(task); + } + else { + data[indexOfItem] = task; + } + + this.setState({ + isOpenTaskPanel: false, + selectedTask: null, + data + }); + + } + + public deleteTask = (task: ITask): void => { + let data: ITask[] = [...this.state.data]; + + data = data.filter((item: ITask) => item.id !== task.id); + + this.setState({ + data + }); + + } + + public closeTask = (task: ITask): void => { + let data: ITask[] = [...this.state.data]; + + let indexOfItem: number = data.findIndex((item: ITask) => item.id === task.id); + data[indexOfItem].currentState = "Done"; + + this.setState({ + data + }); + + } + + render(): JSX.Element { + + let { data, isOpenTaskPanel, selectedTask } = this.state + + return ( +
+ +
+
+
+
+ this.setState({ + isOpenTaskPanel: true + })} + /> +
+
+
+ +
+
+
+ + + + + + + + + + + + + + + {data.map((d: ITask) => { + return ( + + + + + + + + + + ) + })} + +
StateTitleDescriptionCreatedDue DatePriorityAction
{d.currentState}{d.title}{d.description}{d.createdAt.toDateString()}{d.dueDate.toDateString()}{d.priority} + { + this.setState({ + selectedTask: d, + isOpenTaskPanel: true + }); + }} + + /> + this.deleteTask(d)} + /> + this.closeTask(d)} + /> +
+
+
+
+ + + +
+ ); + } + +} + +export default Todo; diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..ec2585e8 --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 00000000..dbf0ae04 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import * as serviceWorker from './serviceWorker'; +import Todo from './Todo'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 00000000..6b60c104 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 00000000..6431bc5f --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts new file mode 100644 index 00000000..b09523f1 --- /dev/null +++ b/src/serviceWorker.ts @@ -0,0 +1,149 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +type Config = { + onSuccess?: (registration: ServiceWorkerRegistration) => void; + onUpdate?: (registration: ServiceWorkerRegistration) => void; +}; + +export function register(config?: Config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL( + process.env.PUBLIC_URL, + window.location.href + ); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl: string, config?: Config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl: string, config?: Config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' } + }) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); + } +} diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 00000000..74b1a275 --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..1029f187 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "strictNullChecks": false, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": [ + "src" + ] +}