From d2dd3b52de557358e32adc6635d2bac955659e31 Mon Sep 17 00:00:00 2001 From: Arthi-chaud Date: Tue, 4 Oct 2022 09:13:46 +0100 Subject: [PATCH] Front: Home View: Atomic Layout --- front/API.ts | 2 +- front/components/col.tsx | 20 ------ front/components/progressBar.tsx | 83 ------------------------- front/components/row.tsx | 20 ------ front/components/songCard.tsx | 50 --------------- front/views/HomeView/Competencies.tsx | 59 ------------------ front/views/HomeView/HomeView.tsx | 84 +++++++++----------------- front/views/HomeView/PlayHistory.tsx | 29 --------- front/views/HomeView/SearchHistory.tsx | 29 --------- front/views/HomeView/Settings.tsx | 38 ------------ front/views/HomeView/Suggestions.tsx | 24 -------- 11 files changed, 28 insertions(+), 410 deletions(-) delete mode 100644 front/components/col.tsx delete mode 100644 front/components/progressBar.tsx delete mode 100644 front/components/row.tsx delete mode 100644 front/components/songCard.tsx delete mode 100644 front/views/HomeView/Competencies.tsx delete mode 100644 front/views/HomeView/PlayHistory.tsx delete mode 100644 front/views/HomeView/SearchHistory.tsx delete mode 100644 front/views/HomeView/Settings.tsx delete mode 100644 front/views/HomeView/Suggestions.tsx diff --git a/front/API.ts b/front/API.ts index 1e3a92f..90b6b11 100644 --- a/front/API.ts +++ b/front/API.ts @@ -19,7 +19,7 @@ export default class API { return { name: "User", email: "user@chromacase.com", - xp: 0, + xp: 2345, premium: false, metrics: {}, settings: {}, diff --git a/front/components/col.tsx b/front/components/col.tsx deleted file mode 100644 index 478c295..0000000 --- a/front/components/col.tsx +++ /dev/null @@ -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 ( - - {this.props.children} - - ); - } -} - -const styles = StyleSheet.create({ - container: { - marginLeft: 5, - marginRight: 5, - } -}); \ No newline at end of file diff --git a/front/components/progressBar.tsx b/front/components/progressBar.tsx deleted file mode 100644 index 79fdc17..0000000 --- a/front/components/progressBar.tsx +++ /dev/null @@ -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 ( -
-
- {title} -
-
-
- - {`${computePercent(progress, maxValue)}%`} - -
-
-

ceci est un sous titre yay

-
- ); - } - - return ( -
-
-
- - {`${computePercent(progress, maxValue)}%`} - -
-
-
- ); -} - -export default ProgressBar; \ No newline at end of file diff --git a/front/components/row.tsx b/front/components/row.tsx deleted file mode 100644 index 4e76002..0000000 --- a/front/components/row.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React, {Component} from 'react'; -import {StyleSheet, View} from 'react-native'; - -export default class Row extends Component{ - render() { - return ( - - {this.props.children} - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - marginTop: 10, - marginBottom: 10, - } -}); \ No newline at end of file diff --git a/front/components/songCard.tsx b/front/components/songCard.tsx deleted file mode 100644 index b332c62..0000000 --- a/front/components/songCard.tsx +++ /dev/null @@ -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 ( - - - - - {songTitle} - - - {artistName} - - - - ); -} - -export default SongCard; \ No newline at end of file diff --git a/front/views/HomeView/Competencies.tsx b/front/views/HomeView/Competencies.tsx deleted file mode 100644 index 813a8c4..0000000 --- a/front/views/HomeView/Competencies.tsx +++ /dev/null @@ -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 ( - - - - { translate('pedalsCompetency') } - - - - { translate('rightHandCompetency') } - - - - { translate('leftHandCompetency') } - - - - { translate('accuracyCompetency') } - - - - { translate('arpegeCompetency') } - - - - { translate('chordsCompetency') } - - - - - ); -} - -export default Competencies; \ No newline at end of file diff --git a/front/views/HomeView/HomeView.tsx b/front/views/HomeView/HomeView.tsx index 0fe1d50..092e420 100644 --- a/front/views/HomeView/HomeView.tsx +++ b/front/views/HomeView/HomeView.tsx @@ -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 ( - - ); -} - -/* 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 ( - - - { translate('welcomeMessage') }{Username} ! - - - - - - - - - - - - - - - - ); + const userQuery = useQuery(['user'], () => API.getUserInfo()); + if (!userQuery.data) { + return + + + } + return + Bievenue { userQuery.data.name }! + + + + This is the left section + + + + Niveau {userQuery.data.xp / 1000} + + {userQuery.data.xp} / {(Math.floor(userQuery.data.xp / 1000) + 1) * 1000} Bonnes notes + + + + } export default HomeView; diff --git a/front/views/HomeView/PlayHistory.tsx b/front/views/HomeView/PlayHistory.tsx deleted file mode 100644 index cd76e1f..0000000 --- a/front/views/HomeView/PlayHistory.tsx +++ /dev/null @@ -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 ( - - - - - - - - - - - ); -} - -export default RecentlyPlayed; \ No newline at end of file diff --git a/front/views/HomeView/SearchHistory.tsx b/front/views/HomeView/SearchHistory.tsx deleted file mode 100644 index ecf7cb9..0000000 --- a/front/views/HomeView/SearchHistory.tsx +++ /dev/null @@ -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 ( - - - - - - - - - - - ); -} - -export default LastSearched; \ No newline at end of file diff --git a/front/views/HomeView/Settings.tsx b/front/views/HomeView/Settings.tsx deleted file mode 100644 index 038a7db..0000000 --- a/front/views/HomeView/Settings.tsx +++ /dev/null @@ -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 ( -
- - - Current language: { language } - -
- ) -} - -export default SettingsButton; \ No newline at end of file diff --git a/front/views/HomeView/Suggestions.tsx b/front/views/HomeView/Suggestions.tsx deleted file mode 100644 index a403e0f..0000000 --- a/front/views/HomeView/Suggestions.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react"; -import SongCard from "../../components/songCard"; -import Row from "../../components/row"; - -const Suggestions = () => { - return ( - - - - - - - ); -} - -export default Suggestions; \ No newline at end of file