Merge pull request #4 from kelvinthh/dev

kelvinthh · web-flow · commit 399b2717e66e · 2023-05-11T16:56:19.000-04:00
0.31
diff --git a/App.tsx b/App.tsx
@@ -16,31 +16,32 @@ const AppContent = () => {
   const [hasInternet, setHasInternet] = useRecoilState(internetState);
 
   useEffect(() => {
+
+    // Internet check
     const unsubscribe = NetInfo.addEventListener((state) => {
       console.log(`Internet state: ${state.type} ${state.isInternetReachable}`);
       setHasInternet(state.isInternetReachable);
     });
 
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  useEffect(() => {
+    // Fetch getImages and prompt suggestion
     (async () => {
       const images = await fetchImages();
       const suggestion = await fetchSuggestion();
 
       setImages(images ?? []); // Provide an empty array as the default value
       setSuggestion(suggestion ?? ""); // Provide an empty string as the default value
     })();
+
+    return () => {
+      unsubscribe();  // Stop internet connection check on unmount
+    };
   }, []);
 
   return (
     <SafeAreaView className="flex-1">
       <Header />
       <Body />
-      <StatusBar barStyle={'dark-content'}/>
+      <StatusBar barStyle={"dark-content"} />
     </SafeAreaView>
   );
 };
diff --git a/ios/imggenrn/imggenrn.entitlements b/ios/imggenrn/imggenrn.entitlements
@@ -1,8 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-  <dict>
-    <key>aps-environment</key>
-    <string>development</string>
-  </dict>
-</plist>
+<dict/>
+</plist>
diff --git a/src/components/Body.tsx b/src/components/Body.tsx
@@ -1,48 +1,28 @@
 import React, { useState, useRef, useEffect } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  FlatList,
-  ListRenderItem,
-  KeyboardAvoidingView,
-  Keyboard,
-  RefreshControl,
-} from "react-native";
+import { View, FlatList, ListRenderItem, RefreshControl } from "react-native";
 import { useRecoilState, useRecoilValue } from "recoil";
 import imagesState from "../state/imageState";
-import suggestionState from "../state/suggestionState";
 import { ImageUrl } from "../types/imageUrl";
-import { fetchImages, fetchSuggestion, generateImage } from "../fetchData";
+import { fetchImages } from "../fetchData";
 import ImageItem from "../components/ImageItem";
 import { Toast } from "react-native-toast-message/lib/src/Toast";
 import internetState from "../state/internetState";
-import AsyncStorage from "@react-native-async-storage/async-storage";
+import InputPrompt from "./InputPrompt";
 
 const Body = () => {
   const [images, setImages] = useRecoilState(imagesState);
-  const [suggestion, setSuggestion] = useRecoilState(suggestionState);
-
-  const [inputValue, setInputValue] = useState("");
-  const [refreshing, setRefreshing] = useState(false);
-  const [generating, setGenerating] = useState(false);
   const hasInternet = useRecoilValue(internetState);
+  const [refreshing, setRefreshing] = useState(false);
 
-  // Reference for the FlatList
   const flatListRef = useRef<FlatList<ImageUrl>>(null);
   const isFirstRender = useRef(true);
 
-  // AsyncStorage key
-  const LAST_GENERATED_TIME_KEY = "lastGeneratedTime";
-
   useEffect(() => {
     // Prevent the toast pop up on the first render
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
     }
-
     if (!hasInternet) {
       Toast.show({
         type: "error",
@@ -53,103 +33,13 @@ const Body = () => {
     }
   }, [hasInternet]);
 
-  async function setLastGeneratedTime() {
-    const currentTime = new Date().getTime();
-    await AsyncStorage.setItem(
-      LAST_GENERATED_TIME_KEY,
-      JSON.stringify(currentTime)
-    );
-  }
-
-  async function getLastGeneratedTime() {
-    const lastGeneratedTime = await AsyncStorage.getItem(
-      LAST_GENERATED_TIME_KEY
-    );
-    return lastGeneratedTime ? JSON.parse(lastGeneratedTime) : null;
-  }
-
-  const handleSubmit = async (prompt: string) => {
-    const lastGeneratedTime = await getLastGeneratedTime();
-    const currentTime = new Date().getTime();
-
-    if (lastGeneratedTime && currentTime - lastGeneratedTime < 10000) {
-      Toast.show({
-        type: "info",
-        text1: "Please wait",
-        text2: "You can generate an image every 10 seconds.",
-        position: "bottom",
-      });
-      return;
-    }
-
-    setGenerating(true);
-    console.log("Submitting prompt: ", prompt);
-    Toast.show({
-      type: "info",
-      text1: "Generating...",
-      text2: `DALL‧E is creating ${prompt.slice(0, 30)}...`,
-      position: "bottom",
-    });
-    setInputValue("");
-    Keyboard.dismiss(); // Dismiss the keyboard
-
-    try {
-      const res = await generateImage(prompt);
-      if (!res) {
-        console.log("Error generating image.");
-        Toast.show({
-          type: "error",
-          text1: "Error",
-          text2: "Error generating image. Please try again later.",
-          position: "bottom",
-        });
-      } else {
-        Toast.show({
-          type: "success",
-          text1: "Success!",
-          text2: "Your image has been generated!",
-          position: "bottom",
-        });
-
-        await setLastGeneratedTime();
-        await handleRefreshImage();
-
-        // Scroll the FlatList to the top
-        flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
-
-        console.log("Image generated!");
-      }
-    } catch (error) {
-      console.error("Error occurred while generating image:", error);
-      Toast.show({
-        type: "error",
-        text1: "Error",
-        text2:
-          "An error occurred while generating the image. Please try again later.",
-        position: "bottom",
-      });
-    } finally {
-      setGenerating(false);
-    }
-  };
-
-  const handleUseSuggestion = () => {
-    setInputValue(suggestion);
-  };
-
   // This handle the FlatList swipe up to refresh
   const onRefresh = async () => {
     setRefreshing(true);
     await handleRefreshImage();
     setRefreshing(false);
   };
 
-  const handleRefreshSuggestion = async () => {
-    setSuggestion("Loading new suggestion...");
-    const newSuggestion = await fetchSuggestion();
-    setSuggestion(newSuggestion ?? "");
-  };
-
   const handleRefreshImage = async () => {
     if (!hasInternet) return;
     const newImages = await fetchImages();
@@ -162,61 +52,7 @@ const Body = () => {
 
   return (
     <View className="flex-1">
-      <KeyboardAvoidingView className="flex flex-col items-center justify-center mx-4 px-2 py-2 mb-1 rounded-lg border-gray-200 border shadow-inner">
-        <View className="w-full flex flex-row">
-          <TextInput
-            className="flex-1 h-15 bg-white border border-gray-300 rounded-lg p-2"
-            placeholder={suggestion}
-            value={inputValue}
-            onChangeText={(text) => setInputValue(text)}
-            multiline
-            numberOfLines={4}
-            textAlignVertical="top"
-          />
-          <View className="w-2" />
-          <TouchableOpacity
-            className={`h-15 rounded text-center px-3 py-2 justify-center items-center ${
-              !inputValue || generating || !hasInternet
-                ? " bg-fuchsia-200"
-                : "bg-fuchsia-600"
-            }`}
-            onPress={!generating ? () => handleSubmit(inputValue) : undefined}
-            disabled={!inputValue || generating || !hasInternet}
-          >
-            <Text className="text-white font-bold">
-              {generating ? "Loading..." : "Submit"}
-            </Text>
-          </TouchableOpacity>
-        </View>
-        {inputValue &&
-          !inputValue.includes(suggestion) &&
-          (suggestion || hasInternet) && (
-            <Text className="w-full my-1">
-              <Text className="font-medium">Suggestion💡</Text>
-              <Text className="font-light italic">{suggestion}</Text>
-            </Text>
-          )}
-        <TouchableOpacity
-          className={`w-full h-10 ${
-            hasInternet ? "bg-green-500" : "bg-green-200"
-          } rounded text-center p-2 my-1 justify-center items-center`}
-          onPress={handleRefreshSuggestion}
-          disabled={!hasInternet}
-        >
-          <Text className="text-white">Gimme a new suggestion!</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          className="w-full h-10 bg-blue-500 rounded text-center p-2 justify-center items-center"
-          onPress={handleUseSuggestion}
-        >
-          <Text className="text-white">Use suggestion!</Text>
-        </TouchableOpacity>
-        {!hasInternet && !isFirstRender.current && (
-          <Text className="w-full my-1 text-red-500 font-light italic">
-            ⛔️ Error: No internet connection.
-          </Text>
-        )}
-      </KeyboardAvoidingView>
+      <InputPrompt flatListRef={flatListRef} isFirstRender={isFirstRender} />
       <FlatList
         ref={flatListRef}
         data={images}
diff --git a/src/components/ImageItem.tsx b/src/components/ImageItem.tsx
@@ -12,6 +12,15 @@ interface ImageItemProps {
   item: ImageUrl;
 }
 
+const hasNonAsciiCharacters = (str: string): boolean => {
+  for (let i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 127) {
+      return true;
+    }
+  }
+  return false;
+};
+
 const ImageItem: React.FC<ImageItemProps> = ({ item }) => {
   const [loading, setLoading] = useState(true);
   const [showOverlay, setShowOverlay] = useState(false);
@@ -20,15 +29,6 @@ const ImageItem: React.FC<ImageItemProps> = ({ item }) => {
     setShowOverlay(!showOverlay);
   };
 
-  const hasNonAsciiCharacters = (str: string): boolean => {
-    for (let i = 0; i < str.length; i++) {
-      if (str.charCodeAt(i) > 127) {
-        return true;
-      }
-    }
-    return false;
-  };
-
   const spacelessUrl = item.url.replace(/ /g, "%20");
   const lastSvIndex = spacelessUrl.lastIndexOf("?sv=");
 
@@ -38,7 +38,6 @@ const ImageItem: React.FC<ImageItemProps> = ({ item }) => {
 
   const sasToken = spacelessUrl.substring(lastSvIndex);
   const formattedUrl = imageFileName + sasToken;
-  // console.log(formattedUrl);
 
   return (
     <View key={item.name} className="py-1">
diff --git a/src/components/InputPrompt.tsx b/src/components/InputPrompt.tsx
