Trying to reformatting the datapath.

Modification: 1. Todo components were added state and initializer. 2. The DATA in FlourishingTabScreen is reformatted and will be reformatted even further. TODO: 1. Reformatting the data structure in FlourishingTabScreen. 2. Local Storage need to be added.
EdwardHaoranLee · Nov 8, 2020 · 1788f41 · 1788f41
1 parent 4c7a4e0
commit 1788f41
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 45 deletions.
diff --git a/Flourish/App.js b/Flourish/App.js
@@ -144,7 +144,6 @@ function MyTabs() {
                                     height: 50,
                                     width: 50,
                                     borderRadius: 58,
-                                    justifyContent: 'center',
                                     alignItems: 'center',
 
                                 }}

diff --git a/Flourish/Components/Flourishing/Todo.js b/Flourish/Components/Flourishing/Todo.js
@@ -3,19 +3,48 @@ import { View, StyleSheet, Text } from 'react-native';
 import { CheckBox, Icon } from 'react-native-elements';
 
 export default class Todo extends React.Component {
-    constructor(props) {
-        super(props);
-        // console.log(this.props);
-        this.state = {
-            checking: this.props.data.checked ==="true",
+
+    frequencyConverter = (days) => {
+        const days_int = parseInt(days)
+        if (days_int === 7) {
+            return "Weekly"
+        } else if (days_int === 30){
+            return "Monthly"
+        } else if (days_int === 14) {
+            return "Biweekly"
+        } else {
+            return `Every ${days} days`
         }
     }
 
+    componentDidMount() {
+        console.log(this.props)
+        this.setState({
+            name: this.props.name,
+            task: this.props.task,
+            frequency: this.props.freq,
+            date: this.props.date,
+            checking: this.props.checked
+        })
+    }
+
+    state = {
+        name: '',
+        task: '',
+        frequency: 0,
+        date: new Date(),
+        checking: true
+    }
+
     toggleCheckBox = () => {
         this.setState(prevState => ({ checking: !prevState.checking }));
     }
 
     render() {
+        const {name, task, frequency, date, checking} = this.state
+        const monthNames = ["January", "February", "March", "April", "May", "June",
+            "July", "August", "September", "October", "November", "December"
+        ];
         return (
             <View
                 style={{
@@ -42,7 +71,7 @@ export default class Todo extends React.Component {
                 <CheckBox
                         checkedIcon='check-circle-o'
                         uncheckedIcon='circle-o'
-                        checked={this.state.checking}
+                        checked={checking}
                         onPress={this.toggleCheckBox}
                         size={23}
                         containerStyle={{margin: 0, padding:0}}
@@ -59,7 +88,7 @@ export default class Todo extends React.Component {
                             flexWrap: 'wrap',
                         }}
                     >
-                        {this.props.data.name}
+                        {name}
                     </Text>
                 </View>
 
@@ -68,15 +97,18 @@ export default class Todo extends React.Component {
                     width: 2,
                     backgroundColor: '#cacaca',
                     marginHorizontal: 16,
-                }}></View>
+                }}/>
 
                 <View style={{ flex: 0.5, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around' }}>
-                    <View style={{ flex: 0.6, height: '100%', flexDirection: 'column' }}>
-                        <Text style={{ fontSize: 15, }}>{this.props.data.task}</Text>
-                        <Text style={{ color: '#cacaca' }}>{this.props.data.freq}</Text>
+                    <View style={{ flex: 0.6, height: '100%', flexDirection:'column'}}>
+                        <Text style={{fontSize: 15, }}>{task}</Text>
+                        <Text style={{color: '#cacaca'}}>{this.frequencyConverter(frequency)}</Text>
                     </View>
-                    <View style={{ flex: 0.4, paddingVertical: 0, alignItems: 'flex-end' }}>
-                        <Text style={{ fontSize: 15, color: '#ef5e85', fontWeight: 'bold', }}>{this.props.data.date}</Text>
+                    <View style={{ flex: 0.4, paddingVertical:0, alignItems:'flex-end'}}>
+                        <Text style={{fontSize: 15, color:'#ef5e85', fontWeight: 'bold'}}>
+                            {`${monthNames[date.getMonth()].slice(0, 3)}. ${date.getDate()}`}
+                        </Text>
+
                     </View>
                 </View>
             </View>

diff --git a/Flourish/Tabs/FlourishingTabScreen.js b/Flourish/Tabs/FlourishingTabScreen.js
@@ -3,29 +3,42 @@ import { SafeAreaView, StatusBar, StyleSheet, Text, View, ScrollView, SectionLis
 import Todo from '../Components/Flourishing/Todo';
 
 
-export default function FlourishingTabScreen() {
-    const renderItem = ({ item }) => {
-        // console.log(item);
+export default class FlourishingTabScreen extends React.Component{
+    componentDidMount() {
+        this.setState({
+            plants: this.props.plants
+        })
+    }
+
+    state = {
+        plants: [],
+        reminders: []
+    }
+
+    renderItem = ({ item }) => {
+
         return (
-            <Todo data={{ 'name': item.name, 'task': item.task, 'freq': item.freq, 'date': item.date, 'checked': item.checked }} />
+            <Todo name={item.name} task={item.task} freq={item.freq} date={item.date} checked={item.checked}/>
         );
+
     }
 
-    return (
-        <SafeAreaView style={styles.container}>
-            {/* <View> */}
-            <SectionList
-                style={styles.sectionContainer}
-                sections={DATA}
-                keyExtractor={(item, index) => item + index}
-                renderItem={item => renderItem(item)}
-                renderSectionHeader={({ section: { title } }) => (
-                    <Text style={styles.sectionTitle}>{title}</Text>
-                )}
-            />
-            {/* </View> */}
-        </SafeAreaView>
-    );
+    render() {
+        return (
+            <SafeAreaView style={styles.container}>
+                <SectionList
+                    style={styles.sectionContainer}
+                    sections={DATA}
+                    keyExtractor={(item, index) => item + index}
+                    renderItem={item => this.renderItem(item)}
+                    renderSectionHeader={({ section: { title } }) => (
+                        <Text style={styles.sectionTitle}>{title}</Text>
+                    )}
+                />
+            </SafeAreaView>
+
+        );
+    }
 }
 
 
@@ -63,33 +76,33 @@ const TODAY_DATA = [
         'id': '0',
         'name': 'The Green Ball',
         'task': 'Watering',
-        'freq': '1/week',
-        'date': 'Nov. 7',
-        'checked': 'false',
+        'freq': 7,
+        'date': new Date(Date.now()),
+        'checked': false,
     },
     {
         'id': '1',
         'name': 'The Red Ball',
         'task': 'Watering',
-        'freq': '1/week',
-        'date': 'Nov. 7',
-        'checked': 'true',
+        'freq': 7,
+        'date': new Date(Date.now()),
+        'checked': true,
     },
     {
         'id': '2',
         'name': 'The Blue Ball',
         'task': 'Watering',
-        'freq': '1/week',
-        'date': 'Nov. 7',
-        'checked': 'true',
+        'freq': 30,
+        'date': new Date(Date.now()),
+        'checked': true,
     },
     {
         'id': '3',
         'name': 'The Orange Ball',
         'task': 'Watering',
-        'freq': '1/week',
-        'date': 'Nov. 8',
-        'checked': 'true',
+        'freq': 7,
+        'date': new Date(Date.now()),
+        'checked': true,
     },
 ]