SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pr feedback: rename svg; remove unnecessary go to login screen logic; refactor save/getOnboardingViewed value function

Browse Source
This commit is contained in:
Pablo Velez Vidal
2022-11-16 15:01:06 +01:00
parent 6e3ed08163
commit bdbbd2cb36
11 changed files with 49 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/actions/app/global.ts
View File

@@ -1,6 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {logError} from '@app/utils/log';
import {GLOBAL_IDENTIFIERS} from '@constants/database';
import DatabaseManager from '@database/manager';
@@ -28,14 +29,15 @@ export const storeMultiServerTutorial = async (prepareRecordsOnly = false) => {
}
};
export const storeOnboardingViewedValue = async (prepareRecordsOnly = false) => {
export const storeOnboardingViewedValue = async (value = true) => {
try {
const {operator} = DatabaseManager.getAppDatabaseAndOperator();
return operator.handleGlobal({
globals: [{id: GLOBAL_IDENTIFIERS.ONBOARDING, value: 'true'}],
prepareRecordsOnly,
globals: [{id: GLOBAL_IDENTIFIERS.ONBOARDING, value}],
prepareRecordsOnly: false,
});
} catch (error) {
logError('storeOnboardingViewedValue', error);
return {error};
}
};

11
app/init/launch.ts
View File

@@ -10,7 +10,7 @@ import LocalConfig from '@assets/config.json';
import {Screens, DeepLink, Events, Launch, PushNotification} from '@constants';
import DatabaseManager from '@database/manager';
import {getActiveServerUrl, getServerCredentials, removeServerCredentials} from '@init/credentials';
import {onboadingViewedValue} from '@queries/app/global';
import {getOnboardingViewed} from '@queries/app/global';
import {getThemeForCurrentTeam} from '@queries/servers/preference';
import {getCurrentUserId} from '@queries/servers/system';
import {queryMyTeams} from '@queries/servers/team';
@@ -68,7 +68,6 @@ const launchAppFromNotification = async (notification: NotificationWithData) =>
* @returns a redirection to a screen, either onboarding, add_server, login or home depending on the scenario
*/
const launchApp = async (props: LaunchProps, resetNavigation = true) => {
const onboardingViewed = LocalConfig.ShowOnboarding ? await onboadingViewedValue() : false;
let serverUrl: string | undefined;
switch (props?.launchType) {
case Launch.DeepLink:
@@ -107,10 +106,6 @@ const launchApp = async (props: LaunchProps, resetNavigation = true) => {
hasCurrentUser = Boolean(currentUserId);
}
if (LocalConfig.ShowOnboarding && !onboardingViewed) {
return resetToOnboarding({...props, goToLoginServerUrl: serverUrl});
}
let launchType = props.launchType;
if (!hasCurrentUser) {
// migrating from v1
@@ -140,7 +135,9 @@ const launchApp = async (props: LaunchProps, resetNavigation = true) => {
}
}
if (!LocalConfig.ShowOnboarding || onboardingViewed) {
const onboardingViewed = LocalConfig.ShowOnboarding ? await getOnboardingViewed() : false;
if (onboardingViewed) {
return launchToServer(props, resetNavigation);
}
return resetToOnboarding(props);

13
app/managers/session_manager.ts
View File

@@ -5,6 +5,7 @@ import CookieManager, {Cookie} from '@react-native-cookies/cookies';
import {AppState, AppStateStatus, DeviceEventEmitter, Platform} from 'react-native';
import FastImage from 'react-native-fast-image';
import {storeOnboardingViewedValue} from '@actions/app/global';
import {cancelSessionNotification, logout, scheduleSessionNotification} from '@actions/remote/session';
import {Events, Launch} from '@constants';
import DatabaseManager from '@database/manager';
@@ -17,7 +18,7 @@ import NetworkManager from '@managers/network_manager';
import WebsocketManager from '@managers/websocket_manager';
import {queryServerName} from '@queries/app/servers';
import {getCurrentUser} from '@queries/servers/user';
import {getThemeFromState, resetToOnboarding} from '@screens/navigation';
import {getThemeFromState} from '@screens/navigation';
import EphemeralStore from '@store/ephemeral_store';
import {deleteFileCache, deleteFileCacheByDir} from '@utils/file';
import {addNewServer} from '@utils/server';
@@ -167,15 +168,19 @@ class SessionManager {
if (activeServerUrl === serverUrl) {
let displayName = '';
const launchType: LaunchType = Launch.Normal;
let launchType: LaunchType = Launch.AddServer;
if (!Object.keys(DatabaseManager.serverDatabases).length) {
EphemeralStore.theme = undefined;
launchType = Launch.Normal;
// set the onboardingViewed value to false so the launch will show the onboarding screen after all servers were removed
storeOnboardingViewedValue(false);
if (activeServerDisplayName) {
displayName = activeServerDisplayName;
}
}
resetToOnboarding({launchType, serverUrl, displayName});
relaunchApp({launchType, serverUrl, displayName}, true);
}
};

11
app/queries/app/global.ts
View File

@@ -28,14 +28,11 @@ export const observeMultiServerTutorial = (appDatabase: Database) => {
);
};
export const onboadingViewedValue = async (): Promise<boolean> => {
const appDatabase = DatabaseManager.appDatabase?.database;
if (!appDatabase) {
return false;
}
export const getOnboardingViewed = async (): Promise<boolean> => {
try {
const onboardingVal = await appDatabase.get<GlobalModel>(GLOBAL).find(GLOBAL_IDENTIFIERS.ONBOARDING);
return Boolean(onboardingVal?.value) || false;
const {database} = DatabaseManager.getAppDatabaseAndOperator();
const onboardingVal = await database.get<GlobalModel>(GLOBAL).find(GLOBAL_IDENTIFIERS.ONBOARDING);
return onboardingVal?.value ?? false;
} catch {
return false;
}

2
app/screens/navigation.ts
View File

@@ -281,7 +281,7 @@ export function resetToSelectServer(passProps: LaunchProps) {
});
}
export function resetToOnboarding(passProps: LaunchProps & {goToLoginServerUrl?: string}) {
export function resetToOnboarding(passProps: LaunchProps) {
const theme = getDefaultThemeByAppearance();
const isDark = tinyColor(theme.sidebarBg).isDark();
StatusBar.setBarStyle(isDark ? 'light-content' : 'dark-content');

2
app/screens/onboarding/illustrations/calls_svg.tsx → app/screens/onboarding/illustrations/calls.tsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import Svg, {Ellipse, Path, Mask, G} from 'react-native-svg';

2
app/screens/onboarding/illustrations/chat_svg.tsx → app/screens/onboarding/illustrations/chat.tsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import Svg, {
G,

2
app/screens/onboarding/illustrations/integrations_svg.tsx → app/screens/onboarding/illustrations/integrations.tsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import Svg, {
Rect,

2
app/screens/onboarding/illustrations/team_communication_svg.tsx → app/screens/onboarding/illustrations/team_communication.tsx
View File

@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import * as React from 'react';
import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import Svg, {Ellipse, Path, Mask, G, Defs, ClipPath} from 'react-native-svg';

95
app/screens/onboarding/index.tsx
View File

@@ -6,12 +6,10 @@ import {View, ListRenderItemInfo, useWindowDimensions, SafeAreaView, ScrollView,
import Animated, {Easing, useAnimatedRef, useAnimatedScrollHandler, useDerivedValue, useSharedValue} from 'react-native-reanimated';
import {storeOnboardingViewedValue} from '@actions/app/global';
import {fetchConfigAndLicense} from '@actions/remote/systems';
import {Screens} from '@app/constants';
import {loginOptions} from '@app/utils/server';
import Background from '@screens/background';
import {goToScreen, loginAnimationOptions} from '@screens/navigation';
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
import {makeStyleSheetFromTheme} from '@utils/theme';
import FooterButtons from './footer_buttons';
import Paginator from './paginator';
@@ -22,14 +20,27 @@ import type {LaunchProps} from '@typings/launch';
interface OnboardingProps extends LaunchProps {
theme: Theme;
goToLoginServerUrl: string;
}
const AnimatedSafeArea = Animated.createAnimatedComponent(SafeAreaView);
const getStyleSheet = makeStyleSheetFromTheme(() => ({
onBoardingContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'top',
},
scrollContainer: {
flex: 1,
alignItems: 'center',
height: '100%',
justifyContent: 'center',
},
}));
const Onboarding = ({
theme,
goToLoginServerUrl,
}: OnboardingProps) => {
const {width} = useWindowDimensions();
const styles = getStyleSheet(theme);
@@ -70,67 +81,12 @@ const Onboarding = ({
}
}, [currentIndex.value, slidesRef.current, moveToSlide]);
const initLogin = async () => {
const data = await fetchConfigAndLicense(goToLoginServerUrl, true);
if (data.error) {
return;
}
displayLogin(data.config!, data.license!);
};
const displayLogin = (config: ClientConfig, license: ClientLicense) => {
const {enabledSSOs, hasLoginForm, numberSSOs, ssoOptions} = loginOptions(config, license);
const displayName = 'displayName';
const passProps = {
config,
hasLoginForm,
license,
serverDisplayName: displayName,
serverUrl: goToLoginServerUrl,
ssoOptions,
theme,
};
const redirectSSO = !hasLoginForm && numberSSOs === 1;
const screen = redirectSSO ? Screens.SSO : Screens.LOGIN;
if (redirectSSO) {
// @ts-expect-error ssoType not in definition
passProps.ssoType = enabledSSOs[0];
}
goToScreen(screen, '', passProps, loginAnimationOptions());
};
const signInHandler = useCallback(() => {
const topBar = {
visible: true,
drawBehind: true,
translucid: true,
noBorder: true,
elevation: 0,
background: {
color: 'transparent',
},
backButton: {
color: changeOpacity(theme.centerChannelColor, 0.56),
},
scrollEdgeAppearance: {
active: true,
noBorder: true,
translucid: true,
},
};
// mark the onboarding as already viewed
storeOnboardingViewedValue();
if (goToLoginServerUrl) {
initLogin();
return;
}
goToScreen(Screens.SERVER, '', {theme}, {topBar});
}, [goToLoginServerUrl]);
goToScreen(Screens.SERVER, '', {theme}, loginAnimationOptions());
}, []);
const renderSlide = useCallback(({item, index}: ListRenderItemInfo<OnboardingItem>) => {
return (
@@ -191,19 +147,4 @@ const Onboarding = ({
);
};
const getStyleSheet = makeStyleSheetFromTheme(() => ({
onBoardingContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'top',
},
scrollContainer: {
flex: 1,
alignItems: 'center',
height: '100%',
justifyContent: 'center',
},
}));
export default Onboarding;

8
app/screens/onboarding/slides_data.tsx
View File

@@ -5,10 +5,10 @@ import React from 'react';
import {useIntl} from 'react-intl';
import {StyleSheet} from 'react-native';
import CallsSvg from './illustrations/calls_svg';
import ChatSvg from './illustrations/chat_svg';
import IntegrationsSvg from './illustrations/integrations_svg';
import TeamCommunicationSvg from './illustrations/team_communication_svg';
import CallsSvg from './illustrations/calls';
import ChatSvg from './illustrations/chat';
import IntegrationsSvg from './illustrations/integrations';
import TeamCommunicationSvg from './illustrations/team_communication';
export type OnboardingItem = {
id: string;