From 727bcca8a19096d4b1af309044662646d11eee22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20L=C3=A9vy?= Date: Thu, 12 Sep 2024 16:23:57 +0200 Subject: [PATCH] feat(feed): Add dynamic layouts and new subgroup data - Introduced dynamic layouts for index, search, profile, and login routes, enhancing modularity and flexibility. - Implemented a share button and platform-specific sharing functionality to improve user experience. - Updated tab title from "Home" to "MeloCap" for better branding. - Removed the "Avatar" tab from the layout. - Added multiple new subgroups to the sample data to enrich content and provide a better testing dataset --- app/(index,search,profile,login)/_layout.tsx | 93 +++++++++++++ .../_layout.web.tsx | 93 +++++++++++++ app/_layout.tsx | 12 +- data/index.tsx | 123 ++++++++++++++++++ 4 files changed, 310 insertions(+), 11 deletions(-) create mode 100644 app/(index,search,profile,login)/_layout.tsx create mode 100644 app/(index,search,profile,login)/_layout.web.tsx diff --git a/app/(index,search,profile,login)/_layout.tsx b/app/(index,search,profile,login)/_layout.tsx new file mode 100644 index 0000000..9aae952 --- /dev/null +++ b/app/(index,search,profile,login)/_layout.tsx @@ -0,0 +1,93 @@ +import { Stack } from "expo-router"; +import Head from "expo-router/head"; +import { Platform, PlatformColor, TouchableOpacity } from "react-native"; +import * as Share from "expo-sharing"; +import { Icon } from "@/components/icon"; + +export const unstable_settings = { + initialRouteName: "index", + search: { + initialRouteName: "search", + }, + profile: { + initialRouteName: "profile", + }, + login: { + initialRouteName: "login", + }, + avatar: { + initialRouteName: "avatar" + }, +}; + +export default function DynamicLayout() { + return ( + + ); + } else { + return null; + } + }, + }} + /> + ); +} +function safeLocation() { + if (typeof window === "undefined") { + return ""; + } + return window.location.toString(); +} + +const useLink = Head.useLink + ? Head.useLink + : () => ({ + url: safeLocation(), + }); + +function ShareButton(props) { + const link = useLink?.(); + const url = link?.url ?? safeLocation(); + return ( + { + Share.share({ + url, + }); + }} + > + {/* */} + + ); +} + +function isSharingAvailable() { + if (Platform.OS === "web") { + if (typeof navigator === "undefined") { + return false; + } + + return !!navigator.share; + } + return true; +} diff --git a/app/(index,search,profile,login)/_layout.web.tsx b/app/(index,search,profile,login)/_layout.web.tsx new file mode 100644 index 0000000..e820044 --- /dev/null +++ b/app/(index,search,profile,login)/_layout.web.tsx @@ -0,0 +1,93 @@ +import { Stack } from "expo-router"; +import Head from "expo-router/head"; +import { Platform, PlatformColor, TouchableOpacity } from "react-native"; +import * as Share from "expo-sharing"; +import { Icon } from "@/components/icon"; + +export const unstable_settings = { + initialRouteName: "index", + search: { + initialRouteName: "search", + }, + profile: { + initialRouteName: "profile", + }, + login: { + initialRouteName: "login", + }, + avatar: { + initialRouteName: "avatar" + }, +}; + +export default function DynamicLayout() { + return ( + + ); + } else { + return null; + } + }, + }} + /> + ); +} +function safeLocation() { + if (typeof window === "undefined") { + return ""; + } + return window.location.toString(); +} + +const useLink = Head.useLink + ? Head.useLink + : () => ({ + url: safeLocation(), + }); + +function ShareButton(props) { + const link = useLink?.(); + const url = link?.url ?? safeLocation(); + return ( + { + Share.share({ + url, + }); + }} + > + {/* */} + + ); +} + +function isSharingAvailable() { + if (Platform.OS === "web") { + if (typeof navigator === "undefined") { + return false; + } + + return !!navigator.share; + } + return true; +} diff --git a/app/_layout.tsx b/app/_layout.tsx index 08ff838..1a6aaab 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -238,7 +238,7 @@ const LayoutApp = () => { { ), }} /> - ); diff --git a/data/index.tsx b/data/index.tsx index 0d26e37..b774a76 100644 --- a/data/index.tsx +++ b/data/index.tsx @@ -249,4 +249,127 @@ export const DATA = [ }, ], }, + { + id: "6f7g8h9", + name: "Music Maniacs", + description: "Join us to connect with fellow music enthusiasts", + image: "https://picsum.photos/seed/696/3000/2000", + subGroups: [ + { + id: "6fh9i1", + name: "Rock and Roll", + description: "Have fun.", + image: "https://picsum.photos/seed/696/3000/2000", + }, + { + id: "6f7gh9i3", + name: "Jazz Vibes", + description: "Join for cool vibes.", + image: "https://picsum.photos/200/300?random=", + }, + ], + }, + { + id: "6f7g8hi", + name: "Music Maniacs", + description: "Join us to connect with fellow music enthusiasts", + image: "https://picsum.photos/seed/696/3000/2000", + subGroups: [ + { + id: "6f7g9i1", + name: "Rock and Roll", + description: "Have fun.", + image: "https://picsum.photos/seed/696/3000/2000", + }, + ], + }, + { + id: "6f78h9i", + name: "Music Maniacs", + description: "Join us to connect with fellow music enthusiasts", + image: "https://picsum.photos/seed/696/3000/2000", + subGroups: [ + { + id: "67g8h9i1", + name: "Rock and Roll", + description: "Have fun.", + image: "https://picsum.photos/seed/696/3000/2000", + }, + { + id: "6f7gh9i2", + name: "Classical Harmony", + description: "Millenial", + image: "https://picsum.photos/seed/696/3000/2000", + }, + { + id: "7g8h9i3", + name: "Jazz Vibes", + description: "Join for cool vibes.", + image: "https://picsum.photos/200/300?random=", + }, + ], + }, + { + id: "4d56f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4dzze6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5ea6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5te6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5e6ff7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5xxe6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5exs6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5esx6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, + { + id: "4d5elll6f7g", + name: "Travel Buddies", + description: "We are sharing travel experiences and tips.", + image: "https://example.com/images/travel-buddies.jpg", + subGroups: [], + }, ];