mirror of
https://github.com/Stef-00012/Zipline-Android-App.git
synced 2025-05-11 18:35:58 +02:00
better urls view
This commit is contained in:
parent
4e17ba67e0
commit
2cd63d222f
4 changed files with 121 additions and 5 deletions
0
app/(app)/(files)/upload.tsx
Normal file
0
app/(app)/(files)/upload.tsx
Normal file
|
@ -6,10 +6,13 @@ import type { APISettings, APIURLs, DashURL } from "@/types/zipline";
|
|||
import { Link, useFocusEffect, useRouter } from "expo-router";
|
||||
import { useShareIntentContext } from "expo-share-intent";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Linking, Pressable, ScrollView, Text, View } from "react-native";
|
||||
import { Linking, Pressable, ScrollView, Text, View, ToastAndroid } from "react-native";
|
||||
import { Row, Table } from "react-native-table-component";
|
||||
import * as db from "@/functions/database";
|
||||
import { timeDifference } from "@/functions/util"
|
||||
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
|
||||
import * as Clipboard from "expo-clipboard";
|
||||
|
||||
|
||||
export default function Page() {
|
||||
const router = useRouter();
|
||||
|
@ -69,8 +72,8 @@ export default function Page() {
|
|||
<View>
|
||||
<Table>
|
||||
<Row
|
||||
data={["Code", "Vanity", "URL", "Views", "Max Views"]}
|
||||
widthArr={[80, 100, 200, 100, 100]}
|
||||
data={["Code", "Vanity", "URL", "Views", "Max Views", "Created", "Actions"]}
|
||||
widthArr={[80, 100, 200, 100, 100, 130, 130]}
|
||||
style={styles.tableHeader}
|
||||
textStyle={styles.rowText}
|
||||
/>
|
||||
|
@ -136,6 +139,56 @@ export default function Page() {
|
|||
</Text>
|
||||
)
|
||||
|
||||
const created = (
|
||||
<Text style={styles.rowText}>
|
||||
{timeDifference(new Date(), new Date(url.createdAt))}
|
||||
</Text>
|
||||
)
|
||||
|
||||
const actions = (
|
||||
<View style={styles.actionsContainer}>
|
||||
<Pressable style={styles.actionButton} onPress={async () => {
|
||||
const urlDest = url.vanity
|
||||
? `${dashUrl}${settings.urlsRoute === "/" ? "" : settings.urlsRoute}/${url.vanity}`
|
||||
: `${dashUrl}${settings.urlsRoute === "/" ? "" : settings.urlsRoute}/${url.code}`
|
||||
|
||||
const saved = await Clipboard.setStringAsync(urlDest);
|
||||
|
||||
if (saved)
|
||||
return ToastAndroid.show(
|
||||
"URL copied to clipboard",
|
||||
ToastAndroid.SHORT,
|
||||
);
|
||||
|
||||
return ToastAndroid.show(
|
||||
"Failed to paste to the clipboard",
|
||||
ToastAndroid.SHORT,
|
||||
);
|
||||
}}>
|
||||
<MaterialIcons name="content-copy" size={20} color={"white"} />
|
||||
</Pressable>
|
||||
|
||||
<Pressable style={styles.actionButton} onPress={() => {
|
||||
const urlId = url.id
|
||||
|
||||
console.info("Edit Pressed")
|
||||
}}>
|
||||
<MaterialIcons name="edit" size={20} color={"white"} />
|
||||
</Pressable>
|
||||
|
||||
<Pressable style={{
|
||||
...styles.actionButton,
|
||||
...styles.actionButtonDanger
|
||||
}} onPress={() => {
|
||||
const urlId = url.id
|
||||
|
||||
console.info("Delete Pressed")
|
||||
}}>
|
||||
<MaterialIcons name="delete" size={20} color={"white"} />
|
||||
</Pressable>
|
||||
</View>
|
||||
)
|
||||
|
||||
let rowStyle = styles.row
|
||||
|
||||
if (index === 0) rowStyle = {
|
||||
|
@ -157,10 +210,12 @@ export default function Page() {
|
|||
url.vanity ? vanity : noVanity,
|
||||
destination,
|
||||
views,
|
||||
maxViews
|
||||
maxViews,
|
||||
created,
|
||||
actions
|
||||
]
|
||||
}
|
||||
widthArr={[80, 100, 200, 100, 100]}
|
||||
widthArr={[80, 100, 200, 100, 100, 130, 130]}
|
||||
style={rowStyle}
|
||||
textStyle={styles.text}
|
||||
/>
|
||||
|
|
|
@ -44,3 +44,49 @@ export async function getFileDataURI(filePath: string): Promise<string | null> {
|
|||
|
||||
return dataURI;
|
||||
}
|
||||
|
||||
export function timeDifference(current: Date, previous: Date) {
|
||||
const msPerMinute = 60 * 1000;
|
||||
const msPerHour = msPerMinute * 60;
|
||||
const msPerDay = msPerHour * 24;
|
||||
const msPerMonth = msPerDay * 30;
|
||||
const msPerYear = msPerDay * 365;
|
||||
|
||||
const elapsed = current.getTime() - previous.getTime();
|
||||
|
||||
if (elapsed < msPerMinute) {
|
||||
const difference = Math.round(elapsed / 1000)
|
||||
|
||||
return difference + ` second${difference > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
else if (elapsed < msPerHour) {
|
||||
const difference = Math.round(elapsed / msPerMinute)
|
||||
|
||||
return difference + ` minute${difference > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
else if (elapsed < msPerDay ) {
|
||||
const difference = Math.round(elapsed / msPerHour)
|
||||
|
||||
return difference + ` hour${difference > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
else if (elapsed < msPerMonth) {
|
||||
const difference = Math.round(elapsed / msPerDay)
|
||||
|
||||
return difference + ` day${difference > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
else if (elapsed < msPerYear) {
|
||||
const difference = Math.round(elapsed / msPerMonth)
|
||||
|
||||
return difference + ` month${difference > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
else {
|
||||
const difference = Math.round(elapsed / msPerYear)
|
||||
|
||||
return difference + ` year${difference > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
}
|
|
@ -138,5 +138,20 @@ export const styles = StyleSheet.create({
|
|||
},
|
||||
link: {
|
||||
color: "#575DB5"
|
||||
},
|
||||
actionsContainer: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
paddingTop: 10,
|
||||
paddingRight: 10,
|
||||
},
|
||||
actionButton: {
|
||||
borderRadius: 4,
|
||||
marginHorizontal: 0,
|
||||
backgroundColor: "#323ea8",
|
||||
padding: 5
|
||||
},
|
||||
actionButtonDanger: {
|
||||
backgroundColor: "#CF4238"
|
||||
}
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue