Prettier

deco3801-mortein · Oct 17, 2024 · 922d26b · 922d26b
1 parent 238d3c9
commit 922d26b
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 74 deletions.
diff --git a/README.md b/README.md
@@ -11,55 +11,56 @@
 
 ## 🌺 Table of Contents
 
-- [About](#about)
-- [Our Features](#our_features)
-- [Getting Started](#getting_started)
-- [Built Using](#built_using)
-- [Authors](#authors)
+-   [About](#about)
+-   [Our Features](#our_features)
+-   [Getting Started](#getting_started)
+-   [Built Using](#built_using)
+-   [Authors](#authors)
 
 ## 🍀 About <a name = "about"></a>
 
-Access our web application here: https://vibegrow.pro/ 
+Access our web application here: https://vibegrow.pro/
 
 Welcome to VibeGrow! Our innovative project combines hardware and software to revolutionize plant care. At its core is a small device attached to the base of a plant, capable of producing vibrations at frequencies used for insect communication. This device is wirelessly operated through a user-friendly web interface.
 Beyond pest control, VibeGrow monitors crucial plant health metrics (soil moisture, temperature, and light exposure), allowing users to care for their plants remotely. Our web application also features comprehensive plant and pest search functionality, providing users with easy access to vital gardening information.
 
 ## 🌷 Our Features<a name = "our_features"></a>
 
-- 💫 **Customized Homepage**: Displays all user plants with names and icons for quick identification.
-- 💫 **Real-Time Plant Health Monitoring:** Three progress bars (temperature, light exposure, soil moisture) provide at-a-glance health status.
-- 💫 **Detailed Garden Guidance:** Separate search functionalities for plants and pests, offering cultivation tips and pest control advice.
-  - Pest information gathered from [The Royal Horticultural Society](https://www.rhs.org.uk/biodiversity) and [GrowVeg](https://www.growveg.com.au/pests/australia-and-nz/).
-  - Plant information retrieved from the [Perenual Plant API](https://perenual.com/docs/api).
+-   💫 **Customized Homepage**: Displays all user plants with names and icons for quick identification.
+-   💫 **Real-Time Plant Health Monitoring:** Three progress bars (temperature, light exposure, soil moisture) provide at-a-glance health status.
+-   💫 **Detailed Garden Guidance:** Separate search functionalities for plants and pests, offering cultivation tips and pest control advice.
+    -   Pest information gathered from [The Royal Horticultural Society](https://www.rhs.org.uk/biodiversity) and [GrowVeg](https://www.growveg.com.au/pests/australia-and-nz/).
+    -   Plant information retrieved from the [Perenual Plant API](https://perenual.com/docs/api).
 
 ## 🙉 Getting Started <a name = "getting_started"></a>
+
 All code for this project can be found [here](/~https://github.com/deco3801-mortein).
 
 ### ✨Rebuilding the the Web Application
-   - Clone or download the [frontend repository](/~https://github.com/deco3801-mortein/frontend) to your local machine. 
-   - Open the project folder using your preferred code editor
-   - Add the following environment variables to your environment (these will give you access to our sdk package and the Perenual API for the plant guide):
 
-      ```NPM_AUTH=<your personal access token>```
+-   Clone or download the [frontend repository](/~https://github.com/deco3801-mortein/frontend) to your local machine.
+-   Open the project folder using your preferred code editor
+-   Add the following environment variables to your environment (these will give you access to our sdk package and the Perenual API for the plant guide):
+
+    `NPM_AUTH=<your personal access token>`
 
-      ```VITE_API_KEY=<your perenual plant API key>```
+    `VITE_API_KEY=<your perenual plant API key>`
 
-     - To get the NPM_AUTH token:
-       - Contact us to for access to install our package
-       - Authenticate with npm registry using a personal access token (link for help: https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry)
-     - To get the VITE_API_KEY: 
-       - Create an account and ask for a key from [perenual.com](https://perenual.com/docs/api).
-   - In your terminal, navigate to the cloned or downloaded frontend repository folder and run the following commands:
-     - ```npm install```
-     - ```npm run build```
-   - The created dist file can then be deployed using any web hosting service (such as AWS Amplify)
-   - You will need to give the hosting service your Perenual API key
+    -   To get the NPM_AUTH token:
+        -   Contact us to for access to install our package
+        -   Authenticate with npm registry using a personal access token (link for help: https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry)
+    -   To get the VITE_API_KEY:
+        -   Create an account and ask for a key from [perenual.com](https://perenual.com/docs/api).
 
-- **Accessing Our Deployed Web Application**:
-   - Go to https://vibegrow.pro to see our deployed website using AWS Amplify
+-   In your terminal, navigate to the cloned or downloaded frontend repository folder and run the following commands:
+    -   `npm install`
+    -   `npm run build`
+-   The created dist file can then be deployed using any web hosting service (such as AWS Amplify)
+-   You will need to give the hosting service your Perenual API key
 
+-   **Accessing Our Deployed Web Application**:
+    -   Go to https://vibegrow.pro to see our deployed website using AWS Amplify
 
 ## 🐜 Built Using <a name = "built_using"></a>
 
 React, Vite, AWS Amplify, Perenual Plant API
-
diff --git a/src/pages/SearchDetail.jsx b/src/pages/SearchDetail.jsx
@@ -6,76 +6,74 @@ import Header from "../components/Header";
 const API_KEY = import.meta.env.VITE_API_KEY;
 
 const SearchDetail = () => {
-    const { id } = useParams(); 
+    const { id } = useParams();
     const [plantData, setPlantData] = useState(null);
     const [error, setError] = useState(null);
 
     useEffect(() => {
-
         fetch(`https://perenual.com/api/species/details/${id}?key=${API_KEY}`)
-        .then((response) => {
-            if (!response.ok) {
-            throw new Error("Failed to fetch plant data");
-            }
-            return response.json();
-        })
-        .then((data) => {
-            setPlantData(data);
-        })
-        .catch((error) => {
-            console.error("Error fetching plant data:", error);
-            setError("Failed to load plant details. Please try again.");
-        });
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error("Failed to fetch plant data");
+                }
+                return response.json();
+            })
+            .then((data) => {
+                setPlantData(data);
+            })
+            .catch((error) => {
+                console.error("Error fetching plant data:", error);
+                setError("Failed to load plant details. Please try again.");
+            });
     }, [id]);
 
     if (error) {
         return <p className="error-message">{error}</p>;
     }
 
     if (!plantData) {
-        return <p>Loading...</p>; 
+        return <p>Loading...</p>;
     }
 
-
     const sunlight = Array.isArray(plantData.sunlight)
         ? plantData.sunlight.join(", ")
         : plantData.sunlight || "Unknown";
     const otherName = plantData.other_name?.join(", ") || "Unknown";
 
     return (
         <div className="search-detail-page">
-        <Header left="Back" title="Plant Detail" showGuide={false} />
-        <div className="plant-main">
-            <img
-            src={plantData.default_image?.regular_url}
-            alt={plantData.common_name}
-            className="plant-image"
-            />
-            <h1 className="plant-title">{plantData.common_name}</h1>
-        </div>
-        <div className="plant-info">
-            <div className="info-section">
-                <h3>Other Name:</h3>
-                <p>{otherName}</p>
-            </div>
-            <div className="info-section">
-                <h3>Cycle:</h3>
-                <p>{plantData.cycle}</p>
+            <Header left="Back" title="Plant Detail" showGuide={false} />
+            <div className="plant-main">
+                <img
+                    src={plantData.default_image?.regular_url}
+                    alt={plantData.common_name}
+                    className="plant-image"
+                />
+                <h1 className="plant-title">{plantData.common_name}</h1>
             </div>
-            <div className="info-section">
-                <h3>Watering:</h3>
-                 <p>{plantData.watering}</p>
+            <div className="plant-info">
+                <div className="info-section">
+                    <h3>Other Name:</h3>
+                    <p>{otherName}</p>
+                </div>
+                <div className="info-section">
+                    <h3>Cycle:</h3>
+                    <p>{plantData.cycle}</p>
+                </div>
+                <div className="info-section">
+                    <h3>Watering:</h3>
+                    <p>{plantData.watering}</p>
+                </div>
+                <div className="info-section">
+                    <h3>Sunlight:</h3>
+                    <p>{sunlight}</p>
+                </div>
             </div>
-            <div className="info-section">
-                <h3>Sunlight:</h3>
-                <p>{sunlight}</p>
+            <div className="plant-footer">
+                <p className="footer-text">Plant information from the Perenual Plant API</p>
             </div>
         </div>
-        <div className="plant-footer">
-            <p className="footer-text">Plant information from the Perenual Plant API</p>
-        </div>
-        </div>
     );
 };
 
-export default SearchDetail;
+export default SearchDetail;