Update blog example to use JSON server

blog/.gitignore

+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

blog/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@react-native-community/masked-view": "^0.1.11",
+        "axios": "^1.5.1",
         "expo": "~49.0.13",
         "expo-status-bar": "~1.6.0",
         "react": "18.2.0",
@@ -6194,6 +6195,29 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
+      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-core": {
       "version": "7.0.0-bridge.0",
       "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
@@ -7909,6 +7933,25 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fontfaceobserver": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz",
@@ -11698,6 +11741,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",

blog/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.11",
+    "axios": "^1.5.1",
     "expo": "~49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",

blog/src/api/jsonServer.js

+import axios from "axios";
+
+export default axios.create({
+    baseURL: 'https://faithful-bunny-adequately.ngrok-free.app'
+});
\ No newline at end of file

blog/src/components/BlogPostForm.js

+import React, { useState } from "react";
+import { View, Text, StyleSheet, TextInput, Button } from "react-native";
+
+const BlogPostForm = ({ onSubmit, initialValues}) => {
+    const [title, setTitle] = useState(initialValues.title);
+    const [content, setContent] = useState(initialValues.content);
+
+    return (
+        <View>
+            <Text style={styles.labelStyle}>Enter Title:</Text>
+            <TextInput
+                style={styles.inputStyle}
+                value={title}
+                onChangeText={(text) => setTitle(text)}
+            />
+            <Text style={styles.labelStyle}>Enter Content:</Text>
+            <TextInput
+                style={styles.inputStyle}
+                value={content}
+                onChangeText={(text) => setContent(text)}
+            />
+            <Button 
+                title="Save Blog Post"
+                onPress={ () => onSubmit(title, content)}
+            />
+        </View>
+    );
+};
+
+BlogPostForm.defaultProps = {
+    initialValues: {
+        title: '',
+        content: ''
+    }
+};
+
+const styles = StyleSheet.create({
+    inputStyle: {
+        fontSize: 18,
+        borderColor: 'black',
+        borderWidth: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        marginHorizontal: 16,
+        borderRadius: 12
+    },
+    labelStyle: {
+        fontSize: 20,
+        marginHorizontal: 16,
+        marginVertical: 8
+    }
+});
+
+export default BlogPostForm;
\ No newline at end of file

blog/src/context/BlogContext.js

 import createDataContext from "./createDataContext";
+import jsonServer from "../api/jsonServer";
 
 const blogReducer = (state, action) => {
     switch (action.type) {
@@ -11,27 +12,61 @@ const blogReducer = (state, action) => {
                 }
             ];
         case 'delete_blogpost':
-            return state.filter( (blogPost) => blogPost.id !== action.payload );
+            return state.filter( blogPost => blogPost.id !== action.payload );
+        case 'edit_blogpost':
+            return state.map( blogPost  => {
+                return blogPost.id == action.payload.id ? action.payload : blogPost;
+            });
+        case 'get_blogpost':
+            return action.payload;
         default:
             return state;
     }
 };
 
