zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove all scafoldcc instances

Browse Source
This commit is contained in:
Zoe Roux
2024-01-04 14:41:31 +01:00
committed by Clément Le Bihan
parent 5525110d39
commit 42a947dfb0
8 changed files with 348 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
front/views/HomeView.tsx
View File

@@ -9,7 +9,6 @@ import CompetenciesTable from '../components/CompetenciesTable';
import Translate from '../components/Translate';
import TextButton from '../components/TextButton';
import { FontAwesome5 } from '@expo/vector-icons';
import ScaffoldCC from '../components/UI/ScaffoldCC';
// eslint-disable-next-line @typescript-eslint/ban-types
const HomeView = (props: RouteProps<{}>) => {
@@ -29,111 +28,109 @@ const HomeView = (props: RouteProps<{}>) => {
return <LoadingView />;
}
return (
<ScaffoldCC routeName={props.route.name}>
<Stack direction={{ base: 'column', lg: 'row' }} space={5} paddingTop={5}>
<VStack flex={{ lg: 2 }} space={5}>
<SongCardGrid
heading={<Translate translationKey="goNextStep" />}
songs={
nextStepQuery.data?.map((song) => ({
cover: song.cover,
name: song.name,
songId: song.id,
artistName: song.artist!.name,
})) ?? []
}
/>
<Stack direction={{ base: 'column', lg: 'row' }}>
<Box flex={{ lg: 1 }}>
<Heading>
<Translate translationKey="mySkillsToImprove" />
</Heading>
<Box padding={5}>
<CompetenciesTable {...skillsQuery.data} />
</Box>
</Box>
<Box flex={{ lg: 1 }}>
<SongCardGrid
heading={<Translate translationKey="recentlyPlayed" />}
songs={
playHistoryQuery.data
?.map((x) => x.song)
.map((song) => ({
cover: song!.cover,
name: song!.name,
songId: song!.id,
artistName: song!.artist!.name,
})) ?? []
}
/>
</Box>
</Stack>
</VStack>
<VStack flex={{ lg: 1 }} height={{ lg: '100%' }} alignItems="center">
<HStack width="100%" justifyContent="space-evenly" p={5} space={5}>
<TextButton
translate={{ translationKey: 'searchBtn' }}
colorScheme="secondary"
size="sm"
onPress={() => navigation.navigate('Search', {})}
/>
<TextButton
translate={{ translationKey: 'settingsBtn' }}
colorScheme="gray"
size="sm"
onPress={() => navigation.navigate('Settings', {})}
/>
<TextButton
translate={{ translationKey: 'leaderboardTitle' }}
colorScheme="primary"
size="sm"
onPress={() => navigation.navigate('Leaderboard', {})}
/>
<TextButton
label={'V2'}
colorScheme="gray"
size="sm"
onPress={() => navigation.navigate('Home', {})}
/>
</HStack>
<Box style={{ width: '100%' }}>
<Stack direction={{ base: 'column', lg: 'row' }} space={5} paddingTop={5}>
<VStack flex={{ lg: 2 }} space={5}>
<SongCardGrid
heading={<Translate translationKey="goNextStep" />}
songs={
nextStepQuery.data?.map((song) => ({
cover: song.cover,
name: song.name,
songId: song.id,
artistName: song.artist!.name,
})) ?? []
}
/>
<Stack direction={{ base: 'column', lg: 'row' }}>
<Box flex={{ lg: 1 }}>
<Heading>
<Translate translationKey="recentSearches" />
<Translate translationKey="mySkillsToImprove" />
</Heading>
<Flex
padding={3}
style={{
width: '100%',
alignItems: 'flex-start',
alignContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
{searchHistoryQuery.data?.length === 0 && (
<Translate translationKey="noRecentSearches" />
)}
{[...new Set(searchHistoryQuery.data.map((x) => x.query))]
.slice(0, 5)
.map((query) => (
<TextButton
leftIcon={<FontAwesome5 name="search" size={16} />}
style={{
margin: 2,
}}
key={query}
variant="solid"
size="xs"
colorScheme="primary"
label={query}
onPress={() => navigation.navigate('Search', {})}
/>
))}
</Flex>
<Box padding={5}>
<CompetenciesTable {...skillsQuery.data} />
</Box>
</Box>
</VStack>
</Stack>
</ScaffoldCC>
<Box flex={{ lg: 1 }}>
<SongCardGrid
heading={<Translate translationKey="recentlyPlayed" />}
songs={
playHistoryQuery.data
?.map((x) => x.song)
.map((song) => ({
cover: song!.cover,
name: song!.name,
songId: song!.id,
artistName: song!.artist!.name,
})) ?? []
}
/>
</Box>
</Stack>
</VStack>
<VStack flex={{ lg: 1 }} height={{ lg: '100%' }} alignItems="center">
<HStack width="100%" justifyContent="space-evenly" p={5} space={5}>
<TextButton
translate={{ translationKey: 'searchBtn' }}
colorScheme="secondary"
size="sm"
onPress={() => navigation.navigate('Search', {})}
/>
<TextButton
translate={{ translationKey: 'settingsBtn' }}
colorScheme="gray"
size="sm"
onPress={() => navigation.navigate('Settings', {})}
/>
<TextButton
translate={{ translationKey: 'leaderboardTitle' }}
colorScheme="primary"
size="sm"
onPress={() => navigation.navigate('Leaderboard', {})}
/>
<TextButton
label={'V2'}
colorScheme="gray"
size="sm"
onPress={() => navigation.navigate('Home', {})}
/>
</HStack>
<Box style={{ width: '100%' }}>
<Heading>
<Translate translationKey="recentSearches" />
</Heading>
<Flex
padding={3}
style={{
width: '100%',
alignItems: 'flex-start',
alignContent: 'flex-start',
flexDirection: 'row',
flexWrap: 'wrap',
}}
>
{searchHistoryQuery.data?.length === 0 && (
<Translate translationKey="noRecentSearches" />
)}
{[...new Set(searchHistoryQuery.data.map((x) => x.query))]
.slice(0, 5)
.map((query) => (
<TextButton
leftIcon={<FontAwesome5 name="search" size={16} />}
style={{
margin: 2,
}}
key={query}
variant="solid"
size="xs"
colorScheme="primary"
label={query}
onPress={() => navigation.navigate('Search', {})}
/>
))}
</Flex>
</Box>
</VStack>
</Stack>
);
};

251
front/views/LeaderboardView.tsx
View File

@@ -4,7 +4,6 @@ import { useQuery } from '../Queries';
import API from '../API';
import { LoadingView } from '../components/Loading';
import { useNavigation, RouteProps } from '../Navigation';
import ScaffoldCC from '../components/UI/ScaffoldCC';
import { translate } from '../i18n/i18n';
import { PodiumCard } from '../components/leaderboard/PodiumCard';
import { BoardRow } from '../components/leaderboard/BoardRow';
@@ -20,11 +19,7 @@ const Leaderboardiew = (props: RouteProps<Record<string, never>>) => {
return <></>;
}
if (!scoresQuery.data) {
return (
<ScaffoldCC routeName={props.route.name}>
<LoadingView />
</ScaffoldCC>
);
return <LoadingView />;
}
const podiumUserData = [
@@ -34,140 +29,138 @@ const Leaderboardiew = (props: RouteProps<Record<string, never>>) => {
] as const;
return (
<ScaffoldCC routeName={props.route.name}>
<SafeAreaView>
<ScrollView>
<Text
style={{
fontSize: 20,
fontWeight: '500',
marginBottom: 16,
}}
>
{translate('leaderBoardHeading')}
</Text>
<Text
style={{
fontSize: 14,
fontWeight: '500',
}}
>
{translate('leaderBoardHeadingFull')}
</Text>
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
flex: 1,
alignSelf: 'stretch',
}}
>
{!isPhone ? (
<View /** podium view */
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
gap: 32,
paddingBottom: 10,
marginBottom: 20,
}}
>
<PodiumCard
medalColor="#AE84FB"
offset={120}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<PodiumCard
medalColor="#5F74F7"
offset={60}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
</View>
) : (
<View
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
marginBottom: 20,
marginHorizontal: 10,
}}
>
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<View
style={{
display: 'flex',
flexDirection: 'row-reverse',
justifyContent: 'center',
alignItems: 'center',
gap: 64,
}}
>
<PodiumCard
medalColor="#5F74F7"
offset={0}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
<PodiumCard
medalColor="#AE84FB"
offset={60}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
</View>
</View>
)}
<SafeAreaView>
<ScrollView>
<Text
style={{
fontSize: 20,
fontWeight: '500',
marginBottom: 16,
}}
>
{translate('leaderBoardHeading')}
</Text>
<Text
style={{
fontSize: 14,
fontWeight: '500',
}}
>
{translate('leaderBoardHeadingFull')}
</Text>
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
flex: 1,
alignSelf: 'stretch',
}}
>
{!isPhone ? (
<View /** podium view */
style={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
gap: 32,
paddingBottom: 10,
marginBottom: 20,
}}
>
<PodiumCard
medalColor="#AE84FB"
offset={120}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<PodiumCard
medalColor="#5F74F7"
offset={60}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
</View>
) : (
<View
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'stretch',
gap: 10,
paddingRight: 10,
marginBottom: 20,
marginHorizontal: 10,
}}
>
{scoresQuery.data.slice(3, 20).map((comp, index) => (
<BoardRow
key={comp.name + index}
index={index + 4}
userAvatarUrl={comp.data.avatar}
userLvl={comp.data.totalScore}
userPseudo={comp.name}
<PodiumCard
medalColor="#EAD93C"
offset={0}
userAvatarUrl={podiumUserData[0]?.data.avatar}
userPseudo={podiumUserData[0]?.name}
userLvl={podiumUserData[0]?.data.totalScore}
/>
<View
style={{
display: 'flex',
flexDirection: 'row-reverse',
justifyContent: 'center',
alignItems: 'center',
gap: 64,
}}
>
<PodiumCard
medalColor="#5F74F7"
offset={0}
userAvatarUrl={podiumUserData[1]?.data.avatar}
userPseudo={podiumUserData[1]?.name}
userLvl={podiumUserData[1]?.data.totalScore}
/>
))}
<PodiumCard
medalColor="#AE84FB"
offset={60}
userAvatarUrl={podiumUserData[2]?.data.avatar}
userPseudo={podiumUserData[2]?.name}
userLvl={podiumUserData[2]?.data.totalScore}
/>
</View>
</View>
)}
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
alignSelf: 'stretch',
gap: 10,
paddingRight: 10,
}}
>
{scoresQuery.data.slice(3, 20).map((comp, index) => (
<BoardRow
key={comp.name + index}
index={index + 4}
userAvatarUrl={comp.data.avatar}
userLvl={comp.data.totalScore}
userPseudo={comp.name}
/>
))}
</View>
</ScrollView>
</SafeAreaView>
</ScaffoldCC>
</View>
</ScrollView>
</SafeAreaView>
);
};

