Updates

StressPrediction/App.js

 import React, { useState } from 'react';
 import { View } from 'react-native';
 import LandingPage from './src/landingPage'; 
-import AddData from './src/index';
+import NewJournalEntry from './src/newJournalEntry'; 
 
 export default function App() {
   const [showAddData, setShowAddData] = useState(false);
@@ -19,7 +19,7 @@ export default function App() {
       {!showAddData ? (
         <LandingPage onGoToAddData={handleGoToAddData} />
       ) : (
-        <AddData onGoBack={handleGoBack} />
+        <NewJournalEntry onGoBack={handleGoBack} />
       )}
     </View>
   );

StressPrediction/package-lock.json

@@ -16,6 +16,7 @@
         "firebase": "^9.6.11",
         "react": "18.2.0",
         "react-native": "0.73.5",
+        "react-native-calendars": "^1.1304.1",
         "react-native-gesture-handler": "^2.15.0",
         "react-native-reanimated": "^3.8.0",
         "react-native-safe-area-context": "^4.9.0",
@@ -11241,6 +11242,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "optional": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -12327,6 +12337,23 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-calendars": {
+      "version": "1.1304.1",
+      "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1304.1.tgz",
+      "integrity": "sha512-D1aU5lLhi7KCCCeHhKOkcC41K8s3paiiIfMaOQx6NezCbgKHelqT01WPpAZLh3Cm0QTC5EZo0oDPD0mCdKrDgQ==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.1",
+        "lodash": "^4.17.15",
+        "memoize-one": "^5.2.1",
+        "prop-types": "^15.5.10",
+        "react-native-swipe-gestures": "^1.0.5",
+        "recyclerlistview": "^4.0.0",
+        "xdate": "^0.8.0"
+      },
+      "optionalDependencies": {
+        "moment": "^2.29.4"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.15.0",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz",
@@ -12385,6 +12412,11 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-swipe-gestures": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz",
+      "integrity": "sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw=="
+    },
     "node_modules/react-native/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -12531,6 +12563,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/recyclerlistview": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.0.tgz",
+      "integrity": "sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==",
+      "dependencies": {
+        "lodash.debounce": "4.0.8",
+        "prop-types": "15.8.1",
+        "ts-object-utils": "0.0.5"
+      },
+      "peerDependencies": {
+        "react": ">= 15.2.1",
+        "react-native": ">= 0.30.0"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -13590,6 +13636,11 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/ts-object-utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz",
+      "integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA=="
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -14024,6 +14075,11 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/xdate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/xdate/-/xdate-0.8.2.tgz",
+      "integrity": "sha512-sNBlLfOC8S3V0vLDEUianQOXcTsc9j4lfeKU/klHe0RjHAYn0CXsSttumTot8dzalboV8gZbH38B+WcCIBjhFQ=="
+    },
     "node_modules/xml2js": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.0.tgz",

StressPrediction/package.json

@@ -17,6 +17,7 @@
     "firebase": "^9.6.11",
     "react": "18.2.0",
     "react-native": "0.73.5",
+    "react-native-calendars": "^1.1304.1",
     "react-native-gesture-handler": "^2.15.0",
     "react-native-reanimated": "^3.8.0",
     "react-native-safe-area-context": "^4.9.0",

StressPrediction/src/index.js

-import React, { useState } from 'react';
-import { View, Text, StyleSheet, TextInput, Button, Image } from 'react-native';
-import { db } from '../config';
-import { ref, set } from 'firebase/database';
+import { View, Text, StyleSheet, TextInput, Button, Image } from 'react-native'
+import React, { useState } from 'react'
+import { db } from '../config'
+import { ref, set } from 'firebase/database'
 
