Merge pull request #69 from alleyhector/45_card_refactor

45 card refactor
alleyhector · Jan 29, 2025 · cabbdf2 · cabbdf2
2 parents 7b265bb + e7072a1
commit cabbdf2
Show file tree

Hide file tree

Showing 8 changed files with 5,871 additions and 2,121 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.format.enable": true,
+  "prettier.arrowParens": "avoid",
+  "prettier.enableDebugLogs": true,
+  "prettier.jsxSingleQuote": true,
+  "prettier.singleQuote": true,
+  "files.autoSave": "afterDelay",
+  "editor.tabSize": 2,
+  "editor.wordWrap": "on",
+  "editor.formatOnPaste": true,
+  "prettier.semi": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
diff --git a/app.json b/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "astrosnax",
     "slug": "astrosnax",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "astrosnax",

diff --git a/components/Recipes.tsx b/components/Recipes.tsx
@@ -1,21 +1,12 @@
 import { FC, memo, useEffect, useState } from 'react'
 import { View, Text } from './Themed'
 import { ActivityIndicator, useColorScheme } from 'react-native'
-import { Image } from 'expo-image'
 import { searchRecipe } from '@/API/RecipesAPI'
 import { RecipeProps, RecipeSearchResponse } from '@/types/edamam'
-import {
-  card,
-  column,
-  apiImage,
-  apiTextContainer,
-  row,
-  apiTitle,
-  apiImageWrapper,
-} from '@/constants/Styles'
+import { card, column, apiTitle } from '@/constants/Styles'
 import Colors from '@/constants/Colors'
-import { ExternalLink as ExternalLinkComponent } from './ExternalLink'
 import { searchRecipe as searchMealRecipe } from '@/API/MealRecipesAPI'
