From b41c583c9a57ce5f995e7b6cbed63aae62a48233 Mon Sep 17 00:00:00 2001 From: emkartal1 Date: Thu, 30 Mar 2023 14:43:28 +0200 Subject: [PATCH 1/4] Create component for messaging :hammer: --- src/FLAD/components/User.tsx | 45 ++++++++++++++++++++++++++++++++++ src/FLAD/screens/Messaging.tsx | 3 +++ 2 files changed, 48 insertions(+) create mode 100644 src/FLAD/components/User.tsx create mode 100644 src/FLAD/screens/Messaging.tsx diff --git a/src/FLAD/components/User.tsx b/src/FLAD/components/User.tsx new file mode 100644 index 0000000..2a5faa6 --- /dev/null +++ b/src/FLAD/components/User.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { StyleSheet, Text, View, Image } from 'react-native'; +import { useSelector } from 'react-redux'; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; +import normalize from './Normalize'; + +type UserProps = { + image: string; + name: string; + lastMessage: string; +} + + +export default function User() { + const isDark = useSelector(state => state.userReducer.dark); + + const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; + + const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: 9, + }, + image: { + marginLeft: 15, + marginRight: 7, + width: 50, + height: 50 + }, + name: { + fontWeight: 'bold', + color: style.Text, + fontSize: normalize(22) + } + }) + + return ( + + + Emre KARTAL + + ) +} diff --git a/src/FLAD/screens/Messaging.tsx b/src/FLAD/screens/Messaging.tsx new file mode 100644 index 0000000..566b5dd --- /dev/null +++ b/src/FLAD/screens/Messaging.tsx @@ -0,0 +1,3 @@ +export default function Messaging() { + +} \ No newline at end of file -- 2.36.3 From 18081614a919bab6269b5000ba710dcd46d7931f Mon Sep 17 00:00:00 2001 From: Emre Date: Thu, 30 Mar 2023 18:23:45 +0200 Subject: [PATCH 2/4] Removal of all warnings in the application :warning: :recycle: --- src/FLAD/App.tsx | 10 --- src/FLAD/Model/Artist.tsx | 9 ++- src/FLAD/components/{User.tsx => Friend.tsx} | 3 +- src/FLAD/components/Genre.tsx | 18 ++--- .../{screens => components}/Messaging.tsx | 0 src/FLAD/components/Onboarding.tsx | 18 +++-- src/FLAD/components/Paginator.tsx | 1 + src/FLAD/navigation/AuthNavigation.tsx | 9 ++- src/FLAD/navigation/MessagingNavigation.tsx | 17 +++++ src/FLAD/navigation/Navigation.tsx | 6 +- src/FLAD/navigation/SpotNavigation.tsx | 4 +- src/FLAD/redux/actions/appActions.ts | 8 +-- src/FLAD/redux/actions/spotActions.tsx | 4 +- src/FLAD/redux/actions/userActions.tsx | 8 +-- src/FLAD/redux/reducers/appReducer.tsx | 8 ++- src/FLAD/redux/reducers/userReducer.tsx | 12 ++-- src/FLAD/screens/Conversation.tsx | 26 +++++++ src/FLAD/screens/Favorite.tsx | 69 ++++++++++--------- src/FLAD/screens/MusicDetail.tsx | 4 +- src/FLAD/screens/Register.tsx | 1 + src/FLAD/screens/Setting.tsx | 12 +++- src/FLAD/screens/SettingProfil.tsx | 6 +- src/FLAD/screens/spot.tsx | 1 + 23 files changed, 160 insertions(+), 94 deletions(-) rename src/FLAD/components/{User.tsx => Friend.tsx} (95%) rename src/FLAD/{screens => components}/Messaging.tsx (100%) create mode 100644 src/FLAD/navigation/MessagingNavigation.tsx create mode 100644 src/FLAD/screens/Conversation.tsx diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index 132d682..84a6c29 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -1,9 +1,7 @@ -import { StyleSheet } from 'react-native'; import { Provider } from 'react-redux'; import store from './redux/store'; import AuthNavigation from './navigation/AuthNavigation'; import * as SplashScreen from 'expo-splash-screen'; -import SpotifyService from './services/spotify/spotify.service'; SplashScreen.preventAutoHideAsync(); @@ -15,11 +13,3 @@ export default function App() { ); } - -const styles = StyleSheet.create({ - mainSafeArea: { - flex: 1, - backgroundColor: "#141414", - } -}); -export const theService = new SpotifyService('BQC0rAGJvxTt4-24P-nda6qP9iXYCql2eApnUAoEbZZkKemJ11cU3Nx-I_tKVX0FwEgFbIbSIuaVvxOapRVJq2z1Htyy3XQ5jIYNsrhrnp3KTCfppamAjxgDTf6khBrNGTxe6CNKBsMhc5IRnphey5Td2zJPvGMwnFFfMQdCtVAVsCNK7kPKlCAaf_kRMAoPn30Qk4RD45XmwtZIwQg7X0J4beGuHSiBf0MRjhsnFEW89GxVm8YuIVwgrDbF3izfPR0AlqS4IMJT5m4pEA72lYEwp1JnSDVsafILzmksaqG-11H3WAsWIENrOIu_j7qNgbvYwmUWXOrYmeWBkQ'); diff --git a/src/FLAD/Model/Artist.tsx b/src/FLAD/Model/Artist.tsx index 35c3a3e..dac88f0 100644 --- a/src/FLAD/Model/Artist.tsx +++ b/src/FLAD/Model/Artist.tsx @@ -1,12 +1,17 @@ export default class Artist { private id: string; private name: string; - private url: string; // Image.source + private _url: string; // Image.source constructor(id: string, name: string, url: string) { this.id = id; this.name = name; - this.url = url; + this._url = url; } + get url(): string { + return this.url; + } + + } \ No newline at end of file diff --git a/src/FLAD/components/User.tsx b/src/FLAD/components/Friend.tsx similarity index 95% rename from src/FLAD/components/User.tsx rename to src/FLAD/components/Friend.tsx index 2a5faa6..15b91e1 100644 --- a/src/FLAD/components/User.tsx +++ b/src/FLAD/components/Friend.tsx @@ -12,7 +12,8 @@ type UserProps = { } -export default function User() { +export default function Friend() { + // @ts-ignore const isDark = useSelector(state => state.userReducer.dark); const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; diff --git a/src/FLAD/components/Genre.tsx b/src/FLAD/components/Genre.tsx index f87efac..6bf423a 100644 --- a/src/FLAD/components/Genre.tsx +++ b/src/FLAD/components/Genre.tsx @@ -5,14 +5,14 @@ import { Artist } from "./Artist"; export const ArtistLayout = () => { const MUSIC_LIST: Music[] = [ - new Music("La pharmacie", "Jul", require("../assets/images/jul.png")), - new Music("Deux frères", "PNL", require("../assets/images/pnl.png")), - new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"), - new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"), - new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"), - new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"), - new Music("Blanka", "PNL", require("../assets/images/pnl.png")), - new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"), + new Music("La pharmacie", "Jul", require("../assets/images/jul.png"),"",""), + new Music("Deux frères", "PNL", require("../assets/images/pnl.png"),"",""), + new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""), + new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png","",""), + new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg","",""), + new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png","",""), + new Music("Blanka", "PNL", require("../assets/images/pnl.png"),"",""), + new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""), ] const [artists, setArtists] = useState(MUSIC_LIST); @@ -23,7 +23,7 @@ export const ArtistLayout = () => { artist={artist} key={artist.title} onPress={() => { - const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"); + const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""); artists.push(tmppArtist); setArtists([...artists]); diff --git a/src/FLAD/screens/Messaging.tsx b/src/FLAD/components/Messaging.tsx similarity index 100% rename from src/FLAD/screens/Messaging.tsx rename to src/FLAD/components/Messaging.tsx diff --git a/src/FLAD/components/Onboarding.tsx b/src/FLAD/components/Onboarding.tsx index 4ecdf07..71225a5 100644 --- a/src/FLAD/components/Onboarding.tsx +++ b/src/FLAD/components/Onboarding.tsx @@ -66,7 +66,6 @@ export default function Onboarding() { right: 10 }, modalContent: { - flex: 1, justifyContent: 'center', alignItems: 'center', @@ -77,8 +76,7 @@ export default function Onboarding() { alignItems: 'center' }, backgroundImage: { - flex: 1, - width: '100%', + width: '103%', height: '100%', }, imageButton: { @@ -164,7 +162,7 @@ export default function Onboarding() { - + @@ -186,11 +184,19 @@ export default function Onboarding() { }}> CONTINUER AVEC SPOTIFY - { handleModal(); navigation.navigate('Register'); }}> + { handleModal(); navigation.navigate('Register'); }} + > S’INSCRIRE MAINTENANT - { handleModal(); navigation.navigate('Login'); }}> + { handleModal(); navigation.navigate('Login'); }} + > SE CONNECTER diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx index 8252a6e..c622b68 100644 --- a/src/FLAD/components/Paginator.tsx +++ b/src/FLAD/components/Paginator.tsx @@ -3,6 +3,7 @@ import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native'; import normalize from '../components/Normalize'; +// @ts-ignore export default function Paginator({ data, scrollX }) { const { width } = useWindowDimensions(); diff --git a/src/FLAD/navigation/AuthNavigation.tsx b/src/FLAD/navigation/AuthNavigation.tsx index d9b5b4d..0e2c840 100644 --- a/src/FLAD/navigation/AuthNavigation.tsx +++ b/src/FLAD/navigation/AuthNavigation.tsx @@ -1,5 +1,5 @@ import Navigation from './Navigation'; -import { AsyncStorage } from 'react-native'; +import AsyncStorage from '@react-native-async-storage/async-storage'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import StartNavigation from './StartNavigation'; import { useDispatch, useSelector } from 'react-redux'; @@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'; import * as SplashScreen from 'expo-splash-screen'; import { ChangeMode, getRefreshToken } from '../redux/thunk/authThunk'; import * as Location from 'expo-location'; -import { theService } from '../App'; +import SpotifyService from '../services/spotify/spotify.service'; import { getCurrentUserMusic } from '../redux/thunk/spotThunk'; import Music from '../Model/Music'; @@ -94,8 +94,11 @@ export default function AuthNavigation() { {isLogin ? ( ) : - + } ) } + +const theService = new SpotifyService('BQC0rAGJvxTt4-24P-nda6qP9iXYCql2eApnUAoEbZZkKemJ11cU3Nx-I_tKVX0FwEgFbIbSIuaVvxOapRVJq2z1Htyy3XQ5jIYNsrhrnp3KTCfppamAjxgDTf6khBrNGTxe6CNKBsMhc5IRnphey5Td2zJPvGMwnFFfMQdCtVAVsCNK7kPKlCAaf_kRMAoPn30Qk4RD45XmwtZIwQg7X0J4beGuHSiBf0MRjhsnFEW89GxVm8YuIVwgrDbF3izfPR0AlqS4IMJT5m4pEA72lYEwp1JnSDVsafILzmksaqG-11H3WAsWIENrOIu_j7qNgbvYwmUWXOrYmeWBkQ'); + diff --git a/src/FLAD/navigation/MessagingNavigation.tsx b/src/FLAD/navigation/MessagingNavigation.tsx new file mode 100644 index 0000000..e8b15f9 --- /dev/null +++ b/src/FLAD/navigation/MessagingNavigation.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { createStackNavigator } from '@react-navigation/stack'; +import Conversation from '../screens/Conversation' + +export default function SpotNavigation() { + const Stack = createStackNavigator(); + + return ( + + + + + ) +} \ No newline at end of file diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index ebe334f..f5cc659 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -9,7 +9,7 @@ import normalize from '../components/Normalize'; // @ts-ignore import FontAwesome from 'react-native-vector-icons/FontAwesome'; import SpotNavigation from './SpotNavigation'; -import Login from '../screens/login'; +import MessagingNavigation from './MessagingNavigation'; import { useDispatch, useSelector } from 'react-redux'; import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; @@ -66,12 +66,12 @@ export default function Navigation() { headerShown: false, tabBarIcon: ({ color }) => , }} /> - , }} /> - , diff --git a/src/FLAD/navigation/SpotNavigation.tsx b/src/FLAD/navigation/SpotNavigation.tsx index 6a62c06..4b46b08 100644 --- a/src/FLAD/navigation/SpotNavigation.tsx +++ b/src/FLAD/navigation/SpotNavigation.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; -import SpotPage from '../screens/spot' +import SpotPage from '../screens/Spot' import MusicDetail from '../screens/MusicDetail'; @@ -16,7 +16,7 @@ export default function SpotNavigation() { }} > { +export const getFavoritesMusic = (music: Music[]) => { return { type: favoritesTypes.GET_FAVORITE_MUSICS, - playload: favoritesMusic, + payload: music, }; } -export const addFavoritesMusic = (favoritesMusic: Music) => { +export const addFavoritesMusic = (music: Music) => { return { type: favoritesTypes.ADD_FAVORITE_MUSICS, - playload: favoritesMusic, + payload: music, }; } diff --git a/src/FLAD/redux/actions/spotActions.tsx b/src/FLAD/redux/actions/spotActions.tsx index 2785034..2bbdf45 100644 --- a/src/FLAD/redux/actions/spotActions.tsx +++ b/src/FLAD/redux/actions/spotActions.tsx @@ -6,13 +6,13 @@ import { spotTypes } from "../types/spotTypes"; export const setSpotList = (spotList: Spot[]) => { return { type: spotTypes.FETCH_SPOT, - playload: spotList, + payload: spotList, }; } export const setUserCurrentMusic = (currentMusic: Music) => { return { type: spotifyTypes.GET_USER_CURRENT_MUSIC, - playload: currentMusic, + payload: currentMusic, }; } \ No newline at end of file diff --git a/src/FLAD/redux/actions/userActions.tsx b/src/FLAD/redux/actions/userActions.tsx index b5ea11e..605e8be 100644 --- a/src/FLAD/redux/actions/userActions.tsx +++ b/src/FLAD/redux/actions/userActions.tsx @@ -17,20 +17,20 @@ export const setLoginState = (userJson: any) => { const user = new User(userJson.data.idFlad, userJson.data.idSpotify, userJson.data.email, new Date(), userJson.data.name, require('../../assets/images/jul.png')); return { type: userTypes.LOGIN, - playload: user + payload: user }; } export const restoreToken = (token: string) => { return { type: userTypes.RESTORE_TOKEN, - playload: token + payload: token }; } export const userSignUp = (user: User) => { return { type: userTypes.LOGIN, - playload: user + payload: user }; } @@ -43,7 +43,7 @@ export const UserLogout = () => { export const userChangeMode = (value: boolean) => { return { type: userTypes.CHANGE_MODE, - playload: value + payload: value }; } diff --git a/src/FLAD/redux/reducers/appReducer.tsx b/src/FLAD/redux/reducers/appReducer.tsx index bf53a69..41faf1c 100644 --- a/src/FLAD/redux/reducers/appReducer.tsx +++ b/src/FLAD/redux/reducers/appReducer.tsx @@ -4,11 +4,13 @@ import { discoveriesTypes } from "../types/discoverieTypes"; import { favoritesTypes } from "../types/favoritesTypes"; import { spotifyTypes } from "../types/spotifyTypes"; import { spotTypes } from "../types/spotTypes"; + let tmpMusic: Music[] = [ new Music("03o8WSqd2K5rkGvn9IsLy2", "Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg", "https://p.scdn.co/mp3-preview/c55f95de81b8c3d0df04148da1b03bd38db56e8f?cid=774b29d4f13844c495f206cafdad9c86"), new Music("6DPrYPPGYK218iVIZDix3i", "Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png", "https://p.scdn.co/mp3-preview/a9f9cb19ac1fe6db0d06b67decf8edbb25895a33?cid=774b29d4f13844c495f206cafdad9c86"), new Music("5GFHFEASZeJF0gyWuDDjGE", "Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png", "https://p.scdn.co/mp3-preview/9e854f4905c1228482e390169eb76d8520076b8f?cid=774b29d4f13844c495f206cafdad9c86"), ]; + const initialState = { spot: [] as Spot[], favoriteMusic: tmpMusic, @@ -18,9 +20,9 @@ const initialState = { const appReducer = (state = initialState, action: any) => { switch (action.type) { case favoritesTypes.GET_FAVORITE_MUSICS: - return { ...state, favoriteMusic: action.playload }; + return { ...state, favoriteMusic: action.payload }; case favoritesTypes.ADD_FAVORITE_MUSICS: - return { ...state, favoriteMusic: [action.playload, ...state.favoriteMusic] }; + return { ...state, favoriteMusic: [action.payload, ...state.favoriteMusic] }; case favoritesTypes.REMOVE_FAVORITE_MUSICS: return { ...state, favoriteMusic: state.favoriteMusic }; case spotTypes.FETCH_SPOT: @@ -28,7 +30,7 @@ const appReducer = (state = initialState, action: any) => { case discoveriesTypes.FETCH_DISCOVERIES: return; case spotifyTypes.GET_USER_CURRENT_MUSIC: - return { ...state, userCurrentMusic: action.playload }; + return { ...state, userCurrentMusic: action.payload }; default: return state; } diff --git a/src/FLAD/redux/reducers/userReducer.tsx b/src/FLAD/redux/reducers/userReducer.tsx index 0ee619e..f177d98 100644 --- a/src/FLAD/redux/reducers/userReducer.tsx +++ b/src/FLAD/redux/reducers/userReducer.tsx @@ -17,10 +17,10 @@ const initialState = { const userReducer = (state = initialState, action: any) => { switch (action.type) { case userTypes.RESTORE_TOKEN: - const resp = (action.playload == "" ? false : true) + const resp = (action.payload == "" ? false : true) return { ...state, - userFladToken: action.playload, + userFladToken: action.payload, loading: true, isLogedIn: resp, }; @@ -28,7 +28,7 @@ const userReducer = (state = initialState, action: any) => { AsyncStorage.setItem('dark', JSON.stringify(false)).then(() => { }); return { ...state, - user: action.playload, + user: action.payload, failedLogin: false, isLogedIn: true, dark: false @@ -37,7 +37,7 @@ const userReducer = (state = initialState, action: any) => { AsyncStorage.setItem('dark', JSON.stringify(false)).then(() => { }); return { ...state, - user: action.playload, + user: action.payload, failedSignup: false, isLogedIn: true, dark: false @@ -52,14 +52,14 @@ const userReducer = (state = initialState, action: any) => { case userTypes.SAVE_SPOTIFY: return { ...state, - userSpotifyToken: action.playload, + userSpotifyToken: action.payload, }; case userTypes.CHANGE_ERROR_LOGIN: return { ...state, failedLogin: true } case userTypes.CHANGE_ERROR_SIGNUP: return { ...state, failedSignup: true } case userTypes.CHANGE_MODE: - return { ...state, dark: action.playload } + return { ...state, dark: action.payload } default: return state; } diff --git a/src/FLAD/screens/Conversation.tsx b/src/FLAD/screens/Conversation.tsx new file mode 100644 index 0000000..245a95e --- /dev/null +++ b/src/FLAD/screens/Conversation.tsx @@ -0,0 +1,26 @@ +import { SafeAreaView, StyleSheet } from "react-native"; +import { useSelector } from "react-redux"; +import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; +import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; + +export default function ConversationList() { + + // @ts-ignore + const isDark = useSelector(state => state.userReducer.dark); + + const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; + + const styles = StyleSheet.create({ + mainSafeArea: { + flex: 1, + backgroundColor: style.body, + } + ) + + return ( + + + + + ) +} \ No newline at end of file diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx index 77f92eb..1c24b7a 100644 --- a/src/FLAD/screens/Favorite.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -11,7 +11,8 @@ import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; export default function FavoritePage() { - //Dark Mode + + // @ts-ignore const isDark = useSelector(state => state.userReducer.dark); const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; @@ -25,6 +26,7 @@ export default function FavoritePage() { { id: 4, source: require('../assets/images/FLADYCry.png') }, ]; const navigueToDetail = (music: any) => { + // @ts-ignore navigation.navigate("MusicDetail", { "music": music }) }; const styles = StyleSheet.create({ @@ -79,38 +81,39 @@ export default function FavoritePage() { Favoris Retrouvez ici vos musiques favorites - - - ( - { navigueToDetail(item) }}> - - - - - - )} - keyExtractor={(item: Music) => item.title} - /> - - What's your mood? - item.id.toString()} - horizontal - showsHorizontalScrollIndicator={false} - renderItem={({ item }) => ( - - )} - /> - navigation.navigate('Genre')}> - - - + ( + { navigueToDetail(item) }}> + + + + + )} + keyExtractor={(item: Music) => item.title} + ListFooterComponent={ + <> + What's your mood? + item.id.toString()} + horizontal + showsHorizontalScrollIndicator={false} + renderItem={({ item }) => ( + + )} + /> + navigation.navigate('Genre')}> + + + + } + nestedScrollEnabled={true} + /> ); }; \ No newline at end of file diff --git a/src/FLAD/screens/MusicDetail.tsx b/src/FLAD/screens/MusicDetail.tsx index cd43325..22ceac4 100644 --- a/src/FLAD/screens/MusicDetail.tsx +++ b/src/FLAD/screens/MusicDetail.tsx @@ -180,7 +180,9 @@ const MusicDetail = ({ route }) => { {simularMusic.length !== 0 && ( {(props) => ( - { navigator.navigate("MusicDetail", { "music": props }) }} > + { navigator.navigate("MusicDetail", { "music": props }) }} > )} diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx index 7909966..ef087f5 100644 --- a/src/FLAD/screens/Register.tsx +++ b/src/FLAD/screens/Register.tsx @@ -36,6 +36,7 @@ export default function InscriptionPage() { const [sound, setSound] = useState(); const navigation = useNavigation(); const [spotifyToken, setSpotifyToken] = useState(''); + // @ts-ignore const failedSignup = useSelector(state => state.userReducer.failedSignup); async function playSound() { diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx index 601a041..1c152ad 100644 --- a/src/FLAD/screens/Setting.tsx +++ b/src/FLAD/screens/Setting.tsx @@ -27,9 +27,10 @@ export default function Setting() { textInputRef.current?.focus(); }; + // @ts-ignore const currentMusic = useSelector(state => state.appReducer.userCurrentMusic); - //Dark Mode + // @ts-ignore const isDark = useSelector(state => state.userReducer.dark); const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; @@ -40,6 +41,7 @@ export default function Setting() { if (currentValue !== null) { const newValue = JSON.stringify(!JSON.parse(currentValue)); await AsyncStorage.setItem('dark', newValue); + // @ts-ignore dispatch(ChangeMode(JSON.parse(newValue))) } } catch (error) { @@ -263,7 +265,11 @@ export default function Setting() { - navigation.navigate('SettingProfil')}> + + navigation.navigate('SettingProfil')} + > @@ -326,7 +332,7 @@ export default function Setting() { - + diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx index 927ebbe..81d75e8 100644 --- a/src/FLAD/screens/SettingProfil.tsx +++ b/src/FLAD/screens/SettingProfil.tsx @@ -31,7 +31,7 @@ export default function SettingProfil() { useEffect(() => { console.log(UserCurrent.image); - }); + }); const handleModal = () => setIsModalVisible(() => !isModalVisible); @@ -262,7 +262,9 @@ export default function SettingProfil() { - navigation.navigate('Setting')}> + navigation.navigate('Setting')}> Exit diff --git a/src/FLAD/screens/spot.tsx b/src/FLAD/screens/spot.tsx index 3a08562..c2cc953 100644 --- a/src/FLAD/screens/spot.tsx +++ b/src/FLAD/screens/spot.tsx @@ -57,6 +57,7 @@ export default function SpotPage() { const { width: wWidht } = Dimensions.get("window"); const hapti = (card: Spot) => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy) + // @ts-ignore navigator.navigate("DetailsSpot", { "music": card.music }) }; return ( -- 2.36.3 From d4ba042bbcc3fec30f4992ec2916723347bb2acd Mon Sep 17 00:00:00 2001 From: Emre Date: Thu, 30 Mar 2023 19:47:35 +0200 Subject: [PATCH 3/4] Realized view conversation page :white_check_mark: --- src/FLAD/components/Friend.tsx | 58 +++++++++++++++++---- src/FLAD/navigation/AuthNavigation.tsx | 3 +- src/FLAD/navigation/MessagingNavigation.tsx | 4 +- src/FLAD/redux/thunk/authThunk.tsx | 1 + src/FLAD/screens/Conversation.tsx | 46 ++++++++++++++-- src/FLAD/screens/Favorite.tsx | 2 +- 6 files changed, 96 insertions(+), 18 deletions(-) diff --git a/src/FLAD/components/Friend.tsx b/src/FLAD/components/Friend.tsx index 15b91e1..80e1d65 100644 --- a/src/FLAD/components/Friend.tsx +++ b/src/FLAD/components/Friend.tsx @@ -1,23 +1,25 @@ import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; +import { color } from 'react-native-reanimated'; import { useSelector } from 'react-redux'; import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; import normalize from './Normalize'; -type UserProps = { +type FriendProps = { image: string; name: string; lastMessage: string; } - -export default function Friend() { +export default function Friend(friend: FriendProps) { // @ts-ignore const isDark = useSelector(state => state.userReducer.dark); const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; + const source = typeof friend.image === 'string' ? { uri: friend.image } : friend.image; + const styles = StyleSheet.create({ container: { flexDirection: 'row', @@ -26,21 +28,57 @@ export default function Friend() { }, image: { marginLeft: 15, - marginRight: 7, - width: 50, - height: 50 + marginRight: 12, + width: 55, + height: 55, + borderRadius: 180 }, name: { - fontWeight: 'bold', + fontWeight: "500", color: style.Text, - fontSize: normalize(22) + fontSize: normalize(16) + }, + lastMessageContainer: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + maxWidth: '90%' + }, + lastMessage: { + fontSize: normalize(18), + color: '#989898', + flexShrink: 1 + }, + time: { + fontSize: normalize(18), + color: '#989898' + }, + profilContainer: { + marginTop: 5, + flex: 1, + marginLeft: 5, + alignItems: 'flex-start', + justifyContent: 'center', + }, + button: { + width: normalize(13), + height: normalize(13), + marginRight: 42 } }) return ( - - Emre KARTAL + + + {friend.name} + + {friend.lastMessage} + · 1sem + + + ) } diff --git a/src/FLAD/navigation/AuthNavigation.tsx b/src/FLAD/navigation/AuthNavigation.tsx index 0e2c840..e8c2e32 100644 --- a/src/FLAD/navigation/AuthNavigation.tsx +++ b/src/FLAD/navigation/AuthNavigation.tsx @@ -38,8 +38,9 @@ export default function AuthNavigation() { const currentValue = await AsyncStorage.getItem('dark'); if (currentValue !== null) { const newValue = JSON.stringify(JSON.parse(currentValue)); + //@ts-ignore dispatch(ChangeMode(JSON.parse(newValue))) - } + } } catch (error) { console.log(`Une erreur s'est produite lors de la mise à jour de la valeur booléenne pour la clé 'dark': `, error); } diff --git a/src/FLAD/navigation/MessagingNavigation.tsx b/src/FLAD/navigation/MessagingNavigation.tsx index e8b15f9..b8375a0 100644 --- a/src/FLAD/navigation/MessagingNavigation.tsx +++ b/src/FLAD/navigation/MessagingNavigation.tsx @@ -6,9 +6,9 @@ export default function SpotNavigation() { const Stack = createStackNavigator(); return ( - + diff --git a/src/FLAD/redux/thunk/authThunk.tsx b/src/FLAD/redux/thunk/authThunk.tsx index 13432d8..4780249 100644 --- a/src/FLAD/redux/thunk/authThunk.tsx +++ b/src/FLAD/redux/thunk/authThunk.tsx @@ -124,6 +124,7 @@ export const ChangeMode = (value: boolean) => { export const ChangeImageUserCurrent = (value: ImagePicker) => { //@ts-ignore return async dispatch => { + //@ts-ignore dispatch(userChangeImage(value)); } } \ No newline at end of file diff --git a/src/FLAD/screens/Conversation.tsx b/src/FLAD/screens/Conversation.tsx index 245a95e..fcb5b83 100644 --- a/src/FLAD/screens/Conversation.tsx +++ b/src/FLAD/screens/Conversation.tsx @@ -1,26 +1,64 @@ -import { SafeAreaView, StyleSheet } from "react-native"; +import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native"; import { useSelector } from "react-redux"; import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; import { GraphicalCharterLight } from '../assets/GraphicalCharterLight'; +import Friend from "../components/Friend"; +import normalize from '../components/Normalize'; export default function ConversationList() { // @ts-ignore const isDark = useSelector(state => state.userReducer.dark); + const friends = [ + { id: 1, name: "Lucas", lastMessage: "J'en ai marre de provot", source: require('../assets/images/jul.png') }, + { id: 2, name: "Louison", lastMessage: "Tu vien piscine ?", source: require('../assets/images/jul.png') }, + { id: 3, name: "Dave", lastMessage: "Ok c noté !", source: require('../assets/images/pnl.png') }, + { id: 4, name: "Valentin", lastMessage: "Haha react native c incroyable !!!", source: require('../assets/images/jul.png') }, + ]; + const style = isDark ? GraphicalCharterDark : GraphicalCharterLight; const styles = StyleSheet.create({ mainSafeArea: { flex: 1, backgroundColor: style.body, + }, + titleContainer: { + marginTop: 30, + marginLeft: 20, + }, + title: { + fontSize: normalize(28), + fontWeight: 'bold', + color: style.Text, + }, + description: { + marginTop: 10, + fontSize: normalize(20), + color: '#787878', + marginBottom: 20 } - ) + }) return ( - - + + Messages + Retrouvez ici tous vos amis! + + item.id.toString()} + renderItem={({ item }) => ( + navigation.navigate('Message')}> + + + )} + /> ) } \ No newline at end of file diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx index 1c24b7a..a553cf9 100644 --- a/src/FLAD/screens/Favorite.tsx +++ b/src/FLAD/screens/Favorite.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Image, StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native'; +import { Image, StyleSheet, Text, View, FlatList, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native'; import CardMusic from '../components/CardMusic'; import normalize from '../components/Normalize'; import Music from '../Model/Music' -- 2.36.3 From a64288985795fb26983048459a3ebf808974d4e4 Mon Sep 17 00:00:00 2001 From: Emre Date: Fri, 31 Mar 2023 22:27:53 +0200 Subject: [PATCH 4/4] Chat UI done :white_check_mark: --- src/FLAD/navigation/MessagingNavigation.tsx | 11 +++++++++-- src/FLAD/package.json | 5 +++-- src/FLAD/screens/Chat.tsx | 22 +++++++++++++++++++++ src/FLAD/screens/Conversation.tsx | 5 ++++- 4 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 src/FLAD/screens/Chat.tsx diff --git a/src/FLAD/navigation/MessagingNavigation.tsx b/src/FLAD/navigation/MessagingNavigation.tsx index b8375a0..09ac13d 100644 --- a/src/FLAD/navigation/MessagingNavigation.tsx +++ b/src/FLAD/navigation/MessagingNavigation.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import Conversation from '../screens/Conversation' +import Chat from '../screens/Chat'; -export default function SpotNavigation() { +export default function MessagingNavigation() { const Stack = createStackNavigator(); return ( @@ -11,7 +12,13 @@ export default function SpotNavigation() { name="Conversation" component={Conversation} /> - + ) } \ No newline at end of file diff --git a/src/FLAD/package.json b/src/FLAD/package.json index 390d6c6..f036a5a 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -32,11 +32,13 @@ "expo-secure-store": "~12.0.0", "expo-splash-screen": "~0.17.5", "expo-status-bar": "~1.4.2", + "expo-web-browser": "~12.0.0", "lottie-react-native": "5.1.4", "react": "18.1.0", "react-dom": "18.1.0", "react-native": "0.70.5", "react-native-gesture-handler": "~2.8.0", + "react-native-gifted-chat": "^2.0.1", "react-native-modal": "^13.0.1", "react-native-reanimated": "~2.12.0", "react-native-safe-area-context": "4.4.1", @@ -47,8 +49,7 @@ "react-native-web": "~0.18.9", "react-navigation-shared-element": "^3.1.3", "react-redux": "^8.0.5", - "redux": "^4.2.1", - "expo-web-browser": "~12.0.0" + "redux": "^4.2.1" }, "devDependencies": { "@babel/core": "^7.12.9", diff --git a/src/FLAD/screens/Chat.tsx b/src/FLAD/screens/Chat.tsx new file mode 100644 index 0000000..053a21f --- /dev/null +++ b/src/FLAD/screens/Chat.tsx @@ -0,0 +1,22 @@ +import { useNavigation } from "@react-navigation/native"; +import React, { useEffect } from "react"; +import { GiftedChat } from "react-native-gifted-chat"; + +export default function Chat() { + + const navigation = useNavigation(); + + useEffect(() => { + navigation.getParent()?.setOptions({ + tabBarStyle: { + display: "none" + } + }); + return () => navigation.getParent()?.setOptions({ + tabBarStyle: undefined + }); + }, [navigation]); + return ( + + ) +} \ No newline at end of file diff --git a/src/FLAD/screens/Conversation.tsx b/src/FLAD/screens/Conversation.tsx index fcb5b83..dd979c5 100644 --- a/src/FLAD/screens/Conversation.tsx +++ b/src/FLAD/screens/Conversation.tsx @@ -1,3 +1,4 @@ +import { useNavigation } from "@react-navigation/native"; import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native"; import { useSelector } from "react-redux"; import { GraphicalCharterDark } from '../assets/GraphicalCharterDark'; @@ -10,6 +11,8 @@ export default function ConversationList() { // @ts-ignore const isDark = useSelector(state => state.userReducer.dark); + const navigation = useNavigation(); + const friends = [ { id: 1, name: "Lucas", lastMessage: "J'en ai marre de provot", source: require('../assets/images/jul.png') }, { id: 2, name: "Louison", lastMessage: "Tu vien piscine ?", source: require('../assets/images/jul.png') }, @@ -54,7 +57,7 @@ export default function ConversationList() { renderItem={({ item }) => ( navigation.navigate('Message')}> + onPress={() => navigation.navigate('Chat')}> )} -- 2.36.3