· 6 years ago · Mar 20, 2020, 03:36 AM
1// /client/App.js
2import React, { Component } from 'react';
3import axios from 'axios';
4import { blockStatement } from '@babel/types';
5import { delay } from 'q';
6import UWUForm from './components/UWUForm';
7import style from 'bootstrap/dist/css/bootstrap.css';
8
9
10
11
12class App extends Component {
13 // initialize our state
14 state = {
15 data: [],
16 id: 0,
17 message: null,
18 intervalIsSet: false,
19 idToDelete: null,
20 idToUpdate: null,
21 objectToUpdate: null,
22 };
23 speed=2
24
25
26 // when component mounts, first thing it does is fetch all existing data in our db
27 // then we incorporate a polling logic so that we can easily see if our db has
28 // changed and implement those changes into our UI
29 componentDidMount() {
30 this.getDataFromDb();
31 // if (!this.state.intervalIsSet) {
32 if (this.state.intervalIsSet) {
33 let interval = setInterval(this.getDataFromDb, 1000);
34 this.setState({ intervalIsSet: interval });
35 }
36 }
37
38 // never let a process live forever
39 // always kill a process everytime we are done using it
40 componentWillUnmount() {
41 if (this.state.intervalIsSet) {
42 clearInterval(this.state.intervalIsSet);
43 this.setState({ intervalIsSet: null });
44 }
45 }
46
47 // just a note, here, in the front end, we use the id key of our data object
48 // in order to identify which we want to Update or delete.
49 // for our back end, we use the object id assigned by MongoDB to modify
50 // data base entries
51
52 // our first get method that uses our backend api to
53 // fetch data from our data base
54 getDataFromDb = () => {
55 fetch('http://localhost:3001/api/getData')
56 .then((data) => data.json())
57 .then((res) => this.setState({ data: res.data }));
58 };
59
60 // our put method that uses our backend api
61 // to create new query into our data base
62 putDataToDB = (message) => {
63 let currentIds = this.state.data.map((data) => data.id);
64 let idToBeAdded = 0;
65 while (currentIds.includes(idToBeAdded)) {
66 ++idToBeAdded;
67 }
68
69 axios.post('http://localhost:3001/api/putData', {
70 id: idToBeAdded,
71 message: message,
72 });
73 };
74
75 // our delete method that uses our backend api
76 // to remove existing database information
77 deleteFromDB = (idTodelete) => {
78 parseInt(idTodelete);
79 let objIdToDelete = null;
80 this.state.data.forEach((dat) => {
81 if (dat.id == idTodelete) {
82 objIdToDelete = dat._id;
83 }
84 });
85
86 axios.delete('http://localhost:3001/api/deleteData', {
87 data: {
88 id: objIdToDelete,
89 },
90 });
91 };
92
93 // our update method that uses our backend api
94 // to overwrite existing data base information
95 updateDB = (idToUpdate, updateToApply) => {
96 let objIdToUpdate = null;
97 parseInt(idToUpdate);
98 this.state.data.forEach((dat) => {
99 if (dat.id == idToUpdate) {
100 objIdToUpdate = dat._id;
101 }
102 });
103
104 axios.post('http://localhost:3001/api/updateData', {
105 id: objIdToUpdate,
106 update: { message: updateToApply },
107 });
108 };
109
110 showChangeColor = (color, time) => {
111 let x = document.getElementById("block")
112 x.style.backgroundColor=color
113 delay(time)
114 x.style.backgroundColor="#F000"
115 }
116
117 parseMessageAndDoThing = (message,id) => {
118 const note_list = JSON.parse(message);
119 const x = document.getElementById(`block-${id}`);
120 const clear_ratio = 0.75;
121 let i = 1;
122 const next_color = () => {
123 if (i >= note_list.length) {
124 return;
125 }
126 const val = note_list[i];
127 console.log(val.color);
128 x.style.backgroundColor = val.color;
129 ++i;
130 setTimeout(()=>show_clear(val), (1-clear_ratio) * val.duration*1000*this.speed);
131 };
132 const show_clear = (val) => {
133 x.style.backgroundColor = "#0000";
134 setTimeout(next_color, clear_ratio * val.duration*1000*this.speed);
135 };
136
137 next_color();
138 }
139
140 sendUwUText = (message) => {
141 axios.post('http://localhost:3001/api/updateData', {
142 words: message,
143 });
144 }
145
146 // here is our UI
147 // it is easy to understand their functions when you
148 // see them render into our screen
149 render() {
150 const { data } = this.state;
151 return (
152 <div>
153 <UWUForm/>
154 <UWUForm/>
155 </div>
156 );
157 }
158}
159
160export default App;