From 0972760e8c029e9d6f063b345744ff62af6fb6be Mon Sep 17 00:00:00 2001 From: tpmai22 Date: Wed, 6 Apr 2022 20:12:58 -0400 Subject: [PATCH] Loading post for mobile alpha version: . Basic style for post . Loading post using FlatList Co-author: Duke Manh --- src/mobile/.env.development | 7 +- src/mobile/app.config.js | 1 + src/mobile/package.json | 4 +- src/mobile/src/App.jsx | 11 +++- src/mobile/src/components/Post/Post.jsx | 52 +++++++++++++++ src/mobile/src/components/Post/Posts.jsx | 53 +++++++++++++++ src/mobile/src/components/Post/styles/post.js | 64 +++++++++++++++++++ src/mobile/src/screens/ContactScreen.jsx | 12 ---- src/mobile/src/screens/HomeScreen.jsx | 6 +- 9 files changed, 191 insertions(+), 19 deletions(-) create mode 100644 src/mobile/src/components/Post/Post.jsx create mode 100644 src/mobile/src/components/Post/Posts.jsx create mode 100644 src/mobile/src/components/Post/styles/post.js delete mode 100644 src/mobile/src/screens/ContactScreen.jsx diff --git a/src/mobile/.env.development b/src/mobile/.env.development index 9bfb00a7a9..e1d81279fb 100644 --- a/src/mobile/.env.development +++ b/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' diff --git a/src/mobile/app.config.js b/src/mobile/app.config.js index 5cf7941fa1..5c60e7e3e1 100644 --- a/src/mobile/app.config.js +++ b/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, }, }, }; diff --git a/src/mobile/package.json b/src/mobile/package.json index 7cfb0840d3..026ddd4dfa 100644 --- a/src/mobile/package.json +++ b/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", diff --git a/src/mobile/src/App.jsx b/src/mobile/src/App.jsx index 926de4ccb9..85500bbb79 100644 --- a/src/mobile/src/App.jsx +++ b/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 ( - - - + fetch(resource, init).then((res) => res.json()) }} + > + + + + ); }); diff --git a/src/mobile/src/components/Post/Post.jsx b/src/mobile/src/components/Post/Post.jsx new file mode 100644 index 0000000000..09116d250a --- /dev/null +++ b/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 ( + + Error Loading Post + + ); + } + + if (!post) { + return ( + + Loading + + ); + } + + return ( + + {post.title} + + + ); +} diff --git a/src/mobile/src/components/Post/Posts.jsx b/src/mobile/src/components/Post/Posts.jsx new file mode 100644 index 0000000000..dc429aad71 --- /dev/null +++ b/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) => ( + + + + + )); + + return ( + + index.toString()} + /> +