From 2247d99d6612bb98279ea485d53dea52cf71715c Mon Sep 17 00:00:00 2001 From: Chowdhury Foysal Ahamed Date: Fri, 18 Aug 2023 18:44:05 +0200 Subject: [PATCH] :sparkles: Add modal describing offline behavior --- src/state/models/ui/shell.ts | 5 ++ src/view/com/modals/Modal.tsx | 5 +- src/view/com/modals/Modal.web.tsx | 3 ++ src/view/com/offline/DetailsModal.tsx | 54 +++++++++++++++++++ .../Indicator.tsx} | 32 ++++++++--- src/view/shell/desktop/LeftNav.tsx | 2 - src/view/shell/index.tsx | 2 +- src/view/shell/index.web.tsx | 13 ++--- 8 files changed, 98 insertions(+), 18 deletions(-) create mode 100644 src/view/com/offline/DetailsModal.tsx rename src/view/com/{util/OfflineIndicator.tsx => offline/Indicator.tsx} (61%) diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts index 92d028c79f..53d8ffaecd 100644 --- a/src/state/models/ui/shell.ts +++ b/src/state/models/ui/shell.ts @@ -36,6 +36,10 @@ export interface ProfilePreviewModal { did: string } +export interface OfflineDetailsModal { + name: 'offline-details' +} + export interface ServerInputModal { name: 'server-input' initialService: string @@ -180,6 +184,7 @@ export type Modal = // Generic | ConfirmModal + | OfflineDetailsModal interface LightboxModel {} diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index efd06412dc..a68025fce1 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -31,6 +31,7 @@ import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettin import * as PreferencesHomeFeed from './PreferencesHomeFeed' import * as OnboardingModal from './OnboardingModal' import * as ModerationDetailsModal from './ModerationDetails' +import * as OfflineDetailsModal from '../offline/DetailsModal' const DEFAULT_SNAPPOINTS = ['90%'] @@ -140,10 +141,12 @@ export const ModalsContainer = observer(function ModalsContainer() { } else if (activeModal?.name === 'moderation-details') { snapPoints = ModerationDetailsModal.snapPoints element = + } else if (activeModal?.name === 'offline-details') { + snapPoints = OfflineDetailsModal.snapPoints + element = } else { return null } - if (snapPoints[0] === 'fullscreen') { return ( diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 0e28b16186..fcd8510b1c 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -28,6 +28,7 @@ import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguages import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' import * as OnboardingModal from './OnboardingModal' import * as ModerationDetailsModal from './ModerationDetails' +import * as OfflineDetailsModal from '../offline/DetailsModal' import * as PreferencesHomeFeed from './PreferencesHomeFeed' @@ -113,6 +114,8 @@ function Modal({modal}: {modal: ModalIface}) { element = } else if (modal.name === 'moderation-details') { element = + } else if (modal.name === 'offline-details') { + element = } else { return null } diff --git a/src/view/com/offline/DetailsModal.tsx b/src/view/com/offline/DetailsModal.tsx new file mode 100644 index 0000000000..1ec01e3d59 --- /dev/null +++ b/src/view/com/offline/DetailsModal.tsx @@ -0,0 +1,54 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' + +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isDesktopWeb} from 'platform/detection' +import {useStores} from 'state/index' +import {Text} from 'view/com/util/text/Text' +import {Button} from 'view/com/util/forms/Button' + +export const snapPoints = [300] +export const Component = () => { + const pal = usePalette('default') + const store = useStores() + + return ( + + + + + + Offline Mode + + + While BlueSky works best when you're connected to the internet, you can + still browse around while offline. + + + We will try out best to sync your basic interactions such as likes and + follows once you're back online. + + + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingBottom: isDesktopWeb ? 0 : 10, + }, + btn: { + marginHorizontal: 15, + marginTop: 20, + }, +}) diff --git a/src/view/com/util/OfflineIndicator.tsx b/src/view/com/offline/Indicator.tsx similarity index 61% rename from src/view/com/util/OfflineIndicator.tsx rename to src/view/com/offline/Indicator.tsx index 6c07aed9d0..3520750153 100644 --- a/src/view/com/util/OfflineIndicator.tsx +++ b/src/view/com/offline/Indicator.tsx @@ -1,5 +1,5 @@ import React, {useEffect, useState} from 'react' -import {StyleSheet, View, ViewStyle} from 'react-native' +import {StyleSheet, TouchableOpacity, View, ViewStyle} from 'react-native' import NetInfo from '@react-native-community/netinfo' import { FontAwesomeIcon, @@ -10,9 +10,16 @@ import {usePalette} from 'lib/hooks/usePalette' import {Text} from 'view/com/util/text/Text' import {s} from 'lib/styles' import {isDesktopWeb, isNative} from 'platform/detection' +import {useStores} from 'state/index' const Indicator = () => { + const store = useStores() const pal = usePalette('error') + const showOfflineDetails = () => { + store.shell.openModal({ + name: 'offline-details', + }) + } const containerStyles: ViewStyle[] = [ styles.container, @@ -22,10 +29,15 @@ const Indicator = () => { ] return ( - + You're offline - + ) } @@ -39,14 +51,14 @@ export const OfflineIndicator = () => { return () => unsubscribe() }, []) - if (isConnected) return null + if (!isConnected) return null if (isNative) { return } return ( - + ) @@ -56,7 +68,15 @@ const styles = StyleSheet.create({ container: { width: isNative ? s.window.width : undefined, justifyContent: 'center', - height: 20, + height: 18, + }, + // This follows the positioning of the left nav bar on desktop + desktopWrapper: { + position: 'absolute', + top: 0, + zIndex: 1, + right: 'calc(50vw + 312px)', + width: 220, }, mobileWrapper: { position: 'absolute', diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 0b82d518c4..700857bbed 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -37,7 +37,6 @@ import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' import {router} from '../../../routes' import {makeProfileLink} from 'lib/routes/links' -import {OfflineIndicator} from 'view/com/util/OfflineIndicator' const ProfileCard = observer(() => { const store = useStores() @@ -180,7 +179,6 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() { return ( - {store.session.hasSession && } { const store = useStores() diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 9e0e8bfcc8..7a36a38cc5 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -16,7 +16,8 @@ import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' import {BottomBarWeb} from './bottom-bar/BottomBarWeb' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' -import {OfflineIndicator} from 'view/com/util/OfflineIndicator' +import {OfflineIndicator} from 'view/com/offline/Indicator' +import {isMobileWeb} from 'platform/detection' const ShellInner = observer(() => { const store = useStores() @@ -37,9 +38,9 @@ const ShellInner = observer(() => { + {isDesktop && } {isDesktop && store.session.hasSession && ( <> - @@ -52,12 +53,8 @@ const ShellInner = observer(() => { quote={store.shell.composerOpts?.quote} onPost={store.shell.composerOpts?.onPost} /> - {!isDesktop && ( - <> - - - - )} + {!isDesktop && } + {isMobileWeb && } {!isDesktop && store.shell.isDrawerOpen && (