#1 - Add review reply

omerlagziel · Nov 22, 2021 · cb89ae6 · cb89ae6
1 parent b1341d7
commit cb89ae6
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 40 deletions.
diff --git a/packages/components/src/App.web.tsx b/packages/components/src/App.web.tsx
@@ -1,13 +1,26 @@
 import React from 'react'
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native'
+
+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'
+import Review from './features/review/Review'
 
 export function App() {
-  return <Text>Hello world !</Text>
+  return (
+    <Provider store={store}>
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="Main"
+            component={Tabs}
+            options={{ headerShown: false }}
+          />
+          <Stack.Screen name="Review" component={Review} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </Provider>
+  )
 }
diff --git a/packages/components/src/features/menu/Menu.tsx b/packages/components/src/features/menu/Menu.tsx
@@ -10,13 +10,13 @@ import { RootStackParamList } from '../../navigation/navigation'
 import { Tag } from '../../components'
 
 type Props = {
-  navigation: BottomTabNavigationProp<RootStackParamList, 'Menu'>
+  // navigation: BottomTabNavigationProp<RootStackParamList, 'Menu'>
 }
 
 /**
  * @param props {@link Props}
  */
-export default ({ navigation }: Props) => {
+export default (props: Props) => {
   const state = useSelector((rootState: RootState) => rootState.menu)
   const dispatch = useDispatch()
 

diff --git a/packages/components/src/features/review/Review.tsx b/packages/components/src/features/review/Review.tsx
@@ -9,8 +9,8 @@ import {
 } from 'react-native'
 import { useSelector, useDispatch } from 'react-redux'
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'
+// import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 
-// import { Button } from '../../components/'
 import { RootState } from '../../store'
 import { decrement, increment } from './slice'
 import { RootStackParamList } from '../../navigation/navigation'
@@ -22,51 +22,79 @@ type Props = {
 
 export default ({ navigation }: Props) => {
   return (
-    <View>
-      <ReviewCard
-        title="John Doe"
-        subtitle="2 days ago"
-        description="Food was great as always, highly recommend this place! Will definitely come back soon. Only note is to keep the music a little less loud."
-        fullscreen
-      />
-      <ScrollView style={styles.replyOptions} horizontal>
-        <TouchableOpacity style={styles.replyOption}>
-          <Text style={styles.replyOptionText}>Thank you John!</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.replyOption}>
-          <Text style={styles.replyOptionText}>Thanks John!</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.replyOption}>
-          <Text style={styles.replyOptionText}>Many thanks John!</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.replyOption}>
-          <Text style={styles.replyOptionText}>Appreciate it John!</Text>
-        </TouchableOpacity>
+    <View style={styles.container}>
+      <ScrollView style={styles.reviewContainer}>
+        <ReviewCard
+          title="John Doe"
+          subtitle="2 days ago"
+          description="Food was great as always, highly recommend this place! Will definitely come back soon. Only note is to keep the music a little less loud."
+          fullscreen
+        />
+        <ScrollView
+          style={styles.replyOptions}
+          contentContainerStyle={styles.replyOptionsContainer}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+        >
+          <TouchableOpacity style={styles.replyOption}>
+            <Text style={styles.replyOptionText}>Thank you John!</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.replyOption}>
+            <Text style={styles.replyOptionText}>Thanks John!</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.replyOption}>
+            <Text style={styles.replyOptionText}>Many thanks John!</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.replyOption}>
+            <Text style={styles.replyOptionText}>Appreciate it John!</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.replyOption}>
+            <Text style={styles.replyOptionText}>Customize..</Text>
+          </TouchableOpacity>
+        </ScrollView>
       </ScrollView>
+
       <TextInput placeholder="Reply.." style={styles.textInput} multiline />
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  container: {
+    // flex: 1,
+  },
+  reviewContainer: {
+    // flex: 1,
+  },
   textInput: {
     fontSize: 14,
     backgroundColor: 'white',
     padding: 15,
+    paddingTop: 15,
+    margin: 15,
+    borderRadius: 15,
+    shadowColor: 'grey',
+    shadowOpacity: 0.1,
+    shadowOffset: { width: 0, height: 0 },
+  },
+  replyOptionsContainer: {
+    backgroundColor: 'white',
   },
   replyOptions: {
     flexDirection: 'row',
     padding: 15,
+    backgroundColor: 'white',
   },
   replyOption: {
     flexDirection: 'row',
-    backgroundColor: '#A9A9A9',
+    backgroundColor: '#0F9D58',
     borderRadius: 8,
     padding: 8,
     marginHorizontal: 5,
   },
   replyOptionText: {
     fontWeight: 'bold',
     color: 'white',
+    fontSize: 12,
   },
 })
diff --git a/packages/web-nextjs/pages/about.tsx b/packages/web-nextjs/pages/about.tsx
diff --git a/packages/web-nextjs/pages/menu.tsx b/packages/web-nextjs/pages/menu.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import Menu from 'components/src/features/menu/Menu'
+
+export default () => {
+  return <Menu />
+}