moved files to monorepo and updated controllers to start with /api
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import {
|
||||
Animated, LayoutAnimation, Linking,
|
||||
Platform, Text, TouchableOpacity,
|
||||
UIManager, View, useColorScheme,
|
||||
} from "react-native";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Entry, Subject } from "@/services/api";
|
||||
import { useAuth } from "@/context/AuthContext";
|
||||
import SubjectSheet from "@/components/SubjectSheet";
|
||||
|
||||
if (Platform.OS === "android") {
|
||||
UIManager.setLayoutAnimationEnabledExperimental?.(true);
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
try {
|
||||
return new Date(iso).toLocaleDateString("en-GB", {
|
||||
day: "numeric", month: "short", year: "numeric",
|
||||
});
|
||||
} catch {
|
||||
return iso;
|
||||
}
|
||||
}
|
||||
|
||||
function fileName(path: string): string {
|
||||
return path.split(/[\\/]/).pop() ?? path;
|
||||
}
|
||||
|
||||
export default function ExpandableItem({ item }: { item: Entry }) {
|
||||
|
||||
|
||||
const { user } = useAuth();
|
||||
const [sheetSubject, setSheetSubject] = useState<Subject | null>(null);
|
||||
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const rotateAnim = useRef(new Animated.Value(0)).current;
|
||||
const dark = useColorScheme() === "dark";
|
||||
|
||||
const toggle = () => {
|
||||
LayoutAnimation.configureNext({
|
||||
duration: 280,
|
||||
create: { type: "easeInEaseOut", property: "opacity" },
|
||||
update: { type: "spring", springDamping: 0.8 },
|
||||
});
|
||||
Animated.timing(rotateAnim, {
|
||||
toValue: expanded ? 0 : 1,
|
||||
duration: 250,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
setExpanded((v) => !v);
|
||||
};
|
||||
|
||||
const chevronRotation = rotateAnim.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: ["0deg", "180deg"],
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<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"
|
||||
}`}
|
||||
style={{
|
||||
shadowColor: dark ? "#000" : "#1A1714",
|
||||
shadowOpacity: dark ? 0.35 : 0.06,
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
}}
|
||||
>
|
||||
{/* Collapsed header */}
|
||||
<View className="flex-row items-center px-4 py-4">
|
||||
<View className="flex-1 pr-3">
|
||||
|
||||
{/* Tag + date row */}
|
||||
<View className="flex-row items-center mb-1.5 gap-2 flex-wrap">
|
||||
|
||||
{/* Subject tag */}
|
||||
<View onStartShouldSetResponder={() => true}>
|
||||
{user ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => setSheetSubject(item.subject)}
|
||||
className={`px-2 py-0.5 rounded-full ${dark ? "bg-accent-dark/20" : "bg-accent/10"}`}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<Text className={`text-xs font-sans font-semibold tracking-wide ${dark ? "text-accent-dark" : "text-accent"}`}>
|
||||
{item.subject?.name ?? item.groupName}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Group pill */}
|
||||
<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"}`}
|
||||
numberOfLines={expanded ? undefined : 2}
|
||||
>
|
||||
{item.title}
|
||||
</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"} />
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* Expanded body */}
|
||||
{expanded && (
|
||||
<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"
|
||||
}`}
|
||||
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
<SubjectSheet
|
||||
subject={sheetSubject}
|
||||
onClose={() => setSheetSubject(null)}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user