DO STUFF

frontend/.expo/settings.json

@@ -3,7 +3,7 @@
   "lanType": "ip",
   "dev": true,
   "minify": false,
-  "urlRandomness": null,
+  "urlRandomness": "6HsVpa8",
   "https": false,
   "scheme": null,
   "devClient": false

frontend/App.js

@@ -5,13 +5,16 @@ import FormHeader from './app/components/FormHeader';
 import LoginForm from './app/components/LoginForm';
 import SignupForm from './app/components/SignupForm';
 import Home from './app/components/Home';
+import ForYou from './app/components/ForYou';
+import Group from './app/components/Group';
+
 import axios from 'axios';
 import { useEffect } from 'react';
 
 export default function App() {
   const fetchApi = async () => {
     try {
-      const res = await axios.get('http://127.0.0.1:8000/');
+      const res = await axios.get('http://192.168.1.245:8000/');
       console.log(res);
     } catch (error) {
       console.log(error.message);
@@ -46,9 +49,8 @@ export default function App() {
         showsHorizontalScrollIndicator={false}
         style={{ backgroundColor: 'white' }}
       >
-        <LoginForm />
-        <SignupForm />
         <Home />
+
       </ScrollView>
       <StatusBar style="auto" />
     </View>

frontend/app/api/client.js

@@ -1,3 +1,3 @@
 import axios from "axios";
 
-export default axios.create({ baseURL: "http://YOURIPADDRESSHERE:8000" });
+export default axios.create({ baseURL: "http://10.176.197.39:8000" });

frontend/app/components/ForYou.js

@@ -1,36 +1,66 @@
 import React from 'react';
-import { View, Text, StyleSheet, Image } from 'react-native';
+import { View, ScrollView, Image, Text, StyleSheet } from 'react-native';
+
+const ForYou = () => {
+  const images = [
+    { id: 1, src: require('./image.png') },
+    { id: 2, src: require('./image2.png') },
+    { id: 3, src: require('./image3.png') },
+    { id: 4, src: require('./image4.png') },
+    { id: 5, src: require('./image5.png') },
+    { id: 6, src: require('./image6.png') },
+  ];
 
-const ForYou = ({ navigation }) => {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>For You</Text>
-      <Image
-        source={require('./Osaka.png')} // Example path to local image
-        style={styles.image}
-      />
-      {/* Add more content here */}
+      <Text style={styles.text}>For You</Text>
+      <ScrollView 
+        horizontal={true} 
+        showsHorizontalScrollIndicator={false} 
+        style={styles.scrollView}
+      >
+        {images.map((image) => (
+          <Image key={image.id} source={image.src} style={styles.image} />
+        ))}
+      </ScrollView>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingTop: 50,
+    paddingTop: 60,
+    backgroundColor: 'white', // Set the background color to blue
+    marginBottom: 50,
+  },
+  borderLeft: {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
   },
-  title: {
-    fontSize: 45,
-    fontWeight: 'bold',
-    marginBottom: 20,
+  borderRight: {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  text: {
+  fontSize: 20,  // Increase text size
+  fontWeight: 'bold',  // Make text bold
+  marginBottom: 20,  // Add space below the text
+  textAlign: 'left',  // Align text to the left
+  alignSelf: 'stretch', // Stretch to take the full width if inside a flex container
+  marginLeft: 180,
+},
+
+  scrollView: {
+    flexDirection: 'row',  // Align items in a row
+    padding: 20,  // Add some padding around
   },
   image: {
-    width: 200, // Adjust width as needed
-    height: 200, // Adjust height as needed
-    marginBottom: 20, // Add margin to separate from the title
+    width: 150,  // Set width of images
+    height: 150,  // Set height of images
+    marginRight: 10,  // Add margin between images
   },
+
 });
 
 export default ForYou;

frontend/app/components/Group.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, Image, Text, ScrollView, StyleSheet } from 'react-native';
+
+const Group = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Group </Text>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollViewContent}>
+        <Image
+          source={require('./image.png')}
+          style={styles.image}
+        />
+        <Image
+          source={require('./image2.png')}
+          style={styles.image}
+        />
+        <Image
+          source={require('./image3.png')}
+          style={styles.image}
+        />
+        {/* Add more images here */}
+      </ScrollView>
+    </View>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 60,
+    backgroundColor: 'white', // Set the background color to white
+    marginBottom: 50,
+    // Remove justifyContent and alignItems properties
+  },
+  text: {
+    fontSize: 20, // Increase text size
+    fontWeight: 'bold', // Make text bold
+    marginBottom: 20, // Add space below the text
+    textAlign: 'left', // Align text to the left
+    // Remove alignSelf and marginLeft properties
+  },
+  scrollViewContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+  },
+  image: {
+    width: 150, // Adjust width as needed for desired size
+    height: 100, // Adjust height as needed for desired size
+  },
+});
+
+export default Group;

