diff --git a/app/mobile/src/access/admin/useAdmin.hook.js b/app/mobile/src/access/admin/useAdmin.hook.js index 283cb783..27530e40 100644 --- a/app/mobile/src/access/admin/useAdmin.hook.js +++ b/app/mobile/src/access/admin/useAdmin.hook.js @@ -66,8 +66,9 @@ export function useAdmin() { await setNodeStatus(state.server, state.token); } const config = await getNodeConfig(state.server, state.token); + const { server, token } = state; updateState({ busy: false }); - navigate('/dashboard'); + navigate('/dashboard', { state: { config, server, token }}); } catch (err) { console.log(err); diff --git a/app/mobile/src/api/getAccountImageUrl.js b/app/mobile/src/api/getAccountImageUrl.js index e164919f..5ba95bf9 100644 --- a/app/mobile/src/api/getAccountImageUrl.js +++ b/app/mobile/src/api/getAccountImageUrl.js @@ -1,4 +1,4 @@ -export function getAccountImageUrl(token, accountId) { - return `/admin/accounts/${accountId}/image?token=${token}` +export function getAccountImageUrl(server, token, accountId) { + return `https://${server}/admin/accounts/${accountId}/image?token=${token}` } diff --git a/app/mobile/src/api/getNodeAccounts.js b/app/mobile/src/api/getNodeAccounts.js index 7d7a43de..a86fa530 100644 --- a/app/mobile/src/api/getNodeAccounts.js +++ b/app/mobile/src/api/getNodeAccounts.js @@ -1,7 +1,7 @@ import { checkResponse, fetchWithTimeout } from './fetchUtil'; -export async function getNodeAccounts(token) { - let accounts = await fetchWithTimeout(`/admin/accounts?token=${token}`, { method: 'GET' }); +export async function getNodeAccounts(server, token) { + let accounts = await fetchWithTimeout(`https://${server}/admin/accounts?token=${token}`, { method: 'GET' }); checkResponse(accounts); return await accounts.json(); } diff --git a/app/mobile/src/api/setNodeConfig.js b/app/mobile/src/api/setNodeConfig.js index 11da253e..65eb10aa 100644 --- a/app/mobile/src/api/setNodeConfig.js +++ b/app/mobile/src/api/setNodeConfig.js @@ -1,8 +1,8 @@ import { checkResponse, fetchWithTimeout } from './fetchUtil'; -export async function setNodeConfig(token, config) { +export async function setNodeConfig(server, token, config) { let body = JSON.stringify(config); - let settings = await fetchWithTimeout(`/admin/config?token=${token}`, { method: 'PUT', body }); + let settings = await fetchWithTimeout(`https://${server}/admin/config?token=${token}`, { method: 'PUT', body }); checkResponse(settings); } diff --git a/app/mobile/src/dashboard/Dashboard.jsx b/app/mobile/src/dashboard/Dashboard.jsx index dea83820..17dbe3a7 100644 --- a/app/mobile/src/dashboard/Dashboard.jsx +++ b/app/mobile/src/dashboard/Dashboard.jsx @@ -1,4 +1,51 @@ -export function Dashboard() { - return <> +import { TouchableOpacity, View, Text, Modal, FlatList } from 'react-native'; +import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; +import Ionicons from '@expo/vector-icons/AntDesign'; +import { styles } from './Dashboard.styled'; +import { useLocation } from 'react-router-dom'; +import { useDashboard } from './useDashboard.hook'; +import { Logo } from 'utils/Logo'; + +export function Dashboard(props) { + + const location = useLocation(); + const { config, server, token } = location.state; + const { state, actions } = useDashboard(config, server, token); + + return ( + + + Accounts + + + + + + + + + + + item.accountId} + renderItem={({ item }) => ( + + + + { item.name } + { item.handle } + + + + + + + + )} + /> + + + ) } diff --git a/app/mobile/src/dashboard/Dashboard.styled.js b/app/mobile/src/dashboard/Dashboard.styled.js new file mode 100644 index 00000000..560e970c --- /dev/null +++ b/app/mobile/src/dashboard/Dashboard.styled.js @@ -0,0 +1,87 @@ +import { StyleSheet } from 'react-native'; +import { Colors } from 'constants/Colors'; + +export const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + display: 'flex', + flexDirection: 'column', + backgroundColor: Colors.formBackground, + }, + header: { + paddingTop: 24, + paddingBottom: 4, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: Colors.grey, + }, + headerLabel: { + paddingLeft: 16, + fontSize: 24, + color: Colors.text, + }, + icon: { + color: Colors.primary, + paddingLeft: 16, + }, + end: { + flexGrow: 1, + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-end', + paddingRight: 32, + }, + accounts: { + borderBottomWidth: 1, + borderColor: Colors.grey, + flexGrow: 1, + flexShrink: 1, + minHeight: 0, + }, + account: { + width: '100%', + height: 64, + display: 'flex', + flexDirection: 'row', + paddingLeft: 24, + paddingRight: 24, + alignItems: 'center', + }, + details: { + paddingLeft: 16, + display: 'flex', + flexDirection: 'column', + }, + list: { + paddingTop: 8, + }, + name: { + fontSize: 16, + color: Colors.text, + }, + handle: { + fontSize: 16, + color: Colors.text, + }, + control: { + flexGrow: 1, + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-end', + }, + delete: { + color: Colors.alert, + paddingLeft: 16, + }, + unlock: { + color: Colors.alert, + paddingLeft: 16, + }, + disable: { + color: Colors.pending, + paddingLeft: 16, + }, +}); diff --git a/app/mobile/src/dashboard/useDashboard.hook.js b/app/mobile/src/dashboard/useDashboard.hook.js new file mode 100644 index 00000000..757ba362 --- /dev/null +++ b/app/mobile/src/dashboard/useDashboard.hook.js @@ -0,0 +1,53 @@ +import { useState, useEffect, useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { AppContext } from 'context/AppContext'; +import { getNodeStatus } from 'api/getNodeStatus'; +import { setNodeStatus } from 'api/setNodeStatus'; +import { getNodeConfig } from 'api/getNodeConfig'; +import { getNodeAccounts } from 'api/getNodeAccounts'; +import { getAccountImageUrl } from 'api/getAccountImageUrl'; + +export function useDashboard(config, server, token) { + + const [state, setState] = useState({ + config: null, + accounts: [], + }); + + const navigate = useNavigate(); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + const setAccountItem = (item) => { + const { name, handle, imageSet, accountId } = item; + + let logo; + if (imageSet) { + logo = getAccountImageUrl(server, token, accountId); + } + else { + logo = 'avatar'; + } + return { logo, name, handle, accountId }; + } + + const refreshAccounts = async () => { + const accounts = await getNodeAccounts(server, token); + updateState({ accounts: accounts.map(setAccountItem) }); + }; + + useEffect(() => { + refreshAccounts(); + }, []); + + const actions = { + logout: () => { + navigate('/admin'); + }, + }; + + return { state, actions }; +} +