From 634d7baa4ea878dc519ff3dbaf92a28e2ad953f9 Mon Sep 17 00:00:00 2001
From: Soham Saha <83546205+Sypher0Dronzer@users.noreply.github.com>
Date: Sat, 8 Jun 2024 22:04:34 +0530
Subject: [PATCH 1/2] AnimeFinder has been added

---
 App.js                                 |   8 +-
 src/screens/AnimeFinder/AnimeFinder.js | 152 +++++++++++++++++++++++++
 src/screens/Home/home.js               |   9 ++
 3 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 src/screens/AnimeFinder/AnimeFinder.js

diff --git a/App.js b/App.js
index f8eda9ce..21ada3e9 100644
--- a/App.js
+++ b/App.js
@@ -28,6 +28,7 @@ import QRCodeGenerator from "./src/screens/QRGenerator/QRGenerator";
 import RecipeFinder from "./src/screens/RecipeFinder/RecipeFinder";
 import TicTacToe from "./src/screens/TicTacToe/TicTacToe";
 import Icons from "./src/screens/TicTacToe/components/Icons";
+import AnimeFinder from "./src/screens/AnimeFinder/AnimeFinder";
 
 
 export default function App() {
@@ -72,7 +73,7 @@ export default function App() {
         options={{ headerShown: true, animation: "slide_from_right" }}
         />
 
-<Stack.Screen
+  <Stack.Screen
         name="Hex Color"
         component={HexColorGeneratorScreen}
         options={{ headerShown: true, animation: "slide_from_right" }}
@@ -110,6 +111,11 @@ export default function App() {
           component={TicTacToe}
           options={{ headerShown: true, animation: "slide_from_right" }}
         />
+        <Stack.Screen
+          name="Anime Finder"
+          component={AnimeFinder}
+          options={{ headerShown: true, animation: "slide_from_right" }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/src/screens/AnimeFinder/AnimeFinder.js b/src/screens/AnimeFinder/AnimeFinder.js
new file mode 100644
index 00000000..4e2bcb42
--- /dev/null
+++ b/src/screens/AnimeFinder/AnimeFinder.js
@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { View, Text, TextInput, Button, StyleSheet, ScrollView, Image } from 'react-native';
+
+const AnimeFinder = () => {
+  const [searchInput, setSearchInput] = useState('');
+  const [animeResults, setAnimeResults] = useState([]);
+  const [noResultsMessage, setNoResultsMessage] = useState('');
+
+  const searchAnime = async () => {
+    const query = `
+      query ($title: String) {
+        Page {
+          media (search: $title, type: ANIME) {
+            id
+            title {
+              romaji
+              english
+              native
+            }
+            description
+            averageScore
+            coverImage {
+              large
+              medium
+            }
+          }
+        }
+      }
+    `;
+
+    try {
+      const response = await fetch('https://graphql.anilist.co', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          query,
+          variables: { title: searchInput },
+        }),
+      });
+
+      const responseData = await response.json();
+      const animeList = responseData.data.Page.media;
+      
+      if (animeList.length === 0) {
+        setNoResultsMessage('No anime found with this name');
+      } else {
+        setNoResultsMessage('');
+      }
+
+      setAnimeResults(animeList);
+    } catch (error) {
+      console.error('Error:', error);
+      setNoResultsMessage('An error occurred while fetching data.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Anime Search</Text>
+      <TextInput
+        style={styles.searchInput}
+        placeholder="Search for anime..."
+        value={searchInput}
+        onChangeText={setSearchInput}
+      />
+      <Button title="Search" onPress={searchAnime} />
+      <ScrollView style={styles.results}>
+        {noResultsMessage ? (
+          <Text style={styles.noResults}>{noResultsMessage}</Text>
+        ) : (
+          animeResults.map(anime => (
+            <View key={anime.id} style={styles.animeCard}>
+              <Text style={styles.animeTitle}>
+                {anime.title.romaji || anime.title.english || anime.title.native}
+              </Text>
+              <Text style={styles.animeDescription}>
+                {anime.description.replace(/<br>/g, '\n')}
+              </Text>
+              <Text style={styles.animeScore}>
+                Average Score: {anime.averageScore}
+              </Text>
+              {anime.coverImage && anime.coverImage.medium && (
+                <Image
+                  style={styles.animeImage}
+                  source={{ uri: anime.coverImage.medium }}
+                />
+              )}
+            </View>
+          ))
+        )}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f4f4f4',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 20,
+  },
+  searchInput: {
+    padding: 10,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 4,
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  results: {
+    marginTop: 20,
+  },
+  noResults: {
+    fontSize: 18,
+    color: 'red',
+    textAlign: 'center',
+    marginTop: 20,
+  },
+  animeCard: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 8,
+    padding: 20,
+    marginBottom: 20,
+    backgroundColor: '#fff',
+  },
+  animeTitle: {
+    fontSize: 20,
+    marginBottom: 10,
+  },
+  animeDescription: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  animeScore: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
+  animeImage: {
+    width: '100%',
+    height: 200,
+    resizeMode: 'contain',
+  },
+});
+
+export default AnimeFinder;
diff --git a/src/screens/Home/home.js b/src/screens/Home/home.js
index 4bb1a2d4..2cbf6856 100644
--- a/src/screens/Home/home.js
+++ b/src/screens/Home/home.js
@@ -144,6 +144,15 @@ export default function Home() {
             >
               Tic Tac Toe
             </Text>
+            <Text
+              style={styles.button}
+              onPress={() => {
+                console.log("Button to Tic-Tac-Toe List is Pressed!");
+                navigation.navigate("Anime Finder");
+              }}
+            >
+              Anime Finder
+            </Text>
           </Pressable>
         </View>
       </View>

From 0b3644522e38f93b471be6780b5fd835913ffd96 Mon Sep 17 00:00:00 2001
From: Soham Saha <83546205+Sypher0Dronzer@users.noreply.github.com>
Date: Sat, 8 Jun 2024 23:29:51 +0530
Subject: [PATCH 2/2] Ui changed and comments added

---
 App.js                                 |  24 +++-
 src/screens/AnimeFinder/AnimeFinder.js | 167 +++++++++++++++++--------
 2 files changed, 140 insertions(+), 51 deletions(-)

diff --git a/App.js b/App.js
index 21ada3e9..672bc3db 100644
--- a/App.js
+++ b/App.js
@@ -114,7 +114,29 @@ export default function App() {
         <Stack.Screen
           name="Anime Finder"
           component={AnimeFinder}
-          options={{ headerShown: true, animation: "slide_from_right" }}
+          options={{
+            headerShown: true,
+            headerStyle: {
+              backgroundColor: '#121212',
+            },
+            headerTintColor: '#00ff99',
+            headerTitleStyle: {
+              fontWeight: 'bold',
+            },
+            cardStyle: { backgroundColor: '#121212' },
+            animationEnabled: true,
+            animationTypeForReplace: 'push',
+            transitionSpec: {
+              open: {
+                animation: 'timing',
+                config: { duration: 300 },
+              },
+              close: {
+                animation: 'timing',
+                config: { duration: 300 },
+              },
+            },
+          }}
         />
       </Stack.Navigator>
     </NavigationContainer>
diff --git a/src/screens/AnimeFinder/AnimeFinder.js b/src/screens/AnimeFinder/AnimeFinder.js
index 4e2bcb42..147e8c50 100644
--- a/src/screens/AnimeFinder/AnimeFinder.js
+++ b/src/screens/AnimeFinder/AnimeFinder.js
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { View, Text, TextInput, Button, StyleSheet, ScrollView, Image } from 'react-native';
+import { View, Text, TextInput, TouchableOpacity, ScrollView, Image, StyleSheet } from 'react-native';
 
 const AnimeFinder = () => {
-  const [searchInput, setSearchInput] = useState('');
-  const [animeResults, setAnimeResults] = useState([]);
-  const [noResultsMessage, setNoResultsMessage] = useState('');
+  const [searchInput, setSearchInput] = useState(''); // State for search input
+  const [animeResults, setAnimeResults] = useState([]); // State for storing search results
+  const [noResultsMessage, setNoResultsMessage] = useState(''); 
 
   const searchAnime = async () => {
     const query = `
@@ -42,55 +42,65 @@ const AnimeFinder = () => {
 
       const responseData = await response.json();
       const animeList = responseData.data.Page.media;
-      
+
       if (animeList.length === 0) {
-        setNoResultsMessage('No anime found with this name');
+        setNoResultsMessage('No anime found with this name'); // Set message if no results
       } else {
-        setNoResultsMessage('');
+        setNoResultsMessage(''); // Clear message if there are results
       }
 
-      setAnimeResults(animeList);
+      setAnimeResults(animeList); // Update the anime results
     } catch (error) {
       console.error('Error:', error);
-      setNoResultsMessage('An error occurred while fetching data.');
+      setNoResultsMessage('An error occurred while fetching data.'); // Set error message
     }
   };
 
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Anime Search</Text>
-      <TextInput
-        style={styles.searchInput}
-        placeholder="Search for anime..."
-        value={searchInput}
-        onChangeText={setSearchInput}
-      />
-      <Button title="Search" onPress={searchAnime} />
-      <ScrollView style={styles.results}>
-        {noResultsMessage ? (
-          <Text style={styles.noResults}>{noResultsMessage}</Text>
-        ) : (
-          animeResults.map(anime => (
-            <View key={anime.id} style={styles.animeCard}>
-              <Text style={styles.animeTitle}>
-                {anime.title.romaji || anime.title.english || anime.title.native}
-              </Text>
-              <Text style={styles.animeDescription}>
-                {anime.description.replace(/<br>/g, '\n')}
-              </Text>
-              <Text style={styles.animeScore}>
-                Average Score: {anime.averageScore}
-              </Text>
-              {anime.coverImage && anime.coverImage.medium && (
-                <Image
-                  style={styles.animeImage}
-                  source={{ uri: anime.coverImage.medium }}
-                />
-              )}
-            </View>
-          ))
-        )}
-      </ScrollView>
+      <View style={[styles.titleContainer, animeResults.length === 0 && styles.centered]}>
+        <Text style={styles.title}>Anime Search</Text>
+        <View style={[styles.searchContainer, animeResults.length === 0 && styles.centeredSearch]}>
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Search for anime..."
+            placeholderTextColor="#999"
+            value={searchInput}
+            onChangeText={setSearchInput} // Update search input state on text change
+          />
+          <TouchableOpacity style={styles.searchButton} onPress={searchAnime}>
+            <Text style={styles.searchButtonText}>Search</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      {animeResults.length > 0 ? (
+        <ScrollView style={styles.results}>
+          { 
+            animeResults.map(anime => (
+              <View key={anime.id} style={styles.animeCard}>
+                <Text style={styles.animeTitle}>
+                  {anime.title.romaji || anime.title.english || anime.title.native}
+                </Text>
+
+                <Text style={styles.animeDescription}>
+                  {anime.description.replace(/<br>/g, '\n')} 
+                </Text>
+                <Text style={styles.animeScore}>
+                  Average Score: {anime.averageScore} 
+                </Text>
+                {anime.coverImage && anime.coverImage.medium && (
+                  <Image
+                    style={styles.animeImage}
+                    source={{ uri: anime.coverImage.medium }} // Display anime cover image
+                  />
+                )}
+              </View>
+            ))
+          }
+        </ScrollView>
+      ) : // Error if the anime name entered is incorrect
+      <Text style={styles.noResults}>{noResultsMessage}</Text>
+}
     </View>
   );
 };
@@ -98,54 +108,111 @@ const AnimeFinder = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#f4f4f4',
+    backgroundColor: '#121212', // Dark background color
     padding: 20,
   },
+  titleContainer: {
+    marginBottom: 20,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center', // Center elements vertically and horizontally
+  },
   title: {
-    fontSize: 24,
+    fontSize: 26,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 20,
+    textAlign: 'center', // Center text
+  },
+  searchContainer: {
     marginBottom: 20,
+    width: '100%', // Ensure search container takes full width
+    alignItems: 'center',
+  },
+  centeredSearch: {
+    alignItems: 'stretch',
+    width: '100%', // Ensure search input and button take full width
   },
   searchInput: {
     padding: 10,
+    paddingLeft:20,
     borderWidth: 1,
-    borderColor: '#ccc',
-    borderRadius: 4,
+    borderColor: '#333',
+    borderRadius: 25,
     fontSize: 16,
+    color: '#fff',
     marginBottom: 10,
+    backgroundColor: '#1e1e1e', // Darker background for input
+    shadowColor: '#00ff99',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 5,
+    elevation: 3,
+    width: '100%',
+  },
+  searchButton: {
+    backgroundColor: '#00ff99', // Neon green background for button
+    paddingVertical: 12,
+    borderRadius: 25,
+    alignItems: 'center',
+    shadowColor: '#00ff99',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 5,
+    elevation: 3,
+    width: '100%',
+  },
+  searchButtonText: {
+    color: '#121212',
+    fontSize: 16,
+    fontWeight: 'bold',
   },
   results: {
     marginTop: 20,
   },
   noResults: {
     fontSize: 18,
-    color: 'red',
+    color: '#ff6666', // Red color for no results message
     textAlign: 'center',
     marginTop: 20,
   },
   animeCard: {
     borderWidth: 1,
-    borderColor: '#ddd',
+    borderColor: '#333',
     borderRadius: 8,
     padding: 20,
     marginBottom: 20,
-    backgroundColor: '#fff',
+    backgroundColor: '#1e1e1e', // Dark background for anime card
+    shadowColor: '#00ff99',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.8,
+    shadowRadius: 5,
+    elevation: 3,
   },
   animeTitle: {
-    fontSize: 20,
+    fontSize: 22,
+    fontWeight: 'bold',
     marginBottom: 10,
+    color: '#00ff99', // Neon green for anime title
   },
   animeDescription: {
     fontSize: 16,
     marginBottom: 10,
+    color: '#ccc', // Light gray for description
   },
   animeScore: {
     fontSize: 16,
     marginBottom: 10,
+    color: '#00ff99', // Neon green for score
   },
   animeImage: {
     width: '100%',
     height: 200,
     resizeMode: 'contain',
+    borderRadius: 8,
+    marginTop: 10,
   },
 });