(fix) Workshop Assistants layout fix (#166)

Author: mazenchami

app/components/SocialButton.tsx

@@ -51,7 +51,7 @@ export const SocialButtons = ({ socialButtons }: SocialButtonsProps) => (
       <SocialButton
         {...socialButtonProps}
         key={`${socialButtonProps.icon}-${index}`}
-        style={$socialButtons}
+        style={socialButtons.length - 1 > index && $socialButtons}
       />
     ))}
   </>

app/screens/TalkDetailsScreen/AssistantsList.tsx

@@ -5,7 +5,6 @@ import { translate } from "../../i18n"
 import { colors, spacing } from "../../theme"
 import { Speaker } from "../../services/api/webflow-api.types"
 import { SocialButtons } from "../../components/SocialButton"
-
 export interface AssistantsListProp {
   assistants: Speaker[]
 }
@@ -16,59 +15,54 @@ export function AssistantsList(props: AssistantsListProp) {
   if (!assistants) return null
 
   return (
-    <>
+    <View style={$assistantRoot}>
+      <Text
+        preset="listHeading"
+        text={translate("talkDetailsScreen.assistingTheWorkshop")}
+        style={$assistantHeading}
+      />
       <View style={$assistantContainer}>
-        <Text
-          preset="listHeading"
-          text={translate("talkDetailsScreen.assistingTheWorkshop")}
-          style={$assistantHeading}
-        />
-        <View
-          style={assistants.length < 2 ? $assistantsContainerWithOne : $assistantsContainerWithMore}
-        >
-          {assistants.map((assistant) => (
-            <View style={$assistant} key={assistant._id}>
-              <AutoImage source={{ uri: assistant["speaker-photo"].url }} style={$assistantImage} />
-              <Text preset="companionHeading" text={assistant.name} />
-              <Text preset="label" style={$assistantCompany} text={assistant.company} />
-              <View style={$assistantLinks}>
-                <SocialButtons
-                  socialButtons={[
-                    { icon: "twitter", url: assistant.twitter },
-                    { icon: "github", url: assistant.github },
-                    { icon: "link", url: assistant.externalURL },
-                  ]}
-                />
-              </View>
+        {assistants.map((assistant) => (
+          <View style={$assistant} key={assistant._id}>
+            <AutoImage source={{ uri: assistant["speaker-photo"].url }} style={$assistantImage} />
+            <Text preset="companionHeading" text={assistant.name} />
+            <Text preset="label" style={$assistantCompany} text={assistant.company} />
+            <View style={$assistantLinks}>
+              <SocialButtons
+                socialButtons={[
+                  { icon: "twitter", url: assistant.twitter },
+                  { icon: "github", url: assistant.github },
+                  { icon: "link", url: assistant.externalURL },
+                ]}
+              />
             </View>
-          ))}
-        </View>
+          </View>
+        ))}
       </View>
-    </>
+    </View>
   )
 }
 
-const $assistantsContainerWithOne: ViewStyle = {
-  flexDirection: "row",
-  marginStart: spacing.large,
-}
-
-const $assistantsContainerWithMore: ViewStyle = {
+const $assistantContainer: ViewStyle = {
   flexDirection: "row",
-  justifyContent: "space-around",
+  flexWrap: "wrap",
+  justifyContent: "space-between",
 }
 
-const $assistantContainer: ViewStyle = {
+const $assistantRoot: ViewStyle = {
   marginTop: spacing.large,
   marginBottom: spacing.huge,
 }
 
 const $assistant: ViewStyle = {
   alignItems: "center",
+  marginTop: spacing.large,
+  width: "48%",
+  justifyContent: "center",
 }
 
 const $assistantHeading: TextStyle = {
-  marginVertical: spacing.large,
+  marginTop: spacing.large,
 }
 
 const $assistantImage: ImageStyle = {

app/screens/TalkDetailsScreen/TalkDetailsScreen.tsx

@@ -157,7 +157,7 @@ const talkDetailsProps = (schedule: ScheduledEvent): TalkDetailsProps => {
       socialButtons: [
         { url: speaker?.twitter, icon: "twitter" },
         { url: speaker?.github, icon: "github" },
-        { url: speaker?.externalURL || speaker?.website, icon: "link" },
+        { url: speaker?.externalURL, icon: "link" },
       ],
     })),
   }

app/services/api/webflow-helpers.ts

@@ -67,6 +67,7 @@ export const cleanedSpeaker = (speaker?: RawSpeaker): Speaker | null => {
     ...speaker,
     "speaker-type": WEBFLOW_MAP.speakersType[speaker["speaker-type"]],
     "talk-level": WEBFLOW_MAP.speakersTalk[speaker["talk-level"]],
+    externalURL: speaker["external-url"] ?? speaker.website,
   }
 }