tiefen_space_app/screeens/StreamerSpace/AllSpacePosts/index.jsx

83 lines
2.4 KiB
JavaScript

import { View, ActivityIndicator } from "react-native";
import React, { useState } from "react";
import { useTailwind } from "tailwind-rn";
import Toast from "react-native-toast-message";
import Empty from "../../../components/Empty";
import { BottomSheetFlatList } from "@gorhom/bottom-sheet";
import SpacePost from "../../../components/SpacePost";
import baseRequest from "../../../utils/baseRequest";
import { generateSignature } from "../../../utils/crypto";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function AllSpacePosts({ zid }) {
const tailwind = useTailwind();
const insets = useSafeAreaInsets();
const [data, setData] = useState([]);
const [offset, setOffset] = useState(0);
const [more, setMore] = useState(1);
const getData = async () => {
if (zid === undefined) return;
if (!more) return;
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
try {
const base = await baseRequest();
const body = {
zid: zid,
ct_upper_bound: Math.floor(new Date().getTime() / 1000),
offset: offset,
limit: 4,
...base,
};
const signature = await generateSignature(body);
const _response = await fetch(
`${apiUrl}/api/zone_moment/list_by_zid?signature=${signature}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
}
);
const _data = await _response.json();
if (_data.ret === -1) {
Toast.show({
type: "error",
text1: _data.msg,
topOffset: 60,
});
return;
}
setData((prev) => [...prev, ..._data.data.list]);
setOffset(_data.data.offset);
setMore(_data.data.more);
} catch (error) {
console.error(error);
}
};
const renderItem = ({ item }) => <SpacePost data={item} />;
return (
<BottomSheetFlatList
data={data}
keyExtractor={(i) => i.id}
renderItem={renderItem}
contentContainerStyle={{
paddingBottom: 72 + insets.bottom,
...tailwind("bg-[#07050A]"),
}}
onEndReached={() => getData()}
ListFooterComponent={() => (
<View>
{data.length !== 0 && more === 1 && (
<ActivityIndicator style={tailwind("my-4")} size="large" />
)}
</View>
)}
ListEmptyComponent={<Empty type="nodata" />}
/>
);
}