str-react-api 1.0.0

package/app.js

@@ -0,0 +1,50 @@
+// api.js
+const BASE_URL = "https://yourapi.com"; // Aap apni API URL yahan dalenge
+
+const headers = {
+  "Content-Type": "application/json",
+  // Agar token ya koi aur headers ki zarurat ho toh, wo bhi yahan add kar sakte hain
+  // "Authorization": `Bearer ${token}`,
+};
+
+const handleResponse = async (response) => {
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.message || "Something went wrong");
+  }
+  return await response.json();
+};
+
+export const get = async (endpoint) => {
+  const response = await fetch(`${BASE_URL}/${endpoint}`, {
+    method: "GET",
+    headers,
+  });
+  return handleResponse(response);
+};
+
+export const post = async (endpoint, data) => {
+  const response = await fetch(`${BASE_URL}/${endpoint}`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(data),
+  });
+  return handleResponse(response);
+};
+
+export const put = async (endpoint, data) => {
+  const response = await fetch(`${BASE_URL}/${endpoint}`, {
+    method: "PUT",
+    headers,
+    body: JSON.stringify(data),
+  });
+  return handleResponse(response);
+};
+
+export const remove = async (endpoint) => {
+  const response = await fetch(`${BASE_URL}/${endpoint}`, {
+    method: "DELETE",
+    headers,
+  });
+  return handleResponse(response);
+};

package/intregare.js

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from "react";
+import { get, post, put, remove } from "./api";
+
+const App = () => {
+  const [data, setData] = useState([]);
+  const [newItem, setNewItem] = useState("");
+
+  useEffect(() => {
+    // Data ko load karte hain (GET request)
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      const result = await get("items"); // "items" ko apne endpoint se replace karein
+      setData(result);
+    } catch (error) {
+      console.error("Error fetching data:", error.message);
+    }
+  };
+
+  const handleAdd = async () => {
+    try {
+      await post("items", { name: newItem }); // POST request with new item
+      setNewItem(""); // Clear input
+      fetchData(); // Fetch updated data
+    } catch (error) {
+      console.error("Error adding item:", error.message);
+    }
+  };
+
+  const handleUpdate = async (id, updatedName) => {
+    try {
+      await put(`items/${id}`, { name: updatedName }); // PUT request to update item
+      fetchData();
+    } catch (error) {
+      console.error("Error updating item:", error.message);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await remove(`items/${id}`); // DELETE request
+      fetchData();
+    } catch (error) {
+      console.error("Error deleting item:", error.message);
+    }
+  };
+
+  return (
+    <div>
+      <h1>CRUD Operations in React</h1>
+
+      <div>
+        <input
+          type="text"
+          value={newItem}
+          onChange={(e) => setNewItem(e.target.value)}
+        />
+        <button onClick={handleAdd}>Add Item</button>
+      </div>
+
+      <ul>
+        {data.map((item) => (
+          <li key={item.id}>
+            {item.name} 
+            <button onClick={() => handleUpdate(item.id, "Updated Name")}>
+              Update
+            </button>
+            <button onClick={() => handleDelete(item.id)}>Delete</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default App;

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "str-react-api",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}