Merge pull request #3 from kelvinthh/dev

Dev

Author: kelvinthh

README.md

@@ -21,6 +21,15 @@ This is a mobile version of the [Image Generation Next.js](https://github.com/ke
 - Azure Functions for back-end hosting
 - Azure Storage for storing images
 
+## Third-Party Libraries Used 📚
+- [Axios](https://axios-http.com/)
+- [react-native-toast-message](https://github.com/calintamas/react-native-toast-message)
+- [NativeWind](https://github.com/marklawlor/nativewind)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [React Native Async Storage](https://github.com/react-native-async-storage/async-storage)
+- [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv)
+- [Recoil](https://recoiljs.org/)
+
 ## Getting Started 🚀
 
 1. Make sure you have the back-end set up, this includes the Azure Functions and Storages from the [main Next.js project](https://github.com/kelvinthh/Image-Generation-Next.js).

ios/Podfile.lock

@@ -447,6 +447,8 @@ PODS:
     - React-jsi (= 0.71.6)
     - React-logger (= 0.71.6)
     - React-perflogger (= 0.71.6)
+  - RNCAsyncStorage (1.18.1):
+    - React-Core
   - Yoga (1.14.0)
 
 DEPENDENCIES:
@@ -501,6 +503,7 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -607,6 +610,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../node_modules/@react-native-async-storage/async-storage"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -662,6 +667,7 @@ SPEC CHECKSUMS:
   React-RCTVibration: 73d201599a64ea14b4e0b8f91b64970979fd92e6
   React-runtimeexecutor: 8692ac548bec648fa121980ccb4304afd136d584
   ReactCommon: 0c43eaeaaee231d7d8dc24fc5a6e4cf2b75bf196
+  RNCAsyncStorage: b90b71f45b8b97be43bc4284e71a6af48ac9f547
   Yoga: ba09b6b11e6139e3df8229238aa794205ca6a02a
 
 PODFILE CHECKSUM: ebe432ad56513222ebfc09b56e491909e15bf652

package-lock.json

@@ -8,6 +8,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-native-community/netinfo": "^9.3.9",
     "axios": "^1.3.5",
     "expo": "~48.0.10",

package.json

@@ -18,6 +18,7 @@ import { fetchImages, fetchSuggestion, generateImage } 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";
 
 const Body = () => {
   const [images, setImages] = useRecoilState(imagesState);
@@ -32,8 +33,10 @@ const Body = () => {
   const flatListRef = useRef<FlatList<ImageUrl>>(null);
   const isFirstRender = useRef(true);
 
-  useEffect(() => {
+  // AsyncStorage key
+  const LAST_GENERATED_TIME_KEY = "lastGeneratedTime";
 
+  useEffect(() => {
     // Prevent the toast pop up on the first render
     if (isFirstRender.current) {
       isFirstRender.current = false;
@@ -50,7 +53,35 @@ 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({
@@ -79,6 +110,8 @@ const Body = () => {
           text2: "Your image has been generated!",
           position: "bottom",
         });
+
+        await setLastGeneratedTime();
         await handleRefreshImage();
 
         // Scroll the FlatList to the top
@@ -178,7 +211,7 @@ const Body = () => {
         >
           <Text className="text-white">Use suggestion!</Text>
         </TouchableOpacity>
-        {(!hasInternet && !isFirstRender.current) && (
+        {!hasInternet && !isFirstRender.current && (
           <Text className="w-full my-1 text-red-500 font-light italic">
             ⛔️ Error: No internet connection.
           </Text>