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

Front: Home View: Atomic Layout

Browse Source
This commit is contained in:
Arthi-chaud
2022-10-04 09:13:46 +01:00
parent 048e36d023
commit d2dd3b52de
11 changed files with 28 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/API.ts
+1 -1
View File
@@ -19,7 +19,7 @@ export default class API {
return {
name: "User",
email: "user@chromacase.com",
xp: 0,
xp: 2345,
premium: false,
metrics: {},
settings: {},
front/components/col.tsx
-20
View File
@@ -1,20 +0,0 @@
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
export default class Col extends Component{
render() {
let customStyles = Object.assign({}, this.props.customStyles, styles.container);
return (
<View style={customStyles}>
{this.props.children}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginLeft: 5,
marginRight: 5,
}
});
front/components/progressBar.tsx
-83
View File
@@ -1,83 +0,0 @@
import React from "react";
const ProgressBar = (
props: {
progress: number;
maxValue: number;
barWidth: number;
title?: string;
}) =>
{
const { progress, maxValue, barWidth, title } = props;
const box = {
width: `${barWidth}%`,
height: 20,
margin: 20,
}
const containerStyles = {
padding: 2,
backgroundColor: "#e0e0de",
borderRadius: 50,
}
function computePercent(progress: number, maxValue: number)
{
return progress * 100 / maxValue;;
}
const fillerStyles = {
height: '100%',
width: `${computePercent(progress, maxValue)}%`,
backgroundColor: "#18A558",
borderRadius: 'inherit',
textAlign: 'center',
}
const labelStyles = {
padding: 5,
color: 'white',
fontWeight: 'bold',
}
const titleStyle = {
padding: 5,
color: 'black',
fontWeight: 'bold',
fontSize: 20,
textAlign: 'center',
}
if (title != null) {
return (
<div style={box}>
<div style={titleStyle}>
{title}
</div>
<div style={containerStyles}>
<div style={fillerStyles}>
<span style={labelStyles}>
{`${computePercent(progress, maxValue)}%`}
</span>
</div>
</div>
<div><p>ceci est un sous titre yay</p></div>
</div>
);
}
return (
<div style={box}>
<div style={containerStyles}>
<div style={fillerStyles}>
<span style={labelStyles}>
{`${computePercent(progress, maxValue)}%`}
</span>
</div>
</div>
</div>
);
}
export default ProgressBar;
front/components/row.tsx
-20
View File
@@ -1,20 +0,0 @@
import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
export default class Row extends Component{
render() {
return (
<View style={styles.container}>
{this.props.children}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
marginTop: 10,
marginBottom: 10,
}
});
front/components/songCard.tsx
-50
View File
@@ -1,50 +0,0 @@
import React from "react";
import { Card, Text, Title } from "react-native-paper";
const SongCard = (
props: {
albumCover: string;
songTitle: string;
artistName: string;
}) =>
{
const { albumCover, songTitle, artistName } = props
const cardFormat = {
margin: 10,
padding: 5,
width: 200,
backgroundColor: '#C5C5C5'
}
const artistNameStyle = {
fontStyle: 'Italic'
}
const songTitleStyle = {
fontSize: 17,
color: 'black'
}
const coverImageStyle = {
height: 150,
width: 190
}
return (
<Card style={cardFormat}>
<Card.Cover source={{ uri: albumCover }} style={coverImageStyle}/>
<Card.Content>
<Title style={songTitleStyle}>
{songTitle}
</Title>
<Text style={artistNameStyle}>
{artistName}
</Text>
</Card.Content>
</Card>
);
}
export default SongCard;
front/views/HomeView/Competencies.tsx
-59
View File
@@ -1,59 +0,0 @@
import React from "react"
import { Card, Text } from "react-native-paper"
import { View } from "react-native"
import ProgressBar from "../../components/progressBar"
import { AvailableLanguages, translate } from "../../i18n/i18n";
import { useSelector } from "react-redux";
const cardFormat = {
marginLeft: 20,
width: 700,
height: 400,
}
const textStyle = {
fontSize: 20,
padding: 20,
}
const rowStyle = {
flexDirection: 'row',
justifyContent: 'space-between'
}
const Competencies = () => {
const language: AvailableLanguages = useSelector((state) => state.language.value);
return (
<Card style={cardFormat}>
<Card.Content style={cardFormat}>
<View style={rowStyle}>
<Text style={textStyle}> { translate('pedalsCompetency') } </Text>
<ProgressBar progress={60} maxValue={100} barWidth={70}/>
</View>
<View style={rowStyle}>
<Text style={textStyle}> { translate('rightHandCompetency') } </Text>
<ProgressBar progress={80} maxValue={100} barWidth={70}/>
</View>
<View style={rowStyle}>
<Text style={textStyle}> { translate('leftHandCompetency') } </Text>
<ProgressBar progress={30} maxValue={100} barWidth={70}/>
</View>
<View style={rowStyle}>
<Text style={textStyle}> { translate('accuracyCompetency') } </Text>
<ProgressBar progress={30} maxValue={100} barWidth={70}/>
</View>
<View style={rowStyle}>
<Text style={textStyle}> { translate('arpegeCompetency') } </Text>
<ProgressBar progress={70} maxValue={100} barWidth={70}/>
</View>
<View style={rowStyle}>
<Text style={textStyle}> { translate('chordsCompetency') } </Text>
<ProgressBar progress={80} maxValue={100} barWidth={70}/>
</View>
</Card.Content>
</Card>
);
}
export default Competencies;
front/views/HomeView/HomeView.tsx
+27 -57
View File
@@ -1,63 +1,33 @@
import { useNavigation } from "@react-navigation/native";
import React from "react";
import { View } from 'react-native';
import { useSelector } from "react-redux";
import { AvailableLanguages, translate } from "../../i18n/i18n";
import ProgressBar from "../../components/progressBar";
import { Button, Text } from "react-native-paper";
import Row from "../../components/row";
import Competencies from "./Competencies";
import LastSearched from "./SearchHistory";
import Suggestions from "./Suggestions";
import RecentlyPlayed from "./PlayHistory";
import SettingsButton from "./Settings";
const SearchButton = () => {
const language: AvailableLanguages = useSelector((state) => state.language.value);
const navigation = useNavigation();
return (
<Button>{ translate('searchBtn') }</Button>
);
}
/* OBJECTIF
* [message progress bouton]
* [morceaux recommandés recherche]
* [stats dernierement joués historique]
*/
const messageStyle = {
width: '25%',
padding: 20,
fontSize: 40,
fontWeight: 'bold',
}
import { View } from "react-native";
import { ProgressBar, Text } from "react-native-paper";
import { useQuery } from "react-query";
import API from "../../API";
import LoadingComponent from "../../components/loading";
const HomeView = () => {
const language: AvailableLanguages = useSelector((state) => state.language.value);
const Username = "Username";
return (
<View style={{flexDirection: 'column'}}>
<View style={{ flexDirection: 'row'}}>
<Text style={messageStyle}> { translate('welcomeMessage') }{Username} !</Text>
<View style={{ flexDirection: 'row', alignItems: 'flex-end'}}>
<ProgressBar progress={69} maxValue={300} barWidth={55} title="Level 3"/>
<SettingsButton/>
</View>
</View>
<View style={{ flexDirection: 'row'}}>
<Suggestions/>
<SearchButton/>
</View>
<View style={{ flexDirection: 'row'}}>
<Competencies/>
<RecentlyPlayed/>
<LastSearched/>
</View>
</View>
);
const userQuery = useQuery(['user'], () => API.getUserInfo());
if (!userQuery.data) {
return <View style={{ flexGrow: 1, justifyContent: 'center' }}>
<LoadingComponent/>
</View>
}
return <View style={{ padding: 20, flex: 1 }}>
<Text>Bievenue { userQuery.data.name }!</Text>
<View style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', overflow: 'hidden', alignItems: 'flex-start'}}>
<View style={{ backgroundColor: 'red', width: '60%' }}>
<Text>This is the left section</Text>
</View>
<View style={{ backgroundColor: 'blue' }}>
<View style={{ }}>
<Text style={{ textAlign: 'center'}}>Niveau {userQuery.data.xp / 1000}</Text>
<ProgressBar progress={(userQuery.data.xp) / (((userQuery.data.xp / 1000) + 1) * 1000)} />
<Text style={{ textAlign: 'center'}}>{userQuery.data.xp} / {(Math.floor(userQuery.data.xp / 1000) + 1) * 1000} Bonnes notes</Text>
</View>
</View>
</View>
</View>
}
export default HomeView;
front/views/HomeView/PlayHistory.tsx
-29
View File
@@ -1,29 +0,0 @@
import React from "react";
import Col from "../../components/col";
import Row from "../../components/row";
import SongCard from "../../components/songCard";
const RecentlyPlayed = () => {
return (
<Col>
<Row>
<SongCard albumCover="https://e-cdn-images.dzcdn.net/images/artist/61bcbf8296b1669499064406c534d39d/264x264-000000-80-0-0.jpg"
songTitle="Stay foolish"
artistName="ZUTOMAYO"/>
<SongCard albumCover="https://e-cdn-images.dzcdn.net/images/artist/61bcbf8296b1669499064406c534d39d/264x264-000000-80-0-0.jpg"
songTitle="Mirror tune"
artistName="ZUTOMAYO"/>
</Row>
<Row>
<SongCard albumCover="https://e-cdn-images.dzcdn.net/images/artist/61bcbf8296b1669499064406c534d39d/264x264-000000-80-0-0.jpg"
songTitle="Neko reset"
artistName="ZUTOMAYO"/>
<SongCard albumCover="https://e-cdn-images.dzcdn.net/images/artist/61bcbf8296b1669499064406c534d39d/264x264-000000-80-0-0.jpg"
songTitle="Milabo"
artistName="ZUTOMAYO"/>
</Row>
</Col>
);
}
export default RecentlyPlayed;
front/views/HomeView/SearchHistory.tsx
-29
View File
@@ -1,29 +0,0 @@
import React from "react";
import Col from "../../components/col";
import Row from "../../components/row";
import SongCard from "../../components/songCard";
const LastSearched = () => {
return (
<Col>
<Row>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Dramaturgy"
artistName="Eve MV"/>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Shinkai"
artistName="Eve MV"/>
</Row>
<Row>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Don't replay the boredom"
artistName="Eve MV"/>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Heart forecast"
artistName="Eve MV"/>
</Row>
</Col>
);
}
export default LastSearched;
front/views/HomeView/Settings.tsx
-38
View File
@@ -1,38 +0,0 @@
import React from "react";
import { Button, Text } from "react-native-paper";
import { useDispatch, useSelector } from "react-redux";
import { AvailableLanguages, translate, DefaultLanguage } from "../../i18n/i18n";
import { useLanguage } from "../../state/LanguageSlice";
import { unsetUserToken } from "../../state/UserSlice";
import { useNavigation } from "@react-navigation/native";
const SettingsButton = () => {
const dispatch = useDispatch();
const navigation = useNavigation();
const language: AvailableLanguages = useSelector((state) => state.language.value);
return (
<div>
<Button onPress={() => dispatch(unsetUserToken())}>
{ translate('signoutBtn') }
</Button>
<Button onPress={() => {
let newLanguage = DefaultLanguage;
switch (language) {
case 'en':
newLanguage = 'fr';
break;
default:
break;
}
dispatch(useLanguage(newLanguage));
}}>
{ translate('changeLanguageBtn') }
</Button>
<Text style={{ textAlign: "center" }}>Current language: { language }</Text>
<Button onPress={() => navigation.navigate('Song', { songId: 1 }) }> { translate('songPageBtn') }</Button>
</div>
)
}
export default SettingsButton;
front/views/HomeView/Suggestions.tsx
-24
View File
@@ -1,24 +0,0 @@
import React from "react";
import SongCard from "../../components/songCard";
import Row from "../../components/row";
const Suggestions = () => {
return (
<Row>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Dramaturgy"
artistName="Eve MV"/>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Shinkai"
artistName="Eve MV"/>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Don't replay the boredom"
artistName="Eve MV"/>
<SongCard albumCover="https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg"
songTitle="Heart forecast"
artistName="Eve MV"/>
</Row>
);
}
export default Suggestions;