Skip to content

components: generic linking for all centers and pages #818

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
stevekuznetsov wants to merge 2 commits into from
Closed

components: generic linking for all centers and pages #818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ac4dac
components: generic linking for all centers and pages
stevekuznetsov Oct 31, 2024
b26156a
work
stevekuznetsov Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 7 additions & 13 deletions App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ import * as messages from 'compiled-lang/en.json';
import {Button} from 'components/content/Button';
import {Center, VStack} from 'components/core';
import {KillSwitchMonitor} from 'components/KillSwitchMonitor';
import {getStateFromUrl} from 'components/linking';
import {Body, BodyBlack, Title3Black} from 'components/text';
import * as Linking from 'expo-linking';
import * as Updates from 'expo-updates';
Expand Down Expand Up @@ -492,21 +493,14 @@ const BaseApp: React.FunctionComponent<{
});

const linking = {
prefixes: [AvalancheCenterWebsites['NWAC'] + '/observations/#/view/'],
config: {
screens: {
Observations: {
screens: {
observation: 'observations/:id',
},
},
},
},
prefixes: [AvalancheCenterWebsites['NWAC']],
getStateFromPath: (path: string, opts: {initialRouteName?: string; screens: PathConfigMap<object>} | undefined) => {
if (initialUrl) {
// this url contains the whole url, like so: https://nwac.us/observations/#/observations/fb5bb19a-2b89-4c9c-91d2-eb673c5ab877
const url = new URL(initialUrl);
return getStateFromPath(path + '?share=true&share_url=' + url.origin + '/', opts);
Copy link
Copy Markdown
Collaborator

@yuliadub yuliadub Oct 31, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the back button navigation depends on these two params - so if you are going to fully take this out, that logic will need to change or it will be broken

Copy link
Copy Markdown
Collaborator Author

@stevekuznetsov stevekuznetsov Oct 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah I am hoping we don't go that route ... 🤞

const state = getStateFromUrl(logger, initialUrl);
if (state) {
return state;
}
return getStateFromPath(path, opts);
}
},
};
Expand Down
3 changes: 1 addition & 2 deletions app.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,7 @@
"data": [
{
"scheme": "https",
"host": "nwac.us",
"pathPrefix": "/observations/*"
"host": "nwac.us"
}
],
"category": ["BROWSABLE", "DEFAULT"]
Expand Down
41 changes: 4 additions & 37 deletions components/content/NavigationHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,18 @@ import {Title1Black, Title3Black} from 'components/text';
import React, {useCallback} from 'react';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {colorLookup} from 'theme';
import {AvalancheCenterID, AvalancheCenterWebsites, reverseLookup} from 'types/nationalAvalancheCenter';
import {AvalancheCenterID} from 'types/nationalAvalancheCenter';

export const NavigationHeader: React.FunctionComponent<
NativeStackHeaderProps & {
center_id: AvalancheCenterID;
large?: boolean;
}
> = ({navigation, route, options, back, center_id, large}) => {
let share: boolean = false;
let firstOpen: boolean = false;
let shareCenterId: AvalancheCenterID = center_id;
const shareParams: {share: boolean; share_url: string} = route?.params as {share: boolean; share_url: string};

if (shareParams.share) {
share = true;
// if back is false, means the obs screens have not been open yet
if (!back) {
firstOpen = true;
// set back to not be null since we want a shared obs to have a back button
back = {title: 'Observations'};
}

shareCenterId = reverseLookup(AvalancheCenterWebsites, shareParams.share_url) as AvalancheCenterID;
}

const title = getHeaderTitle(options, route.name);
const TextComponent = large ? Title1Black : Title3Black;
const insets = useSafeAreaInsets();
const goBack = useCallback(() => {
if (share) {
navigation.navigate('Observations');
}

navigation.goBack();
}, [navigation, share]);

// if app is open for the first time, say from a link that was shared that can open in the app, reset navigation to go back to home (map screen)
const reset = useCallback(
() =>
navigation.reset({
index: 0,
routes: [{name: 'Home'}],
}),
[navigation],
);
const goBack = useCallback(() => navigation.goBack(), [navigation]);

return (
// On phones with notches, the insets.top value will be non-zero and we don't need additional padding on top.
Expand All @@ -66,15 +33,15 @@ export const NavigationHeader: React.FunctionComponent<
backgroundColor="white"
iconStyle={{marginLeft: 0, marginRight: 0}}
style={{textAlign: 'center', borderColor: 'transparent', borderWidth: 1}}
onPress={firstOpen ? reset : goBack}
onPress={goBack}
/>
) : (
<View width={42} />
)}
<TextComponent textAlign="center" style={{flex: 1, borderColor: 'transparent', borderWidth: 1}}>
{title}
</TextComponent>
<AvalancheCenterLogo style={{height: 32, width: 32, resizeMode: 'cover', flex: 0, flexGrow: 0}} avalancheCenterId={share ? shareCenterId : center_id} />
<AvalancheCenterLogo style={{height: 32, width: 32, resizeMode: 'cover', flex: 0, flexGrow: 0}} avalancheCenterId={center_id} />
</HStack>
</View>
);
Expand Down
Loading