[DRAFT PR] Emily/genre carousels

assets/icons.tsx

@@ -4,13 +4,15 @@ import { SvgXml } from 'react-native-svg';
 
 export type IconType =
   | 'home_outline'
+  | 'back_icon'
   | 'document_outline'
   | 'search_outline'
   | 'settings_gear'
   | 'close_modal_button';
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
+  back_icon: <Ionicons name="chevron-back-outline" size={15} />,
   search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
   settings_gear: <Ionicons name="settings-outline" size={32} />,

package.json

@@ -53,7 +53,8 @@
     "react-native-svg": "13.9.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.0.0",
-    "react-scroll-to-top": "^3.0.0"
+    "react-scroll-to-top": "^3.0.0",
+    "expo-font": "~11.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/app/(tabs)/_layout.tsx

@@ -37,6 +37,13 @@ function TabNav() {
           tabBarIcon: SearchIcon,
         }}
       />
+      <Tabs.Screen
+        name="author"
+        options={{
+          headerShown: false,
+          href: null,
+        }}
+      />
       <Tabs.Screen
         name="story"
         options={{

src/app/(tabs)/author/_layout.tsx

@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router';
+
+function StackLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+export default StackLayout;

src/app/(tabs)/author/index.tsx

@@ -0,0 +1,146 @@
+import { useLocalSearchParams, router } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import styles from './styles';
+import Icon from '../../../../assets/icons';
+import HorizontalLine from '../../../components/HorizontalLine/HorizontalLine';
+import PreviewCard from '../../../components/PreviewCard/PreviewCard';
+import {
+  fetchAuthor,
+  fetchAuthorStoryPreviews,
+} from '../../../queries/authors';
+import { Author, StoryPreview } from '../../../queries/types';
+import globalStyles from '../../../styles/globalStyles';
+
+function AuthorScreen() {
+  const [authorInfo, setAuthorInfo] = useState<Author>();
+  const [authorStoryPreview, setAuthorStoryPreview] =
+    useState<StoryPreview[]>();
+  const [isLoading, setLoading] = useState(true);
+  const params = useLocalSearchParams<{ author: string }>();
+  const { author } = params;
+
+  useEffect(() => {
+    (async () => {
+      const storyData: StoryPreview[] = await fetchAuthorStoryPreviews(
+        parseInt(author as string, 10),
+      );
+      const authorData: Author = await fetchAuthor(
+        parseInt(author as string, 10),
+      );
+      try {
+        setAuthorInfo(authorData);
+        console.log('TESTING AUTHOR INFO QUERY OUTPUT:', authorInfo);
+      } catch (error) {
+        console.log(
+          `There was an error while trying to output authorinfo ${error}`,
+        );
+      }
+      try {
+        setAuthorStoryPreview(storyData);
+        console.log('TESTING STORY PREVIEW INFO QUERY OUTPUT:', storyData);
+      } catch (error) {
+        console.log(
+          `There was an error while trying to output author story preview info ${error}`,
+        );
+      }
+      setLoading(false);
+    })();
+  }, [author]);
+
+  return (
+    <SafeAreaView style={globalStyles.container}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <ScrollView>
+          <View style={styles.backButton}>
+            <Icon type="back_icon" />
+            <TouchableOpacity
+              onPress={() => {
+                router.back();
+              }}
+            >
+              <Text>BACK</Text>
+            </TouchableOpacity>
+          </View>
+
+          <View style={styles.authorCardContainer}>
+            <Image
+              style={styles.image}
+              source={{ uri: authorInfo ? authorInfo.image : '' }}
+            />
+            <View style={styles.authorTextContainer}>
+              <Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit>
+                {authorInfo ? authorInfo.name : ''}
+              </Text>
+              <Text style={styles.pronouns}>
+                {authorInfo ? authorInfo.pronouns : ' '}
+              </Text>
+            </View>
+            <HorizontalLine />
+
+            <Text style={styles.bioText}>
+              {authorInfo ? authorInfo.bio : ''}
+            </Text>
+
+            <HorizontalLine />
+
+            <View style={styles.authorStatementContainer}>
+              <Text style={styles.authorStatementTitle}>
+                Artist's Statement
+              </Text>
+              <Text style={styles.authorStatement}>
+                {authorInfo ? authorInfo.artist_statement : ''}
+              </Text>
+            </View>
+            <HorizontalLine />
+          </View>
+          <View />
+
+          <Text style={styles.storyCountText}>
+            {authorStoryPreview?.length + ' '}
+            {authorStoryPreview
+              ? authorStoryPreview?.length > 1
+                ? 'Stories'
+                : 'Story'
+              : ''}
+          </Text>
+
+          {authorStoryPreview
+            ? authorStoryPreview.map(story => (
+                <PreviewCard
+                  key={story.title}
+                  title={story.title}
+                  image={story.featured_media}
+                  author={story.author_name}
+                  authorImage={story.author_image}
+                  excerpt={story.excerpt}
+                  tags={story.genre_medium
+                    .concat(story.tone)
+                    .concat(story.topic)}
+                  pressFunction={() =>
+                    router.push({
+                      pathname: '/story',
+                      params: { storyId: story.id.toString() },
+                    })
+                  }
+                />
+              ))
+            : ''}
+        </ScrollView>
+      )}
+    </SafeAreaView>
+  );
+}
+
+export default AuthorScreen;

src/app/(tabs)/author/styles.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+import colors from '../../../styles/colors';
+
+const styles = StyleSheet.create({
+  authorCardContainer: {
+    marginRight: 20,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    flexWrap: 'wrap',
+  },
+  name: {
+    paddingTop: 15,
+    fontWeight: 'bold',
+    fontSize: 25,
+    fontFamily: 'Avenir',
+    marginLeft: -10,
+  },
+  image: {
+    height: 68,
+    width: 68,
+    backgroundColor: colors.darkGrey,
+    borderRadius: 4,
+    marginBottom: 12,
+    marginTop: 12,
+  },
+  bioText: {
+    paddingTop: 15,
+    paddingBottom: 15,
+    color: 'black',
+    fontFamily: 'Avenir',
+    fontSize: 14,
+    width: 324,
+  },
+  authorStatementContainer: {
+    paddingTop: 15,
+    paddingBottom: 5,
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  authorStatement: {
+    paddingBottom: 15,
+    fontSize: 14,
+    color: 'black',
+    fontWeight: '400',
+    fontFamily: 'Avenir',
+    width: 324,
+  },
+  authorTextContainer: {
+    paddingLeft: 20,
+  },
+  line: {
+    borderTopColor: 'black',
+    borderTopWidth: 20,
+  },
+  authorStatementTitle: {
+    fontWeight: 'bold',
+    fontFamily: 'Avenir',
+    fontSize: 17,
+    paddingBottom: 2,
+  },
+  backButton: {
+    paddingTop: 20,
+    paddingBottom: 15,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    color: colors.lightGrey,
+  },
+  storyCountText: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    fontWeight: 'bold',
+  },
+  pronouns: {
+    color: '#797979',
+    marginLeft: -10,
+  },
+});
+
+export default styles;