Show status-box for 'you' and 'vacationing' in MentorCards

sos-lapsikyla · Dec 17, 2023 · 65ffcc0 · 65ffcc0
1 parent 4585882
commit 65ffcc0
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 40 deletions.
diff --git a/src/Screens/components/MentorCard.tsx b/src/Screens/components/MentorCard.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import RN from 'react-native';
-
 import * as api from '../../api/mentors';
 
+import colors from './colors';
+import fonts from './fonts';
+
 import Button from './Button';
 import Card, { cardBorderRadius } from './Card';
 import MentorTitle from './MentorTitle';
 import MentorStory from './MentorStory';
 import Skills from './Skills';
-import colors from './colors';
-import fonts from './fonts';
 
 interface Props {
   style?: RN.StyleProp<RN.ViewStyle>;

diff --git a/src/Screens/components/MentorList.tsx b/src/Screens/components/MentorList.tsx
@@ -10,8 +10,9 @@ import * as mentorsState from '../../state/reducers/mentors';
 
 import useLayout from '../../lib/use-layout';
 
-import MentorCard from '../components/MentorCard';
-import RemoteData from '../components/RemoteData';
+import MentorCard from './MentorCard';
+import RemoteData from './RemoteData';
+import { MentorTitleSpecial } from './MentorTitleSpecial';
 
 type Props = {
   onPress?: (mentor: mentorApi.Mentor) => void | undefined;
@@ -44,30 +45,28 @@ export default ({ onPress, testID }: Props) => {
     >
       <RemoteData data={mentorList} fetchData={fetchMentors}>
         {mentors => (
-          <RN.View style={styles.carouselContainer}>
-            <RN.FlatList
-              showsHorizontalScrollIndicator={false}
-              showsVerticalScrollIndicator={false}
-              initialNumToRender={2}
-              decelerationRate={'fast'}
-              snapToInterval={interval}
-              contentContainerStyle={{
-                paddingLeft: (PADDING / 2) * measuredWidth,
-              }}
-              data={[...mentors].sort(mentorApi.compare(userId))}
-              renderItem={renderMentorCard(height, measuredWidth, onPress)}
-              keyExtractor={({ buddyId }) => buddyId}
-              horizontal={true}
-              testID={'components.mentorList'}
-            />
-          </RN.View>
+          <RN.FlatList
+            showsHorizontalScrollIndicator={false}
+            showsVerticalScrollIndicator={false}
+            initialNumToRender={2}
+            decelerationRate={'fast'}
+            snapToInterval={interval}
+            contentContainerStyle={{
+              paddingLeft: (PADDING / 2) * measuredWidth,
+            }}
+            data={[...mentors].sort(mentorApi.compare(userId))}
+            renderItem={renderMentorCard(height, measuredWidth, onPress)}
+            keyExtractor={({ buddyId }) => buddyId}
+            horizontal={true}
+            testID={'components.mentorList'}
+          />
         )}
       </RemoteData>
     </RN.View>
   );
 };
 
-const mentorCardBottomMargin = 16;
+const mentorCardBottomMargin = 32;
 
 const renderMentorCard =
   (
@@ -77,18 +76,21 @@ const renderMentorCard =
   ) =>
   ({ item }: { item: mentorApi.Mentor }) =>
     (
-      <MentorCard
-        style={[
-          styles.card,
-          {
-            maxHeight: maxHeight - mentorCardBottomMargin,
-            width: screenWidth * CARD_WIDTH,
-            marginRight: (PADDING / 4) * screenWidth,
-          },
-        ]}
-        mentor={item}
-        onPress={onPress}
-      />
+      <RN.View style={styles.hiddenContainer}>
+        <MentorTitleSpecial mentor={item} />
+        <MentorCard
+          style={[
+            styles.card,
+            {
+              maxHeight: maxHeight - mentorCardBottomMargin,
+              width: screenWidth * CARD_WIDTH,
+              marginRight: (PADDING / 4) * screenWidth,
+            },
+          ]}
+          mentor={item}
+          onPress={onPress}
+        />
+      </RN.View>
     );
 
 const styles = RN.StyleSheet.create({
@@ -98,13 +100,14 @@ const styles = RN.StyleSheet.create({
     flex: 1,
     alignSelf: 'stretch',
   },
-  carouselContainer: {
-    flex: 1,
-  },
   scrollContainer: { paddingHorizontal: 16 },
   card: {
     alignSelf: 'stretch',
     flexGrow: 1,
     marginBottom: mentorCardBottomMargin,
   },
+  hiddenContainer: {
+    paddingTop: 8,
+    overflow: 'hidden',
+  },
 });
diff --git a/src/Screens/components/MentorTitle.tsx b/src/Screens/components/MentorTitle.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import RN from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
 import * as mentorApi from '../../api/mentors';
 
 import Message from './Message';
@@ -33,7 +32,13 @@ const MentorTitle: React.FC<Props> = ({
   const hasRegion = region.length > 0;
 
   return (
-    <RN.View style={[styles.blob, { backgroundColor: colors.purple }, style]}>
+    <RN.View
+      style={[
+        styles.blob,
+        { backgroundColor: is_vacationing ? colors.blueGray : colors.purple },
+        style,
+      ]}
+    >
       <Wrapper>
         {!onPress ? null : (
           <RN.TouchableOpacity

diff --git a/src/Screens/components/MentorTitleSpecial.tsx b/src/Screens/components/MentorTitleSpecial.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import RN from 'react-native';
+import { useSelector } from 'react-redux';
+
+import * as api from '../../api/mentors';
+import * as tokenState from '../../state/reducers/accessToken';
+
+import colors from './colors';
+import fonts from './fonts';
+import Message from './Message';
+
+type Props = {
+  mentor: api.Mentor;
+};
+
+export const MentorTitleSpecial: React.FC<Props> = ({
+  mentor: { buddyId, is_vacationing },
+}) => {
+  const isMe = useSelector(tokenState.isMe(buddyId));
+
+  const message = isMe
+    ? 'main.mentor.special.you'
+    : 'main.mentor.special.notAvailable';
+
+  const shouldShow = isMe || is_vacationing;
+
+  return shouldShow ? (
+    <RN.View
+      style={[
+        styles.special,
+        { backgroundColor: isMe ? colors.lightBlue : colors.whiteBlue },
+      ]}
+    >
+      <Message id={message} style={styles.text} />
+    </RN.View>
+  ) : null;
+};
+
+const styles = RN.StyleSheet.create({
+  special: {
+    position: 'absolute',
+    right: 40,
+    top: 0,
+    borderRadius: 4,
+    padding: 8,
+    zIndex: 10,
+  },
+  text: {
+    ...fonts.smallBold,
+    color: colors.darkestBlue,
+  },
+});
diff --git a/src/localization/en.ts b/src/localization/en.ts
@@ -60,6 +60,8 @@ export const messages: { [key in MessageId]: string } = {
   'main.chat.unban.confirmation.button': 'Restore',
 
   'main.mentor.other': 'I can also support with:',
+  'main.mentor.special.notAvailable': 'Not available',
+  'main.mentor.special.you': 'You',
   'main.mentor.story': 'My story',
   'main.mentor.subject': 'Subject:',
 

diff --git a/src/localization/fi.ts b/src/localization/fi.ts
@@ -59,6 +59,8 @@ export const messages = {
   'main.chat.unban.confirmation.button': 'Palauta',
 
   'main.mentor.other': 'Pystyn auttamaan näissä:',
+  'main.mentor.special.notAvailable': 'Ei tavoitettavissa',
+  'main.mentor.special.you': 'Sinä',
   'main.mentor.story': 'Tarinani',
   'main.mentor.subject': 'Aihealue:',