From 945db59e1931806e46a9237b362fb2f0e610a4be Mon Sep 17 00:00:00 2001
From: di-vad <147934298+di-vad@users.noreply.github.com>
Date: Tue, 14 Oct 2025 21:59:49 -0600
Subject: [PATCH] feat(events): map fetch+cache, create flow w/ image upload

---
 App.tsx                           |  56 +++---
 src/screens/EventCreateScreen.tsx | 315 ++++++++++++++++++++++++++++++
 src/screens/MapScreen.tsx         | 159 +++++++++++++++
 src/services/api.ts               |  40 ++--
 src/storage/eventsCache.ts        |  22 +++
 5 files changed, 546 insertions(+), 46 deletions(-)
 create mode 100644 src/screens/EventCreateScreen.tsx
 create mode 100644 src/screens/MapScreen.tsx
 create mode 100644 src/storage/eventsCache.ts

diff --git a/App.tsx b/App.tsx
index 10b5f54..b1f10fe 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,35 +1,31 @@
-import React from 'react';
-import { ActionSheetProvider } from '@expo/react-native-action-sheet';
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import MapScreen from "./src/screens/MapScreen";
+import EventCreateScreen from "./src/screens/EventCreateScreen";
 
-import {
-    useFonts,
-    Nunito_400Regular,
-    Nunito_600SemiBold,
-    Nunito_700Bold,
-    Nunito_800ExtraBold,
-} from '@expo-google-fonts/nunito';
+export type RootStackParamList = {
+  Map: undefined;
+  CreateEvent: undefined;
+};
 
