From 5f6a9ab13d65c7a516e553ebc486beaac8ef273f Mon Sep 17 00:00:00 2001 From: lukestahl Date: Wed, 20 Dec 2023 18:02:32 +0100 Subject: [PATCH] add cdn icons --- apps/expo/app/(tabs)/apps/index.tsx | 6 +- apps/expo/app/(tabs)/overview/[appId].tsx | 17 ++-- apps/expo/app/(tabs)/overview/index.tsx | 6 +- apps/expo/components/pie.chart.tsx | 4 +- apps/expo/data/app.settings.ts | 4 + apps/expo/data/apps.ts | 113 ++++++++++++++-------- apps/expo/data/break.store.ts | 2 +- apps/expo/data/overview.store.ts | 4 + pnpm-lock.yaml | 15 +++ 9 files changed, 116 insertions(+), 55 deletions(-) diff --git a/apps/expo/app/(tabs)/apps/index.tsx b/apps/expo/app/(tabs)/apps/index.tsx index 7422dfe..7d06cb8 100644 --- a/apps/expo/app/(tabs)/apps/index.tsx +++ b/apps/expo/app/(tabs)/apps/index.tsx @@ -1,15 +1,15 @@ import { useEffect, useState } from "react"; import { RefreshControl } from "react-native"; +import { SvgUri } from "react-native-svg"; import { router } from "expo-router"; import { ChevronRight, Plus } from "@tamagui/lucide-icons"; import { observer } from "mobx-react-lite"; -import { H4, Image, Paragraph, SizableText, View, XStack, YStack } from "tamagui"; +import { H4, Paragraph, SizableText, View, XStack, YStack } from "tamagui"; import { Container } from "../../../components/container"; import { Header } from "../../../components/header"; import { ShadowCard } from "../../../components/shadow.card"; import { AppSettings } from "../../../data/app.settings"; -import { appIcons } from "../../../data/apps"; const Apps = observer(() => { const [refreshing, setRefreshing] = useState(false); @@ -48,7 +48,7 @@ const Apps = observer(() => { }} > - + {app.name} diff --git a/apps/expo/app/(tabs)/overview/[appId].tsx b/apps/expo/app/(tabs)/overview/[appId].tsx index c0c2922..793bc59 100644 --- a/apps/expo/app/(tabs)/overview/[appId].tsx +++ b/apps/expo/app/(tabs)/overview/[appId].tsx @@ -3,14 +3,13 @@ import { Link, Redirect, router, useLocalSearchParams } from "expo-router"; import { ChevronRight, Cog } from "@tamagui/lucide-icons"; import dayjs from "dayjs"; import { observer } from "mobx-react-lite"; -import { H2, H4, Paragraph, SizableText, View, XStack, YStack } from "tamagui"; +import { H2, H4, Paragraph, SizableText, useTheme, View, XStack, YStack } from "tamagui"; import { Container } from "../../../components/container"; import { Divider } from "../../../components/divider"; import { LineChart } from "../../../components/line.chart"; import { PieChart } from "../../../components/pie.chart"; import { ShadowCard } from "../../../components/shadow.card"; -import { socialMediaGradients } from "../../../data/apps"; import { OverviewStore } from "../../../data/overview.store"; const labelTextStyle = { color: "#797979", width: 100, marginTop: -2, fontFamily: "Satoshi", fontSize: 12 }; @@ -50,7 +49,14 @@ const App = observer(() => { const effectivenessByDayInPercentage = selectedApp ? OverviewStore.preventionsByDay(selectedApp) : null; const interruptionsSplitUpByAppInPercentage = OverviewStore.interruptionsSplitUpByAppInPercentage(); - + const theme = useTheme(); + const greyColors: (string | undefined)[] = [ + theme.grey3?.val as string, + theme.grey4?.val as string, + theme.grey5?.val as string, + theme.grey6?.val as string, + theme.grey7?.val as string, + ]; return ( @@ -178,10 +184,9 @@ const App = observer(() => { { + const randomGrey = greyColors[Math.floor(Math.random() * greyColors.length)] ?? "#000"; return { - color: socialMediaGradients[interruptions.app.key][0], - gradientCenterColor: - socialMediaGradients[interruptions.app.key][socialMediaGradients[interruptions.app.key].length - 1], + color: randomGrey, value: interruptions.percentage, label: interruptions.app.name, focused: interruptions.app.id === selectedApp.id, diff --git a/apps/expo/app/(tabs)/overview/index.tsx b/apps/expo/app/(tabs)/overview/index.tsx index a60f59e..c5d5386 100644 --- a/apps/expo/app/(tabs)/overview/index.tsx +++ b/apps/expo/app/(tabs)/overview/index.tsx @@ -1,16 +1,16 @@ import { useEffect } from "react"; +import { SvgUri } from "react-native-svg"; import { router } from "expo-router"; import { AlertTriangle, Check, ChevronRight, Plus, ShieldBan } from "@tamagui/lucide-icons"; import dayjs from "dayjs"; import { observer } from "mobx-react-lite"; -import { H1, H2, H4, Image, Paragraph, SizableText, View, XStack, YStack } from "tamagui"; +import { H1, H2, H4, Paragraph, SizableText, View, XStack, YStack } from "tamagui"; import { Container } from "../../../components/container"; import { Divider } from "../../../components/divider"; import { Header } from "../../../components/header"; import { PercentageTrend } from "../../../components/percentage.trend"; import { ShadowCard } from "../../../components/shadow.card"; -import { appIcons } from "../../../data/apps"; import { OverviewStore } from "../../../data/overview.store"; import { WeeklySummary } from "./weekly.summary"; @@ -90,7 +90,7 @@ const Overview = observer(() => { > - + {app.name} diff --git a/apps/expo/components/pie.chart.tsx b/apps/expo/components/pie.chart.tsx index 261d1cd..5c8fb64 100644 --- a/apps/expo/components/pie.chart.tsx +++ b/apps/expo/components/pie.chart.tsx @@ -63,10 +63,10 @@ export const PieChart = ({ centerLabelComponent={() => { return ( -

+

{focusedData?.value}%

- {focusedData?.label} + {focusedData?.label} ); }} diff --git a/apps/expo/data/app.settings.ts b/apps/expo/data/app.settings.ts index 69adfd3..537e0cb 100644 --- a/apps/expo/data/app.settings.ts +++ b/apps/expo/data/app.settings.ts @@ -40,6 +40,10 @@ export class AppSettingsSingleton { get apps(): App[] { return this.appsStore.apps; } + + public getIconUrl = (iconKey: string): string => { + return this.appsStore.getIconUrl(iconKey); + }; } export const AppSettings = new AppSettingsSingleton(); diff --git a/apps/expo/data/apps.ts b/apps/expo/data/apps.ts index 2cdccc7..8106486 100644 --- a/apps/expo/data/apps.ts +++ b/apps/expo/data/apps.ts @@ -8,8 +8,8 @@ export interface App { name: string; settings: IAppSettings; active: boolean; - iconKey: keyof typeof appIcons; - key: keyof typeof deepLinks; + iconKey: SupportedApp; + key: SupportedApp; } interface IAppSettings { @@ -18,7 +18,8 @@ interface IAppSettings { dailyTimeSpentMinutes: number; } -export const deepLinks = { +// TODO add more apps / test all apps +export const deepLinks: Record = { instagram: "instagram", twitter: "twitter://user?screen_name=USERNAME", facebook: "fb://profile/USER_ID", @@ -33,41 +34,68 @@ export const deepLinks = { telegram: "tg://resolve?domain=USERNAME", discord: "discord://discord.com/channels/USER_ID", safari: "https://www.google.com", -} as const; - -export const appIcons = { - instagram: "https://cdn-icons-png.flaticon.com/512/174/174855.png", - twitter: "https://cdn-icons-png.flaticon.com/512/733/733579.png", - facebook: "https://cdn-icons-png.flaticon.com/512/733/733547.png", - youtube: "https://cdn-icons-png.flaticon.com/512/1384/1384060.png", - whatsapp: "https://cdn-icons-png.flaticon.com/512/733/733585.png", - spotify: "https://cdn-icons-png.flaticon.com/512/174/174872.png", - linkedin: "https://cdn-icons-png.flaticon.com/512/174/174857.png", - tiktok: "https://cdn-icons-png.flaticon.com/512/733/733547.png", - reddit: "https://cdn-icons-png.flaticon.com/512/733/733579.png", - snapchat: "https://cdn-icons-png.flaticon.com/512/733/733585.png", - twitch: "https://cdn-icons-png.flaticon.com/512/733/733579.png", - telegram: "https://cdn-icons-png.flaticon.com/512/733/733585.png", - discord: "https://cdn-icons-png.flaticon.com/512/733/733547.png", - safari: "https://static-00.iconduck.com/assets.00/safari-ios-icon-512x512-v014xh8r.png", -} as const; - -export const socialMediaGradients = { - instagram: ["#405DE6", "#5851DB", "#833AB4", "#C13584", "#E1306C", "#FD1D1D", "#F56040"], - twitter: ["#00C6FF", "#0072FF"], - facebook: ["#3A5894", "#898F9C"], - youtube: ["#FF0000", "#282828"], - whatsapp: ["#075E54", "#128C7E", "#25D366", "#DCF8C6"], - spotify: ["#1DB954", "#191414"], - linkedin: ["#0A66C2", "#FFFFFF"], - tiktok: ["#ff0050", "#00F2EA"], - reddit: ["#FF4500", "#FFFFFF"], - snapchat: ["#FFFC00", "#FFFFFF"], - twitch: ["#6441A4", "#FFFFFF"], - telegram: ["#0088CC", "#FFFFFF"], - discord: ["#5865F2", "#FFFFFF"], - safari: ["#0E60FE", "#FFFFFF"], -} as const; + bereal: "https://www.google.com", + clashofclans: "https://www.google.com", + clashroyale: "https://www.google.com", + imessage: "https://www.google.com", + netflix: "https://www.google.com", + candycrush: "https://www.google.com", + chrome: "https://www.google.com", + "disney+": "https://www.google.com", + firefox: "https://www.google.com", + gmail: "https://www.google.com", + mastodon: "https://www.google.com", + microsoftteams: "https://www.google.com", + outlook: "https://www.google.com", + pokemongo: "https://www.google.com", + roblox: "https://www.google.com", + signal: "https://www.google.com", + skype: "https://www.google.com", + sudoku: "https://www.google.com", + tinder: "https://www.google.com", + toonblast: "https://www.google.com", + tumblr: "https://www.google.com", + zalandofashion: "https://www.google.com", +}; + +export type SupportedApp = + | "instagram" + | "twitter" + | "facebook" + | "youtube" + | "whatsapp" + | "spotify" + | "linkedin" + | "tiktok" + | "reddit" + | "snapchat" + | "twitch" + | "telegram" + | "discord" + | "safari" + | "bereal" + | "clashofclans" + | "clashroyale" + | "imessage" + | "netflix" + | "candycrush" + | "chrome" + | "disney+" + | "firefox" + | "gmail" + | "mastodon" + | "microsoftteams" + | "outlook" + | "pokemongo" + | "roblox" + | "signal" + | "skype" + | "sudoku" + | "tinder" + | "toonblast" + | "tumblr" + | "zalandofashion"; + export const defaultAppSettings: IAppSettings = { breakDurationSeconds: 10, quickAppSwitchDurationMinutes: 5, @@ -116,10 +144,10 @@ export class AppsStore { const app = await this.storage.create({ name: appShortcutName, active: true, - iconKey: appShortcutName.toLowerCase().replace(" ", "") as keyof typeof appIcons, + iconKey: appShortcutName.toLowerCase().replace(" ", "") as SupportedApp, id: Crypto.randomUUID(), settings: defaultAppSettings, - key: appShortcutName.toLowerCase().replace(" ", "") as keyof typeof appIcons, + key: appShortcutName.toLowerCase().replace(" ", "") as SupportedApp, }); if (!app) { throw new Error("App not created"); @@ -150,4 +178,9 @@ export class AppsStore { public set apps(value: App[]) { this._apps.replace(value); } + + public getIconUrl = (iconKey: string) => { + const url = new URL(`https://cdn.simpleicons.org/${iconKey}`); + return url.toString(); + }; } diff --git a/apps/expo/data/break.store.ts b/apps/expo/data/break.store.ts index 2a1bf06..9a7d746 100644 --- a/apps/expo/data/break.store.ts +++ b/apps/expo/data/break.store.ts @@ -31,7 +31,7 @@ export class BreakStoreSingleton { throw new Error("App not initialized"); } await this.appStatisticsStore.trackEvent({ appId: this.app.id, type: "app-reopen" }); - await Linking.openURL(deepLinks[this.app.key]); + await Linking.openURL(deepLinks[this.app.key as keyof typeof deepLinks]); } public async exitApp(): Promise { diff --git a/apps/expo/data/overview.store.ts b/apps/expo/data/overview.store.ts index b1424fc..6d3e4d3 100644 --- a/apps/expo/data/overview.store.ts +++ b/apps/expo/data/overview.store.ts @@ -175,6 +175,10 @@ class OverviewStoreSingleton { get apps(): App[] { return this.appsStore.apps; } + + public getIconUrl = (iconKey: string): string => { + return this.appsStore.getIconUrl(iconKey); + }; } export const OverviewStore = new OverviewStoreSingleton(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c150c95..7a2809f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,6 +39,9 @@ importers: '@acme/expo-exit-app': specifier: ^0.1.0 version: link:../../packages/expo-exit-app + '@acme/socialmedia-icons': + specifier: ^0.1.0 + version: link:../../packages/socialmedia-icons '@acme/target-plugin': specifier: ^0.1.0 version: link:../../packages/target-plugin @@ -323,6 +326,18 @@ importers: specifier: ^5.3.3 version: 5.3.3 + packages/socialmedia-icons: + dependencies: + expo: + specifier: '*' + version: 49.0.21(@babel/core@7.23.6) + react: + specifier: ^18.2.0 + version: 18.2.0 + react-native: + specifier: '*' + version: 0.72.7(@babel/core@7.23.6)(@babel/preset-env@7.23.3)(react@18.2.0) + packages/target-plugin: dependencies: expo: