Scribd
Upload
16 views

Final-Next - Js Code

Uploaded by

micamit121
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

Final-Next - Js Code

Uploaded by

micamit121
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { useEffect, useState } from "react";

// Define a type for your data


type UserData = {
[key: string]: string | string[];
};

type UserEntry = {
[key: string]: string | string[] | undefined; // Adjust this based on your data
structure
};

const Home = () => {


const [userInfo, setUserInfo] = useState<UserData[]>([]);
const [searchTerm, setSearchTerm] = useState<string>('');

useEffect(() => {
const getData = async () => {
try {
const query = await
fetch('https://script.google.com/macros/s/AKfycbwsr_mdDkyb1UPQ9YOjKQfd1Hv0jEg0azpDL
E5gIJHOgwQX9E-IKd2Qzc6FhzChjAPDDg/exec');
const response = await query.json();
console.log('response from API', response);
setUserInfo(response);
} catch (error) {
console.error('Error fetching data:', error);
}
};

// Fetch data initially


getData();

// Set up an interval to fetch data every 5 seconds (adjust as needed)


const intervalId = setInterval(() => {
getData();
}, 5000);

// Clean up the interval when the component is unmounted


return () => clearInterval(intervalId);
}, []); // The empty dependency array ensures that the effect runs only once on
mount

// Filter the data based on the search term


const filteredData = userInfo.filter((user) =>
Object.values(user).some((value) =>
Array.isArray(value) ? value.join(",
").toLowerCase().includes(searchTerm.toLowerCase()) :
value.toLowerCase().includes(searchTerm.toLowerCase())
)
);

// Sort the filtered data based on the time


const sortedData = filteredData.sort((a, b) => {
const getTime = (value: string | string[]) => {
if (Array.isArray(value)) {
return value.length > 0 ? new Date(value[0]).getTime() : 0;
}
return new Date(value).getTime();
};

const timeA = getTime(a.time);


const timeB = getTime(b.time);

return timeB - timeA;


});

// Function to send itemNumber data back to the API


const sendItemNumberToAPI = async (itemNumber: number) => {
try {
// Send the itemNumber data back to the API
await
fetch('https://script.google.com/macros/s/AKfycbx95ofBq_I6cbzkJ0S4XF9DVmmrooUwm_jfT
42yoKDvA0DLwUNjWdPNie1MMvQ03XmTKA/exec', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
itemNumber: itemNumber,
}),
});
console.log(`ItemNumber ${itemNumber} sent back to the API successfully.`);
} catch (error) {
console.error('Error sending itemNumber to API:', error);
}
};

return (
<div style={{ padding: "10px", border: "1px solid #ccc", borderRadius: "5px",
margin: "10px" }}>
<h1>ChipMonkey database</h1>

{/* Search bar */}


<input
type="text"
placeholder="Search by phone or customer info"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
style={{ marginBottom: "10px", padding: "5px" }}
/>

{/* Display sorted data */}


{sortedData.length > 0 ? (
sortedData.map((user: UserEntry, index: number) => {
// Find the original index in the userInfo array
const originalIndex = userInfo.findIndex((entry) => entry.time ===
user.time);

// Skip the entry with the original index 0 (demo entry)


if (originalIndex === 0) {
return null;
}

// Adjust item number to start from 1


const itemNumber = originalIndex !== -1 ? originalIndex : index;

return (
<div key={index} style={{ border: "1px solid #ddd", borderRadius:
"5px", padding: "10px", margin: "10px 0" }}>
<h4>Token Number {itemNumber}</h4>
{Object.entries(user).map(([key, value]) => (
<p key={key}>
<strong>{key}:</strong> {Array.isArray(value) ? value.join(",
") : value}
</p>
))}
{/* Add a button to send itemNumber data back to the API */}

</div>
);
})
) : (
<p>No matching data found.</p>
)}
</div>
);
};

export default Home;

You might also like