31
front/views/MusicView.tsx
View File

@@ -13,7 +13,6 @@ import { Heart, Clock, StatusUp, FolderCross } from 'iconsax-react-native';
import { Scene } from 'react-native-tab-view/lib/typescript/src/types';
import { RouteProps, useNavigation } from '../Navigation';
import { Translate, TranslationKey } from '../i18n/i18n';
import ScaffoldCC from '../components/UI/ScaffoldCC';
import MusicList from '../components/UI/MusicList';
import { useQuery } from '../Queries';
import API from '../API';
@@ -162,22 +161,20 @@ const MusicTab = (props: RouteProps<object>) => {
);
return (
<ScaffoldCC routeName={props.route.name} withPadding={false}>
<TabView
sceneContainerStyle={{
flex: 1,
alignSelf: 'center',
padding: isSmallScreen ? 8 : 20,
paddingTop: 32,
width: '100%',
}}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
</ScaffoldCC>
<TabView
sceneContainerStyle={{
flex: 1,
alignSelf: 'center',
padding: isSmallScreen ? 8 : 20,
paddingTop: 32,
width: '100%',
}}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
);
};

147
front/views/ProfileView.tsx
View File

@@ -9,7 +9,6 @@ import API from '../API';
import ButtonBase from '../components/UI/ButtonBase';
import { Translate, translate } from '../i18n/i18n';
import ScoreGraph from '../components/ScoreGraph';
import ScaffoldCC from '../components/UI/ScaffoldCC';
function xpToLevel(xp: number): number {
return Math.floor(xp / 1000);
@@ -26,11 +25,7 @@ const ProfileView = (props: RouteProps<{}>) => {
const userQuery = useQuery(API.getUserInfo);
if (!userQuery.data) {
return (
<ScaffoldCC routeName={props.route.name}>
<LoadingView />
</ScaffoldCC>
);
return <LoadingView />;
}
const progessValue = xpToProgressBarValue(userQuery.data.data.xp);
@@ -40,89 +35,85 @@ const ProfileView = (props: RouteProps<{}>) => {
const isBigScreen = layout.width > 650;
return (
<ScaffoldCC routeName={props.route.name}>
<Flex flex={1}>
<Flex flex={1}>
<View
style={{
display: 'flex',
flexDirection: isBigScreen ? 'row' : 'column',
alignItems: isBigScreen ? 'flex-start' : 'center',
paddingBottom: 20,
gap: 5,
justifyContent: 'space-between',
}}
>
<View
style={{
display: 'flex',
flexDirection: isBigScreen ? 'row' : 'column',
alignItems: isBigScreen ? 'flex-start' : 'center',
paddingBottom: 20,
gap: 5,
justifyContent: 'space-between',
flexGrow: 0,
flexShrink: 0,
}}
>
<UserAvatar size={isBigScreen ? 'xl' : '2xl'} />
</View>
<Column
style={{
paddingLeft: isBigScreen ? 20 : 0,
paddingTop: isBigScreen ? 0 : 20,
flexGrow: 1,
flexShrink: 1,
width: '100%',
}}
>
<View
style={{
flexGrow: 0,
flexShrink: 0,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<UserAvatar size={isBigScreen ? 'xl' : '2xl'} />
</View>
<Column
style={{
paddingLeft: isBigScreen ? 20 : 0,
paddingTop: isBigScreen ? 0 : 20,
flexGrow: 1,
flexShrink: 1,
width: '100%',
}}
>
<View
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
<Text fontSize={'xl'} style={{ paddingRight: 'auto' }}>
{userQuery.data.name}
</Text>
<ButtonBase
title={translate('updateProfile')}
type={'filled'}
onPress={async () => navigation.navigate('Settings', {})}
/>
</View>
<Translate
style={{ paddingBottom: 10, fontWeight: 'bold' }}
translationKey="accountCreatedOn"
format={(e) =>
`${e} ${userQuery.data.data.createdAt.toLocaleDateString()}`
}
<Text fontSize={'xl'} style={{ paddingRight: 'auto' }}>
{userQuery.data.name}
</Text>
<ButtonBase
title={translate('updateProfile')}
type={'filled'}
onPress={async () => navigation.navigate('Settings', {})}
/>
<Flex
style={{
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 10,
}}
>
<Translate
translationKey="gamesPlayed"
format={(e) => `${userQuery.data.data.gamesPlayed} ${e}`}
/>
</Flex>
</Column>
</View>
<Row style={{ alignItems: 'center', paddingBottom: 20 }}>
</View>
<Translate
style={{ paddingRight: 20 }}
translationKey="level"
format={(e) => `${e} ${level}`}
style={{ paddingBottom: 10, fontWeight: 'bold' }}
translationKey="accountCreatedOn"
format={(e) => `${e} ${userQuery.data.data.createdAt.toLocaleDateString()}`}
/>
<Progress
bgColor={colors.coolGray[500]}
value={progessValue}
maxW={'800'}
flex={1}
/>
</Row>
<ScoreGraph />
</Flex>
</ScaffoldCC>
<Flex
style={{
flexDirection: 'row',
alignItems: 'center',
paddingBottom: 10,
}}
>
<Translate
translationKey="gamesPlayed"
format={(e) => `${userQuery.data.data.gamesPlayed} ${e}`}
/>
</Flex>
</Column>
</View>
<Row style={{ alignItems: 'center', paddingBottom: 20 }}>
<Translate
style={{ paddingRight: 20 }}
translationKey="level"
format={(e) => `${e} ${level}`}
/>
<Progress
bgColor={colors.coolGray[500]}
value={progessValue}
maxW={'800'}
flex={1}
/>
</Row>
<ScoreGraph />
</Flex>
);
};

49
front/views/SearchView.tsx
View File

@@ -11,7 +11,6 @@ import { Filter } from '../components/SearchBar';
import { ScrollView } from 'native-base';
import { RouteProps } from '../Navigation';
import LikedSong from '../models/LikedSong';
import ScaffoldCC from '../components/UI/ScaffoldCC';
interface SearchContextType {
filter: 'artist' | 'song' | 'genre' | 'all' | 'favorites';
@@ -82,31 +81,31 @@ const SearchView = (props: RouteProps<SearchViewProps>) => {
};
return (
<ScaffoldCC routeName={props.route.name}>
<ScrollView>
<SafeAreaView>
<SearchContext.Provider
value={{
filter,
stringQuery,
songData,
artistData,
genreData,
favoriteData,
isLoadingSong,
isLoadingArtist,
isLoadingGenre,
isLoadingFavorite,
updateFilter,
updateStringQuery,
}}
<ScrollView>
<SafeAreaView>
<SearchContext.Provider
value={{
filter,
stringQuery,
songData,
artistData,
genreData,
favoriteData,
isLoadingSong,
isLoadingArtist,
isLoadingGenre,
isLoadingFavorite,
updateFilter,
updateStringQuery,
}}
>
<SearchBar />
<SearchResultComponent />
</SearchContext.Provider>
</SafeAreaView>
</ScrollView>
</ScaffoldCC>
<SearchBar />
<SearchResultComponent />
</SearchContext.Provider>
</SafeAreaView>
</ScrollView>
);
};

1
front/views/V2/DiscoveryView.tsx
View File

@@ -5,7 +5,6 @@ import { useQuery } from '../../Queries';
import SongCardInfo from '../../components/V2/SongCardInfo';
import API from '../../API';
import { RouteProps, useNavigation } from '../../Navigation';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import GoldenRatio from '../../components/V2/GoldenRatio';
// eslint-disable-next-line @typescript-eslint/ban-types

11
front/views/V2/SearchView.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import SearchBarComponent from '../../components/V2/SearchBar';
import { RouteProps } from '../../Navigation';
import SearchHistory from '../../components/V2/SearchHistory';
@@ -8,12 +7,10 @@ import { View } from 'react-native';
// eslint-disable-next-line @typescript-eslint/ban-types
const SearchView = (props: RouteProps<{}>) => {
return (
<ScaffoldCC routeName={props.route.name}>
<View style={{ display: 'flex', gap: 50 }}>
<SearchBarComponent />
<SearchHistory />
</View>
</ScaffoldCC>
<View style={{ display: 'flex', gap: 50 }}>
<SearchBarComponent />
<SearchHistory />
</View>
);
};

33
front/views/settings/SettingsView.tsx
View File

@@ -15,7 +15,6 @@ import {
import { HeartEdit, UserEdit, SecurityUser, FolderCross } from 'iconsax-react-native';
import { Scene } from 'react-native-tab-view/lib/typescript/src/types';
import { RouteProps } from '../../Navigation';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import { translate } from '../../i18n/i18n';
const renderScene = SceneMap({
@@ -94,23 +93,21 @@ const SettingsTab = (props: RouteProps<{}>) => {
);
return (
<ScaffoldCC routeName={props.route.name} withPadding={false}>
<TabView
sceneContainerStyle={{
flex: 1,
alignSelf: 'center',
paddingTop: 32,
padding: isSmallScreen ? 8 : 20,
maxWidth: 850,
width: '100%',
}}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
</ScaffoldCC>
<TabView
sceneContainerStyle={{
flex: 1,
alignSelf: 'center',
paddingTop: 32,
padding: isSmallScreen ? 8 : 20,
maxWidth: 850,
width: '100%',
}}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
);
};