From 52a14f67580f0dfff0a45ed6ae91777b6124e113 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 | 57 ++++++++++++++++ src/mobile/src/components/Post/Posts.jsx | 51 ++++++++++++++ src/mobile/src/components/Post/styles/post.js | 67 +++++++++++++++++++ src/mobile/src/screens/ContactScreen.jsx | 12 ---- src/mobile/src/screens/HomeScreen.jsx | 6 +- 9 files changed, 197 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..4b9698b8a0 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 270e2fd761..e5e2427255 100644 --- a/src/mobile/package.json +++ b/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", 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..5c05d50f4d --- /dev/null +++ b/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 ( + + 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..5142702f56 --- /dev/null +++ b/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) => + + + + + ) + ); + + return( + + } + keyExtractor={(item, index) => index.toString()} + > + +