Backend logic for checkIn page

package.json

@@ -16,6 +16,7 @@
     "expo": "^35.0.0",
     "react": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
+    "react-native-datepicker": "^1.7.2",
     "react-native-elements": "^1.1.0",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-modal-dropdown": "^0.6.2",

src/Business/checkInBackend.tsx

@@ -0,0 +1,110 @@
+import {AsyncStorage } from 'react-native';
+
+const checkInHelper = {
+  //CHECKIN LOGIC
+  saveData : async (obj)=>{
+    let date = checkInHelper.getDate();
+    //checks if person already checked in today
+    let data = await checkInHelper.retrieveData(date);
+    if(data == "error" || data != null){
+      alert("You have already checked in today");
+    }
+    else{//adds new information to storage
+      try{
+        let checkInData = obj;
+        checkInData = {
+          mood: obj.mood,
+          hoursOfSleep: obj.hoursOfSleep
+        }
+        await AsyncStorage.setItem(date, JSON.stringify(checkInData));
+        checkInHelper.updateDates(date);
+      }
+      catch(error){
+        console.log(error)
+      }
+    }
+
+
+  },
+
+  retrieveData : async (date) => {
+    try{
+      let asyncValue = await AsyncStorage.getItem(date);
+      return asyncValue;
+    }
+    catch(error){
+      console.log(error);
+      return "error";
+    }
+  },
+
+  parseData : (dataString) =>{
+    if(dataString == null){
+      return "You did not check in that day"
+    }
+    var parsed = JSON.parse(dataString)
+    var text = ""
+    Object.keys(parsed).forEach((key)=>{
+      text += key + " : " + parsed[key] + "\n"
+    })
+    return text
+  },
+
+  displayAllData : async () => {
+    AsyncStorage.getAllKeys().then((keyArray) => {
+      AsyncStorage.multiGet(keyArray).then((keyValArray) => {
+        let myStorage: any = {};
+        for (let keyVal of keyValArray) {
+          myStorage[keyVal[0]] = keyVal[1]
+        }
+
+        console.log('CURRENT STORAGE: ', myStorage);
+      })
+    });
+  },
+
+  clearAllData : async ()=>{
+    AsyncStorage.clear();
+  },
+
+  getDate : () =>{
+    //gets the current date
+    let date = new Date();
+    let year = date.getFullYear();
+    let month = ("0"+(date.getMonth()+1)).slice(-2);
+    let day = ("0"+ date.getDate()).slice(-2);
+    condensedDate =  year + "-" + month + "-" + day;
+    return condensedDate;
+  },
+
+  updateDates : async (date)=>{
+    //check if at least one date has already been recorded
+    let asyncValue = await AsyncStorage.getItem("checkins");
+    if(asyncValue == null){
+      let allDates = [date];
+      await AsyncStorage.setItem("checkins", JSON.stringify(allDates))
+    }
+    else{
+      //add onto the previous array
+      asyncValue = JSON.parse(asyncValue)
+      asyncValue.push(date)
+      await AsyncStorage.setItem("checkins", JSON.stringify(asyncValue));
+    }
+  },
+
+  //RETREIVING CHECKIN DATA
+  getCheckin : ()=>{
+
+  },
+
+  getPlaceholder : (dateToCheck)=>{
+    console.log(dateToCheck)
+    if(dateToCheck == ""){
+      return "select date"
+    }
+    return dateToCheck
+  },
+
+}
+
+export default checkInHelper

src/View/Screens/CheckInPage.tsx

@@ -1,14 +1,82 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import {Text, View, AsyncStorage, Slider } from 'react-native';
+import { Button } from 'react-native-elements';
+import DatePicker from 'react-native-datepicker';
 import AppHeader from '../../components/AppHeader';
+import checkInHelper from '../../Business/checkInBackend.tsx'
 
 export default class CheckInPage extends React.Component<object, object> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mood: 0,
+      hoursOfSleep: 0,
+      dateToCheck: ""
+    };
+  }
+
   public render() {
+    const {value} = this.state;
     return (
-      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
+      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center', borderColor: 'red' }}>
         <AppHeader title="Check-in"/>
         <Text>Check In!</Text>
-        <Text>Be Happy!</Text>
+
+        <View style={{paddingTop: 30}}>
+          <Text>How are you feeling today?</Text>
+          <Slider
+            step={1}
+            minimumValue={1}
+            maximumValue={10}
+            thumbTintColor='rgb(252, 228, 149)'
+            onValueChange={val => this.setState({ mood: val })}
+            value={value}
+          />
+
+          <Text>How many hours of sleep did you get last night?</Text>
+          <Slider
+            step={1}
+            minimumValue={1}
+            maximumValue={10}
+            thumbTintColor='rgb(252, 228, 149)'
+            onValueChange={val => this.setState({ hoursOfSleep: val })}
+            value={value}
+          />
+        </View>
+
+        <Button
+          title="Check In"
+          onPress={ ()=>{checkInHelper.saveData(this.state)} }
+        />
+        <Button
+          title="Display"
+          onPress={ ()=>{checkInHelper.displayAllData()} }
+        />
+        <Button
+          title="Clear All"
+          onPress={ ()=>{checkInHelper.clearAllData()} }
+        />
+
+        <DatePicker
+        style={{width: 100, flex:1}}
+        date={this.state.dateToCheck}
+        mode="date"
+        placeholder={this.state.dateToCheck}
+        format="YYYY-MM-DD"
+        minDate="2019-01-01"
+        maxDate={checkInHelper.getDate()}
+        customStyles={{
+          dateIcon: {
+            position: 'absolute',
+            left: -40,
+          },
+        }}
+        onDateChange={async (date) => {
+          this.setState({dateToCheck: date})
+          alert(checkInHelper.parseData(await checkInHelper.retrieveData(date)))
+        }}
+        />
+
       </View>
     );
   }

src/View/Screens/StorePage.tsx

@@ -1,14 +1,42 @@
 import * as React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import AppHeader from '../../components/AppHeader';
 
 export default class StorePage extends React.Component<object, object> {
   public render() {
     return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
         <AppHeader title="Store"/>
-        <Text>Store Page!</Text>
+        <Text style={styles.header}>Store Page!</Text>
+        <View styles={{flexDirection: 'row'}}>
+          <TouchableOpacity style={styles.shopItem}>
+            <Text>Item 1</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.shopItem}>
+            <Text>Item 2</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.shopItem}>
+            <Text>Item 3</Text>
+          </TouchableOpacity>
+        </View>
       </View>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  header: {
+    fontSize: 30,
+    flexDirection: 'column',
+    justifyContent: 'flex-start'
+  },
+  container: {
+    paddingLeft: 30,
+    paddingRight: 30,
+    backgroundColor: 'green'
+  },
+  shopItem: {
+    padding: 5,
+    backgroundColor: 'blue'
+  }
+});

src/components/AppHeader.tsx

@@ -10,7 +10,7 @@ interface IProps {
 export default class AppHeader extends React.Component<IProps, object> {
   public render() {
     return (
-      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
+      <View style={{ flex: 0.5, justifyContent: 'flex-start', alignItems: 'center', borderWidth: 4, borderColor: 'red' }}>
         <Header
           centerComponent={{ text: this.props.title }}
         />