jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix onboarding state (#1959)

Browse source
This commit is contained in:
Delirium 2024-03-15 10:57:29 +01:00 • committed by GitHub
parent 11a1cf709f
commit 09d1820403
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/app/components/Onboarding/Onboarding.tsx
View file

@ -20,6 +20,13 @@ interface Props {
history: RouteComponentProps['history'];
}
const platformMap = {
'ios': 'mobile',
'web': 'web',
}
const Onboarding = (props: Props) => {
const platforms = [
{
@ -70,6 +77,7 @@ const Onboarding = (props: Props) => {
platforms={platforms}
platform={platform}
setPlatform={setPlatform}
platformMap={platformMap}
/>
</Route>
<Route exact strict path={route(OB_TABS.IDENTIFY_USERS)}>
@ -77,6 +85,7 @@ const Onboarding = (props: Props) => {
platforms={platforms}
platform={platform}
setPlatform={setPlatform}
platformMap={platformMap}
/>
</Route>
<Route exact strict path={route(OB_TABS.MANAGE_USERS)} component={ManageUsersTab} />

12
frontend/app/components/Onboarding/components/IdentifyUsersTab/IdentifyUsersTab.tsx
View file

@ -18,14 +18,15 @@ interface Props extends WithOnboardingProps {
value: string;
};
setPlatform: (val: { label: string; value: string }) => void;
platformMap: Record<string, any>;
}
function IdentifyUsersTab(props: Props) {
const { site, platforms, platform, setPlatform } = props;
const { site, platforms, platform, setPlatform, platformMap } = props;
React.useEffect(() => {
if (site.platform)
setPlatform(platforms.find(({ value }) => value === site.platform) || platforms[0]);
setPlatform(platforms.find(({ value }) => value === platformMap[site.platform]) ?? platform ?? platforms[0]);
}, [site]);
return (
@ -37,7 +38,7 @@ function IdentifyUsersTab(props: Props) {
</div>
<a
href="https://docs.openreplay.com/en/v1.10.0/installation/identify-user/"
href={`https://docs.openreplay.com/en/installation/identify-user${platform.value === "web" ? "/#with-npm" : "/#with-ios-app"}`}
target="_blank"
>
<Button variant="text-primary" icon="question-circle" className="ml-2">
@ -68,7 +69,10 @@ function IdentifyUsersTab(props: Props) {
{platform.value === 'web' ? (
<HighlightCode className="js" text={`tracker.setUserID('john@doe.com');`} />
) : (
<HighlightCode className="swift" text={`OpenReplay.shared.setUserID('john@doe.com');`} />
<HighlightCode
className="swift"
text={`OpenReplay.shared.setUserID('john@doe.com');`}
/>
)}
{platform.value === 'web' ? (
<div className="flex items-center my-2">

7
frontend/app/components/Onboarding/components/InstallOpenReplayTab/InstallOpenReplayTab.tsx
View file

@ -19,14 +19,15 @@ interface Props extends WithOnboardingProps {
value: string;
};
setPlatform: (val: { label: string; value: string }) => void;
platformMap: Record<string, any>
}
function InstallOpenReplayTab(props: Props) {
const { site, platforms, platform, setPlatform } = props;
const { site, platforms, platform, setPlatform, platformMap } = props;
React.useEffect(() => {
if (site.platform)
setPlatform(platforms.find(({ value }) => value === site.platform) || platforms[0]);
setPlatform(platforms.find(({ value }) => value === platformMap[site.platform]) || platforms[0]);
}, [site]);
return (
<>
@ -38,7 +39,7 @@ function InstallOpenReplayTab(props: Props) {
<ProjectFormButton />
</div>
</div>
<a href="https://docs.openreplay.com/en/sdk/" target="_blank">
<a href={platform.value === 'web' ? 'https://docs.openreplay.com/en/sdk/' : 'https://docs.openreplay.com/en/ios-sdk/'} target="_blank">
<Button variant="text-primary" icon="question-circle" className="ml-2">
See Documentation
</Button>