#1 - Add reviews page

packages/components/src/App.tsx

@@ -1,26 +1,35 @@
 import React from 'react'
 
 import { NavigationContainer } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+// import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { Provider } from 'react-redux'
 
 import { store } from './store'
 import { RootStackParamList } from './navigation/navigation'
 import Menu from './features/menu/Menu'
+import Reviews from './features/reviews/Reviews'
 
-const Stack = createNativeStackNavigator<RootStackParamList>()
+const Stack = createBottomTabNavigator<RootStackParamList>()
 
 export function App() {
   return (
     <Provider store={store}>
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Menu">
+          <Stack.Screen
+            name="Reviews"
+            component={Reviews}
+            options={{
+              // headerTransparent: true,
+              headerTitleAlign: 'center',
+            }}
+          />
           <Stack.Screen
             name="Menu"
             component={Menu}
             options={{
               // headerTransparent: true,
-              headerBlurEffect: 'prominent',
               headerTitleAlign: 'center',
             }}
           />

packages/components/src/components/Tag.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+
+type Props = {
+  children: React.ReactNode
+}
+
+/**
+ * @param props {@link Props}
+ */
+export const Tag = (props: Props) => {
+  const { children } = props
+  return (
+    <View style={[styles.tag, styles.tagBrown]}>
+      <Text>{children}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  tags: {
+    flexDirection: 'row-reverse',
+    direction: 'rtl',
+  },
+  tag: {
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingVertical: 2,
+    paddingHorizontal: 6,
+    textAlign: 'center',
+    color: 'green',
+    borderColor: 'green',
+    fontSize: 12,
+    marginHorizontal: 2,
+  },
+  tagBrown: {
+    color: '#6C3512',
+    borderColor: '#6C3512',
+  },
+})

packages/components/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Tag'

packages/components/src/features/menu/Menu.tsx

@@ -7,24 +7,15 @@ import { NativeStackNavigationProp } from '@react-navigation/native-stack'
 import { RootState } from '../../store'
 import { decrement, increment } from './slice'
 import { RootStackParamList } from '../../navigation/navigation'
+import { Tag } from '../../components'
 
 type Props = {
   navigation: NativeStackNavigationProp<RootStackParamList, 'Menu'>
 }
 
-type TagProps = {
-  children: React.ReactNode
-}
-
-const Tag = (props: TagProps) => {
-  const { children } = props
-  return (
-    <View style={[styles.tag, styles.tagBrown]}>
-      <Text>{children}</Text>
-    </View>
-  )
-}
-
+/**
+ * @param props {@link Props}
+ */
 export default ({ navigation }: Props) => {
   const state = useSelector((rootState: RootState) => rootState.menu)
   const dispatch = useDispatch()
@@ -87,20 +78,5 @@ const styles = StyleSheet.create({
     direction: 'rtl',
     // marginBottom: 4,
   },
-  tag: {
-    borderWidth: 1,
-    borderRadius: 10,
-    paddingVertical: 2,
-    paddingHorizontal: 6,
-    textAlign: 'center',
-    color: 'green',
-    borderColor: 'green',
-    fontSize: 12,
-    marginHorizontal: 2,
-  },
-  tagBrown: {
-    color: '#6C3512',
-    borderColor: '#6C3512',
-  },
   description: {},
 })

packages/components/src/features/reviews/Reviews.tsx

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import { Text, View, StyleSheet, Image, TouchableOpacity } from 'react-native'
+import { useSelector, useDispatch } from 'react-redux'
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+
+// import { Button } from '../../components/'
+import { RootState } from '../../store'
+import { decrement, increment } from './slice'
+import { RootStackParamList } from '../../navigation/navigation'
+import { Tag } from '../../components'
+
+type StarProps = {
+  stars: 1 | 2 | 3 | 4 | 5
+}
+
+const Stars = ({ stars }: StarProps) => {
+  return (
+    <View style={styles.starsContainer}>
+      <Text style={styles.stars}>{'★'.repeat(stars)}</Text>
+      <Text style={[styles.stars, styles.starsGrey]}>
+        {'★'.repeat(5 - stars)}
+      </Text>
+    </View>
+  )
+}
+
+type Props = {
+  navigation: NativeStackNavigationProp<RootStackParamList, 'Reviews'>
+}
+
+/**
+ * @param props {@link Props}
+ */
+export default ({ navigation }: Props) => {
+  const state = useSelector((rootState: RootState) => rootState.reviews)
+  const dispatch = useDispatch()
+
+  // dispatch(increment);
+  // let { data, error, isLoading } = useGetPokemonByNameQuery('pikachu')
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.cardHeader}>
+        <View style={styles.profilePicContainer}>
+          <Image
+            source={{
+              uri:
+                'https://www.personality-insights.com/wp-content/uploads/2017/12/default-profile-pic-e1513291410505.jpg',
+            }}
+            style={styles.profilePic}
+          />
+          <Image source={require('./facebook.png')} style={styles.socialIcon} />
+        </View>
+        <View style={styles.titleContainer}>
+          <View style={styles.titleHead}>
+            <Text style={styles.title}>John Doe</Text>
+            <Stars stars={4} />
+          </View>
+          <Text style={styles.subtitle}>2 days ago</Text>
+        </View>
+      </View>
+      <Text>Not great</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    backgroundColor: 'white',
+    padding: 15,
+    // justifyContent: 'space-between',
+    // alignItems: 'center',
+    // flexDirection: 'row',
+  },
+  cardHeader: {
+    flexDirection: 'row',
+  },
+  profilePic: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+  },
+  socialIcon: {
+    width: 20,
+    height: 20,
+    borderRadius: 20,
+    marginLeft: -15,
+  },
+  profilePicContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  title: {
+    fontSize: 17,
+  },
+  subtitle: {
+    color: 'grey',
+    fontSize: 15,
+  },
+  starsContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 5,
+  },
+  stars: {
+    fontSize: 11,
+    color: '#F4B400',
+  },
+  starsGrey: {
+    color: '#D3D3D3',
+  },
+  titleContainer: {
+    paddingHorizontal: 7,
+    marginTop: 3,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  titleHead: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+})

