From 8b1a52a3aff5b8ce99fab48852dfe864c06c2a80 Mon Sep 17 00:00:00 2001 From: aeroreyna Date: Sun, 6 Mar 2022 21:45:35 -0800 Subject: [PATCH] Basic Navigation --- App.js | 23 ++--- Views/Feed.js | 66 +++++++++++++ Views/Login.js | 35 +++++++ components/Feed.js | 35 ------- components/Media.js | 1 - components/UserName.js | 4 +- package-lock.json | 208 +++++++++++++++++++++++++++++++++++++++++ package.json | 5 + 8 files changed, 329 insertions(+), 48 deletions(-) create mode 100644 Views/Feed.js create mode 100644 Views/Login.js delete mode 100644 components/Feed.js diff --git a/App.js b/App.js index a459d1d..b384a8a 100644 --- a/App.js +++ b/App.js @@ -3,9 +3,14 @@ import React, { useEffect, useState } from 'react'; import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native'; import API from './API.js'; import LoginForm from './components/Login.js'; -import Feed from './components/Feed.js'; import { Provider as PaperProvider } from 'react-native-paper'; import AwesomeIcon from 'react-native-vector-icons/FontAwesome'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import Login from "./Views/Login.js" +import Feed from "./Views/Feed.js" + +const Stack = createNativeStackNavigator(); export default function App() { let [isLoggedIn, setIsLoggedIn] = useState(false); @@ -16,16 +21,12 @@ export default function App() { }, []); return ( - , - }}> - - EMI Social LOGO - {!isLoggedIn && } - {isLoggedIn && } - - - + + + + + + ); } diff --git a/Views/Feed.js b/Views/Feed.js new file mode 100644 index 0000000..e1b3371 --- /dev/null +++ b/Views/Feed.js @@ -0,0 +1,66 @@ +import { StatusBar } from 'expo-status-bar'; +import React, { useState, useEffect } from 'react'; +import { View, ScrollView, StyleSheet, SafeAreaView } from 'react-native'; +import API from './../API.js'; +import Post from './../components/Post.js'; +import { Provider as PaperProvider } from 'react-native-paper'; +import AwesomeIcon from 'react-native-vector-icons/FontAwesome'; + + + +let Feed = ({ navigation, route }) => { + let [Me, setMeProfile] = useState({}); + let [Posts, setPosts] = useState([]); + useEffect(async () => { + navigation.setOptions({ title: "Loading..." }); + let r = await API.getMe(); + setMeProfile(r); + if (route.params && route.params.profileid) { + setPosts([]); + API.getPosts(route.params.profileid).then((data) => { + API.getUserProfile(route.params.profileid).then((profile)=>{ + navigation.setOptions({ title: profile.profile.firstName + " " + profile.profile.lastName }); + }); + setPosts(data); + }); + } else { + let posts = await API.getPosts(); + setPosts(posts); + navigation.setOptions({ title: "Feed" }); + } + //console.log(posts) + }, [route.params]); + + return ( + , + }}> + + + + { + Posts.map((post, i) => { + return ( + //{post.content} + + ) + }) + } + + + + + + ); +} + +export default Feed; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: "#edf2f7" + }, +}); diff --git a/Views/Login.js b/Views/Login.js new file mode 100644 index 0000000..0d98acb --- /dev/null +++ b/Views/Login.js @@ -0,0 +1,35 @@ +import { StatusBar } from 'expo-status-bar'; +import React, { useEffect, useState } from 'react'; +import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native'; +import API from './../API.js'; +import LoginForm from './../components/Login.js'; + +export default function App({navigation, route}) { + useEffect(async () => { + let r = await API.isLoggedIn(); + if(r) navigation.navigate('Feed') + }, []); + + return ( + , + }}> + + EMI Social LOGO + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + marginTop: 25, + paddingTop: 10, + backgroundColor: "#edf2f7" + }, +}); diff --git a/components/Feed.js b/components/Feed.js deleted file mode 100644 index df4cf02..0000000 --- a/components/Feed.js +++ /dev/null @@ -1,35 +0,0 @@ -import { StatusBar } from 'expo-status-bar'; -import React, { useState, useEffect } from 'react'; -import { Text, View, ScrollView, Button, StyleSheet } from 'react-native'; -import API from './../API.js'; -import Post from './Post.js' - - -let Feed = () => { - let [Me, setMeProfile] = useState({}); - let [Posts, setPosts] = useState([]); - useEffect(async () => { - let r = await API.getMe(); - setMeProfile(r); - let posts = await API.getPosts(); - setPosts(posts); - //console.log(posts) - }, []); - - return ( - - - { - Posts.map((post, i) => { - return ( - //{post.content} - - ) - }) - } - - - ); -} - -export default Feed; diff --git a/components/Media.js b/components/Media.js index bdc5a16..c5084e0 100644 --- a/components/Media.js +++ b/components/Media.js @@ -38,7 +38,6 @@ let Media = (props) => { const imagesTag = imagesTagF(props.content); const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage; const videosId = videoIdF(props.content); - console.log(videosId); const vimeo = videosId.length ? : undefined; return ( diff --git a/components/UserName.js b/components/UserName.js index cc12b14..c38f767 100644 --- a/components/UserName.js +++ b/components/UserName.js @@ -1,10 +1,12 @@ import React, { useState, useEffect } from 'react'; import { Text, View, ScrollView, Button, StyleSheet } from 'react-native'; import API from './../API.js'; +import { useNavigation } from '@react-navigation/native'; let UserName = (props) => { let [profile, setProfile] = useState({}); + const navigation = useNavigation(); useEffect(async () => { let p = await API.getUserProfile(props.profileid).catch(()=>{return {}}); @@ -12,7 +14,7 @@ let UserName = (props) => { }, [props.profileid]); return ( - {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName} + {navigation.navigate('Feed', {profileid: props.profileid})}} >{profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName} ); } diff --git a/package-lock.json b/package-lock.json index ccef570..93c7773 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2022,6 +2022,70 @@ "resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz", "integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w==" }, + "@react-navigation/core": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.1.tgz", + "integrity": "sha512-njysuiqztgvR1Z9Noxk2OGJfYtFGFDRyji5Vmm1jHzlql0m+q0wh1dUiyaIEtTyrhFXr/YNgdrKuiPaU9Jp8OA==", + "requires": { + "@react-navigation/routers": "^6.1.0", + "escape-string-regexp": "^4.0.0", + "nanoid": "^3.1.23", + "query-string": "^7.0.0", + "react-is": "^16.13.0" + }, + "dependencies": { + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, + "@react-navigation/elements": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.1.tgz", + "integrity": "sha512-jIDRJaG8YPIinl4hZXJu/W3TnhDe8hLYmGSEdL1mxZ1aoNMiApCBYkgTy11oq0EfK/koZd3DPSkJNbzBAQmPJw==" + }, + "@react-navigation/native": { + "version": "6.0.8", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.8.tgz", + "integrity": "sha512-6022M3+Btok3xJC/49B88er3SRrlDAZ4FdmGndhEVvBcGSHWmscU2qKCwFd0RY6A0AGCVmdIlXudrfdcdRAkpQ==", + "requires": { + "@react-navigation/core": "^6.1.1", + "escape-string-regexp": "^4.0.0", + "fast-deep-equal": "^3.1.3", + "nanoid": "^3.1.23" + }, + "dependencies": { + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + } + } + }, + "@react-navigation/native-stack": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.5.0.tgz", + "integrity": "sha512-X2sV+AKkqEl7k0ltjN4lMBfx+FsynrnUWkCTGiROyMRo4yWElK1jY3XSTsj5Cpso2/MUHdf9v/AOw0EgU58FsA==", + "requires": { + "@react-navigation/elements": "^1.3.1", + "warn-once": "^0.1.0" + } + }, + "@react-navigation/routers": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz", + "integrity": "sha512-8xJL+djIzpFdRW/sGlKojQ06fWgFk1c5jER9501HYJ12LF5DIJFr/tqBI2TJ6bk+y+QFu0nbNyeRC80OjRlmkA==", + "requires": { + "nanoid": "^3.1.23" + } + }, "@sideway/address": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz", @@ -3564,6 +3628,11 @@ } } }, + "fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" + }, "fast-glob": { "version": "3.2.7", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz", @@ -3627,6 +3696,11 @@ "to-regex-range": "^5.0.1" } }, + "filter-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz", + "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs=" + }, "finalhandler": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", @@ -5329,6 +5403,11 @@ "thenify-all": "^1.0.0" } }, + "nanoid": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", + "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==" + }, "nanomatch": { "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", @@ -5872,6 +5951,17 @@ "once": "^1.3.1" } }, + "query-string": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.1.tgz", + "integrity": "sha512-MplouLRDHBZSG9z7fpuAAcI7aAYjDLhtsiVZsevsfaHWDS2IDdORKbSd1kWUA+V4zyva/HZoSfpwnYMMQDhb0w==", + "requires": { + "decode-uri-component": "^0.2.0", + "filter-obj": "^1.1.0", + "split-on-first": "^1.0.0", + "strict-uri-encode": "^2.0.0" + } + }, "querystringify": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", @@ -5922,6 +6012,11 @@ "scheduler": "^0.20.1" } }, + "react-freeze": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.0.tgz", + "integrity": "sha512-yQaiOqDmoKqks56LN9MTgY06O0qQHgV4FUrikH357DydArSZHQhl0BJFqGKIZoTqi8JizF9Dxhuk1FIZD6qCaw==" + }, "react-google-material-icons": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/react-google-material-icons/-/react-google-material-icons-1.0.4.tgz", @@ -6070,6 +6165,104 @@ "react-native-iphone-x-helper": "^1.3.1" } }, + "react-native-safe-area-context": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.1.2.tgz", + "integrity": "sha512-35hLhtJRCZW0L2zTz0Wz3d0Oh6uYUiRWa/HvoITq7IvD8GkjjM97MKHSfVhC4N9ZNMzqXDuVfYBpHHisc9Z8+Q==" + }, + "react-native-screens": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.13.1.tgz", + "integrity": "sha512-xcrnuUs0qUrGpc2gOTDY4VgHHADQwp80mwR1prU/Q0JqbZN5W3koLhuOsT6FkSRKjR5t40l+4LcjhHdpqRB2HA==", + "requires": { + "react-freeze": "^1.0.0", + "warn-once": "^0.1.0" + } + }, + "react-native-vector-icons": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-9.1.0.tgz", + "integrity": "sha512-2AHZ/h9d/+rC0odz+OwbGNlc1Lik/pHhSixn4HfC8RtQ8CxfSBZ6gg7bTLcZhdSvZN+ZEGi30Fj+ZnOSQy+smg==", + "requires": { + "prop-types": "^15.7.2", + "yargs": "^16.1.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "cliui": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", + "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", + "requires": { + "string-width": "^4.2.0", + "strip-ansi": "^6.0.0", + "wrap-ansi": "^7.0.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "requires": { + "ansi-regex": "^5.0.1" + } + }, + "wrap-ansi": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", + "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } + }, + "y18n": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", + "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==" + }, + "yargs": { + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", + "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", + "requires": { + "cliui": "^7.0.2", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "require-directory": "^2.1.1", + "string-width": "^4.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^20.2.2" + } + }, + "yargs-parser": { + "version": "20.2.9", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", + "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" + } + } + }, "react-native-web": { "version": "0.17.1", "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz", @@ -6879,6 +7072,11 @@ "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz", "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==" }, + "split-on-first": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz", + "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==" + }, "split-string": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", @@ -6985,6 +7183,11 @@ "resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz", "integrity": "sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ=" }, + "strict-uri-encode": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", + "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" + }, "string-width": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", @@ -7368,6 +7571,11 @@ "makeerror": "1.0.12" } }, + "warn-once": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz", + "integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA==" + }, "wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index 7db2550..9f7c034 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "eject": "expo eject" }, "dependencies": { + "@react-navigation/native": "^6.0.8", + "@react-navigation/native-stack": "^6.5.0", "expo": "~43.0.2", "expo-status-bar": "~1.1.0", "react": "17.0.1", @@ -18,6 +20,9 @@ "react-native": "0.64.3", "react-native-autoheight-webview": "^1.6.1", "react-native-paper": "^4.11.2", + "react-native-safe-area-context": "^4.1.2", + "react-native-screens": "^3.13.1", + "react-native-vector-icons": "^9.1.0", "react-native-web": "0.17.1", "react-native-webview": "^11.17.2" },