မင်္ဂလာပါဗျ 

ဒီနေ့ React Course အတွက် Tutorial လေးလုပ်နေရင်းနဲ့ 

ဒီစာလေးရေးချင်စိတ်ပေါက်သွားတာပါ 

အခုပြသလို Approach မျိုးမဟုတ်ပဲ​ တခြား ကိုယ်သိတဲ့ apporach တွေလည်း

Comment မှာဝင်ရောက်ဆွေးနွေးလို့ရပါတယ်။

သတိ: ReactJS Basic လောက်ရထားသူများသာဖတ်ပါ။

Single Page Application တွေရေးတဲ့အခါမှာ error ကို Handle လုပ်ဖို့အတွက် 

သာမန် server side rendering တွေထက်ခက်ခဲပါတယ်

အခုဟာလည်းနည်းနည်းခက်တာမလို့ သေချာလိုက်ကြည့်ပီး

လိုက်စဉ်းစားဖို့အထူးလိုအပ်ပါတယ်။

ဖြစ်ချင်တဲ့ ဥပမာ လေးတစ်ခုပြောပြပါမယ်။

ကျွန်တော်တို့ web appတွေမှာ authentication and authorization 

အတွက် Redirect တွေမြောက်များစွာလုပ်ရပါတယ် Redirect လုပ်တာနဲ့အတူ Error Message တွေ 

တစ်ခါထည်းပြပေးရပါတယ် ဘာဖြစ်လို့ ဒီ page ကိုမလာသင့်ဘူးဆိုတာလေးတွေပေါ့ 

Laravel မှာ Session Flashing လုပ်တာလေးနဲ့သဘောတရားတော့ဆင်ပါတယ်

အဲ့တိုင်းရအောင်လိုက်ရေးထားခြင်းဖြစ်ပါတယ်။ လုံး၀ကြီးတူလို့တော့မရဘူးပေါ့ဗျာ React ကလည်းသူ့ logic နဲ့သူဆိုတော့ :D

နောက်ထပ်ထပ်စဉ်းစားကြည့်ရအောင်ဗျျာ

Login လုပ်ပီးသား လူတစ်ယောက်က Login Page ကိုရောက်သွားတာမျိုးမဖြစ်သင့်ပါဘူး

Single Page Application တွေမှာ တော့ 

Login Component မှာ auth ဖြစ်ပီးသားဆိုရင် ့ home or other page တစ်ခုခုကို  redirect လုပ်ရမယ်ပေါ့

ဒီလိုရေးထားလို့ရပါတယ်။

ဒီအထိအဆင်ပြေတယ်

ဒါပေမဲ့ Message ပြတဲ့အခါ Toast Message ပြတဲ့အခါမှာတော့ redirect.လုပ်လိုက်တဲ့အတွက်

message ကိုမပြနိုင်တာမျိုးဖြစ်သွားနိုင်ပါတယ်။

ဒီအတွက် Toast အတွက် Global Component တစ်ခုမှာ render လုပ်ထားမှာ မ ြေပာက်သွားမှာြဖစ်ပါတယ်။

မရမကလိုက်ရေးလို့တော့ရပါတယ်

Component တိုင်းက error state တစ်ခုကိုအမြဲတမ်းစောင့် နေအောင်ရေးထားလို့ရပါတယ်။

ဒါပေမဲ့ ဒီ logic ကြီးက နည်းနည်းတော့ရုပ်ဆိုးတယ်ဗျာ :P

အခုကျွန်တော်က ဒီပြသနာကိုပြေလည်ဖို့ Code တွေစရေးပြပါမယ်။

အသုံးပြုမဲ့ Technology တွေက 

1. React
2. Hook
3. Context Api
4. React Toastify

အစရှိတာတွေပဲဖြစ်ပါတယ်။

create-react-app နဲ project တစ်ခုယူထားပီး  react-toastify package ကိုသွင်းထားပါ။

Global Error Handle လုပ်လို့ရဖို့အတွက် 

Context တစ်ခုစပီး ရေးပါမယ် 

src/context/MessageContext.jsx ကိုဆောက်ပေးပါ။ အောက်က Code ကိုရေးပါ

import React, { useEffect, useState } from "react";
import { toast, ToastContainer } from "react-toastify";

const MessageContext = React.createContext();

