feat: add to my games button #62

Asiern · May 31, 2023 · 396e5a9 · 396e5a9
1 parent f9252f7
commit 396e5a9
Showing 1 changed file with 41 additions and 3 deletions.
diff --git a/app/screens/game/Info/Info.tsx b/app/screens/game/Info/Info.tsx
@@ -1,25 +1,63 @@
-import React, { memo } from "react";
+import React, { memo, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { GameCard } from "../../../components/GameCard";
 import { game, platform } from "../../../hooks/types";
 import { useConfig } from "../../../hooks";
+import { Button } from "../../../components";
 
 interface IInfo {
   platforms: platform[];
   game: game;
 }
 
 function Info({ platforms, game }: IInfo): JSX.Element {
-  const { config } = useConfig();
+  const { config, setConfig } = useConfig();
   const { theme } = config;
   const { id, abbreviation } = game;
+  const [liked, setLiked] = useState<boolean>(
+    config.games.find(({ id }) => game.id === id) !== undefined
+  );
+
+  function likeGame() {
+    setConfig({
+      ...config,
+      games: [
+        ...config.games,
+        {
+          abbreviation: game.abbreviation,
+          id: game.id,
+          uri: game.assets["cover-large"].uri ?? "",
+        },
+      ],
+    });
+    setLiked(true);
+  }
+  function dislikeGame() {
+    setConfig({
+      ...config,
+      games: [
+        ...config.games.filter(({ id }) => {
+          id !== game.id;
+        }),
+      ],
+    });
+    setLiked(false);
+  }
+
   return (
     <View style={styles.container}>
       <GameCard
         disabled
         {...{ id, abbreviation, image: game.assets["cover-large"].uri ?? "" }}
       />
       <View style={styles.info}>
+        <Button
+          label={liked ? "Remove" : "Add to my games"}
+          icon={liked ? "minus" : "plus"}
+          onPress={liked ? dislikeGame : likeGame}
+          style={{ flex: 0 }}
+          shadow
+        />
         <Text
           style={[styles.text, { color: theme.colors.text }]}
           ellipsizeMode="tail"
@@ -48,7 +86,7 @@ const styles = StyleSheet.create({
   },
   info: {
     flex: 1,
-    justifyContent: "center",
+    justifyContent: "space-between",
     alignItems: "center",
     marginLeft: 15,
   },