better urls view

This commit is contained in:
Stef-00012 2025-01-24 10:48:31 +01:00
parent 4e17ba67e0
commit 2cd63d222f
No known key found for this signature in database
GPG key ID: 4EA4DF16B1BF5D66
4 changed files with 121 additions and 5 deletions

View file

View 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}
/>

View file

@ -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`;
}
}

View file

@ -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"
}
});