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

@@ -27,10 +27,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,57 @@
+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: {
+    '-webkit-box-orient': 'vertical',
+    '-webkit-line-clamp': '2',
+    display: '-webkit-box',
+    fontSize: '2em',
+    fontWeight: 'bold',
+    letterSpacing: '-1.5px',
+    overflow: 'hidden',
+    paddingVertical: '1rem',
+    textAlign: 'start',
+  },
+})
+
+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,51 @@
+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: '1rem',
+    width: '80%',
+  },
+});
+
+const POST_URL = 'https://dev.api.telescope.cdot.systems/v1/posts' //Constants.manifest.extra.postsURL;
+
+function Posts() {
+  const {data: pages, error, setSize, size} = useSWRInfinite((index) => `${POST_URL}?page=${index + 1}&per_page=2`);
+
+  if (error || !pages || !pages.length) {
+    return null;
+  }
+
+  const RenderPost = ({ posts }) => (
+    posts.map((post) =>
+          <View key={post.id}>
+            <Post postURL={post.url} />
+            <View style={styles.divider} />
+          </View>
+    )
+  );
+
+  return(
+    <View style = {styles.container}>
+    <FlatList
+      data={pages}
+      renderItem={({item}) => <RenderPost posts = {item}/>}
+      keyExtractor={(item, index) => index.toString()}
+      >
+    </FlatList>
+    <Button title="Load More" onPress={() => setSize(size + 1)} />
+  </View>
+
+  );
+}
+
+export default Posts;

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

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+
+const baseStyles = {
+  fontFamily: 'PT Serif, serif',
+  fontSize: '1.8rem',
+  letterSpacing: '0.5px',
+  lineHeight: '1.6',
+  textAlign: 'left',
+};
+
+const tagsStyles = {
+  code: {
+    fontSize: '1.2rem',
+    fontFamily: "Menlo, Consolas, Monaco, 'Liberation Mono', 'Lucida Console', monospace",
+    borderRadius: 3,
+  },
+  p: {
+    margin: '1.2rem 0',
+  },
+  pre: {
+    fontSize: '1.5rem',
+    lineHeight: '1.5',
+    maxWidth: '100%',
+    overflow: 'auto',
+    paddingHorizontal: '1em',
+    paddingVertical: '0.5em',
+  },
+  iframe: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  q: {
+    lineHeight: 1.5,
+    marginVertical: 10,
+    marginLeft: '50px',
+    paddingLeft: '15px',
+    display: 'block',
+    fontStyle: 'italic',
+  },
+  blockquote: {
+    lineHeight: 1.5,
+    marginTop: '10px',
+    marginBottom: '10px',
+    marginLeft: '50px',
+    paddingLeft: '15px',
+    display: 'block',
+    fontStyle: 'italic',
+  },
+  img: {
+    margin: '0 auto',
+    maxHeight: '80vh',
+    paddingTop: '1.5rem',
+    paddingBottom: '1rem',
+    display: 'block',
+    height: 'auto',
+  },
+  h1: {
+    fontSize: '2em',
+    margin: '0 auto',
+    lineHeight: '1.6',
+  },
+};
+
+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>
   );
 };