diff --git a/app/mobile/src/context/useStoreContext.hook.js b/app/mobile/src/context/useStoreContext.hook.js index 27432c77..74e9f824 100644 --- a/app/mobile/src/context/useStoreContext.hook.js +++ b/app/mobile/src/context/useStoreContext.hook.js @@ -1,7 +1,7 @@ import { useEffect, useState, useRef, useContext } from 'react'; import SQLite from "react-native-sqlite-storage"; -const DATABAG_DB = 'databag_v045.db'; +const DATABAG_DB = 'databag_v046.db'; export function useStoreContext() { const [state, setState] = useState({}); @@ -44,6 +44,15 @@ export function useStoreContext() { const dataId = `${guid}_profile`; await db.current.executeSql("INSERT OR REPLACE INTO app (key, value) values (?, ?);", [dataId, encodeObject(profile)]); }, + getFirstRun: async (guid) => { + const dataId = `${guid}_first_run`; + const firstRun = await getAppValue(db.current, dataId, { set: true }); + return firstRun.set; + }, + setFirstRun: async (guid) => { + const dataId = `${guid}_first_run`; + await db.current.executeSql("INSERT OR REPLACE INTO app (key, value) values (?, ?);", [dataId, encodeObject({ set: false })]); + }, getCardRequestStatus: async (guid) => { const dataId = `${guid}_card_status`; return await getAppValue(db.current, dataId, {}); diff --git a/app/mobile/src/session/Session.jsx b/app/mobile/src/session/Session.jsx index 2f830a42..4c6b5727 100644 --- a/app/mobile/src/session/Session.jsx +++ b/app/mobile/src/session/Session.jsx @@ -1,4 +1,4 @@ -import { View, TouchableOpacity, StatusBar, Text } from 'react-native'; +import { View, TouchableOpacity, StatusBar, Text, Image } from 'react-native'; import { useState, useEffect, useContext } from 'react'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; @@ -24,6 +24,7 @@ import { CommonActions } from '@react-navigation/native'; import { ConversationContext } from 'context/ConversationContext'; import { ProfileIcon } from './profileIcon/ProfileIcon'; import { CardsIcon } from './cardsIcon/CardsIcon'; +import splash from 'images/session.png'; const ConversationStack = createStackNavigator(); const ProfileStack = createStackNavigator(); @@ -344,42 +345,71 @@ export function Session() { const [cardsActive, setCardsActive] = useState(false); return ( - - { state.tabbed === false && ( - }> - - {(props) => } - - + + { state.firstRun == true && ( + + + Welcome To Databag + + + + + + Setup Your Profile + + + + Connect With People + + + + Start a Conversation + + + Get Started + + + )} - { state.tabbed === true && ( - setCardsActive(e?.data?.state?.index === 2) }} - screenOptions={({ route }) => ({ - tabBarStyle: styles.tabBar, - headerShown: false, - tabBarIcon: ({ focused, color, size }) => { - if (route.name === 'Profile') { - return - } - if (route.name === 'Conversation') { - return ; - } - if (route.name === 'Contacts') { - return ; - } - }, - tabBarShowLabel: false, - tabBarActiveTintColor: Colors.white, - tabBarInactiveTintColor: Colors.disabled, - })}> - - - - + { state.firstRun == false && ( + + { state.tabbed === false && ( + }> + + {(props) => } + + + )} + { state.tabbed === true && ( + setCardsActive(e?.data?.state?.index === 2) }} + screenOptions={({ route }) => ({ + tabBarStyle: styles.tabBar, + headerShown: false, + tabBarIcon: ({ focused, color, size }) => { + if (route.name === 'Profile') { + return + } + if (route.name === 'Conversation') { + return ; + } + if (route.name === 'Contacts') { + return ; + } + }, + tabBarShowLabel: false, + tabBarActiveTintColor: Colors.white, + tabBarInactiveTintColor: Colors.disabled, + })}> + + + + + )} + + )} - ); } diff --git a/app/mobile/src/session/Session.styled.js b/app/mobile/src/session/Session.styled.js index 45709b48..4fa6da1e 100644 --- a/app/mobile/src/session/Session.styled.js +++ b/app/mobile/src/session/Session.styled.js @@ -2,10 +2,64 @@ import { StyleSheet } from 'react-native'; import { Colors } from 'constants/Colors'; export const styles = StyleSheet.create({ + body: { + width: '100%', + height: '100%', + backgroundColor: Colors.formBackground, + }, container: { width: '100%', height: '100%', }, + firstRun: { + width: '100%', + height: '100%', + backgroundColor: Colors.background, + alignItems: 'center', + justifyContent: 'center', + }, + splash: { + width: '100%', + height: '100%', + maxWidth: '80%', + maxHeight: '50%', + }, + steps: { + flexGrow: 1, + display: 'flex', + justifyContent: 'center', + }, + step: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + paddingBottom: 12, + }, + titleText: { + color: Colors.white, + fontSize: 20, + fontWeight: 'bold', + }, + title: { + flexGrow: 1, + justifyContent: 'center', + }, + stepText: { + color: Colors.white, + paddingLeft: 16, + fontSize: 16, + }, + start: { + marginTop: 16, + padding: 8, + backgroundColor: Colors.primary, + borderRadius: 4, + display: 'flex', + alignItems: 'center', + }, + startText: { + color: Colors.white, + }, tabBar: { backgroundColor: Colors.primary, }, diff --git a/app/mobile/src/session/useSession.hook.js b/app/mobile/src/session/useSession.hook.js index d803e2e5..14089501 100644 --- a/app/mobile/src/session/useSession.hook.js +++ b/app/mobile/src/session/useSession.hook.js @@ -2,6 +2,7 @@ import { useRef, useState, useEffect, useContext } from 'react'; import { useWindowDimensions } from 'react-native'; import { useNavigate } from 'react-router-dom'; import config from 'constants/Config'; +import { StoreContext } from 'context/StoreContext'; export function useSession() { @@ -11,8 +12,10 @@ export function useSession() { baseWidth: '33%', cardId: null, converstaionId: null, + firstRun: null, }); + const store = useContext(StoreContext); const dimensions = useWindowDimensions(); const navigate = useNavigate(); const tabbed = useRef(null); @@ -21,6 +24,15 @@ export function useSession() { setState((s) => ({ ...s, ...value })); } + useEffect(() => { + checkFirstRun(); + }, []); + + const checkFirstRun = async () => { + const firstRun = await store.actions.getFirstRun(); + updateState({ firstRun }); + } + useEffect(() => { if (tabbed.current !== true) { if (dimensions.width > config.tabbedWidth) { @@ -43,7 +55,11 @@ export function useSession() { const actions = { setCardId: (cardId) => { updateState({ cardId }); - } + }, + clearFirstRun: () => { + updateState({ firstRun: false }); + store.actions.setFirstRun(); + }, }; return { state, actions };