-const AddData = ({ onGoBack }) => {
+const AddData = () => {
     const [title, setTitle] = useState('');
     const [body, setBody] = useState('');
 
+    //function to add data to forebase realtime db
     const dataAddOn = () => {
-    set(ref(db, 'posts/' + title), {
+        set(ref(db, 'posts/' + title),{
             title: title,
             body: body,
         });
-    setTitle('');
-    setBody('');
-  };
+        setTitle('')
+        setBody('')
+    }
 
     return (
         <View style={styles.container}>
@@ -24,7 +25,7 @@ const AddData = ({ onGoBack }) => {
               style={styles.image}
             />
             <TextInput
-        placeholder='Job Satisfaction'
+              placeholder='Job Satisfication'
               value={title}
               onChangeText={(text) => setTitle(text)}
               style={styles.input}
@@ -39,15 +40,11 @@ const AddData = ({ onGoBack }) => {
               title='Add Data'
               onPress={dataAddOn}
             />
-      <Button 
-        title='Back to Landing Page'
-        onPress={onGoBack}
-      />
         </View>
-  );
-};
+    )
+}
 
-export default AddData;
+export default AddData
 
 const styles = StyleSheet.create({
     container: {
@@ -55,22 +52,22 @@ const styles = StyleSheet.create({
       backgroundColor: '#fff',
     },
     header:{
-    fontSize: 40,
-    textAlign: 'center',
-    marginTop: 50,
-    color: 'black',
+        fontSize:40,
+        textAlign:'center',
+        marginTop:50,
+        color:'black',
         fontWeight: 'bold'
     },
     input:{
-    borderWidth: 1,
-    borderColor: 'black',
-    margin: 10,
-    padding: 10,
-    fontSize: 18,
-    borderRadius: 6,
+        borderWidth:1,
+        borderColor:'black',
+        margin:10,
+        padding:10,
+        fontSize:18,
+        borderRadius:6,
     },
     image: {
       width: '100%',
       height: 200,
   }
-});
+  }); 
\ No newline at end of file

StressPrediction/src/landingPage.js

@@ -67,22 +67,22 @@ const styles = StyleSheet.create({
   },
   rectangle: {
     width: '100%',
-    height: 50,
-    backgroundColor: '#F0B27A',
+    height: 150,
+    backgroundColor: '#616A6B',
     position: 'absolute',
     bottom: 0,
-    borderTopLeftRadius: 40,
-    borderTopRightRadius: 40,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
     justifyContent: 'center',
     alignItems: 'center',
   },
   button: {
-    backgroundColor: '#F0B27A', 
+    backgroundColor: '#616A6B', 
     padding: 10,
     borderRadius: 5,
   },
   buttonText: {
-    color: '#273746',
+    color: '#283747',
     fontSize: 18,
     fontWeight: 'bold',
   },

StressPrediction/src/newJournalEntry.js

+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
+
+const NewJournalEntry = ({ onGoBack }) => { 
+  return (
+    <View style={styles.container}>
+      <View style={styles.rectangle}>
+        <Text style={styles.text}>HELLO SHASHINI !{'\n'}WHAT WOULD YOU LIKE TO DO?</Text>
+        <TouchableOpacity style={styles.button} onPress={onGoBack}>
+          <Text style={styles.buttonText}>Go Back</Text>
+        </TouchableOpacity>
+        
+        <View style={styles.innerRectangle}>
+          <Text style={styles.whiteText}>Journal Entry</Text>
+          <Image
+            source={require('../images/redCircle.png')}
+            style={styles.backgroundImage}
+          />
+          <View style={styles.innerRectangle1}>
+            <Text style={styles.whiteText}>View History</Text>
+            <Image
+              source={require('../images/historyicon.png')}
+              style={styles.backgroundImage}
+            />
+          </View>
+
+          <View style={styles.innerRectangle2}>
+            <Text style={styles.whiteText1}>MOOD HISTORY {'\n'}</Text>
+            <View style={styles.daysContainer}>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Mon</Text>
+              </View>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Tue</Text>
+              </View>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Wed</Text>
+              </View>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Thu</Text>
+              </View>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Fri</Text>
+              </View>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Sat</Text>
+              </View>
+              <View style={styles.dayContainer}>
+                <Text style={styles.emoji}>😊</Text>
+                <Text style={styles.dayText}>Sun</Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rectangle: {
+    width: 320, 
+    height: 650, 
+    justifyContent: 'space-between', 
+    alignItems: 'center',
+    borderColor: 'black', 
+    borderWidth: 1, 
+    borderRadius: 10, 
+    padding: 30, 
+    backgroundColor:'#FDEDEC',
+  },
+  text: {
+    marginLeft: -70,
+  },
+  button: {
+    backgroundColor: 'blue',
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 5,
+    alignSelf: 'flex-end', 
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  innerRectangle: {
+    width: 130, 
+    height: 100, 
+    borderColor: '#F1948A', 
+    borderWidth: 1, 
+    borderRadius: 10, 
+    marginTop: -600, 
+    top:-410,
+    marginLeft:-150,
+    backgroundColor: '#F1948A',
+  },
+  innerRectangle1: {
+    width: 130, 
+    height: 100, 
+    borderColor: '#F1948A', 
+    borderWidth: 1, 
+    borderRadius: 10, 
+    top:-85,
+    marginLeft:150,
+    backgroundColor: '#F1948A',
+  },
+  innerRectangle2: {
+    width: 300, 
+    height: 120, 
+    borderColor: 'white', 
+    borderWidth: 1, 
+    borderRadius: 12, 
+    top:-70,
+    marginLeft:-10,
+    backgroundColor: 'white',
+    paddingTop: 10,
+    alignItems: 'center',
+  },
+  whiteText: {
+    color: 'white',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 18,
+  },
+  whiteText1: {
+    color:'#E74C3C',
+    fontWeight: 'bold',
+    fontSize: 15,
+  },
+  backgroundImage: {
+    width: 60,
+    height: 60,
+    marginLeft:30,
+  },
+  daysContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingHorizontal: 20,
+  },
+  dayContainer: {
+    alignItems: 'center',
+  },
+  dayText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color:'#273746',
+  },
+  emoji: {
+    fontSize: 20,
+  },
+});
+
+export default NewJournalEntry;