Mastering ReactJS - Bài 18: Tạo một lớp store lưu trữ dữ liệu

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

const userByUsername = {
    dungtv: {
        username: "dungtv",
        displayName: "Dung Ta Van"
    }
};

app.get('/users', (req, res) => {
    res.json(userByUsername);
});

app.post('/users/save', (req, res) => {
    const { username, displayName } = req.body;
    userByUsername[username] = { username, displayName };

    // Trạng thái Created
    res.status(201).json({savedUsername: username});
});

const port = 3000;
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

yarn create vite client

interface User {
    username: string,
    displayName: string
}

export default User;

import axios from 'axios';
import User from '../types/User';

class UserStore {
    private fetchedFromServer = false;
    private userByUsername = new Map<string, User>();

    public async saveUser(user: User) {
        this.userByUsername.set(user.username, user);
        this.saveUserToServer(user);
    }

    public async getUserMap(): Promise<Map<string, User>> {
        if (!this.fetchedFromServer) {
            const fetchUserMap = await this.fetchUserMapFromServer();
            fetchUserMap.forEach((value, key) => {
                this.userByUsername.set(key, value);
            });
            this.fetchedFromServer = true;
        }
        return this.userByUsername;
    }

    private async saveUserToServer(user: User) {
        axios.post('http://localhost:3000/users/save', user)
      };

    private async fetchUserMapFromServer(): Promise<Map<string, User>> {
        const data = (await axios.get('http://localhost:3000/users')).data;
        const userMap = new Map<string, User>(
            Object.entries(data)
        );
        return userMap;
    }
}

export default UserStore;

export default UserStore;
import { createContext, useContext, ReactNode } from 'react';
import UserStore from '../stores/UserStore';

interface StoresContextProps {
  userStore: UserStore;
}

const StoresContext = createContext<StoresContextProps | undefined>(undefined);

export const StoresProvider = ({ children }: { children: ReactNode }) => {
  const userStore = new UserStore();

  return (
    <StoresContext.Provider value={{ userStore }}>
      {children}
    </StoresContext.Provider>
  );
};

export const useStores = () => {
  const context = useContext(StoresContext);
  if (!context) {
    throw new Error('useStores must be used within a StoresProvider');
  }
  return context;
};

import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { StoresProvider } from './providers/StoresProvider'

createRoot(document.getElementById('root')!).render(
  <StoresProvider>
    <App />
  </StoresProvider>,
)

import { useState, useEffect } from 'react';
import './App.css';
import User from './types/User';
import { useStores } from './providers/StoresProvider';

function App() {
  const [username, setUsername] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [userMap, setUserMap] = useState(new Map<string, User>());

  const { userStore } = useStores();

  useEffect(() => {
    (async() => {
      setUserMap(await userStore.getUserMap());
    })();
  }, []);

  const handleSubmit = async (event: any) => {
    event.preventDefault();
    await userStore.saveUser({username, displayName});
    setUserMap(new Map(await userStore.getUserMap()));
  };

  return (
    <div>
      <div>
        <h1>User List</h1>
        <ul>
          {[...userMap].map(([key, user]) => (
            <li key={key}>
              {user.username} (DisplayName: {user.displayName})
            </li>
          ))}
        </ul>
      </div>
      <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          id="username"
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="displayName">Display Name:</label>
        <input
          id="displayName"
          type="text"
          value={displayName}
          onChange={(e) => setDisplayName(e.target.value)}
          required
        />
      </div>
      <button type="submit">Add User</button>
    </form>
    </div>
  );
}

export default App;