31/skapa detaljsida

Interfaces.tsx

@@ -15,27 +15,29 @@ export interface Tag {
     name: string
 }
 
-export interface Product {
-    brand: string,
-    description: string,
-    flavor: string[],
-    format: string,
-    manufacturer: string,
-    name: string,
-    nicotine: number,
-    photo: string,
-    pouches: number,
-    // productID: string,
-    reviews: string[],
-    strength: number,
-    tags: Tag[],
-    type: string,
-    weigth: number
-}
-
 export interface User {
     createdAt: Date,
-    displayName: string,
+    displayName: string, 
     email: string,
+    id: string,
     photo: string
+}
+
+export interface Product {
+    Brand: string,
+    Description: string,
+    Flavor: string[],
+    Format: string,
+    Manufacturer: string,
+    Name: string,
+    Nicotine: number,
+    Photo: string,
+    Pouches: number,
+    Reviews: string[],
+    Strength: number,
+    Tags: Tag[],
+    Type: string,
+    Weight: number,
+    Rating?: number,
+    ProductID: string
 }

components/ActivityCard.tsx

@@ -31,30 +31,30 @@ export const ActivityCard = ({ review }: Props) => {
 				style={styles.image}
 			>
 				<View style={styles.userInfo}>
-          <Text>User Pic</Text>
-          <Text style={styles.username}>{author?.displayName}</Text>
-        </View>
+					<Text>User Pic</Text>
+					<Text style={styles.username}>{author?.displayName}</Text>
+				</View>
 				<ReviewCard key={review.id} review={review} />
 			</ImageBackground>
 		</View>
 	);
 };
 const styles = StyleSheet.create({
 	image: {
-    marginTop: 10,
-    marginBottom: 10,
-    paddingTop: 10,
-    paddingBottom: 10,
+		marginTop: 10,
+		marginBottom: 10,
+		paddingTop: 10,
+		paddingBottom: 10,
 		minHeight: 230,
-    justifyContent: 'space-between',
-    alignItems: 'center'
+		justifyContent: 'space-between',
+		alignItems: 'center',
 	},
 	userInfo: {
-    flexDirection: 'row',
-    width: '100%'
-  },
-  username: {
-    fontWeight: 'bold',
-    marginLeft: 10
-  }
+		flexDirection: 'row',
+		width: '100%',
+	},
+	username: {
+		fontWeight: 'bold',
+		marginLeft: 10,
+	},
 });

components/Rating.tsx

@@ -1,66 +1,65 @@
 import { RatingBar } from '@aashu-dubey/react-native-rating-bar';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 
 interface Props {
 	rating: number;
+	dotSize?: number,
+	single?: number,
+	width?: number
 }