-import AppStack from './src/routes/AppStack';
-import { StatusBar } from 'expo-status-bar';
+const Stack = createStackNavigator<RootStackParamList>();
 
 export default function App() {
-    const [fontsLoaded] = useFonts({
-        Nunito_400Regular,
-        Nunito_600SemiBold,
-        Nunito_700Bold,
-        Nunito_800ExtraBold,
-    });
-
-    if (!fontsLoaded) {
-        return null;
-    } else {
-        return (
-            <>
-                <StatusBar animated translucent style="dark" />
-                <ActionSheetProvider>
-                    <AppStack />
-                </ActionSheetProvider>
-            </>
-        );
-    }
+  return (
+    <NavigationContainer>
+      <Stack.Navigator screenOptions={{ headerShown: true }}>
+        <Stack.Screen
+          name="Map"
+          component={MapScreen}
+          options={{ title: "Events Map" }}
+        />
+        <Stack.Screen
+          name="CreateEvent"
+          component={EventCreateScreen}
+          options={{ title: "New Event" }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
 }
diff --git a/src/screens/EventCreateScreen.tsx b/src/screens/EventCreateScreen.tsx
new file mode 100644
index 0000000..5b7b5b6
--- /dev/null
+++ b/src/screens/EventCreateScreen.tsx
@@ -0,0 +1,315 @@
+import React, { useMemo, useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  Alert,
+} from "react-native";
+import * as ImagePicker from "expo-image-picker";
+import { createEvent, type EventDTO } from "../services/api";
+import { uploadImage } from "../services/imageApi";
+import { useNavigation } from "@react-navigation/native";
+import type { RootStackParamList } from "../../App";
+import type { StackNavigationProp } from "@react-navigation/stack";
+
+type Nav = StackNavigationProp<RootStackParamList, "CreateEvent">;
+
+const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+const TIME_RE = /^([01]\d|2[0-3]):[0-5]\d$/;
+
+export default function EventCreateScreen() {
+  const navigation = useNavigation<Nav>();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [latitude, setLatitude] = useState<string>("");
+  const [longitude, setLongitude] = useState<string>("");
+
+  const [thumbUri, setThumbUri] = useState<string | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [imageName, setImageName] = useState<string | null>(null);
+  const [imageSize, setImageSize] = useState<number | null>(null);
+
+  const [uploading, setUploading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const latOk = useMemo(() => {
+    const v = Number(latitude);
+    return !Number.isNaN(v) && v >= -90 && v <= 90;
+  }, [latitude]);
+
+  const lonOk = useMemo(() => {
+    const v = Number(longitude);
+    return !Number.isNaN(v) && v >= -180 && v <= 180;
+  }, [longitude]);
+
+  const dateOk = useMemo(() => DATE_RE.test(date), [date]);
+  const timeOk = useMemo(() => TIME_RE.test(time), [time]);
+
+  const isoDateTime = useMemo(() => {
+    if (!dateOk || !timeOk) return "";
+    return new Date(`${date}T${time}:00`).toISOString();
+  }, [dateOk, timeOk, date, time]);
+
+  const allFilled = useMemo(() => {
+    return (
+      name.trim() &&
+      description.trim() &&
+      dateOk &&
+      timeOk &&
+      latOk &&
+      lonOk &&
+      !!imageUrl
+    );
+  }, [name, description, dateOk, timeOk, latOk, lonOk, imageUrl]);
+
+  async function ensurePermissions(): Promise<boolean> {
+    const cam = await ImagePicker.requestCameraPermissionsAsync();
+    const lib = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (cam.status !== "granted" || lib.status !== "granted") {
+      Alert.alert(
+        "Permissions needed",
+        "Please allow camera and photo library access."
+      );
+      return false;
+    }
+    return true;
+  }
+
+  async function pickFromLibrary() {
+    const ok = await ensurePermissions();
+    if (!ok) return;
+
+    const res = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      quality: 0.8,
+      base64: true,
+    });
+    if (!res.canceled && res.assets?.length) {
+      const a = res.assets[0];
+      setThumbUri(a.uri);
+      await doUpload(a.base64 || "");
+    }
+  }
+
+  async function takePhoto() {
+    const ok = await ensurePermissions();
+    if (!ok) return;
+
+    const res = await ImagePicker.launchCameraAsync({
+      quality: 0.8,
+      base64: true,
+    });
+    if (!res.canceled && res.assets?.length) {
+      const a = res.assets[0];
+      setThumbUri(a.uri);
+      await doUpload(a.base64 || "");
+    }
+  }
+
+  async function doUpload(base64: string) {
+    if (!base64) {
+      Alert.alert("No image data", "Please try again.");
+      return;
+    }
+    try {
+      setUploading(true);
+      const res = await uploadImage(base64);
+
+      const data = res?.data?.data;
+      const url: string | undefined = data?.display_url;
+      const size: number = Number(data?.size) || 0;
+      const name: string = data?.image?.filename || "uploaded-image";
+
+      if (!url) throw new Error("ImgBB did not return a URL");
+      setImageUrl(url);
+      setImageName(name);
+      setImageSize(size);
+    } catch (e: any) {
+      Alert.alert("Upload failed", e?.message ?? "Unable to upload image.");
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  async function onSave() {
+    if (!allFilled || !isoDateTime) return;
+    setSaving(true);
+    try {
+      const payload: EventDTO = {
+        name: name.trim(),
+        description: description.trim(),
+        datetime: isoDateTime,
+        latitude: parseFloat(latitude),
+        longitude: parseFloat(longitude),
+        imageUrl: imageUrl!,
+      };
+      await createEvent(payload);
+      Alert.alert("Saved", "Event created successfully.", [
+        { text: "Next", onPress: () => navigation.navigate("Map") },
+      ]);
+    } catch (e: any) {
+      Alert.alert("Save failed", e?.message ?? "Unable to save event.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.label}>Name *</Text>
+      <TextInput
+        style={styles.input}
+        value={name}
+        onChangeText={setName}
+        placeholder="Event name"
+      />
+
+      <Text style={styles.label}>Description *</Text>
+      <TextInput
+        style={[styles.input, { height: 90 }]}
+        value={description}
+        onChangeText={setDescription}
+        placeholder="What is this event about?"
+        multiline
+      />
+
+      <Text style={styles.label}>Date *</Text>
+      <TextInput
+        style={styles.input}
+        value={date}
+        onChangeText={setDate}
+        placeholder="YYYY-MM-DD"
+      />
+      {!dateOk && date.length > 0 ? (
+        <Text style={styles.err}>Use YYYY-MM-DD</Text>
+      ) : null}
+
+      <Text style={styles.label}>Time *</Text>
+      <TextInput
+        style={styles.input}
+        value={time}
+        onChangeText={setTime}
+        placeholder="HH:MM (24h)"
+      />
+      {!timeOk && time.length > 0 ? (
+        <Text style={styles.err}>Use 24h HH:MM</Text>
+      ) : null}
+
+      <Text style={styles.label}>Latitude *</Text>
+      <TextInput
+        style={styles.input}
+        value={latitude}
+        onChangeText={setLatitude}
+        keyboardType="numeric"
+        placeholder="e.g. 53.5461"
+      />
+      {!latOk && latitude.length > 0 ? (
+        <Text style={styles.err}>-90 to 90</Text>
+      ) : null}
+
+      <Text style={styles.label}>Longitude *</Text>
+      <TextInput
+        style={styles.input}
+        value={longitude}
+        onChangeText={setLongitude}
+        keyboardType="numeric"
+        placeholder="-113.4938"
+      />
+      {!lonOk && longitude.length > 0 ? (
+        <Text style={styles.err}>-180 to 180</Text>
+      ) : null}
+
+      <Text style={styles.label}>Photo *</Text>
+      <View style={styles.row}>
+        <TouchableOpacity
+          style={styles.btn}
+          onPress={takePhoto}
+          accessibilityLabel="Add photo from camera"
+        >
+          <Text style={styles.btnText}>Camera</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.btn}
+          onPress={pickFromLibrary}
+          accessibilityLabel="Add photo from library"
+        >
+          <Text style={styles.btnText}>Library</Text>
+        </TouchableOpacity>
+      </View>
+
+      {uploading ? <Text style={styles.note}>Uploading...</Text> : null}
+      {imageUrl ? (
+        <View style={styles.preview}>
+          {thumbUri ? (
+            <Image source={{ uri: thumbUri }} style={styles.thumb} />
+          ) : null}
+          <View style={{ flex: 1 }}>
+            <Text style={styles.note} numberOfLines={1}>
+              URL: {imageUrl}
+            </Text>
+            <Text style={styles.note}>Name: {imageName}</Text>
+            <Text style={styles.note}>Size: {imageSize} bytes</Text>
+          </View>
+        </View>
+      ) : null}
+
+      <TouchableOpacity
+        style={[
+          styles.saveBtn,
+          {
+            backgroundColor:
+              allFilled && !uploading && !saving ? "#007bff" : "#9aa8b3",
+          },
+        ]}
+        disabled={!allFilled || uploading || saving}
+        onPress={onSave}
+        accessibilityLabel="Save"
+      >
+        <Text style={styles.saveText}>{saving ? "Saving..." : "Save"}</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 10 },
+  label: { fontWeight: "600" },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    borderRadius: 8,
+    padding: 10,
+    backgroundColor: "#fff",
+  },
+  err: { color: "#c1121f", marginTop: -4 },
+  row: { flexDirection: "row", gap: 10 },
+  btn: {
+    backgroundColor: "#444",
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+  },
+  btnText: { color: "#fff" },
+  note: { color: "#333", marginTop: 6 },
+  preview: {
+    flexDirection: "row",
+    gap: 12,
+    alignItems: "center",
+    marginTop: 8,
+  },
+  thumb: { width: 72, height: 72, borderRadius: 8, backgroundColor: "#eee" },
+  saveBtn: {
+    marginTop: 12,
+    padding: 14,
+    borderRadius: 10,
+    alignItems: "center",
+  },
+  saveText: { color: "#fff", fontWeight: "700" },
+});
diff --git a/src/screens/MapScreen.tsx b/src/screens/MapScreen.tsx
new file mode 100644
index 0000000..cc0789e
--- /dev/null
+++ b/src/screens/MapScreen.tsx
@@ -0,0 +1,159 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  TouchableOpacity,
+} from "react-native";
+import MapView, { Marker, Region, LatLng } from "react-native-maps";
+import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { getEvents, type EventDTO } from "../services/api";
+import { loadEvents, saveEvents } from "../storage/eventsCache";
+import type { RootStackParamList } from "../../App";
+import type { StackNavigationProp } from "@react-navigation/stack";
+
+type Nav = StackNavigationProp<RootStackParamList, "Map">;
+
+const INITIAL_REGION: Region = {
+  latitude: 53.5461,
+  longitude: -113.4938,
+  latitudeDelta: 0.2,
+  longitudeDelta: 0.2,
+};
+
+export default function MapScreen() {
+  const navigation = useNavigation<Nav>();
+  const mapRef = useRef<MapView | null>(null);
+
+  const [loading, setLoading] = useState(true);
+  const [events, setEvents] = useState<EventDTO[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchEvents = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const remote = await getEvents();
+      await saveEvents(remote);
+      setEvents(remote);
+    } catch (e: any) {
+      const cached = await loadEvents();
+      if (cached?.events) {
+        setEvents(cached.events);
+        setError("Showing cached events (network unavailable).");
+      } else {
+        setError(e?.message ?? "Failed to load events.");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchEvents();
+  }, [fetchEvents]);
+
+  useFocusEffect(
+    useCallback(() => {
+      fetchEvents();
+    }, [fetchEvents])
+  );
+
+  const futureEvents = useMemo(() => {
+    const now = new Date();
+    return events.filter((e) => new Date(e.datetime) > now);
+  }, [events]);
+
+  useEffect(() => {
+    if (mapRef.current && futureEvents.length) {
+      const coords: LatLng[] = futureEvents.map((e) => ({
+        latitude: e.latitude,
+        longitude: e.longitude,
+      }));
+      setTimeout(() => {
+        try {
+          mapRef.current?.fitToCoordinates(coords, {
+            edgePadding: { top: 60, bottom: 160, left: 60, right: 60 },
+            animated: true,
+          });
+        } catch {}
+      }, 200);
+    }
+  }, [futureEvents]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <MapView
+        ref={(r) => (mapRef.current = r)}
+        style={{ flex: 1 }}
+        initialRegion={INITIAL_REGION}
+      >
+        {futureEvents.map((e) => (
+          <Marker
+            key={String(e.id ?? `${e.latitude}-${e.longitude}-${e.datetime}`)}
+            coordinate={{ latitude: e.latitude, longitude: e.longitude }}
+            title={e.name}
+            description={e.description}
+          />
+        ))}
+      </MapView>
+
+      <View style={styles.bottomBar}>
+        {loading ? (
+          <View style={styles.row}>
+            <ActivityIndicator />
+            <Text style={styles.bottomText}> Loading events…</Text>
+          </View>
+        ) : (
+          <Text style={styles.bottomText}>
+            {futureEvents.length} future event
+            {futureEvents.length === 1 ? "" : "s"} found
+          </Text>
+        )}
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+      </View>
+
+      <TouchableOpacity
+        style={styles.fab}
+        onPress={() => navigation.navigate("CreateEvent")}
+        accessibilityLabel="Add new event"
+      >
+        <Text style={styles.fabPlus}>+</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bottomBar: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    padding: 12,
+    backgroundColor: "rgba(0,0,0,0.6)",
+  },
+  row: { flexDirection: "row", alignItems: "center", justifyContent: "center" },
+  bottomText: { color: "#fff", textAlign: "center" },
+  error: { color: "#ffb3b3", marginTop: 4, textAlign: "center" },
+  fab: {
+    position: "absolute",
+    bottom: 72,
+    right: 16,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: "#007bff",
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 4,
+  },
+  fabPlus: { color: "#fff", fontSize: 28, lineHeight: 28 },
+});
diff --git a/src/services/api.ts b/src/services/api.ts
index 1809c09..ddc5982 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,19 +1,27 @@
-import axios, { AxiosResponse } from 'axios';
+export type EventDTO = {
+  id?: number | string;
+  name: string;
+  description: string;
+  datetime: string;
+  latitude: number;
+  longitude: number;
+  imageUrl: string;
+};
 
