rendering dashboard

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);

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}`
 }
 

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();
 }

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);
 }
 

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 (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.headerLabel}>Accounts</Text>
+        <Ionicons style={styles.icon} name={'reload1'} size={24} />        
+        <Ionicons style={styles.icon} name={'setting'} size={24} />
+        <TouchableOpacity onPress={actions.logout}>
+          <Ionicons style={styles.icon} name={'logout'} size={24} /> 
+        </TouchableOpacity>
+        <View style={styles.end}>       
+          <Ionicons style={styles.icon} name={'adduser'} size={24} /> 
+        </View>       
+      </View>
+      <View style={styles.accounts}>
+        <FlatList style={styles.lit} 
+          data={state.accounts}
+          keyExtractor={item => item.accountId}
+          renderItem={({ item }) => (
+            <View style={styles.account}>
+              <Logo src={item.logo} width={48} height={48} radius={6} />
+              <View style={styles.details}>
+                <Text style={styles.name}>{ item.name }</Text>
+                <Text style={styles.handle}>{ item.handle }</Text>
+              </View>
+              <View style={styles.control}>
+                <Ionicons style={styles.icon} name={'unlock'} size={20} /> 
+                <Ionicons style={styles.disable} name={'closecircleo'} size={20} /> 
+                <Ionicons style={styles.delete} name={'deleteuser'} size={20} /> 
+              </View>
+            </View>
+          )}
+        />
+      </View>
+    </SafeAreaView>
+  )
 }
 

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,
+  },
+});

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 };
+}
+