fix: name and label

2 weeks ago · f09375b447
parent 6c02da0b35
commit f09375b447
9 changed files with 42 additions and 38 deletions
--- a/src/components/AuthenticationFlow/EmailLoginForm.tsx
+++ b/src/components/AuthenticationFlow/EmailLoginForm.tsx
@ -2,8 +2,7 @@ import Cookies from 'js-cookie';
 import type { FormEvent } from 'react';
 import { useId, useState } from 'react';
 import { httpPost } from '../../lib/http';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount';
+import { FIRST_LOGIN_PARAM, setAuthToken } from '../../lib/jwt';

 type EmailLoginFormProps = {
  isDisabled?: boolean;
@ -40,7 +39,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
      const currentLocation = window.location.href;
      const url = new URL(currentLocation, window.location.origin);
      if (response?.isNewUser) {
-        url.searchParams.set(FIRST_LOGIN_TAG, '1');
+        url.searchParams.set(FIRST_LOGIN_PARAM, '1');
      }
      window.location.href = url.toString();
      return;
--- a/src/components/AuthenticationFlow/GitHubButton.tsx
+++ b/src/components/AuthenticationFlow/GitHubButton.tsx
@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
-import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { triggerUtmRegistration } from '../../lib/browser.ts';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount.tsx';

 type GitHubButtonProps = {
  isDisabled?: boolean;
@ -78,7 +76,7 @@ export function GitHubButton(props: GitHubButtonProps) {

        const url = new URL(redirectUrl, window.location.origin);
        if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
        }
        window.location.href = url.toString();
      })
--- a/src/components/AuthenticationFlow/GoogleButton.tsx
+++ b/src/components/AuthenticationFlow/GoogleButton.tsx
@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
@ -8,7 +8,6 @@ import {
  getStoredUtmParams,
  triggerUtmRegistration,
 } from '../../lib/browser.ts';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount.tsx';

 type GoogleButtonProps = {
  isDisabled?: boolean;
@ -82,7 +81,7 @@ export function GoogleButton(props: GoogleButtonProps) {

        const url = new URL(redirectUrl, window.location.origin);
        if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
        }
        window.location.href = url.toString();
      })
--- a/src/components/AuthenticationFlow/LinkedInButton.tsx
+++ b/src/components/AuthenticationFlow/LinkedInButton.tsx
@ -1,11 +1,10 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { Spinner } from '../ReactIcons/Spinner.tsx';
 import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 import { triggerUtmRegistration } from '../../lib/browser.ts';
-import { FIRST_LOGIN_TAG } from './TriggerVerifyAccount.tsx';

 type LinkedInButtonProps = {
  isDisabled?: boolean;
@ -77,7 +76,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {

        const url = new URL(redirectUrl, window.location.origin);
        if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
        }
        window.location.href = url.toString();
      })
--- a/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
+++ b/src/components/AuthenticationFlow/TriggerVerifyAccount.tsx
@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { httpPost } from '../../lib/http';
-import { TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
+import { FIRST_LOGIN_PARAM, TOKEN_COOKIE_NAME, setAuthToken } from '../../lib/jwt';
 import { Spinner } from '../ReactIcons/Spinner';
 import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
 import { triggerUtmRegistration } from '../../lib/browser.ts';

-export const FIRST_LOGIN_TAG = 'fl' as const;
-
 export function TriggerVerifyAccount() {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');
@ -35,7 +33,7 @@ export function TriggerVerifyAccount() {

        const url = new URL('/', window.location.origin);
        if (response?.isNewUser) {
-          url.searchParams.set(FIRST_LOGIN_TAG, '1');
+          url.searchParams.set(FIRST_LOGIN_PARAM, '1');
        }
        window.location.href = url.toString();
      })
--- a/src/components/ShareIcons/ShareIcons.tsx
+++ b/src/components/ShareIcons/ShareIcons.tsx
@ -6,12 +6,14 @@ import { RedditIcon } from '../ReactIcons/RedditIcon';
 import { TwitterIcon } from '../ReactIcons/TwitterIcon';

 type ShareIconsProps = {
+  resourceId: string;
+  resourceType: string;
  pageUrl: string;
  description: string;
 };

 export function ShareIcons(props: ShareIconsProps) {
-  const { pageUrl, description } = props;
+  const { pageUrl, description, resourceType, resourceId } = props;

  const shareIconsRef = useRef<HTMLDivElement>(null);

@ -73,26 +75,30 @@ export function ShareIcons(props: ShareIconsProps) {
      ref={shareIconsRef}
    >
      <div className="sticky top-[100px] flex flex-col items-center gap-1.5">
-        {icons.map((icon, index) => (
-          <a
-            key={index}
-            href={icon.url}
-            target="_blank"
-            className={cn(
-              'text-gray-500 hover:text-gray-700',
-              index === 0 && 'mt-0.5',
-            )}
-            onClick={() => {
-              window.fireEvent({
-                category: 'RoadmapShareLink',
-                action: 'Roadmap Share Link Clicked',
-                label: icon.url,
-              });
-            }}
-          >
-            {icon.icon}
-          </a>
-        ))}
+        {icons.map((icon, index) => {
+          const host = new URL(icon.url).host;
+
+          return (
+            <a
+              key={index}
+              href={icon.url}
+              target="_blank"
+              className={cn(
+                'text-gray-500 hover:text-gray-700',
+                index === 0 && 'mt-0.5',
+              )}
+              onClick={() => {
+                window.fireEvent({
+                  category: 'RoadmapShareLink',
+                  action: `Share Roadmap / ${resourceType} / ${resourceId} / ${host}`,
+                  label: icon.url,
+                });
+              }}
+            >
+              {icon.icon}
+            </a>
+          );
+        })}
      </div>
    </div>
  );
--- a/src/lib/jwt.ts
+++ b/src/lib/jwt.ts
@ -3,6 +3,7 @@ import Cookies from 'js-cookie';
 import type { AllowedOnboardingStatus } from '../api/user';

 export const TOKEN_COOKIE_NAME = '__roadmapsh_jt__';
+export const FIRST_LOGIN_PARAM = 'fl' as const;

 export type TokenPayload = {
  id: string;
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@ -134,6 +134,8 @@ const projects = await getProjectsByRoadmapId(roadmapId);

    <div class='container relative !max-w-[1000px]'>
      <ShareIcons
+        resourceId={roadmapId}
+        resourceType='roadmap'
        description={roadmapData.briefDescription}
        pageUrl={`https://roadmap.sh/${roadmapId}`}
        client:load
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@ -94,6 +94,8 @@ const ogImageUrl = getOpenGraphImageUrl({
      !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
        <div class='container relative !max-w-[1000px]'>
          <ShareIcons
+            resourceId={bestPracticeId}
+            resourceType='best-practice'
            description={bestPracticeData.briefDescription}
            pageUrl={`https://roadmap.sh/best-practices/${bestPracticeId}`}
            client:load