frontend/app/components/Home.js

@@ -1,24 +1,25 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import ForYou from './ForYou';
-import ForGroupA from './ForGroupA';
+import Group from './Group';
 
 const Home = ({ navigation }) => {
   return (
     <View style={styles.container}>
       <ForYou />
-      <ForGroupA />
+      <Group />
+
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'flex-start', // Align content at the top
-    alignItems: 'center', // Center content horizontally
-    paddingTop: 50, // Add paddingTop to create space from the top
-    backgroundColor: '#fff', // Set background color if needed
+    justifyContent: 'flex-end', // Align items to the bottom
+    alignItems: 'center', // Center items horizontally
+    marginBottom: 20, // Add margin at the bottom
+    paddingHorizontal: 20, // Add horizontal padding
   },
 });
 

frontend/app/components/LoginForm.js

@@ -8,7 +8,7 @@ import * as Yup from 'yup';
 import client from '../api/client';
 
 const validationSchema = Yup.object({
-  username: Yup.string()
+  email: Yup.string()
     .trim()
     .min(3, 'Invalid email')
     .required('Email is required'),
@@ -18,20 +18,28 @@ const validationSchema = Yup.object({
     .required('Password is required'),
 });
 
-const LoginForm = () => {
+const LoginForm = ({ navigation }) => {
   const userInfo = {
     email: '',
     password: '',
   };
 
   const logIn = async (values, formikActions) => {
-    const res = await client.post('/api/user/sign-in', {
-      ...values,
-    });
+    try {
+      const res = await client.post('/api/user/sign-in', {
+        ...values,
+      });
 
-    console.log(res.data);
-    formikActions.resetForm();
-    formikActions.setSubmitting(false);
+      console.log(res.data);
+      formikActions.resetForm();
+      formikActions.setSubmitting(false);
+
+      // Navigate to home page upon successful login
+      //navigation.navigate('./Home'); // Replace 'Home' with the name of your home screen
+    } catch (error) {
+      console.error('Login failed:', error);
+      // Handle login failure
+    }
   };
 
   return (
@@ -55,7 +63,7 @@ const LoginForm = () => {
             <>
               <FormInput
                 value={email}
-                error={touched.email && errors.username}
+                error={touched.email && errors.email}
                 onChangeText={handleChange('email')}
                 onBlur={handleBlur('email')}
                 label=""

frontend/app/components/SignupForm.js

@@ -23,7 +23,7 @@ const validationSchema = Yup.object({
     .required('Password is required'),
 });
 
-const SignupForm = () => {
+const SignupForm = ({ navigation }) => {
   const userInfo = {
     fullname: '',
     username: '',
@@ -32,13 +32,21 @@ const SignupForm = () => {
   };
 
   const signUp = async (values, formikActions) => {
-    const res = await client.post('/api/user/create-user', {
-      ...values,
-    });
+    try {
+      const res = await client.post('/api/user/create-user', {
+        ...values,
+      });
 
-    console.log(res.data);
-    formikActions.resetForm();
-    formikActions.setSubmitting(false);
+      console.log(res.data);
+      formikActions.resetForm();
+      formikActions.setSubmitting(false);
+
+      // Navigate to home page upon successful signup
+      navigation.navigate('./Home'); // Replace 'Home' with the name of your home screen
+    } catch (error) {
+      console.error('Signup failed:', error);
+      // Handle signup failure
+    }
   };
 
   return (