+import Card from './ui/Card'
 
 interface ExtendedRecipeProps extends RecipeProps {
   fallbackFood?: string | string[]
@@ -33,30 +24,19 @@ interface RecipeListProps {
   cardBackground: object
 }
 
-const ExternalLink = memo(ExternalLinkComponent)
-
 const RecipeList: FC<RecipeListProps> = ({ recipes, cardBackground }) => (
   <>
     {recipes &&
       recipes.map((recipe) => (
-        <ExternalLink key={recipe.recipe.uri} href={recipe.recipe.url}>
-          <View style={[row, cardBackground]}>
-            <View style={apiImageWrapper}>
-              <Image
-                source={{ uri: recipe.recipe.image }}
-                alt={`${recipe.recipe.label} photo`}
-                style={apiImage}
-                placeholder={require('@/assets/images/recipe-placeholder.png')}
-                placeholderContentFit='cover'
-                transition={1000}
-              />
-            </View>
-            <View style={[apiTextContainer, cardBackground]}>
-              <Text style={apiTitle}>{recipe.recipe.label}</Text>
-              <Text>View Recipe</Text>
-            </View>
-          </View>
-        </ExternalLink>
+        <Card
+          key={recipe.recipe.uri}
+          background={cardBackground}
+          imageUrl={recipe.recipe.image}
+          alt={`${recipe.recipe.label} photo`}
+          title={recipe.recipe.label}
+          description='View Recipe'
+          link={recipe.recipe.url}
+        />
       ))}
   </>
 )
@@ -68,24 +48,15 @@ const FallbackRecipeList: FC<RecipeListProps> = ({
   <>
     {fallbackRecipes &&
       fallbackRecipes.map((meal) => (
-        <ExternalLink key={meal.idMeal} href={meal.strYoutube}>
-          <View style={[row, cardBackground]}>
-            <View style={apiImageWrapper}>
-              <Image
-                source={{ uri: meal.strMealThumb }}
-                alt={`${meal.strMeal} photo`}
-                style={apiImage}
-                placeholder={require('@/assets/images/recipe-placeholder.png')}
-                placeholderContentFit='cover'
-                transition={1000}
-              />
-            </View>
-            <View style={[apiTextContainer, cardBackground]}>
-              <Text style={apiTitle}>{meal.strMeal}</Text>
-              <Text>View Recipe</Text>
-            </View>
-          </View>
-        </ExternalLink>
+        <Card
+          key={meal.idMeal}
+          background={cardBackground}
+          imageUrl={meal.strMealThumb}
+          alt={`${meal.strMeal} photo`}
+          title={meal.strMeal}
+          description='View Recipe'
+          link={meal.strYoutube}
+        />
       ))}
   </>
 )

diff --git a/components/SpotifyPlaylist.tsx b/components/SpotifyPlaylist.tsx
@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, memo, useRef } from 'react'
 import { ActivityIndicator, useColorScheme } from 'react-native'
-import { Image } from 'expo-image'
 import { View, Text } from '@/components/Themed'
 import {
   fetchPublicAccessToken,
@@ -11,17 +10,9 @@ import {
   PlaylistProps,
   SpotifySearchResponse,
 } from '@/types/spotify'
-import {
-  card,
-  column,
-  apiImage,
-  apiTextContainer,
-  row,
-  apiTitle,
-  apiImageWrapper,
-} from '@/constants/Styles'
+import { card, column, apiTitle } from '@/constants/Styles'
 import Colors from '@/constants/Colors'
-import { ExternalLink } from './ExternalLink'
+import Card from './ui/Card'
 
 const Playlists = ({ transitQuery, foodQuery }: PlaylistProps) => {
   const accessTokenRef = useRef<string | null>(null)
@@ -135,30 +126,15 @@ const Playlists = ({ transitQuery, foodQuery }: PlaylistProps) => {
         <>
           {playlists &&
             playlists.map((playlist) => (
-              <ExternalLink
+              <Card
                 key={playlist.id}
-                href={playlist.external_urls.spotify}
-              >
-                <View style={[row, cardBackground]}>
-                  <View style={apiImageWrapper}>
-                    {playlist.images.length > 0 && (
-                      <Image
-                        source={{ uri: playlist.images[0].url }}
-                        alt={`Image for ${playlist.name} playlist`}
-                        style={[apiImage, cardBackground]}
-                      />
-                    )}
-                  </View>
-                  <View style={[apiTextContainer, cardBackground]}>
-                    <View style={cardBackground}>
-                      <Text style={apiTitle}>
-                        {playlist.name} by {playlist.owner.display_name}
-                      </Text>
-                      <Text>Open playlist</Text>
-                    </View>
-                  </View>
-                </View>
-              </ExternalLink>
+                background={cardBackground}
+                imageUrl={playlist.images[0]?.url}
+                alt={`Image for ${playlist.name} playlist`}
+                title={`${playlist.name} by ${playlist.owner.display_name}`}
+                description='Open playlist'
+                link={playlist.external_urls.spotify}
+              />
             ))}
         </>
       )}

diff --git a/components/Today.tsx b/components/Today.tsx
@@ -25,7 +25,7 @@ const Today: FC<{ data: BlogPostQueryResponse | undefined }> = ({ data }) => {
 
   const post: BlogPost | undefined = data?.blogPostCollection?.items[0]
   const date: string | undefined = new Date(
-    post?.sys?.publishedAt!,
+    post?.publishDate!,
   ).toLocaleDateString('en-us', {
     weekday: 'long',
     year: 'numeric',

diff --git a/components/ui/Card.tsx b/components/ui/Card.tsx
@@ -0,0 +1,59 @@
+import { FC } from 'react'
+import { View, Text } from '@/components/Themed'
+import { Image } from 'expo-image'
+import { ExternalLink as ExternalLinkComponent } from '../ExternalLink'
+import {
+  apiImage,
+  apiImageWrapper,
+  apiTextContainer,
+  apiTitle,
+  row,
+} from '@/constants/Styles'
+import { memo } from 'react'
+
+interface CardProps {
+  background: object
+  imageUrl: string
+  alt: string
+  title: string
+  description: string
+  link: string
+}
+
+const ExternalLink = memo(ExternalLinkComponent)
+
+const Card: FC<CardProps> = ({
+  background,
+  imageUrl,
+  alt,
+  title,
+  description,
+  link,
+}) => {
+  return (
+    <ExternalLink href={link}>
+      <View style={[row, background]}>
+        <View style={apiImageWrapper}>
+          {imageUrl && (
+            <Image
+              source={{ uri: imageUrl }}
+              alt={alt}
+              style={[apiImage, background]}
+              placeholder={require('@/assets/images/recipe-placeholder.png')}
+              placeholderContentFit='cover'
+              transition={1000}
+            />
+          )}
+        </View>
+        <View style={[apiTextContainer, background]}>
+          <View style={background}>
+            <Text style={apiTitle}>{title}</Text>
+            <Text>{description}</Text>
+          </View>
+        </View>
+      </View>
+    </ExternalLink>
+  )
+}
+
+export default Card