2025-03-17 User Detail

Concept

• check if login by get access_token from local_storage
• querry userId from backend if login and set it in local_storage
• use userId to querry user_detail
• Must set Uset-detal component as parent of menu-output

Why user-detail have to set as parent of menu-output

• Menu-output it always mount on web page every single page will see menu-output that make user-detail component always mount too.
• If user-detail not mount userdetail can't be query and if userdetail not query component will not know web page already login or not.
• After login menu-output will check login and decide which component should output between login component and not login component by check user detail had already query user-detail or not.

query userId

backend

• phee is the one who create api for get user-detail ask phee if have problem with get userId
• for query backen that have authentication require send header with query
• Example

  const objBackend = {
    method: "GET",
    url: "https://xpxz4ia541.execute-api.us-east-2.amazonaws.com/Test/baseUserId/get",//if phee re-deploy service api will change ask phee if can't connect to api.
    headers: { //require for query api backen with auth.
      Authorization: "Bearer " + localStorage.getItem("access_token"),
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: {},
  };
  const { data: userIdData } = useGetUserIdQuery(objBackend, {
    skip://not query backend if condition true, It the good way for set condition for query
      !localStorage.getItem("access_token") || 
      (localStorage.getItem("access_token") && localStorage.getItem("userId")),
  });