From 1228eb603e25d7c2ee8538c63ed3b8cb3cc08a85 Mon Sep 17 00:00:00 2001 From: mathysPaul Date: Wed, 27 Sep 2023 17:31:09 +0200 Subject: [PATCH] [add] Scaffold for mobile & desktop --- front/Navigation.tsx | 2 +- front/components/UI/ScaffoldCC.tsx | 87 +++++++ front/components/UI/ScaffoldDesktopCC.tsx | 257 +++++++++++++++++++ front/components/UI/ScaffoldMobileCC.tsx | 100 ++++++++ front/views/settings/SettingsProfileView.tsx | 2 +- front/views/settings/SettingsView.tsx | 8 +- 6 files changed, 450 insertions(+), 6 deletions(-) create mode 100644 front/components/UI/ScaffoldCC.tsx create mode 100644 front/components/UI/ScaffoldDesktopCC.tsx create mode 100644 front/components/UI/ScaffoldMobileCC.tsx diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 652ea99..2f98671 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -34,7 +34,7 @@ import SigninView from './views/SigninView'; import SignupView from './views/SignupView'; import PasswordResetView from './views/PasswordResetView'; import ForgotPasswordView from './views/ForgotPasswordView'; -import ScaffoldCC from './components/UI/Scaffold'; +import ScaffoldCC from './components/UI/ScaffoldCC'; import DiscoveryView from './views/V2/DiscoveryView'; // Util function to hide route props in URL diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx new file mode 100644 index 0000000..386c998 --- /dev/null +++ b/front/components/UI/ScaffoldCC.tsx @@ -0,0 +1,87 @@ +import { View, Image } from 'react-native'; +import { Divider, Text, ScrollView, Flex, Row, Popover, Heading, Button, useBreakpointValue } from 'native-base'; +import useColorScheme from '../../hooks/colorScheme'; +import { useQuery, useQueries } from '../../Queries'; +import API from '../../API'; +import Song from '../../models/Song'; +import { LinearGradient } from 'expo-linear-gradient'; +import ButtonBase from './ButtonBase'; +import { + Cup, + Discover, + Icon, + LogoutCurve, + Music, + SearchNormal1, + Setting2, + User, +} from 'iconsax-react-native'; +import { useDispatch } from 'react-redux'; +import { LoadingView } from '../Loading'; +import { translate } from '../../i18n/i18n'; +import { unsetAccessToken } from '../../state/UserSlice'; +import { useNavigation } from '../../Navigation'; +import Spacer from './Spacer'; +import ScaffoldDesktopCC from './ScaffoldDesktopCC'; +import ScaffoldMobileCC from './ScaffoldMobileCC'; + +const menu: { + type: "main" | "sub"; + title: string; + icon: Icon; + link: string; +}[] = [ + { type: "main", title: 'Discovery', icon: Discover, link: 'HomeNew' }, + { type: "main", title: 'Profile', icon: User, link: 'User' }, + { type: "main", title: 'Music', icon: Music, link: 'Home' }, + { type: "main", title: 'Search', icon: SearchNormal1, link: 'Search' }, + { type: "main", title: 'LeaderBoard', icon: Cup, link: 'Score' }, + { type: "sub", title: 'Settings', icon: Setting2, link: 'Settings' }, +]; + +type ScaffoldCCProps = { + children?: React.ReactNode; + routeName: string; +}; + +const ScaffoldCC = (props: ScaffoldCCProps) => { + const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); + + const userQuery = useQuery(API.getUserInfo); + + if (!userQuery.data || userQuery.isLoading) { + return ; + } + const colorScheme = useColorScheme(); + + + if (screenSize === 'small') { + return ( + + {props.children} + + ); + } + + return ( + + {props.children} + + ); +}; + +export default ScaffoldCC; diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx new file mode 100644 index 0000000..db1d685 --- /dev/null +++ b/front/components/UI/ScaffoldDesktopCC.tsx @@ -0,0 +1,257 @@ +import { View, Image } from 'react-native'; +import { Divider, Text, ScrollView, Flex, Row, Popover, Heading, Button } from 'native-base'; +import { useQuery, useQueries } from '../../Queries'; +import API from '../../API'; +import Song from '../../models/Song'; +import { LinearGradient } from 'expo-linear-gradient'; +import ButtonBase from './ButtonBase'; +import { Icon, LogoutCurve } from 'iconsax-react-native'; +import { useDispatch } from 'react-redux'; +import { LoadingView } from '../Loading'; +import { translate } from '../../i18n/i18n'; +import { unsetAccessToken } from '../../state/UserSlice'; +import { useNavigation } from '../../Navigation'; +import Spacer from './Spacer'; +import User from '../../models/User'; + +type ScaffoldDesktopCCProps = { + children?: React.ReactNode; + user: User; + logo: string; + routeName: string; + menu: { + type: "main" | "sub"; + title: string; + icon: Icon; + link: string; + }[] +}; + +const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { + const navigation = useNavigation(); + const userQuery = useQuery(API.getUserInfo); + const dispatch = useDispatch(); + + if (!userQuery.data || userQuery.isLoading) { + return ; + } + const playHistoryQuery = useQuery(API.getUserPlayHistory); + const songHistory = useQueries( + playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? [] + ); + + return ( + + + + + + + + + Chromacase + + + + + {props.menu.map((value) => ( + value.type === "main" && + + + navigation.navigate(value.link as never) + } + /> + + + ))} + + + + + + + Recently played + + {songHistory.length === 0 && ( + + No songs played yet + + )} + {songHistory + .map((h) => h.data) + .filter((data): data is Song => data !== undefined) + .filter( + (song, i, array) => + array.map((s) => s.id).findIndex((id) => id == song.id) == i + ) + .slice(0, 4) + .map((histoItem, index) => ( + + {histoItem.name} + + ))} + + + + + + {props.menu.map((value) => ( + value.type === "sub" && + + navigation.navigate(value.link as never) + } + /> + ))} + + {!props.user.isGuest && ( + { + dispatch(unsetAccessToken()); + }} + /> + )} + + {props.user.isGuest && ( + ( + + {translate('signOutBtn')} + + )} + > + + + + + {translate('Attention')} + + + {translate( + 'YouAreCurrentlyConnectedWithAGuestAccountWarning' + )} + + + + + + + + + )} + + + + + {props.children} + + + + + + + ); +}; + +export default ScaffoldDesktopCC; diff --git a/front/components/UI/ScaffoldMobileCC.tsx b/front/components/UI/ScaffoldMobileCC.tsx new file mode 100644 index 0000000..618fe18 --- /dev/null +++ b/front/components/UI/ScaffoldMobileCC.tsx @@ -0,0 +1,100 @@ +import { View, useWindowDimensions } from 'react-native'; +import { ScrollView, Flex, useBreakpointValue, useMediaQuery } from 'native-base'; +import { LinearGradient } from 'expo-linear-gradient'; +import ButtonBase from './ButtonBase'; +import { Icon } from 'iconsax-react-native'; +import { useNavigation } from '../../Navigation'; +import Spacer from './Spacer'; +import User from '../../models/User'; + +type ScaffoldMobileCCProps = { + children?: React.ReactNode; + user: User; + logo: string; + routeName: string; + menu: { + type: "main" | "sub"; + title: string; + icon: Icon; + link: string; + }[] +}; + +const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => { + const navigation = useNavigation(); + const [isSmallScreen] = useMediaQuery({ maxWidth: 400 }); + + + console.log(isSmallScreen); + + return ( + + + + + {props.children} + + + + + + {props.menu.map((value) => ( + + navigation.navigate(value.link as never) + } + /> + ))} + + + + + + ); +}; + +export default ScaffoldMobileCC; diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx index 4183327..263dd25 100644 --- a/front/views/settings/SettingsProfileView.tsx +++ b/front/views/settings/SettingsProfileView.tsx @@ -40,7 +40,7 @@ const ProfileSettings = () => { { ); return ( - + { onIndexChange={setIndex} initialLayout={{ width: layout.width }} /> - + ); };