events

basic events ui
One-World-Community · Aug 3, 2024 · f19f5a0 · f19f5a0
1 parent 8e67aa1
commit f19f5a0
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 283 deletions.
diff --git a/app.json b/app.json
@@ -21,15 +21,18 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.oneworldcommunity.oneworldcommunity"
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png",
       "redirectUri": "https://auth.expo.io/@one-world-community/one-world-community"
     },
-    "plugins": ["expo-router"],
+    "plugins": [
+      "expo-router"
+    ],
     "experiments": {
       "typedRoutes": true,
       "baseUrl": "/one-world-community"

diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StyleSheet, FlatList, TextInput, View, Platform, useWindowDimensions, ImageComponent } from "react-native";
+import { StyleSheet, FlatList, TextInput, View, Platform, useWindowDimensions, ImageComponent, ScrollView } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
@@ -105,12 +105,9 @@ export default function ExploreScreen() {
 
       {renderCategories()}
 
-      <FlatList
-        data={articles}
-        renderItem={({ item }) => <ArticleCard article={item} isWeb={isWeb} isSmallScreen={isSmallScreen} />}
-        keyExtractor={(item) => item.id}
-        style={styles.articleList}
-      />
+      {articles.map((item) => (
+        <ArticleCard key={item.id} article={item} isWeb={isWeb} isSmallScreen={isSmallScreen} />
+      ))}
     </>
   );
 
@@ -131,25 +128,29 @@ export default function ExploreScreen() {
 
   return (
     <ThemedView style={styles.container}>
-      {isWeb && !isSmallScreen ? (
-        <View style={styles.webContainer}>
-          <View style={styles.webMainContent}>{renderContent()}</View>
-          {renderSidebar()}
-        </View>
-      ) : (
-        <>
-          {renderContent()}
-          {renderSidebar()}
-        </>
-      )}
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        {isWeb && !isSmallScreen ? (
+          <View style={styles.webContainer}>
+            <View style={styles.webMainContent}>{renderContent()}</View>
+            {renderSidebar()}
+          </View>
+        ) : (
+          <>
+            {renderContent()}
+            {renderSidebar()}
+          </>
+        )}
+      </ScrollView>
     </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16,
+  },
+  scrollContainer: {
+    flexGrow: 1,
   },
   webContainer: {
     flexDirection: "row",
@@ -172,6 +173,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     padding: 8,
     marginBottom: 16,
+    marginHorizontal: 16,
   },
   searchIcon: {
     marginRight: 8,
@@ -184,9 +186,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     flexWrap: "wrap",
     marginBottom: 16,
-  },
-  articleList: {
-    flex: 1,
+    paddingHorizontal: 16,
   },
   sidebarTitle: {
     fontSize: 20,

diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -1,70 +1,62 @@
-import { Image, StyleSheet, Platform } from 'react-native';
-
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
+import React, { useState, useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
+import EventCard from '@/components/EventCard';
 
 export default function HomeScreen() {
+  const [events, setEvents] = useState([
+    { id: '1', title: 'Tech Meetup', date: '2023-06-15', location: 'San Francisco', imageUrl: 'https://plus.unsplash.com/premium_photo-1681426687411-21986b0626a8?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dGVjaHxlbnwwfHwwfHx8MA%3D%3D' },
+    { id: '2', title: 'Photography Meetup', date: '2023-07-01', location: 'New York', imageUrl: 'https://images.unsplash.com/photo-1719937206498-b31844530a96?q=80&w=3348&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' },
+    { id: '3', title: 'AI Workshop', date: '2023-07-10', location: 'London', imageUrl: 'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YWl8ZW58MHx8MHx8fDA%3D' },
+  ]);
+
+  const handleEventAction = useCallback(() => {
+    setEvents(prevEvents => {
+      if (prevEvents.length > 1) {
+        const [firstEvent, ...restEvents] = prevEvents;
+        return [...restEvents, firstEvent];
+      }
+      return prevEvents;
+    });
+  }, []);
+
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.eventsContainer}>
+        <ThemedText type="subtitle">Upcoming Events</ThemedText>
+        <View style={styles.cardContainer}>
+          {events.length > 0 ? (
+            <EventCard
+              key={events[0].id}
+              title={events[0].title}
+              date={events[0].date}
+              location={events[0].location}
+              imageUrl={events[0].imageUrl}
+              onAccept={handleEventAction}
+              onReject={handleEventAction}
+            />
+          ) : (
+            <ThemedText>No events available</ThemedText>
+          )}
+        </View>
       </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          Tap the Explore tab to learn more about what's included in this starter app.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          When you're ready, run{' '}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+    </ThemedView>
   );
 }
 
 const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
+  container: {
+    flex: 1,
+    padding: 16,
   },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
+  eventsContainer: {
+    flex: 1,
+    marginBottom: 16,
   },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
+  cardContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-});
+});
diff --git a/app/auth/forgot-password.tsx b/app/auth/forgot-password.tsx
@@ -16,30 +16,22 @@ export default function ForgotPasswordScreen() {
     }
   }
 