-export const RatingDots = ({ rating }: Props) => {
+export const RatingDots = ({ rating, dotSize, single, width }: Props) => {
 	const handleRating = (value: number) => {
 		console.log(value);
 	};
 
+	const styles = StyleSheet.create({
+		circle: {
+			width: dotSize ? dotSize : 20,
+			height: dotSize ? dotSize : 20,
+		},
+		container: {
+			width: width ? width : 120,
+		},
+		single: {
+			width: single ? single : 25,
+		}
+	});
+
 	return (
-		<View style={{flexDirection: 'row'}}>
-			<RatingBar
-				initialRating={rating}
-				direction="horizontal"
-				allowHalfRating
-				itemCount={5}
-				itemPadding={0}
-				ignoreGestures
-				rateStyles={{
-					container: styles.container,
-					starContainer: styles.single,
-				}}
-				ratingElement={{
-					full: (
-						<Image
-							style={styles.circle}
-							source={require('../assets/images/1.png')}
-						/>
-					),
-					half: (
-						<Image
-							style={styles.circle}
-							source={require('../assets/images/0_5.png')}
-						/>
-					),
-					empty: (
-						<Image
-							style={styles.circle}
-							source={require('../assets/images/0.png')}
-						/>
-					),
-				}}
-				onRatingUpdate={(value) => handleRating(value)}
-			/>
-      <Text style={styles.text}>{rating}</Text>
-		</View>
+		<RatingBar
+			initialRating={rating}
+			direction="horizontal"
+			allowHalfRating
+			itemCount={5}
+			itemPadding={0}
+			ignoreGestures
+			rateStyles={{
+				container: styles.container,
+				starContainer: styles.single,
+			}}
+			ratingElement={{
+				full: (
+					<Image
+						style={styles.circle}
+						source={require('../assets/images/1.png')}
+					/>
+				),
+				half: (
+					<Image
+						style={styles.circle}
+						source={require('../assets/images/0_5.png')}
+					/>
+				),
+				empty: (
+					<Image
+						style={styles.circle}
+						source={require('../assets/images/0.png')}
+					/>
+				),
+			}}
+			onRatingUpdate={(value) => handleRating(value)}
+		/>
 	);
 };
 
-const styles = StyleSheet.create({
-	circle: {
-		width: 20,
-		height: 20,
-	},
-	container: {},
-	single: {
-		width: 25,
-	},
-  text: {
-    textAlignVertical: 'center',
-    marginLeft: 18
-  }
-});

components/ReviewCard.tsx

@@ -1,5 +1,7 @@
+import { useNavigation } from '@react-navigation/native';
 import React, { useEffect, useState } from 'react';
 import { View, Image, Text, StyleSheet } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { getOneDocById } from '../helper';
 import { Tag, Review, Product } from '../Interfaces';
 import { RatingDots } from './Rating';
@@ -9,7 +11,8 @@ interface Props {
 }
 
 export const ReviewCard = ({ review }: Props) => {
-	const [product, setProduct] = useState<any>();
+	const [product, setProduct] = useState<Product>();
+	const navigation = useNavigation();
 
 	useEffect(() => {
 		getProduct();
@@ -18,7 +21,7 @@ export const ReviewCard = ({ review }: Props) => {
 	const getProduct = async () => {
 		let data = await getOneDocById('produkter', review.productID);
 		if (data) {
-			setProduct(data);
+			setProduct(data as Product);
 		}
 	};
 
@@ -28,11 +31,22 @@ export const ReviewCard = ({ review }: Props) => {
 				<View style={styles.productData}>
 					<Image style={styles.image} source={{ uri: product.Photo }} />
 					<View style={styles.textAndRating}>
-						<View style={styles.productText}>
-							<Text style={styles.textBold}>{product.Brand + ' ' + product.Name}</Text>
-              <Text>{product.Type}</Text>
+						<TouchableOpacity
+							onPress={() =>
+								navigation.navigate('Product', { id: review.productID })
+							}
+						>
+							<View style={styles.productText}>
+								<Text style={styles.textBold}>
+									{product.Brand + ' ' + product.Name}
+								</Text>
+								<Text>{product.Type}</Text>
+							</View>
+						</TouchableOpacity>
+						<View style={{flexDirection: 'row'}}>
+							<RatingDots rating={review.rating} />
+							<Text style={{marginLeft: 10}}>{review.rating}</Text>
 						</View>
-						<RatingDots rating={review.rating} />
 					</View>
 				</View>
 				<View style={styles.description}>
@@ -51,7 +65,7 @@ export const ReviewCard = ({ review }: Props) => {
 
 const styles = StyleSheet.create({
 	wrapper: {
-    marginTop: 10,
+		marginTop: 10,
 		borderRadius: 6,
 		width: '90%',
 		padding: 10,
@@ -60,24 +74,23 @@ const styles = StyleSheet.create({
 	image: {
 		height: 60,
 		width: 60,
-    flex: 1,
-
+		flex: 1,
 	},
 	productData: {
 		flexDirection: 'row',
 	},
-  textAndRating: {
-    flex: 4
-  },
-  productText: {
-    marginLeft: 10,
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
+	textAndRating: {
+		marginLeft: 10,
+		flex: 4,
+	},
+	productText: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+	},
 	textBold: {
 		fontWeight: 'bold',
 	},
-  description: {
-    padding: 10
-  }
+	description: {
+		padding: 10,
+	},
 });

components/StrengthBar.tsx

@@ -0,0 +1,51 @@
+import { RatingBar } from '@aashu-dubey/react-native-rating-bar';
+import React, { ReactNode } from 'react';
+import { View, StyleSheet, Text, Image } from 'react-native';
+
+interface Props {
+	strength?: number;
+}
+export const StrengthBar = ({ strength }: Props) => {
+	const handleRating = (value: number) => {
+		console.log(value);
+	};
+
+	return (
+		<RatingBar
+			initialRating={strength}
+			direction="horizontal"
+			allowHalfRating
+			itemCount={5}
+			itemPadding={0}
+			ignoreGestures
+			rateStyles={{
+				starContainer: styles.single,
+			}}
+			ratingElement={{
+				full: (
+					<Image
+						style={styles.circle}
+						source={require('../assets/images/strength_one.png')}
+					/>
+				),
+				empty: (
+					<Image
+						style={styles.circle}
+						source={require('../assets/images/strength_empty.png')}
+					/>
+				),
+			}}
+			onRatingUpdate={(value) => handleRating(value)}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	circle: {
+		width: 15,
+		height: 15,
+	},
+	single: {
+		width: 17,
+	}
+});

constants/Colors.ts

@@ -10,8 +10,8 @@ export default {
     tabIconSelected: tintColorLight,
   },
   dark: {
-    text: "white",
-    background: "#201A28",
+    text: "#fff",
+    background: "transparent",
     tint: tintColorDark,
     tabIconDefault: "#404040",
     tabIconSelected: tintColorDark,