//receive type and message variable
export const MessageContextProvider = (props) => {
  const [error, setError] = useState({});

  useEffect(() => {
    switch (error.type) {
      case "success":
        toast.success(error.message);
        setError({});
        break;
      case "error":
        toast.error(error.message);
        setError({});
        break;
    }
  }, [error]);

  return (
    <MessageContext.Provider value={{ setError }}>
      {props.children}
      <ToastContainer />
    </MessageContext.Provider>
  );
};

export default MessageContext;

ဒီ Code မှာ Context Object နဲ့ သက်ဆိုင်ရာ Provider ကို export လုပ်ထားပီး 

ဒီ Context က error ကို Flashing လိုပုံစံ အသုံးပြုနိုင်မှာဖြစ်ပါတယ်။

ဘယ်လို Component or ဘယ်လို Page မျိုးကမဆို  Redirect လုပ်ပီး Error ကို ပြနိုင်ဖို့ရည်ရွယ်ပီးစဉ်းစားရမှာဖြစ်ပါတယ်။

Code မှာ error state ကို စောင့်ကြည့်နေတဲ့ပုံစံမျိုးဖြစ်ပီး error မှာ success ကိုသတ်မှတ်ခဲ့ရင် toast နဲ့ success ကိုထုတ်ပြမှာဖြစ်ပီး

error မှာ error ကိုသတ်မှတ်ခဲ့ရင်တော့ error toast message ကိုထုတ်ပြပေးမှာဖြစ်ပါတယ်။

ဆက်ပီး App.jsx မှာ MessageContextProvider ကို Wrap လုပ်ပီး Global State အဖြစ်ရယူနိုင်အောင်လုပ်ပါမယ်။

src/App.jsx

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { MessageContextProvider } from "./Context/MessageContext";
import MainRouter from "./MainRouter";
export default function App() {
  return (
    <MessageContextProvider>
      <BrowserRouter>
        <MainRouter />
      </BrowserRouter>
    </MessageContextProvider>
  );
}

ဆက်ပီး Routing အတွက်ဆက်ရေးရအောင်

src/MainRouter.jsx

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./Home";
import Register from "./Register";

const MainRouter = () => {
  return (
    <Switch>
      <Route path="/" exact>
        <Home />
      </Route>
      <Route path="/register">
        <Register />
      </Route>
    </Switch>
  );
};
export default MainRouter;

ဆက်ပီး src/Home.jsx ကိုဆောက်ပီး Test လုပ်ဖို့ Plain Component တစ်ခုဆောက်ထားပါ။

Login လုပ်ပီးသားuser က Register Route ကိုလာခေါ်နေတယ်ဆိုရင် Redirect လုပ်ပေးဖို့လိုအပ်ပါတယ်

ဒီ့အပြင် Toast Message လေးပါထပ်ထုတ်ဖို့လိုပါတယ်။

src/Register.jsx

import React from "react";
import { useHistory } from "react-router-dom";
import MessageContext from "./Context/MessageContext";

export default function Register() {
  //context
  const messageContext = useContext(MessageContext);
  const history = useHistory();
  React.useEffect(() => {
    //login လုပ်ပီး သားဆိုရင် home page ကိုလှမ်းညွှန်ထားြခင်းြဖစ်ပါတယ်။
    if (isLogin) {
      //အပေါ်မှာ ဆောက်ထားတဲ့ hook ကို fire လှမ်းလုပ်ပေးလိုက်တာပါ။
      messageContext.setError({ type: "error", message: "You Already Login" });
      history.goBack();  //or history.push('/')
    }
  }, []);
  return (
    <div>
      <h1>Register Page</h1>
    </div>
  );
}

အထက်က Code အတိုင်း 

      messageContext.setError({ type: "error", message: "You Already Login" });

MessageContext ကို Fire လှမ်းလုပ်ပေးလိုက်ရင် ရပါပီ

MessageContext က GlobalContext ဖြစ်တဲ့အတွက် Redirect လုပ်တဲ့အခါ toast message ကဆက်ရှိနေမှာဖြစ်ပါတယ်။

ဘယ်လို Component or ဘယ်လို logic မျိုးမှာ မဆို  အပေါ်ကလို Fire တာနဲ့ Toast ကအလုပ်လုပ်နေမှာဖြစ်ပါတယ်။

နားမလည်တာရှိရင်တော့ comment မှာမေးထားလို့ရသလို MMCoder Facebook Page မှာလည်း လာမေးလို့ရပါတယ်။