-  const handleSubmit = (e?: React.FormEvent) => {
-    if (e) e.preventDefault();
-    resetPassword();
-  };
-
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Reset Password</Text>
-      <form onSubmit={handleSubmit}>
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            onChangeText={setEmail}
-            value={email}
-            placeholder="Email"
-            autoCapitalize="none"
-            keyboardType="email-address"
-            onSubmitEditing={(e) => handleSubmit()}
-          />
-        </View>
-        <TouchableOpacity style={styles.button} onPress={(e) => handleSubmit()}>
-          <Text style={styles.buttonText}>Reset Password</Text>
-        </TouchableOpacity>
-      </form>
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          onChangeText={setEmail}
+          value={email}
+          placeholder="Email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+        />
+      </View>
+      <TouchableOpacity style={styles.button} onPress={resetPassword}>
+        <Text style={styles.buttonText}>Reset Password</Text>
+      </TouchableOpacity>
       <View style={styles.linkContainer}>
         <TouchableOpacity onPress={() => router.push('/auth/sign-in')}>
           <Text style={styles.link}>Back to Sign In</Text>
@@ -96,4 +88,4 @@ const styles = StyleSheet.create({
     color: '#007AFF',
     fontSize: 14,
   },
-});
+});
diff --git a/app/auth/sign-in.tsx b/app/auth/sign-in.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, TextInput, TouchableOpacity, StyleSheet, Alert, Text, GestureResponderEvent } from 'react-native';
+import { View, TextInput, TouchableOpacity, StyleSheet, Alert, Text } from 'react-native';
 import { supabase } from '../../lib/supabase';
 import { router } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
@@ -56,48 +56,41 @@ export default function SignInScreen() {
     router.replace('/'); // Redirect to the main app screen
   }
 
-  const handleSubmit = () => {
-    signInWithEmail();
-  };
-
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Sign In</Text>
-      <form onSubmit={handleSubmit}>
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            onChangeText={setEmail}
-            value={email}
-            placeholder="Email"
-            autoCapitalize="none"
-            keyboardType="email-address"
-          />
-        </View>
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.input}
-            onChangeText={setPassword}
-            value={password}
-            placeholder="Password"
-            secureTextEntry={!showPassword}
-            onSubmitEditing={() => handleSubmit()}
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          onChangeText={setEmail}
+          value={email}
+          placeholder="Email"
+          autoCapitalize="none"
+          keyboardType="email-address"
+        />
+      </View>
+      <View style={styles.inputContainer}>
+        <TextInput
+          style={styles.input}
+          onChangeText={setPassword}
+          value={password}
+          placeholder="Password"
+          secureTextEntry={!showPassword}
+        />
+        <TouchableOpacity
+          style={styles.eyeIcon}
+          onPress={() => setShowPassword(!showPassword)}
+        >
+          <Ionicons
+            name={showPassword ? 'eye-off' : 'eye'}
+            size={24}
+            color="gray"
           />
-          <TouchableOpacity
-            style={styles.eyeIcon}
-            onPress={() => setShowPassword(!showPassword)}
-          >
-            <Ionicons
-              name={showPassword ? 'eye-off' : 'eye'}
-              size={24}
-              color="#007AFF"
-            />
-          </TouchableOpacity>
-        </View>
-        <TouchableOpacity style={styles.button} onPress={handleSubmit}>
-          <Text style={styles.buttonText}>Sign In</Text>
         </TouchableOpacity>
-      </form>
+      </View>
+      <TouchableOpacity style={styles.button} onPress={signInWithEmail}>
+        <Text style={styles.buttonText}>Sign In</Text>
+      </TouchableOpacity>
       <View style={styles.linkContainer}>
         <TouchableOpacity onPress={() => router.push('/auth/sign-up')}>
           <Text style={styles.link}>Create Account</Text>