-const api = axios.create({
-    // Before running your 'json-server', get your computer's IP address and
-    // update your baseURL to `http://your_ip_address_here:3333` and then run:
-    // `npx json-server --watch db.json --port 3333 --host your_ip_address_here`
-    //
-    // To access your server online without running json-server locally,
-    // you can set your baseURL to:
-    // `https://my-json-server.typicode.com/<your-github-username>/<your-github-repo>`
-    //
-    // To use `my-json-server`, make sure your `db.json` is located at the repo root.
+const BASE_URL = "http://0.0.0.0:3333";
 
-    baseURL: 'http://0.0.0.0:3333',
-});
+export async function getEvents(): Promise<EventDTO[]> {
+  const res = await fetch(`${BASE_URL}/events`);
+  if (!res.ok) throw new Error(`GET /events failed: ${res.status}`);
+  return res.json();
+}
 
-export const authenticateUser = (email: string, password: string): Promise<AxiosResponse> => {
-    return api.post(`/login`, { email, password });
-};
+export async function createEvent(payload: EventDTO): Promise<EventDTO> {
+  const res = await fetch(`${BASE_URL}/events`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) throw new Error(`POST /events failed: ${res.status}`);
+  return res.json();
+}
diff --git a/src/storage/eventsCache.ts b/src/storage/eventsCache.ts
new file mode 100644
index 0000000..2f13a4c
--- /dev/null
+++ b/src/storage/eventsCache.ts
@@ -0,0 +1,22 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import type { EventDTO } from "../services/api";
+
+const KEY = "@events_cache";
+
+export async function saveEvents(events: EventDTO[]) {
+  const payload = { cachedAt: new Date().toISOString(), events };
+  await AsyncStorage.setItem(KEY, JSON.stringify(payload));
+}
+
+export async function loadEvents(): Promise<{
+  cachedAt: string;
+  events: EventDTO[];
+} | null> {
+  const raw = await AsyncStorage.getItem(KEY);
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as { cachedAt: string; events: EventDTO[] };
+  } catch {
+    return null;
+  }
+}