added login and started adding rest api
This commit is contained in:
parent
74f7ed047e
commit
abd725c274
@ -2,58 +2,64 @@ import { Tabs } from "expo-router";
|
||||
import { useColorScheme } from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
|
||||
const LIGHT = { bg: "#FFFFFF", border: "#E8E2D5", active: "#C4622D", inactive: "#8A8278" };
|
||||
const DARK = { bg: "#161513", border: "#2C2A27", active: "#E07B45", inactive: "#706D67" };
|
||||
|
||||
|
||||
const LIGHT_TAB = {
|
||||
bg: "#FFFFFF",
|
||||
border: "#E8E2D5",
|
||||
active: "#C4622D",
|
||||
inactive: "#8A8278",
|
||||
};
|
||||
const DARK_TAB = {
|
||||
bg: "#161513",
|
||||
border: "#2C2A27",
|
||||
active: "#E07B45",
|
||||
inactive: "#706D67",
|
||||
};
|
||||
|
||||
export default function TabLayout() {
|
||||
const scheme = useColorScheme();
|
||||
const dark = scheme === "dark";
|
||||
const c = dark ? DARK : LIGHT;
|
||||
const dark = useColorScheme() === "dark";
|
||||
const tab = dark ? DARK_TAB : LIGHT_TAB;
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
screenOptions={({ route }) => ({
|
||||
headerShown: false,
|
||||
tabBarStyle: {
|
||||
backgroundColor: c.bg,
|
||||
borderTopColor: c.border,
|
||||
borderTopWidth: 1,
|
||||
height: 64,
|
||||
paddingBottom: 10,
|
||||
paddingTop: 6,
|
||||
backgroundColor: tab.bg,
|
||||
borderTopColor: tab.border,
|
||||
borderTopWidth: 1,
|
||||
height: 60,
|
||||
paddingBottom: 8,
|
||||
paddingTop: 6,
|
||||
},
|
||||
tabBarActiveTintColor: c.active,
|
||||
tabBarInactiveTintColor: c.inactive,
|
||||
tabBarLabelStyle: { fontSize: 11, fontWeight: "600" },
|
||||
}}
|
||||
tabBarActiveTintColor: tab.active,
|
||||
tabBarInactiveTintColor: tab.inactive,
|
||||
tabBarLabelStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: "600",
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
tabBarIcon: ({ focused, color, size }) => {
|
||||
const icons: Record<string, { active: any; inactive: any }> = {
|
||||
index: { active: "bookmark", inactive: "bookmark-outline" },
|
||||
all: { active: "compass", inactive: "compass-outline" },
|
||||
profile: { active: "person-circle", inactive: "person-circle-outline" },
|
||||
};
|
||||
const set = icons[route.name] ?? icons.index;
|
||||
return (
|
||||
<Ionicons
|
||||
name={focused ? set.active : set.inactive}
|
||||
size={focused ? size + 1 : size}
|
||||
color={color}
|
||||
/>
|
||||
);
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
title: "Subscribed",
|
||||
tabBarIcon: ({ focused, color, size }) => (
|
||||
<Ionicons name={focused ? "bookmark" : "bookmark-outline"} size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="all"
|
||||
options={{
|
||||
title: "All",
|
||||
tabBarIcon: ({ focused, color, size }) => (
|
||||
<Ionicons name={focused ? "compass" : "compass-outline"} size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen
|
||||
name="profile"
|
||||
options={{
|
||||
title: "Profile",
|
||||
tabBarIcon: ({ focused, color, size }) => (
|
||||
<Ionicons name={focused ? "person-circle" : "person-circle-outline"} size={size} color={color} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Tabs.Screen name="index" options={{ title: "My Feed" }} />
|
||||
<Tabs.Screen name="all" options={{ title: "Discover" }} />
|
||||
<Tabs.Screen name="profile" options={{ title: "Profile" }} />
|
||||
</Tabs>
|
||||
);
|
||||
}
|
||||
@ -1,6 +1,14 @@
|
||||
import "../globals.css";
|
||||
import { Stack } from "expo-router";
|
||||
import {AuthProvider} from "@/context/AuthContext";
|
||||
import {SafeAreaProvider} from "react-native-safe-area-context";
|
||||
|
||||
export default function RootLayout() {
|
||||
return <Stack screenOptions={{ headerShown: false }} />;
|
||||
return (
|
||||
<AuthProvider>
|
||||
<SafeAreaProvider>
|
||||
<Stack screenOptions={{ headerShown: false }} />
|
||||
</SafeAreaProvider>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
@ -1,44 +1,72 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Animated,
|
||||
LayoutAnimation,
|
||||
Platform,
|
||||
UIManager,
|
||||
useColorScheme,
|
||||
View, Text, TouchableOpacity,
|
||||
ActivityIndicator, LayoutAnimation, useColorScheme,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import ExpandableItem, { FeedItem } from "./ExpandableItem";
|
||||
import { Entry, entriesApi } from "../services/api";
|
||||
import ExpandableItem from "./ExpandableItem";
|
||||
|
||||
if (Platform.OS === "android") {
|
||||
UIManager.setLayoutAnimationEnabledExperimental?.(true);
|
||||
}
|
||||
// ─── Props ─────────────────────────────────────────────────────────────────
|
||||
// items removed — now fetched from API using groupName
|
||||
|
||||
export interface Category {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: keyof typeof Ionicons.glyphMap;
|
||||
color: string; // accent hex for the icon badge
|
||||
darkColor: string;
|
||||
items: FeedItem[];
|
||||
}
|
||||
|
||||
interface CollapsibleCategoryProps {
|
||||
category: Category;
|
||||
export interface CollapsibleCategoryProps {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: keyof typeof Ionicons.glyphMap;
|
||||
color: string;
|
||||
darkColor: string;
|
||||
groupName: string; // passed to /entries?groupName=
|
||||
defaultOpen?: boolean;
|
||||
}
|
||||
|
||||
// ─── Component ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function CollapsibleCategory({
|
||||
category,
|
||||
label,
|
||||
icon,
|
||||
color,
|
||||
darkColor,
|
||||
groupName,
|
||||
defaultOpen = false,
|
||||
}: CollapsibleCategoryProps) {
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
const scheme = useColorScheme();
|
||||
const dark = scheme === "dark";
|
||||
const dark = useColorScheme() === "dark";
|
||||
const accentColor = dark ? darkColor : color;
|
||||
|
||||
const accentColor = dark ? category.darkColor : category.color;
|
||||
const [open, setOpen] = useState(defaultOpen);
|
||||
const [items, setItems] = useState<Entry[]>([]);
|
||||
const [page, setPage] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const initialised = useRef(false);
|
||||
|
||||
const fetchPage = useCallback(async (pageNum: number) => {
|
||||
if (loading) return;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const data = await entriesApi.getEntries({ groupName, page: pageNum });
|
||||
setItems((prev) =>
|
||||
pageNum === 0 ? data.content : [...prev, ...data.content]
|
||||
);
|
||||
setHasMore(!data.last);
|
||||
setPage(pageNum);
|
||||
} catch {
|
||||
setError("Couldn't load entries. Tap to retry.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [groupName, loading]);
|
||||
|
||||
// Fetch first page the first time the accordion opens
|
||||
useEffect(() => {
|
||||
if (open && !initialised.current) {
|
||||
initialised.current = true;
|
||||
fetchPage(0);
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const toggle = () => {
|
||||
LayoutAnimation.configureNext({
|
||||
@ -51,23 +79,23 @@ export default function CollapsibleCategory({
|
||||
|
||||
return (
|
||||
<View className="mb-4">
|
||||
{/* ── Header — untouched from your original ── */}
|
||||
<TouchableOpacity
|
||||
onPress={toggle}
|
||||
activeOpacity={0.8}
|
||||
className={`
|
||||
mx-4 flex-row items-center px-4 py-3.5 rounded-2xl
|
||||
${dark
|
||||
mx-4 flex-row items-center px-4 py-3.5 rounded-2xl
|
||||
${dark
|
||||
? "bg-obsidian-50 border border-border-dark"
|
||||
: "bg-parchment-100 border border-border-light"
|
||||
}
|
||||
`}
|
||||
`}
|
||||
>
|
||||
{/* Icon badge */}
|
||||
<View
|
||||
className="w-8 h-8 rounded-xl items-center justify-center mr-3"
|
||||
style={{ backgroundColor: accentColor + "25" }}
|
||||
>
|
||||
<Ionicons name={category.icon} size={16} color={accentColor} />
|
||||
<Ionicons name={icon} size={16} color={accentColor} />
|
||||
</View>
|
||||
|
||||
<Text
|
||||
@ -75,20 +103,24 @@ export default function CollapsibleCategory({
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
>
|
||||
{category.label}
|
||||
{label}
|
||||
</Text>
|
||||
|
||||
{/* Count badge */}
|
||||
{/* Count badge — shows loaded count, spins while first load */}
|
||||
<View
|
||||
className="px-2 py-0.5 rounded-full mr-3"
|
||||
style={{ backgroundColor: accentColor + "20" }}
|
||||
>
|
||||
<Text
|
||||
className="text-xs font-sans font-semibold"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{category.items.length}
|
||||
</Text>
|
||||
{loading && items.length === 0 ? (
|
||||
<ActivityIndicator size="small" color={accentColor} style={{ width: 24 }} />
|
||||
) : (
|
||||
<Text
|
||||
className="text-xs font-sans font-semibold"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{items.length}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Ionicons
|
||||
@ -98,12 +130,62 @@ export default function CollapsibleCategory({
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Items */}
|
||||
{/* ── Body ── */}
|
||||
{open && (
|
||||
<View className="mt-2">
|
||||
{category.items.map((item) => (
|
||||
{/* Error */}
|
||||
{error !== "" && (
|
||||
<TouchableOpacity
|
||||
onPress={() => fetchPage(page)}
|
||||
className="mx-4 py-4 items-center"
|
||||
>
|
||||
<Text className={`text-sm font-sans ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{error}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{/* Items — same ExpandableItem you already have */}
|
||||
{items.map((item) => (
|
||||
<ExpandableItem key={item.id} item={item} />
|
||||
))}
|
||||
|
||||
{/* Load more */}
|
||||
{hasMore && items.length > 0 && (
|
||||
<TouchableOpacity
|
||||
onPress={() => fetchPage(page + 1)}
|
||||
disabled={loading}
|
||||
className={`mx-4 mt-1 mb-1 py-3 rounded-2xl border items-center ${
|
||||
dark
|
||||
? "bg-obsidian-50 border-border-dark"
|
||||
: "bg-parchment-100 border-border-light"
|
||||
}`}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator size="small" color={accentColor} />
|
||||
) : (
|
||||
<View className="flex-row items-center gap-1.5">
|
||||
<Ionicons name="chevron-down" size={13} color={accentColor} />
|
||||
<Text
|
||||
className="text-xs font-sans font-semibold"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
Load more
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{/* End of list */}
|
||||
{!hasMore && items.length > 0 && (
|
||||
<Text className={`text-center text-xs font-sans py-3 ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}>
|
||||
All {items.length} entries loaded
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@ -1,39 +1,34 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Animated,
|
||||
LayoutAnimation,
|
||||
Platform,
|
||||
UIManager,
|
||||
useColorScheme,
|
||||
Animated, LayoutAnimation, Linking,
|
||||
Platform, Text, TouchableOpacity,
|
||||
UIManager, View, useColorScheme,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Entry } from "../services/api";
|
||||
|
||||
// Enable LayoutAnimation on Android idk honestly probably ok?
|
||||
if (Platform.OS === "android") {
|
||||
UIManager.setLayoutAnimationEnabledExperimental?.(true);
|
||||
}
|
||||
|
||||
export interface FeedItem {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string;
|
||||
timestamp: string;
|
||||
tag: string;
|
||||
paragraphs: string[];
|
||||
function formatDate(iso: string): string {
|
||||
try {
|
||||
return new Date(iso).toLocaleDateString("en-GB", {
|
||||
day: "numeric", month: "short", year: "numeric",
|
||||
});
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
interface ExpandableItemProps {
|
||||
item: FeedItem;
|
||||
function fileName(path: string): string {
|
||||
return path.split(/[\\/]/).pop() ?? path;
|
||||
}
|
||||
|
||||
export default function ExpandableItem({ item }: ExpandableItemProps) {
|
||||
export default function ExpandableItem({ item }: { item: Entry }) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const rotateAnim = useRef(new Animated.Value(0)).current;
|
||||
const scheme = useColorScheme();
|
||||
const dark = scheme === "dark";
|
||||
const dark = useColorScheme() === "dark";
|
||||
|
||||
const toggle = () => {
|
||||
LayoutAnimation.configureNext({
|
||||
@ -50,7 +45,7 @@ export default function ExpandableItem({ item }: ExpandableItemProps) {
|
||||
};
|
||||
|
||||
const chevronRotation = rotateAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
inputRange: [0, 1],
|
||||
outputRange: ["0deg", "180deg"],
|
||||
});
|
||||
|
||||
@ -58,96 +53,146 @@ export default function ExpandableItem({ item }: ExpandableItemProps) {
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
onPress={toggle}
|
||||
className={`
|
||||
mx-4 mb-3 rounded-2xl overflow-hidden
|
||||
${dark
|
||||
? "bg-obsidian-100 border border-border-dark"
|
||||
: "bg-surface-light border border-border-light"
|
||||
}
|
||||
`}
|
||||
className={`mx-4 mb-3 rounded-2xl overflow-hidden ${
|
||||
dark
|
||||
? "bg-obsidian-100 border border-border-dark"
|
||||
: "bg-surface-light border border-border-light"
|
||||
}`}
|
||||
style={{
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowOpacity: dark ? 0.35 : 0.06,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
{/* ── Collapsed header ── */}
|
||||
<View className="flex-row items-center px-4 py-4">
|
||||
<View className="flex-1 pr-3">
|
||||
{/* Tag + timestamp row */}
|
||||
<View className="flex-row items-center mb-1 gap-2">
|
||||
<View
|
||||
className={`px-2 py-0.5 rounded-full ${
|
||||
dark ? "bg-accent-dark/20" : "bg-accent/10"
|
||||
}`}
|
||||
>
|
||||
<Text
|
||||
className={`text-xs font-sans font-semibold tracking-wide ${
|
||||
dark ? "text-accent-dark" : "text-accent"
|
||||
}`}
|
||||
>
|
||||
{item.tag}
|
||||
|
||||
{/* Subject tag + date */}
|
||||
<View className="flex-row items-center mb-1.5 gap-2 flex-wrap">
|
||||
<View className={`px-2 py-0.5 rounded-full ${dark ? "bg-accent-dark/20" : "bg-accent/10"}`}>
|
||||
<Text className={`text-xs font-sans font-semibold tracking-wide ${dark ? "text-accent-dark" : "text-accent"}`}>
|
||||
{item.subject?.name ?? item.groupName}
|
||||
</Text>
|
||||
</View>
|
||||
<Text
|
||||
className={`text-xs ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
{item.timestamp}
|
||||
|
||||
<View className={`px-2 py-0.5 rounded-full ${dark ? "bg-obsidian-50" : "bg-parchment-200"}`}>
|
||||
<Text className={`text-xs font-sans ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{item.groupName}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text className={`text-xs ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{formatDate(item.timePublished)}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Title */}
|
||||
<Text
|
||||
className={`text-base font-sans font-semibold leading-snug ${
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
className={`text-base font-sans font-semibold leading-snug ${dark ? "text-ink-dark" : "text-ink-light"}`}
|
||||
numberOfLines={expanded ? undefined : 2}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
|
||||
{/* Author */}
|
||||
<Text
|
||||
className={`text-xs mt-1 ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
by {item.author}
|
||||
</Text>
|
||||
{/* info_entry — always visible as subtitle */}
|
||||
{item.infoEntry ? (
|
||||
<Text
|
||||
className={`text-xs mt-1 leading-relaxed ${dark ? "text-muted-dark" : "text-muted-light"}`}
|
||||
numberOfLines={expanded ? undefined : 2}
|
||||
>
|
||||
{item.infoEntry}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<Animated.View style={{ transform: [{ rotate: chevronRotation }] }}>
|
||||
<Ionicons
|
||||
name="chevron-down"
|
||||
size={18}
|
||||
color={dark ? "#706D67" : "#8A8278"}
|
||||
/>
|
||||
<Ionicons name="chevron-down" size={18} color={dark ? "#706D67" : "#8A8278"} />
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Expanded body */}
|
||||
{/* ── Expanded body ── */}
|
||||
{expanded && (
|
||||
<View
|
||||
className={`px-4 pb-5 pt-1 border-t ${
|
||||
dark ? "border-border-dark" : "border-border-light"
|
||||
}`}
|
||||
>
|
||||
{item.paragraphs.map((para, i) => (
|
||||
<Text
|
||||
key={i}
|
||||
className={`text-sm font-sans leading-relaxed mb-3 last:mb-0 ${
|
||||
dark ? "text-ink-dark/80" : "text-ink-light/80"
|
||||
<View className={`border-t ${dark ? "border-border-dark" : "border-border-light"}`}>
|
||||
|
||||
{/* paragraph */}
|
||||
{item.paragraph ? (
|
||||
<View className="px-4 pt-3 pb-2">
|
||||
<Text className={`text-xs font-sans font-bold tracking-widest uppercase mb-1.5 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
Content
|
||||
</Text>
|
||||
<Text className={`text-sm font-sans leading-relaxed ${dark ? "text-ink-dark/85" : "text-ink-light/85"}`}>
|
||||
{item.paragraph}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{/* Meta row: subject + group + date */}
|
||||
<View className={`mx-4 my-3 p-3 rounded-xl ${dark ? "bg-obsidian-50" : "bg-parchment-100"}`}>
|
||||
<Row label="Subject" value={item.subject?.name} dark={dark} />
|
||||
<Row label="Group" value={item.groupName} dark={dark} />
|
||||
<Row label="Published" value={formatDate(item.timePublished)} dark={dark} last />
|
||||
</View>
|
||||
|
||||
{/* filepath — clickable attachment */}
|
||||
{item.filepath ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => Linking.openURL(item.filepath!)}
|
||||
activeOpacity={0.75}
|
||||
className={`mx-4 mb-4 flex-row items-center gap-3 px-4 py-3 rounded-xl border ${
|
||||
dark
|
||||
? "bg-obsidian-50 border-border-dark"
|
||||
: "bg-parchment-100 border-border-light"
|
||||
}`}
|
||||
// stop the expand/collapse toggle firing
|
||||
onStartShouldSetResponder={() => true}
|
||||
>
|
||||
{para}
|
||||
</Text>
|
||||
))}
|
||||
<View className={`w-8 h-8 rounded-lg items-center justify-center ${dark ? "bg-accent-dark/20" : "bg-accent/10"}`}>
|
||||
<Ionicons
|
||||
name="document-attach-outline"
|
||||
size={17}
|
||||
color={dark ? "#E07B45" : "#C4622D"}
|
||||
/>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text className={`text-xs font-sans font-semibold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
{fileName(item.filepath)}
|
||||
</Text>
|
||||
<Text className={`text-xs font-sans mt-0.5 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
Tap to open attachment
|
||||
</Text>
|
||||
</View>
|
||||
<Ionicons
|
||||
name="open-outline"
|
||||
size={15}
|
||||
color={dark ? "#706D67" : "#8A8278"}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Row({ label, value, dark, last = false }: {
|
||||
label: string;
|
||||
value?: string;
|
||||
dark: boolean;
|
||||
last?: boolean;
|
||||
}) {
|
||||
if (!value) return null;
|
||||
return (
|
||||
<View className={`flex-row justify-between py-1.5 ${!last ? `border-b ${dark ? "border-border-dark" : "border-border-light"}` : ""}`}>
|
||||
<Text className={`text-xs font-sans font-semibold ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{label}
|
||||
</Text>
|
||||
<Text className={`text-xs font-sans ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
58
context/AuthContext.tsx
Normal file
58
context/AuthContext.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import React, { createContext, useContext, useEffect, useState } from "react";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { authApi, LoginPayload, RegisterPayload, JwtResponse } from "../services/api";
|
||||
|
||||
type User = { email: string; token: string };
|
||||
|
||||
type AuthContextValue = {
|
||||
user: User | null;
|
||||
loading: boolean;
|
||||
login: (p: LoginPayload) => Promise<void>;
|
||||
register: (p: RegisterPayload) => Promise<void>;
|
||||
logout: () => Promise<void>;
|
||||
};
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Restore session on mount
|
||||
useEffect(() => {
|
||||
AsyncStorage.getItem("auth_user")
|
||||
.then((raw) => { if (raw) setUser(JSON.parse(raw)); })
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const persist = async (u: User | null) => {
|
||||
if (u) await AsyncStorage.setItem("auth_user", JSON.stringify(u));
|
||||
else await AsyncStorage.removeItem("auth_user");
|
||||
setUser(u);
|
||||
};
|
||||
|
||||
const login = async (payload: LoginPayload) => {
|
||||
const res = await authApi.login(payload);
|
||||
await persist({ email: res.email, token: res.token });
|
||||
};
|
||||
|
||||
const register = async (payload: RegisterPayload) => {
|
||||
await authApi.register(payload);
|
||||
// Auto-login after register
|
||||
await login({ email: payload.email, password: payload.password });
|
||||
};
|
||||
|
||||
const logout = () => persist(null);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, loading, login, register, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth must be used inside AuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
12
index.tsx
12
index.tsx
@ -13,6 +13,8 @@ import AllFeed from "@/screens/AllFeed";
|
||||
import Profile from "@/screens/Profile";
|
||||
import {enableScreens} from "react-native-screens";
|
||||
import {SafeAreaProvider} from "react-native-safe-area-context";
|
||||
import AuthGate from "@/screens/AuthGate";
|
||||
import {AuthProvider, useAuth} from "@/context/AuthContext";
|
||||
|
||||
|
||||
// Must be called before any navigator renders
|
||||
@ -36,6 +38,11 @@ const DARK_TAB = {
|
||||
};
|
||||
|
||||
|
||||
function ProfileTab() {
|
||||
const { user, loading } = useAuth();
|
||||
if (loading) return null;
|
||||
return user ? <Profile /> : <AuthGate />;
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const scheme = useColorScheme();
|
||||
@ -47,6 +54,7 @@ export default function App() {
|
||||
: { ...DefaultTheme, colors: { ...DefaultTheme.colors, background: "#FDFAF5" } };
|
||||
|
||||
return (
|
||||
<AuthProvider>
|
||||
<SafeAreaProvider>
|
||||
<NavigationContainer theme={navTheme}>
|
||||
<Tab.Navigator
|
||||
@ -104,11 +112,13 @@ export default function App() {
|
||||
/>
|
||||
<Tab.Screen
|
||||
name="Profile"
|
||||
component={Profile}
|
||||
component={ProfileTab}
|
||||
options={{ title: "Profile" }}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
</NavigationContainer>
|
||||
</SafeAreaProvider>
|
||||
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
34
package-lock.json
generated
34
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^15.0.3",
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
||||
"@react-navigation/elements": "^2.6.3",
|
||||
"@react-navigation/native": "^7.1.8",
|
||||
@ -3108,6 +3109,18 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-async-storage/async-storage": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.2.0.tgz",
|
||||
"integrity": "sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"merge-options": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-native": "^0.0.0-0 || >=0.65 <1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/assets-registry": {
|
||||
"version": "0.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.81.5.tgz",
|
||||
@ -8382,6 +8395,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-plain-obj": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
|
||||
"integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/is-regex": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
|
||||
@ -9408,6 +9430,18 @@
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/merge-options": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
|
||||
"integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-plain-obj": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@expo/vector-icons": "^15.0.3",
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
||||
"@react-navigation/elements": "^2.6.3",
|
||||
"@react-navigation/native": "^7.1.8",
|
||||
|
||||
@ -1,107 +1,114 @@
|
||||
import React, { useState, useMemo } from "react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
useColorScheme,
|
||||
View, Text, ScrollView,
|
||||
ActivityIndicator, useColorScheme, TouchableOpacity,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import SearchBar from "../components/SearchBar";
|
||||
import CollapsibleCategory, { Category } from "../components/CollapsibleCategory";
|
||||
import { ALL_CATEGORIES } from "@/data/mockData";
|
||||
import CollapsibleCategory, { CollapsibleCategoryProps } from "../components/CollapsibleCategory";
|
||||
import { entriesApi } from "../services/api";
|
||||
|
||||
// Cycles through as many groups as the API returns
|
||||
const PALETTE: Pick<CollapsibleCategoryProps, "icon" | "color" | "darkColor">[] = [
|
||||
{ icon: "book-outline", color: "#3B7DD8", darkColor: "#5E9EF4" },
|
||||
{ icon: "book-outline", color: "#2E9E6B", darkColor: "#4EC992" },
|
||||
{ icon: "book-outline", color: "#9B4FB8", darkColor: "#C47CE0" },
|
||||
{ icon: "book-outline", color: "#C4622D", darkColor: "#E07B45" },
|
||||
{ icon: "book-outline", color: "#B8834F", darkColor: "#D4A574" },
|
||||
{ icon: "book-outline", color: "#2E7D9E", darkColor: "#4EA8C9" },
|
||||
];
|
||||
|
||||
export default function AllFeed() {
|
||||
const [query, setQuery] = useState("");
|
||||
const scheme = useColorScheme();
|
||||
const dark = scheme === "dark";
|
||||
const dark = useColorScheme() === "dark";
|
||||
|
||||
const totalCount = ALL_CATEGORIES.reduce(
|
||||
(sum, cat) => sum + cat.items.length,
|
||||
0
|
||||
);
|
||||
const [groups, setGroups] = useState<string[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [query, setQuery] = useState("");
|
||||
|
||||
// Filter items within each category based on search query
|
||||
const filteredCategories = useMemo((): Category[] => {
|
||||
if (!query.trim()) return ALL_CATEGORIES;
|
||||
const loadGroups = () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
entriesApi.getGroups()
|
||||
.then(setGroups)
|
||||
.catch(() => setError("Couldn't load groups."))
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => { loadGroups(); }, []);
|
||||
|
||||
const visibleGroups = useMemo(() => {
|
||||
if (!query.trim()) return groups;
|
||||
const lower = query.toLowerCase();
|
||||
return ALL_CATEGORIES.map((cat) => ({
|
||||
...cat,
|
||||
items: cat.items.filter(
|
||||
(item) =>
|
||||
item.title.toLowerCase().includes(lower) ||
|
||||
item.author.toLowerCase().includes(lower) ||
|
||||
item.tag.toLowerCase().includes(lower) ||
|
||||
cat.label.toLowerCase().includes(lower)
|
||||
),
|
||||
})).filter((cat) => cat.items.length > 0);
|
||||
}, [query]);
|
||||
return groups.filter((g) => g.toLowerCase().includes(lower));
|
||||
}, [query, groups]);
|
||||
|
||||
return (
|
||||
<SafeAreaView
|
||||
className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}
|
||||
>
|
||||
|
||||
<View
|
||||
className={`border-b ${
|
||||
dark ? "border-border-dark" : "border-border-light"
|
||||
}`}
|
||||
>
|
||||
<SafeAreaView className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}>
|
||||
{/* Header */}
|
||||
<View className={`border-b ${dark ? "border-border-dark" : "border-border-light"}`}>
|
||||
<View className="px-4 pt-2 pb-1">
|
||||
<Text
|
||||
className={`text-2xl font-display font-bold ${
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
>
|
||||
<Text className={`text-2xl font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
Discover
|
||||
</Text>
|
||||
<Text
|
||||
className={`text-xs mt-0.5 font-sans ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
{ALL_CATEGORIES.length} categories · {totalCount} articles
|
||||
<Text className={`text-xs mt-0.5 font-sans ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{loading ? "Loading…" : `${groups.length} groups`}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<SearchBar
|
||||
placeholder="Search all Subjects and Titles…"
|
||||
onSearch={setQuery}
|
||||
/>
|
||||
<SearchBar placeholder="Search groups…" onSearch={setQuery} />
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={{ paddingTop: 16, paddingBottom: 40 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardDismissMode="on-drag"
|
||||
>
|
||||
{filteredCategories.length === 0 ? (
|
||||
<View className="items-center mt-16 px-8">
|
||||
<Text className="text-4xl mb-3">🔍</Text>
|
||||
<Text
|
||||
className={`text-base font-sans font-semibold text-center ${
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
>
|
||||
No results for "{query}"
|
||||
</Text>
|
||||
<Text
|
||||
className={`text-sm font-sans text-center mt-1 ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
Try searching by category name, author, or topic.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
filteredCategories.map((cat, index) => (
|
||||
<CollapsibleCategory
|
||||
key={cat.id}
|
||||
category={cat}
|
||||
defaultOpen={index === 0} // first category open by default TODO maybe set option to change what is default
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
{/* States */}
|
||||
{loading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color={dark ? "#E07B45" : "#C4622D"} />
|
||||
</View>
|
||||
|
||||
) : error ? (
|
||||
<View className="flex-1 items-center justify-center px-8">
|
||||
<Text className="text-4xl mb-3">⚠️</Text>
|
||||
<Text className={`text-sm font-sans text-center mb-4 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{error}
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
onPress={loadGroups}
|
||||
className="px-5 py-2.5 rounded-xl"
|
||||
style={{ backgroundColor: dark ? "#E07B45" : "#C4622D" }}
|
||||
>
|
||||
<Text className="text-sm font-sans font-semibold text-white">Retry</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
) : (
|
||||
<ScrollView
|
||||
contentContainerStyle={{ paddingTop: 16, paddingBottom: 40 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardDismissMode="on-drag"
|
||||
>
|
||||
{visibleGroups.length === 0 ? (
|
||||
<View className="items-center mt-16 px-8">
|
||||
<Text className="text-4xl mb-3">🔍</Text>
|
||||
<Text className={`text-base font-sans font-semibold text-center ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
No groups match "{query}"
|
||||
</Text>
|
||||
<Text className={`text-sm font-sans text-center mt-1 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
Try a different search term.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
visibleGroups.map((groupName, index) => (
|
||||
<CollapsibleCategory
|
||||
key={groupName}
|
||||
id={groupName}
|
||||
label={groupName}
|
||||
groupName={groupName}
|
||||
defaultOpen={index === 0}
|
||||
{...PALETTE[index % PALETTE.length]}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
185
screens/AuthGate.tsx
Normal file
185
screens/AuthGate.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
View, Text, TextInput, TouchableOpacity,
|
||||
ActivityIndicator, KeyboardAvoidingView,
|
||||
Platform, ScrollView, useColorScheme,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
type Mode = "login" | "register";
|
||||
|
||||
export default function AuthGate({ onSuccess }: { onSuccess?: () => void }) { const dark = useColorScheme() === "dark";
|
||||
const { login, register } = useAuth();
|
||||
|
||||
const [mode, setMode] = useState<Mode>("login");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [name, setName] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showPass, setShowPass] = useState(false);
|
||||
|
||||
const accent = dark ? "#E07B45" : "#C4622D";
|
||||
|
||||
const submit = async () => {
|
||||
setError("");
|
||||
if (!email || !password) { setError("Please fill in all fields."); return; }
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
if (mode === "login") await login({ email, password });
|
||||
else await register({ email, password, name });
|
||||
onSuccess?.(); // ← add this
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? "Something went wrong.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const inputBase = `
|
||||
rounded-xl px-4 py-3.5 text-sm font-sans border
|
||||
${dark
|
||||
? "bg-obsidian-100 border-border-dark text-ink-dark"
|
||||
: "bg-parchment-100 border-border-light text-ink-light"}
|
||||
`;
|
||||
|
||||
return (
|
||||
<SafeAreaView className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}>
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === "ios" ? "padding" : undefined}
|
||||
className="flex-1"
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ flexGrow: 1, justifyContent: "center", padding: 24 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* Logo / header */}
|
||||
<View className="items-center mb-8">
|
||||
<View
|
||||
className="w-16 h-16 rounded-2xl items-center justify-center mb-4"
|
||||
style={{ backgroundColor: accent + "20" }}
|
||||
>
|
||||
<Text className="text-3xl">📰</Text>
|
||||
</View>
|
||||
<Text
|
||||
className={`text-2xl font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}
|
||||
>
|
||||
{mode === "login" ? "Welcome back" : "Create account"}
|
||||
</Text>
|
||||
<Text
|
||||
className={`text-sm font-sans mt-1 ${dark ? "text-muted-dark" : "text-muted-light"}`}
|
||||
>
|
||||
{mode === "login"
|
||||
? "Sign in to sync your subscriptions"
|
||||
: "Start reading what matters"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Card */}
|
||||
<View
|
||||
className={`rounded-2xl p-5 border ${
|
||||
dark
|
||||
? "bg-obsidian-100 border-border-dark"
|
||||
: "bg-surface-light border-border-light"
|
||||
}`}
|
||||
style={{
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowOpacity: dark ? 0.3 : 0.06,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 10,
|
||||
elevation: 3,
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
<View className="mb-3">
|
||||
<Text className={`text-xs font-sans font-semibold mb-1.5 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
EMAIL
|
||||
</Text>
|
||||
<TextInput
|
||||
className={inputBase}
|
||||
placeholder="you@example.com"
|
||||
placeholderTextColor={dark ? "#706D67" : "#8A8278"}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
autoComplete="email"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className="mb-5">
|
||||
<Text className={`text-xs font-sans font-semibold mb-1.5 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
PASSWORD
|
||||
</Text>
|
||||
<View className="relative">
|
||||
<TextInput
|
||||
className={inputBase}
|
||||
placeholder="••••••••"
|
||||
placeholderTextColor={dark ? "#706D67" : "#8A8278"}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!showPass}
|
||||
autoComplete="password"
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={() => setShowPass((v) => !v)}
|
||||
className="absolute right-3 top-3.5"
|
||||
>
|
||||
<Ionicons
|
||||
name={showPass ? "eye-off-outline" : "eye-outline"}
|
||||
size={18}
|
||||
color={dark ? "#706D67" : "#8A8278"}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{error !== "" && (
|
||||
<View className="mb-4 px-3 py-2.5 rounded-xl bg-red-500/10 border border-red-500/20">
|
||||
<Text className="text-xs font-sans text-red-500">{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={submit}
|
||||
disabled={loading}
|
||||
className="py-3.5 rounded-xl items-center"
|
||||
style={{ backgroundColor: accent }}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{loading
|
||||
? <ActivityIndicator color="#fff" />
|
||||
: <Text className="text-sm font-sans font-semibold text-white">
|
||||
{mode === "login" ? "Sign in" : "Create account"}
|
||||
</Text>
|
||||
}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Toggle mode */}
|
||||
<View className="flex-row justify-center mt-5">
|
||||
<Text className={`text-sm font-sans ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{mode === "login" ? "Don't have an account? " : "Already have an account? "}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={() => { setMode(mode === "login" ? "register" : "login"); setError(""); }}>
|
||||
<Text className="text-sm font-sans font-semibold" style={{ color: accent }}>
|
||||
{mode === "login" ? "Register" : "Sign in"}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Continue as guest */}
|
||||
<Text
|
||||
className={`text-center text-xs font-sans mt-4 ${dark ? "text-muted-dark" : "text-muted-light"}`}
|
||||
>
|
||||
You can still browse and save locally without signing in.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
useColorScheme,
|
||||
Switch,
|
||||
View, Text, ScrollView, TouchableOpacity,
|
||||
Switch, Modal, useColorScheme,
|
||||
} from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
import AuthGate from "./AuthGate";
|
||||
|
||||
interface SettingRowProps {
|
||||
icon: keyof typeof Ionicons.glyphMap;
|
||||
// ─── Sub-components ────────────────────────────────────────────────────────
|
||||
|
||||
type SettingRowProps = {
|
||||
icon: any;
|
||||
label: string;
|
||||
value?: string;
|
||||
toggle?: boolean;
|
||||
@ -19,34 +19,17 @@ interface SettingRowProps {
|
||||
onToggle?: (v: boolean) => void;
|
||||
onPress?: () => void;
|
||||
accent?: string;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
{/*// TODO add logic idk im still missing a home/login screen*/}
|
||||
|
||||
|
||||
|
||||
function SettingRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
toggle,
|
||||
toggleValue,
|
||||
onToggle,
|
||||
onPress,
|
||||
accent,
|
||||
}: SettingRowProps) {
|
||||
const scheme = useColorScheme();
|
||||
const dark = scheme === "dark";
|
||||
function SettingRow({ icon, label, value, toggle, toggleValue, onToggle, onPress, accent }: SettingRowProps) {
|
||||
const dark = useColorScheme() === "dark";
|
||||
const iconColor = accent ?? (dark ? "#706D67" : "#8A8278");
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
className={`flex-row items-center px-4 py-3.5 border-b ${
|
||||
dark ? "border-border-dark" : "border-border-light"
|
||||
}`}
|
||||
className={`flex-row items-center px-4 py-3.5 border-b ${dark ? "border-border-dark" : "border-border-light"}`}
|
||||
>
|
||||
<View
|
||||
className="w-8 h-8 rounded-xl items-center justify-center mr-3"
|
||||
@ -54,37 +37,20 @@ function SettingRow({
|
||||
>
|
||||
<Ionicons name={icon} size={16} color={iconColor} />
|
||||
</View>
|
||||
<Text
|
||||
className={`flex-1 text-sm font-sans ${
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
>
|
||||
<Text className={`flex-1 text-sm font-sans ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
{label}
|
||||
</Text>
|
||||
{toggle ? (
|
||||
<Switch
|
||||
value={toggleValue}
|
||||
onValueChange={onToggle}
|
||||
trackColor={{
|
||||
true: dark ? "#E07B45" : "#C4622D",
|
||||
false: dark ? "#2C2A27" : "#E8E2D5",
|
||||
}}
|
||||
trackColor={{ true: dark ? "#E07B45" : "#C4622D", false: dark ? "#2C2A27" : "#E8E2D5" }}
|
||||
thumbColor="#FFFFFF"
|
||||
/>
|
||||
) : value ? (
|
||||
<Text
|
||||
className={`text-sm font-sans ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
<Text className={`text-sm font-sans ${dark ? "text-muted-dark" : "text-muted-light"}`}>{value}</Text>
|
||||
) : (
|
||||
<Ionicons
|
||||
name="chevron-forward"
|
||||
size={14}
|
||||
color={dark ? "#706D67" : "#8A8278"}
|
||||
/>
|
||||
<Ionicons name="chevron-forward" size={14} color={dark ? "#706D67" : "#8A8278"} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@ -93,167 +59,197 @@ function SettingRow({
|
||||
function SectionLabel({ title }: { title: string }) {
|
||||
const dark = useColorScheme() === "dark";
|
||||
return (
|
||||
<Text
|
||||
className={`px-4 pt-5 pb-2 text-xs font-sans font-bold tracking-widest uppercase ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
<Text className={`px-4 pt-5 pb-2 text-xs font-sans font-bold tracking-widest uppercase ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{title}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Profile() {
|
||||
const [notifications, setNotifications] = React.useState(true);
|
||||
const [digest, setDigest] = React.useState(false);
|
||||
const scheme = useColorScheme();
|
||||
const dark = scheme === "dark";
|
||||
// ─── Guest profile (logged out) ────────────────────────────────────────────
|
||||
|
||||
function GuestProfile({ onSignIn }: { onSignIn: () => void }) {
|
||||
const dark = useColorScheme() === "dark";
|
||||
const accent = dark ? "#E07B45" : "#C4622D";
|
||||
|
||||
return (
|
||||
<SafeAreaView
|
||||
className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}
|
||||
>
|
||||
|
||||
<ScrollView
|
||||
contentContainerStyle={{ paddingBottom: 48 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
<ScrollView contentContainerStyle={{ paddingBottom: 48 }} showsVerticalScrollIndicator={false}>
|
||||
{/* Avatar block */}
|
||||
<View
|
||||
className={`items-center pt-8 pb-6 mx-4 mt-4 rounded-3xl ${dark ? "bg-obsidian-100" : "bg-surface-light"}`}
|
||||
style={{
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowOpacity: dark ? 0.35 : 0.06,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 10,
|
||||
elevation: 3,
|
||||
}}
|
||||
>
|
||||
{/* Avatar + name block */}
|
||||
{/* Anonymous avatar */}
|
||||
<View
|
||||
className={`items-center pt-8 pb-6 mx-4 mt-4 rounded-3xl ${
|
||||
dark ? "bg-obsidian-100" : "bg-surface-light"
|
||||
}`}
|
||||
style={{
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowOpacity: dark ? 0.35 : 0.06,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 10,
|
||||
elevation: 3,
|
||||
}}
|
||||
className={`w-20 h-20 rounded-full items-center justify-center mb-3 ${dark ? "bg-obsidian-50" : "bg-parchment-200"}`}
|
||||
>
|
||||
{/*// TODO*/}
|
||||
{/* Avatar placeholder */}
|
||||
<View
|
||||
className={`w-20 h-20 rounded-full items-center justify-center mb-3 ${
|
||||
dark ? "bg-accent-dark/20" : "bg-accent/10"
|
||||
}`}
|
||||
>
|
||||
<Text className="text-3xl">📰</Text>
|
||||
</View>
|
||||
<Text
|
||||
className={`text-xl font-display font-bold ${
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
>
|
||||
Get Name here idk
|
||||
</Text>
|
||||
<Text
|
||||
className={`text-sm font-sans mt-1 ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
{/*// TODO*/}
|
||||
aaa@aaaq.com
|
||||
</Text>
|
||||
<Ionicons name="person-outline" size={36} color={dark ? "#706D67" : "#8A8278"} />
|
||||
</View>
|
||||
<Text className={`text-xl font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
Guest
|
||||
</Text>
|
||||
<Text className={`text-sm font-sans mt-1 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
Sign in to sync your reading
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Stats row */}
|
||||
<View className="flex-row mt-5 gap-8">
|
||||
{[
|
||||
//TODO add stats tracked
|
||||
{ label: "Subscribed", value: "5" },
|
||||
{ label: "Read", value: "128" },
|
||||
{ label: "Saved", value: "34" },
|
||||
].map((stat) => (
|
||||
<View key={stat.label} className="items-center">
|
||||
<Text
|
||||
className={`text-xl font-display font-bold ${
|
||||
dark ? "text-ink-dark" : "text-ink-light"
|
||||
}`}
|
||||
>
|
||||
{stat.value}
|
||||
</Text>
|
||||
<Text
|
||||
className={`text-xs font-sans mt-0.5 ${
|
||||
dark ? "text-muted-dark" : "text-muted-light"
|
||||
}`}
|
||||
>
|
||||
{stat.label}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
{/* Settings available to guests */}
|
||||
<View
|
||||
className={`mx-4 mt-5 rounded-2xl overflow-hidden border ${dark ? "bg-obsidian-100 border-border-dark" : "bg-surface-light border-border-light"}`}
|
||||
>
|
||||
<SectionLabel title="General" />
|
||||
<SettingRow icon="help-circle-outline" label="Help & support" onPress={() => {}} />
|
||||
<SettingRow icon="information-circle-outline" label="About" onPress={() => {}} />
|
||||
</View>
|
||||
|
||||
{/* Sign in / Register CTA */}
|
||||
<TouchableOpacity
|
||||
onPress={onSignIn}
|
||||
className="mx-4 mt-4 py-4 rounded-2xl items-center"
|
||||
style={{ backgroundColor: accent }}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<View className="flex-row items-center gap-2">
|
||||
<Ionicons name="log-in-outline" size={18} color="#fff" />
|
||||
<Text className="text-sm font-sans font-semibold text-white">
|
||||
Sign in / Register
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text className={`text-center text-xs font-sans mt-3 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
You can still browse and save locally without an account.
|
||||
</Text>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Authenticated profile (logged in) ────────────────────────────────────
|
||||
|
||||
function AuthenticatedProfile({ onSignOut }: { onSignOut: () => void }) {
|
||||
const dark = useColorScheme() === "dark";
|
||||
const { user } = useAuth();
|
||||
const [notifications, setNotifications] = React.useState(true);
|
||||
const [digest, setDigest] = React.useState(false);
|
||||
|
||||
return (
|
||||
<ScrollView contentContainerStyle={{ paddingBottom: 48 }} showsVerticalScrollIndicator={false}>
|
||||
{/* Avatar + name block */}
|
||||
<View
|
||||
className={`items-center pt-8 pb-6 mx-4 mt-4 rounded-3xl ${dark ? "bg-obsidian-100" : "bg-surface-light"}`}
|
||||
style={{
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowOpacity: dark ? 0.35 : 0.06,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 10,
|
||||
elevation: 3,
|
||||
}}
|
||||
>
|
||||
<View className={`w-20 h-20 rounded-full items-center justify-center mb-3 ${dark ? "bg-accent-dark/20" : "bg-accent/10"}`}>
|
||||
<Text className="text-3xl">📰</Text>
|
||||
</View>
|
||||
<Text className={`text-xl font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
{user?.email?.split("@")[0] ?? "Reader"}
|
||||
</Text>
|
||||
<Text className={`text-sm font-sans mt-1 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{user?.email}
|
||||
</Text>
|
||||
|
||||
{/* Stats row */}
|
||||
<View className="flex-row mt-5 gap-8">
|
||||
{[
|
||||
{ label: "Subscribed", value: "5" },
|
||||
{ label: "Read", value: "128" },
|
||||
{ label: "Saved", value: "34" },
|
||||
].map((stat) => (
|
||||
<View key={stat.label} className="items-center">
|
||||
<Text className={`text-xl font-display font-bold ${dark ? "text-ink-dark" : "text-ink-light"}`}>
|
||||
{stat.value}
|
||||
</Text>
|
||||
<Text className={`text-xs font-sans mt-0.5 ${dark ? "text-muted-dark" : "text-muted-light"}`}>
|
||||
{stat.label}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Settings sections */}
|
||||
<View
|
||||
className={`mx-4 mt-5 rounded-2xl overflow-hidden border ${dark ? "bg-obsidian-100 border-border-dark" : "bg-surface-light border-border-light"}`}
|
||||
>
|
||||
<SectionLabel title="Notifications" />
|
||||
<SettingRow
|
||||
icon="notifications-outline" label="Push notifications"
|
||||
toggle toggleValue={notifications} onToggle={setNotifications}
|
||||
accent={dark ? "#E07B45" : "#C4622D"}
|
||||
/>
|
||||
<SettingRow
|
||||
icon="mail-outline" label="Daily digest email"
|
||||
toggle toggleValue={digest} onToggle={setDigest}
|
||||
accent={dark ? "#5E9EF4" : "#3B7DD8"}
|
||||
/>
|
||||
|
||||
<SectionLabel title="Subscriptions" />
|
||||
<SettingRow
|
||||
icon="bookmark-outline" label="Manage subscriptions"
|
||||
onPress={() => {}} accent={dark ? "#4EC992" : "#2E9E6B"}
|
||||
/>
|
||||
|
||||
<SectionLabel title="Account" />
|
||||
<SettingRow icon="person-outline" label="Edit profile" onPress={() => {}} />
|
||||
<SettingRow icon="help-circle-outline" label="Help & support" onPress={() => {}} />
|
||||
</View>
|
||||
|
||||
{/* Sign out */}
|
||||
<TouchableOpacity
|
||||
onPress={onSignOut}
|
||||
className={`mx-4 mt-4 py-4 rounded-2xl items-center border ${dark ? "border-red-900/40 bg-red-950/20" : "border-red-200 bg-red-50"}`}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View className="flex-row items-center gap-2">
|
||||
<Ionicons name="log-out-outline" size={16} color="#ef4444" />
|
||||
<Text className="text-sm font-sans font-semibold text-red-500">Sign out</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Root export ───────────────────────────────────────────────────────────
|
||||
|
||||
export default function Profile() {
|
||||
const dark = useColorScheme() === "dark";
|
||||
const { user, logout } = useAuth();
|
||||
const [showAuth, setShowAuth] = React.useState(false);
|
||||
|
||||
return (
|
||||
<SafeAreaView className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}>
|
||||
{user
|
||||
? <AuthenticatedProfile onSignOut={logout} />
|
||||
: <GuestProfile onSignIn={() => setShowAuth(true)} />
|
||||
}
|
||||
|
||||
{/* Login / Register modal */}
|
||||
<Modal
|
||||
visible={showAuth}
|
||||
animationType="slide"
|
||||
presentationStyle="pageSheet"
|
||||
onRequestClose={() => setShowAuth(false)}
|
||||
>
|
||||
{/* Close handle */}
|
||||
<View className={`pt-3 pb-1 items-center ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}>
|
||||
<View className={`w-10 h-1 rounded-full ${dark ? "bg-obsidian-50" : "bg-parchment-300"}`} />
|
||||
</View>
|
||||
|
||||
{/* Settings sections */}
|
||||
<View
|
||||
className={`mx-4 mt-5 rounded-2xl overflow-hidden border ${
|
||||
dark
|
||||
? "bg-obsidian-100 border-border-dark"
|
||||
: "bg-surface-light border-border-light"
|
||||
}`}
|
||||
>
|
||||
<SectionLabel title="Notifications" />
|
||||
<SettingRow
|
||||
icon="notifications-outline"
|
||||
label="Push notifications"
|
||||
toggle
|
||||
toggleValue={notifications}
|
||||
onToggle={setNotifications}
|
||||
accent={dark ? "#E07B45" : "#C4622D"}
|
||||
/>
|
||||
<SettingRow
|
||||
icon="mail-outline"
|
||||
label="Daily digest email"
|
||||
toggle
|
||||
toggleValue={digest}
|
||||
onToggle={setDigest}
|
||||
accent={dark ? "#5E9EF4" : "#3B7DD8"}
|
||||
/>
|
||||
|
||||
<SectionLabel title="Subscriptions" />
|
||||
<SettingRow
|
||||
icon="bookmark-outline"
|
||||
label="Manage subscriptions"
|
||||
onPress={() => {}}
|
||||
accent={dark ? "#4EC992" : "#2E9E6B"}
|
||||
/>
|
||||
|
||||
<SectionLabel title="Account" />
|
||||
<SettingRow
|
||||
icon="person-outline"
|
||||
label="Edit profile"
|
||||
onPress={() => {}}
|
||||
/>
|
||||
|
||||
{/*
|
||||
<SettingRow
|
||||
|
||||
icon="lock-closed-outline"
|
||||
label="Privacy settings"
|
||||
onPress={() => {}}
|
||||
/>
|
||||
*/}
|
||||
<SettingRow
|
||||
icon="help-circle-outline"
|
||||
label="Help & support"
|
||||
onPress={() => {}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Sign out */}
|
||||
<TouchableOpacity
|
||||
className={`mx-4 mt-4 py-4 rounded-2xl items-center border ${
|
||||
dark
|
||||
? "border-red-900/40 bg-red-950/20"
|
||||
: "border-red-200 bg-red-50"
|
||||
}`}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text className="text-sm font-sans font-semibold text-red-500">
|
||||
Sign out
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
{/* AuthGate auto-closes the modal on success because user becomes non-null */}
|
||||
<AuthGate onSuccess={() => setShowAuth(false)} />
|
||||
</Modal>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
70
services/api.tsx
Normal file
70
services/api.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
const BASE_URL = "http://192.168.100.6:8080"; // TODO change this
|
||||
|
||||
async function post<T>(path: string, body: object): Promise<T> {
|
||||
const res = await fetch(`${BASE_URL}${path}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text().catch(() => `HTTP ${res.status}`));
|
||||
return res.json();
|
||||
}
|
||||
|
||||
async function get<T>(path: string, params?: Record<string, any>): Promise<T> {
|
||||
const url = new URL(`${BASE_URL}${path}`);
|
||||
if (params) {
|
||||
Object.entries(params).forEach(([k, v]) => {
|
||||
if (v !== undefined && v !== null) url.searchParams.set(k, String(v));
|
||||
});
|
||||
}
|
||||
const res = await fetch(url.toString());
|
||||
if (!res.ok) throw new Error(await res.text().catch(() => `HTTP ${res.status}`));
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export type LoginPayload = { email: string; password: string };
|
||||
export type RegisterPayload = { email: string; password: string;};
|
||||
export type JwtResponse = { token: string; email: string; message: string };
|
||||
export type UserDTO = { id: number; email: string; name?: string };
|
||||
|
||||
export type Subject = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type Entry = {
|
||||
id: string;
|
||||
title: string;
|
||||
timePublished: string;
|
||||
groupName: string;
|
||||
infoEntry: string;
|
||||
paragraph: string;
|
||||
filepath?: string;
|
||||
subject: Subject;
|
||||
};
|
||||
|
||||
export type SpringPage<T> = {
|
||||
content: T[];
|
||||
totalPages: number;
|
||||
totalElements: number;
|
||||
last: boolean;
|
||||
number: number;
|
||||
};
|
||||
|
||||
|
||||
export const authApi = {
|
||||
login: (p: LoginPayload) => post<JwtResponse>("/login", p),
|
||||
register: (p: RegisterPayload) => post<UserDTO>("/register", p),
|
||||
};
|
||||
|
||||
|
||||
export const entriesApi = {
|
||||
getGroups: () =>
|
||||
get<string[]>("/groups"),
|
||||
|
||||
getEntries: (params: { subjectId?: string; groupName?: string; page?: number }) =>
|
||||
get<SpringPage<Entry>>("/entries", params),
|
||||
|
||||
getEntry: (id: string) =>
|
||||
get<Entry>(`/entries/${id}`),
|
||||
};
|
||||
@ -1,6 +1,5 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
|
||||
content: [
|
||||
"./app/**/*.{js,jsx,ts,tsx}",
|
||||
"./screens/**/*.{js,jsx,ts,tsx}",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user