fix: deeplink into profile contact from map pins

ONEARMY · Nov 21, 2024 · 0049db1 · 0049db1
1 parent 4761818
commit 0049db1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/packages/components/src/PinProfile/PinProfile.tsx b/packages/components/src/PinProfile/PinProfile.tsx
@@ -37,7 +37,7 @@ export const PinProfile = (props: IProps) => {
         {!isMember && creator?.isContactableByPublic !== false && (
           <Flex sx={{ justifyContent: 'flex-end' }}>
             <InternalLink
-              to={`/u/${creator?._id}`}
+              to={`/u/${creator?._id}#contact`}
               data-cy="PinProfileMessageLink"
               target="_blank"
             >

diff --git a/src/pages/User/content/SpaceProfile.tsx b/src/pages/User/content/SpaceProfile.tsx
@@ -1,3 +1,4 @@
+import { useLocation } from 'react-router-dom'
 import {
   ImageGallery,
   MemberBadge,
@@ -62,16 +63,21 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
     userImage,
   } = user
 
+  const useLocationHook = useLocation()
+
   const coverImage = getCoverImages(user)
   const hasContributed = docs?.howtos.length + docs?.research.length > 0
   const hasImpacted = !!impact
 
-  const userLinks = links.filter(
-    (linkItem) =>
-      ![ExternalLinkLabel.DISCORD, ExternalLinkLabel.FORUM].includes(
-        linkItem.label,
-      ),
-  )
+  const userLinks =
+    links?.filter(
+      (linkItem) =>
+        ![ExternalLinkLabel.DISCORD, ExternalLinkLabel.FORUM].includes(
+          linkItem.label,
+        ),
+    ) || []
+
+  const defaultValue = useLocationHook?.hash?.slice(1) || 'profile'
 
   return (
     <Card data-cy="SpaceProfile">
@@ -157,16 +163,24 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
             </Flex>
           </Box>
 
-          <Tabs defaultValue={0}>
+          <Tabs defaultValue={defaultValue}>
             <TabsList>
-              <Tab>Profile</Tab>
-              {hasContributed && <Tab data-cy="ContribTab">Contributions</Tab>}
+              <Tab value="profile">Profile</Tab>
+              {hasContributed && (
+                <Tab data-cy="ContribTab" value="contributions">
+                  Contributions
+                </Tab>
+              )}
               {hasImpacted && isPreciousPlastic() && (
-                <Tab data-cy="ImpactTab">{heading}</Tab>
+                <Tab data-cy="ImpactTab" value="impact">
+                  {heading}
+                </Tab>
               )}
-              <Tab data-cy="contact-tab">Contact</Tab>
+              <Tab data-cy="contact-tab" value="contact">
+                Contact
+              </Tab>
             </TabsList>
-            <TabPanel>
+            <TabPanel value="profile">
               <Box sx={{ mt: 1 }}>
                 <Flex
                   sx={{
@@ -223,16 +237,16 @@ export const SpaceProfile = ({ user, docs }: IProps) => {
               </Box>
             </TabPanel>
             {hasContributed && (
-              <TabPanel>
+              <TabPanel value="contributions">
                 <UserCreatedDocuments docs={docs} />
               </TabPanel>
             )}
             {hasImpacted && isPreciousPlastic() && (
-              <TabPanel>
+              <TabPanel value="impact">
                 <Impact impact={impact} user={user} />
               </TabPanel>
             )}
-            <TabPanel>
+            <TabPanel value="contact">
               <Box>
                 <ClientOnly fallback={<></>}>
                   {() => <UserContactForm user={user} />}