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

search bar

Browse Source
This commit is contained in:
danis
2023-11-14 21:07:25 +01:00
parent b1d54d8665
commit 4c96f78a46
3 changed files with 125 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/V2/SearchBar.tsx
+82
View File
@@ -0,0 +1,82 @@
import React from "react";
import { Text, Select } from 'native-base'
import { TextInput, View } from "react-native";
import ButtonBase from "../UI/ButtonBase";
import Artist from "../../models/Artist";
import Song from "../../models/Song";
import { AddSquare } from 'iconsax-react-native';
const artistsDummy = [
{
id: 0,
name: 'Momo'
},
{
id: 1,
name: 'Beethoven'
},
{
id: 2,
name: 'Chopin'
},
{
id: 3,
name: 'Wolfgang'
},
];
const genreDummy = [
{
id: 0,
name: 'Rock',
},
{
id: 1,
name: 'Classical',
},
{
id: 2,
name: 'Pop',
},
{
id: 3,
name: 'Jazz',
},
];
const SearchBarComponent = () => {
const [isTriggered, setIsTriggered] = React.useState(false);
const [genre, setGenre] = React.useState('')
const [query, setQuery] = React.useState('')
const [artistSearch, setArtistSearch] = React.useState([] as Artist[]);
const [songSearch, setSongSearch] = React.useState([] as Song[]);
return (
<View>
<View style={{ borderBottomWidth: 1, borderBottomColor: '#9E9E9E', display: "flex", flexDirection: "row", margin: 5, padding: 16 }}>
<TextInput value={query} placeholder="What are you looking for ?" style={{ width: '100%', height: 20}} />
<ButtonBase type="outlined" />
</View>
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<View style={{ flexDirection: "row",}}>
{artistsDummy.map((data) => (
<View style={{ flexDirection: "row", alignItems: "center", padding: 10, margin: 10}}>
<AddSquare size="32" color="#6075F9"/>
<Text ml={2} >{data.name}</Text>
</View>
))}
</View>
<View>
<Select selectedValue={genre} placeholder="Genre" accessibilityLabel="Genre" onValueChange={itemValue => setGenre(itemValue)}>
{genreDummy.map((data) => (
<Select.Item label={data.name} value={data.name}/>
))}
</Select>
</View>
</View>
</View>
)
}
export default SearchBarComponent;
front/views/LeaderboardView.tsx
+37 -11
View File
@@ -1,16 +1,19 @@
import { Box, Heading, useBreakpointValue, ScrollView, Text } from 'native-base';
import { View, Image } from 'react-native';
import { useQuery } from 'react-query';
import User from '../models/User';
import { useQuery } from '../Queries';
import API from '../API';
import { Ionicons } from '@expo/vector-icons';
import User from '../models/User';
type PodiumCardProps = {
offset: number;
medalColor: string;
userAvatarUrl: string;
userPseudo: string;
userXp: number;
};
const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
const PodiumCardComponent = ({ offset, medalColor, userAvatarUrl, userPseudo, userXp }: PodiumCardProps) => {
return (
<View
style={{
@@ -30,7 +33,7 @@ const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
>
<Image
source={{
uri: 'https://picsum.photos/140/140',
uri: userAvatarUrl,
}}
style={{
aspectRatio: 1,
@@ -55,7 +58,7 @@ const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
fontWeight: '500',
}}
>
Momo
{userPseudo}
</Text>
<Text
mt={1}
@@ -65,12 +68,17 @@ const PodiumCardComponent = ({ offset, medalColor }: PodiumCardProps) => {
fontWeight: '500',
}}
>
2400 LVL
{userXp} LVL
</Text>
</View>
);
};
type BoardRowProps = {
userPseudo: string;
userXp: number;
}
const BoardRowComponent = () => {
return (
<View
@@ -127,7 +135,6 @@ const BoardRowComponent = () => {
<View
style={{
backgroundColor: 'rgba(255, 255, 255, 0.50)',
// borderRadius: 8,
borderTopRightRadius: 8,
borderBottomRightRadius: 8,
width: 50,
@@ -182,7 +189,8 @@ const dummyScores = [
];
const Leaderboardiew = () => {
// const scoresQuery = useQuery(API.getTopTwentyPlayers())
const scoresQuery = useQuery(API.getTopTwentyPlayers);
return (
<ScrollView style={{ marginBottom: 5 }}>
<View
@@ -208,9 +216,27 @@ const Leaderboardiew = () => {
marginBottom: 20,
}}
>
<PodiumCardComponent medalColor="#AE84FB" offset={80} />
<PodiumCardComponent medalColor="#EAD93C" offset={0} />
<PodiumCardComponent medalColor="#5F74F7" offset={60} />
<PodiumCardComponent
medalColor="#AE84FB"
offset={80}
userAvatarUrl={scoresQuery.data?.at(2)?.data.avatar ?? "fake image"}
userPseudo={scoresQuery.data?.at(2)?.name ?? "Momo"}
userXp={scoresQuery.data?.at(2)?.data.xp ?? 0}
/>
<PodiumCardComponent
medalColor="#EAD93C"
offset={0}
userAvatarUrl={scoresQuery.data?.at(0)?.data.avatar ?? "fake image"}
userPseudo={scoresQuery.data?.at(0)?.name ?? "Momo"}
userXp={scoresQuery.data?.at(0)?.data.xp ?? 0}
/>
<PodiumCardComponent
medalColor="#5F74F7"
offset={60}
userAvatarUrl={scoresQuery.data?.at(1)?.data.avatar ?? "fake image"}
userPseudo={scoresQuery.data?.at(1)?.name ?? "Momo"}
userXp={scoresQuery.data?.at(1)?.data.xp ?? 0}
/>
</View>
{dummyScores.map((comp, index) => (
<BoardRowComponent />
front/views/SearchView.tsx
+6 -3
View File
@@ -1,12 +1,13 @@
import React, { useState } from 'react';
import SearchBar from '../components/SearchBar';
import SearchBarComponent from '../components/V2/SearchBar'
import Artist from '../models/Artist';
import Song from '../models/Song';
import Genre from '../models/Genre';
import API from '../API';
import { useQuery } from '../Queries';
import { SearchResultComponent } from '../components/SearchResult';
import { SafeAreaView } from 'react-native';
import { SafeAreaView, View } from 'react-native';
import { Filter } from '../components/SearchBar';
import { ScrollView } from 'native-base';
import { RouteProps } from '../Navigation';
@@ -99,8 +100,10 @@ const SearchView = (props: RouteProps<SearchViewProps>) => {
updateStringQuery,
}}
>
<SearchBar />
<SearchResultComponent />
<View style={{ display: 'flex' }}>
<SearchBarComponent />
<SearchResultComponent />
</View>
</SearchContext.Provider>
</SafeAreaView>
</ScrollView>