packages/components/src/features/reviews/slice.ts

@@ -0,0 +1,28 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit'
+
+type ReviewsState = {
+  test: string
+}
+
+const initialState: ReviewsState = {
+  test: '',
+}
+
+export const slice = createSlice({
+  name: 'reviews',
+  initialState,
+  reducers: {
+    increment: (state: ReviewsState) => {
+      state.test = 'test-increment'
+    },
+    decrement: (state: ReviewsState) => {
+      state.test = 'test-decrement'
+    },
+  },
+})
+
+// Action creators are generated for each case reducer function
+export const { increment, decrement } = slice.actions
+
+export default slice.reducer

packages/components/src/navigation/navigation.ts

@@ -1,4 +1,5 @@
 // Parameters for each screen
 export type RootStackParamList = {
   Menu: undefined
+  Reviews: undefined
 }

packages/components/src/store.ts

@@ -3,10 +3,12 @@ import { setupListeners } from '@reduxjs/toolkit/query'
 
 // import { api } from './services/api'
 import menu from './features/menu/slice'
+import reviews from './features/reviews/slice'
 
 export const store = configureStore({
   reducer: {
     menu,
+    reviews,
     // signup: signupReducer,
 
     // Add the generated reducer as a specific top-level slice

packages/mobile/package.json

@@ -12,6 +12,7 @@
     "xcode": "xed ios"
   },
   "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.0.9",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.2.5",
     "components": "0.0.1",

yarn.lock

@@ -2061,6 +2061,15 @@
   resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.2.6.tgz#b26c52d5db3ad0926b13deea79c69620966a9221"
   integrity sha512-303CxmetUmgiX9NSUxatZkNh9qTYYdiM8xkGf9I3Uj20U3eGY3M78ljeNQ4UVCJA+FNGS5nC1dtS9GjIqvB4dg==
 
+"@react-navigation/bottom-tabs@^6.0.9":
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.0.9.tgz#916b6a4b495ea8fdcace98dab727064876875d09"
+  integrity sha512-uRoq6Zd7lPNnLqNQkKC28eR62tpqcDeuakZU1sO8N46FtvrcTuNLoIlssrGty3GF7ALBIxCypn4A93t3nbmMrQ==
+  dependencies:
+    "@react-navigation/elements" "^1.2.1"
+    color "^3.1.3"
+    warn-once "^0.1.0"
+
 "@react-navigation/core@^6.1.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-6.1.0.tgz#95fbf54d78ad0ed976cb73219f0c0199775a1d26"