From d6fb9eb2e1494c616c28920d447540e777558d0f Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sat, 10 Apr 2021 13:40:38 -0300
Subject: [PATCH] Improve the styling of the paging button in discover.js

---
 src/components/posts/grid-view.js  |  6 +++---
 src/components/posts/paged-grid.js | 13 +++++++------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/posts/grid-view.js b/src/components/posts/grid-view.js
index e992582..0e9e3e0 100644
--- a/src/components/posts/grid-view.js
+++ b/src/components/posts/grid-view.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Dimensions, Image } from "react-native";
 
-import GridPostJsx from "src/components/posts/grid-post"
+import GridPostJsx from "src/components/posts/grid-post";
 
 function partition(arr, size) {
     let newArray = [];
@@ -17,7 +17,7 @@ const GridViewJsx = (props) => {
     let rows = partition(props.posts, 3);
     return (
         <View>
-            {   
+            {
                 rows.map((row, i) => {
                     return (
                         <View style = { styles.gridRow }
@@ -62,4 +62,4 @@ const styles = {
     }
 };
 
-export default GridViewJsx;
\ No newline at end of file
+export default GridViewJsx;
diff --git a/src/components/posts/paged-grid.js b/src/components/posts/paged-grid.js
index 50e964c..1ce0058 100644
--- a/src/components/posts/paged-grid.js
+++ b/src/components/posts/paged-grid.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, TouchableWithoutFeedback, Text } from "react-native";
+import { View, TouchableOpacity, Text } from "react-native";
 
 import GridViewJsx from "src/components/posts/grid-view";
 
@@ -49,7 +49,7 @@ const PagedGridJSX = (props) => {
 
     return (
         <View>
-            <GridViewJsx 
+            <GridViewJsx
                     posts = { state.posts }
                     openPostCallback = {
                         (id) => {
@@ -60,16 +60,16 @@ const PagedGridJSX = (props) => {
                         }
                     } />
             <View style = { styles.buttonContainer }>
-                <TouchableWithoutFeedback
+                <TouchableOpacity
                         onPress = { () => {
                             // TODO: actually get more posts :)
                             let morePosts = state.posts.concat(TEST_POSTS);
-                            setState({ posts: morePosts, loaded: true });
+                            setState({...state, posts: morePosts});
                         } }>
                     <View style = { styles.buttonMore }>
                         <Text>Show more?</Text>
                     </View>
-                </TouchableWithoutFeedback>
+                </TouchableOpacity>
             </View>
         </View>
     );
@@ -82,7 +82,8 @@ const styles = {
         alignItems: "center"
     },
     buttonMore: {
-        border: "2px solid black",
+        borderWidth: 1,
+        borderColor: "#888",
         borderRadius: 5,
         padding: 10,
         margin: 20