Loading post for mobile alpha version:

  . Basic style for post
  . Loading post using FlatList

Co-author: Duke Manh <manhducdkcb@gmail.com>

src/mobile/.env.development

@@ -2,10 +2,15 @@
 # Supabase Services
 ################################################################################
 
-# We 10.0.2.2 to access your actual machine inspire by https://stackoverflow.com/a/6310592
+# We use 10.0.2.2 to access your actual machine in local development inspire by https://stackoverflow.com/a/6310592
 SUPABASE_URL=http://dev.supabase.telescope.cdot.systems
 
 # Secrets
 # YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
 ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE
 
+################################################################################
+# Post Services
+################################################################################
+
+POSTS_URL = 'https://dev.api.telescope.cdot.systems/v1/posts'

src/mobile/app.config.js

@@ -33,6 +33,7 @@ export default {
     extra: {
       supabaseUrl: process.env.SUPABASE_URL,
       supabaseKey: process.env.ANON_KEY,
+      postsUrl: process.env.POSTS_URL,
     },
   },
 };

src/mobile/package.json

@@ -28,10 +28,12 @@
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "react-native-elements": "3.4.2",
+    "react-native-render-html": "6.3.4",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "3.10.1",
     "react-native-url-polyfill": "1.3.0",
-    "react-native-web": "0.17.1"
+    "react-native-web": "0.17.1",
+    "swr": "1.2.2"
   },
   "devDependencies": {
     "@babel/core": "7.17.5",

src/mobile/src/App.jsx

@@ -2,13 +2,18 @@ import React from 'react';
 import 'react-native-url-polyfill/auto';
 import { NavigationContainer } from '@react-navigation/native';
 import { registerRootComponent } from 'expo';
+import { SWRConfig } from 'swr';
 
 import Navigation from './navigation/Navigation';
 
 export default registerRootComponent(function App() {
   return (
-    <NavigationContainer>
-      <Navigation />
-    </NavigationContainer>
+    <SWRConfig
+      value={{ fetcher: (resource, init) => fetch(resource, init).then((res) => res.json()) }}
+    >
+      <NavigationContainer>
+        <Navigation />
+      </NavigationContainer>
+    </SWRConfig>
   );
 });

src/mobile/src/components/Post/Post.jsx

@@ -0,0 +1,52 @@
+import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import useSWR from 'swr';
+import RenderHtml from 'react-native-render-html';
+import { tagsStyles, baseStyles } from './styles/post';
+
+const styles = StyleSheet.create({
+  post: {
+    minHeight: 300,
+  },
+  title: {
+    color: '#A0D1FB',
+    fontSize: 28,
+    fontWeight: 'bold',
+    letterSpacing: -1.5,
+    paddingVertical: 16,
+    textAlign: 'center',
+  },
+});
+
+export default function Post({ postURL }) {
+  const { data: post, error } = useSWR(postURL);
+  const { width } = useWindowDimensions();
+
+  if (error) {
+    console.error(error);
+    return (
+      <View style={styles.post}>
+        <Text>Error Loading Post</Text>
+      </View>
+    );
+  }
+
+  if (!post) {
+    return (
+      <View style={styles.post}>
+        <Text>Loading</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.post}>
+      <Text style={styles.title}>{post.title}</Text>
+      <RenderHtml
+        contentWidth={width}
+        source={{ html: `${post.html}` }}
+        tagsStyles={tagsStyles}
+        baseStyle={baseStyles}
+      />
+    </View>
+  );
+}

src/mobile/src/components/Post/Posts.jsx

@@ -0,0 +1,53 @@
+import Constants from 'expo-constants';
+import { FlatList, View, Button, StyleSheet } from 'react-native';
+import useSWRInfinite from 'swr/infinite';
+import Post from './Post';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  divider: {
+    backgroundColor: '#9f9f9f',
+    height: 1,
+    marginHorizontal: 'auto',
+    marginVertical: 16,
+    width: '80%',
+  },
+});
+
+const POST_URL = Constants.manifest.extra.postsUrl;
+
+function Posts() {
+  const {
+    data: pages,
+    error,
+    setSize,
+    size,
+  } = useSWRInfinite((index) => `${POST_URL}?page=${index + 1}`);
+
+  if (error || !pages || !pages.length) {
+    return null;
+  }
+
+  const renderPost = ({ item }) =>
+    item.map((post) => (
+      <View key={post.id}>
+        <Post postURL={post.url} />
+        <View style={styles.divider} />
+      </View>
+    ));
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={pages}
+        renderItem={renderPost}
+        keyExtractor={(item, index) => index.toString()}
+      />
+      <Button title="Load More" onPress={() => setSize(size + 1)} />
+    </View>
+  );
+}
+
+export default Posts;

src/mobile/src/components/Post/styles/post.js

@@ -0,0 +1,64 @@
+const baseStyles = {
+  fontFamily: 'PT Serif, serif',
+  fontSize: 18,
+  letterSpacing: 0.5,
+  lineHeight: 18,
+  textAlign: 'left',
+};
+
+const tagsStyles = {
+  code: {
+    fontSize: 12,
+    fontFamily: "Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace",
+    borderRadius: 3,
+  },
+  p: {
+    margin: 16,
+  },
+  pre: {
+    fontSize: 15,
+    lineHeight: 15,
+    maxWidth: '100%',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  iframe: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  q: {
+    lineHeight: 1.5,
+    marginVertical: 10,
+    marginLeft: 50,
+    paddingLeft: 15,
+    display: 'block',
+    fontStyle: 'italic',
+  },
+  blockquote: {
+    lineHeight: 15,
+    marginTop: 10,
+    marginBottom: 10,
+    marginLeft: 50,
+    paddingLeft: 15,
+    display: 'block',
+    fontStyle: 'italic',
+  },
+  img: {
+    margin: '0 auto',
+    maxHeight: 80,
+    paddingTop: 20,
+    paddingBottom: 16,
+    display: 'block',
+    height: 'auto',
+  },
+  h1: {
+    fontSize: 24,
+    marginLeft: 10,
+    lineHeight: 25,
+  },
+};
+
+export { tagsStyles, baseStyles };

src/mobile/src/screens/HomeScreen.jsx

@@ -1,6 +1,7 @@
 import { StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import Banner from '../components/Banner/Banner';
+// import Banner from '../components/Banner/Banner';
+import Posts from '../components/Post/Posts';
 
 const styles = StyleSheet.create({
   container: {
@@ -15,7 +16,8 @@ const HomeScreen = ({ navigation }) => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Banner navigateToContact={navigateToContact} />
+      {/* <Banner navigateToContact={navigateToContact} /> */}
+      <Posts />
     </SafeAreaView>
   );
 };