+const getBlogPost = dispatch => {
+    return async () => {
+        const config = {
+            "ngrok-skip-browser-warning": true
+        }
+        const response = await jsonServer.get('/blogposts', config);
+        dispatch({ type: 'get_blogpost', payload: response.data});
+    };
+};
+
 const addBlogPost = dispatch => {
-    return (title, content, callback) => {
-        dispatch({ type: 'add_blogpost', payload: { title, content } });
-        callback();
+    return async (title, content, callback) => {
+        
+        await jsonServer.post('/blogposts', {title, content});
+        // dispatch({ type: 'add_blogpost', payload: { title, content } });
+        if (callback) {
+            callback();
+        }
     };
 };
 
 const deleteBlogPost = dispatch => {
-    return (id) => {
-        dispatch({ type: 'delete_blogpost', payload: id })
+    return async id => {
+        await jsonServer.delete(`/blogposts/${id}`);
+        dispatch({ type: 'delete_blogpost', payload: id });
+    };
+};
+
+const editBlogPost = dispatch => {
+    return async (id, title, content, callback) => {
+        await jsonServer.put(`/blogposts/${id}`, { title, content });
+        dispatch({
+            type: 'edit_blogpost', 
+            payload: { id, title, content }
+        });
+        if (callback) {
+            callback();
+        }
     };
 };
 
 export const { Context, Provider } = createDataContext(
         blogReducer, 
-        { addBlogPost, deleteBlogPost }, 
-        [{ title: "Test Title", content: "Test Content", id: 1}]
+        { addBlogPost, deleteBlogPost, editBlogPost, getBlogPost }, 
+        []
     );
\ No newline at end of file

blog/src/screens/CreateScreen.js

-import React, { useContext, useState } from "react";
-import { View, Text, StyleSheet, TextInput, Button } from "react-native";
+import React, { useContext } from "react";
+import { StyleSheet } from "react-native";
 import { Context } from "../context/BlogContext";
+import BlogPostForm from "../components/BlogPostForm";
 
 const CreateScreen = ({ navigation }) => {
-    const [title, setTitle] = useState('');
-    const [content, setContent] = useState('');
-
     const { addBlogPost } = useContext(Context);
 
     return (
-        <View>
-            <Text style={styles.labelStyle}>Enter Title:</Text>
-            <TextInput
-                style={styles.inputStyle}
-                value={title}
-                onChangeText={(text) => setTitle(text)}
-            />
-            <Text style={styles.labelStyle}>Enter Content:</Text>
-            <TextInput
-                style={styles.inputStyle}
-                value={content}
-                onChangeText={(text) => setContent(text)}
-            />
-            <Button 
-                title="Add Blog Post"
-                onPress={() => {
-                    addBlogPost(title, content, () => {
-                        navigation.navigate('Index');
-                    });
-                }}
-            />
-        </View>
+        <BlogPostForm 
+            onSubmit={ (title, content) => {
+                addBlogPost(title, content, () => navigation.navigate('Index'))
+            }}
+        /> 
     );
 };
 
-const styles = StyleSheet.create({
-    inputStyle: {
-        fontSize: 18,
-        borderColor: 'black',
-        borderWidth: 1,
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        marginHorizontal: 16,
-        borderRadius: 12
-    },
-    labelStyle: {
-        fontSize: 20,
-        marginHorizontal: 16,
-        marginVertical: 8
-    }
-});
+const styles = StyleSheet.create({});
 
 export default CreateScreen;
\ No newline at end of file

blog/src/screens/EditScreen.js

-import React, { useContext, useState } from "react";
-import { View, Text, StyleSheet, TextInput, Button } from "react-native";
+import React, { useContext } from "react";
+import { StyleSheet } from "react-native";
 import { Context } from "../context/BlogContext";
+import BlogPostForm from "../components/BlogPostForm";
 
 const EditScreen = ({ navigation }) => {
-    const [title, setTitle] = useState('');
-    const [content, setContent] = useState('');
-
-    const { addBlogPost } = useContext(Context);
-
+    const id = navigation.getParam('id');
+    const { state, editBlogPost } = useContext(Context);
+    const blogPost = state.find(
+        blogPost => blogPost.id === id
+    )
+    
     return (
-        <View>
-            <Text style={styles.labelStyle}>Enter Title:</Text>
-            <TextInput
-                style={styles.inputStyle}
-                value={title}
-                onChangeText={(text) => setTitle(text)}
-            />
-            <Text style={styles.labelStyle}>Enter Content:</Text>
-            <TextInput
-                style={styles.inputStyle}
-                value={content}
-                onChangeText={(text) => setContent(text)}
-            />
-            <Button 
-                title="Add Blog Post"
-                onPress={() => {
-                    addBlogPost(title, content, () => {
-                        navigation.navigate('Index');
-                    });
-                }}
-            />
-        </View>
+        <BlogPostForm 
+            initialValues={{ title: blogPost.title, content: blogPost.content }}
+            onSubmit={ (title, content) => {
+                editBlogPost(id, title, content, () => navigation.pop());
+            }}
+        />
     );
 };
 
-const styles = StyleSheet.create({
-    inputStyle: {
-        fontSize: 18,
-        borderColor: 'black',
-        borderWidth: 1,
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        marginHorizontal: 16,
-        borderRadius: 12
-    },
-    labelStyle: {
-        fontSize: 20,
-        marginHorizontal: 16,
-        marginVertical: 8
-    }
-});
+const styles = StyleSheet.create({});
 
 export default EditScreen;
\ No newline at end of file

blog/src/screens/IndexScreen.js

-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { View, Text, StyleSheet, FlatList, Button, TouchableOpacity } from "react-native";
 import { Context } from "../context/BlogContext";
 import { FontAwesome } from '@expo/vector-icons';
 
 const IndexScreen = ({ navigation }) => {
 
-    const { state, deleteBlogPost } = useContext(Context);
+    const { state, deleteBlogPost, getBlogPost } = useContext(Context);
+
+    useEffect(() => {
+        getBlogPost();
+        navigation.addListener('didFocus', () => {
+            getBlogPost();
+        });
+    }, []);
 
     return (
         <View>

jsonserver/db.json

+{
+  "blogposts": [
+    {
+      "id": 1,
+      "title": "API Post",
+      "content": "Content for my post"
+    },
+    {
+      "id": 2,
+      "title": "API Post 2",
+      "content": "Content 2 for my post"
+    },
+    {
+      "title": "Third post",
+      "content": "This is the content of the third post",
+      "id": 3
+    },
+    {
+      "title": "4th post (edited)",
+      "content": "Edited Content of 4th post",
+      "id": 4
+    }
+  ]
+}
\ No newline at end of file

jsonserver/package.json

+{
+  "name": "jsonserver",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "db": "json-server -w db.json",
+    "tunnel": "ngrok http 3000"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "json-server": "^0.17.4",
+    "ngrok": "^5.0.0-beta.2"
+  }
+}