51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { userInfo } from 'os';
|
|
import React, { useState, useEffect } from 'react'
|
|
|
|
interface User {
|
|
id: number;
|
|
name: string;
|
|
email: string;
|
|
}
|
|
|
|
const UsersPage = async () => {
|
|
// Get the json file
|
|
const res = await fetch(
|
|
'https://jsonplaceholder.typicode.com/users',
|
|
// Option to disable caching entirely, useful for data that changes frequently.
|
|
{cache: 'no-store'}
|
|
|
|
// Option to store the data within the cache for a certain period of time
|
|
// { next: { revalidate: 10 }} // get fresh data every 10 seconds
|
|
);
|
|
// Create an object that will hold the users within the json file
|
|
const users: User[] = await res.json();
|
|
// Create a cache in order to hold the data for later(useful for tokens)
|
|
|
|
|
|
return (
|
|
<>
|
|
<h1>Users</h1>
|
|
{/* <p>{new Date().toLocaleTimeString()}</p> */}
|
|
{/* instead of an unordered list, we'll use a table
|
|
<ul>
|
|
{users.map(user => <li key={user.id}>{user.name}</li>)}
|
|
</ul> */}
|
|
<table className='table table-bordered'>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users.map(user=> <tr key={user.id}>
|
|
<td>{user.name}</td>
|
|
<td>{user.email}</td>
|
|
</tr>)}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default UsersPage |