Learning up to 13/10/23

blog/App.js

+import React from 'react';
+import { createAppContainer } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { Provider } from './src/context/BlogContext';
+import IndexScreen from './src/screens/IndexScreen';
+import ShowScreen from './src/screens/ShowScreen';
+import CreateScreen from './src/screens/CreateScreen';
+import EditScreen from './src/screens/EditScreen';
+
+const navigator = createStackNavigator(
+  {
+    Index: IndexScreen,
+    Show: ShowScreen,
+    Create: CreateScreen,
+    Edit: EditScreen
+  },
+  {
+    initialRouteName: 'Index',
+    defaultNavigationOptions: {
+      title: 'Blogs'
+    }
+  }
+);
+
+const App = createAppContainer(navigator);
+
+export default () => {
+  return <Provider>
+    <App />
+  </Provider>
+};
\ No newline at end of file

blog/app.json

+{
+  "expo": {
+    "name": "blog",
+    "slug": "blog",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

blog/babel.config.js

+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ["react-native-reanimated/plugin"],
+  };
+};

blog/package.json

+{
+  "name": "blog",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "expo": "~49.0.13",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-navigation": "^4.4.4",
+    "react-navigation-stack": "^2.10.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}

blog/src/context/BlogContext.js

+import createDataContext from "./createDataContext";
+
+const blogReducer = (state, action) => {
+    switch (action.type) {
+        case 'add_blogpost':
+            return [...state, 
+                {
+                    id: Math.floor(Math.random() * 99999),
+                    title: action.payload.title,
+                    content: action.payload.content
+                }
+            ];
+        case 'delete_blogpost':
+            return state.filter( (blogPost) => blogPost.id !== action.payload );
+        default:
+            return state;
+    }
+};
+
+const addBlogPost = dispatch => {
+    return (title, content, callback) => {
+        dispatch({ type: 'add_blogpost', payload: { title, content } });
+        callback();
+    };
+};
+
+const deleteBlogPost = dispatch => {
+    return (id) => {
+        dispatch({ type: 'delete_blogpost', payload: id })
+    };
+};
+
+export const { Context, Provider } = createDataContext(
+        blogReducer, 
+        { addBlogPost, deleteBlogPost }, 
+        [{ title: "Test Title", content: "Test Content", id: 1}]
+    );
\ No newline at end of file

blog/src/context/createDataContext.js

+import React, { useReducer } from "react";
+
+export default (reducer, actions, initialState) => {
+    const Context = React.createContext();
+
+    const Provider = ({ children }) => {
+        const [state, dispatch] = useReducer(reducer, initialState);
+
+         // actions === { addBlogPost: (dispatch) => { return () => {} } }
+         const boundActions = {};
+         for (let key in actions) {
+            boundActions[key] = actions[key](dispatch);
+         }
+
+        return <Context.Provider value={{ state, ...boundActions }}>
+            {children}
+        </Context.Provider>
+    }
+
+    return { Context, Provider };
+};
\ 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 { Context } from "../context/BlogContext";
+
+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>
+    );
+};
+
+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 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 { Context } from "../context/BlogContext";
+
+const EditScreen = ({ 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>
+    );
+};
+
+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 EditScreen;
\ No newline at end of file

blog/src/screens/IndexScreen.js

+import React, { useContext } 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);
+
+    return (
+        <View>
+            <FlatList 
+                data={state}
+                keyExtractor={blogPost => blogPost.id}
+                renderItem={({ item }) => {
+                    return (
+                    <TouchableOpacity onPress={ () => navigation.navigate('Show', {id: item.id}) }>
+                        <View style={styles.rowStyle}>
+                            <Text style={styles.titleStyle}>{item.title} - {item.id}</Text>
+                            <TouchableOpacity onPress={() => deleteBlogPost(item.id)}>
+                                <FontAwesome name="trash-o" style={styles.deleteIconStyle}/>
+                            </TouchableOpacity>
+                        </View>
+                    </TouchableOpacity>
+                    );
+                }}
+            />
+        </View>
+    );
+};
+
+IndexScreen.navigationOptions = ({ navigation }) => {
+    return {
+        headerRight: () => (
+          <TouchableOpacity onPress={() => navigation.navigate('Create')}>
+            <FontAwesome name="plus-square-o" style={styles.iconStyle}/>
+          </TouchableOpacity>
+        ),
+      };
+};
+
+const styles = StyleSheet.create({
+    rowStyle: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        padding: 16,
+        borderTopWidth: 1,
+        borderColor: 'gray'
+    },
+    titleStyle: {
+        fontSize: 18
+    },
+    iconStyle: {
+        fontSize: 30,
+        color: "#2196f3",
+        marginHorizontal: 16
+    },
+    deleteIconStyle: {
+        fontSize: 24,
+        color: "#f44336"
+    }
+});
+
+export default IndexScreen;
\ No newline at end of file

blog/src/screens/ShowScreen.js

+import React, { useContext } from "react";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Context } from '../context/BlogContext';
+import { EvilIcons } from '@expo/vector-icons';
+
+const ShowScreen = ({ navigation }) => {
+    const { state } = useContext(Context);
+
+    const blogPost = state.find((blogPost) => blogPost.id === navigation.getParam('id'));
+
+    return (
+        <View>
+            <Text>{blogPost.title}</Text>
+            <Text>{blogPost.content}</Text>
+        </View>
+    );
+};
+
+ShowScreen.navigationOptions = ({ navigation }) => {
+    return {
+        headerRight: () => (
+          <TouchableOpacity onPress={() => navigation.navigate('Edit', { id: navigation.getParam('id')})}>
+            <EvilIcons name="pencil" size={35} />
+          </TouchableOpacity>
+        ),
+      };
+};
+
+const styles = StyleSheet.create({});
+
+export default ShowScreen;
\ No newline at end of file