7.3.2 · Boot, routing, API calls, auth

branch: UAT

---

Boot sequence

1. npm start / static host serves build/
       │
2. index.tsx
      ReactDOM.createRoot(#root)
      <BrowserRouter basename={PUBLIC_URL}>   // "/meeting-backoffice"
      <App />
      index.tsx:8-16
       │
3. App.tsx
      ThemeProvider → CssBaseline → Routes under Layout
      App.tsx:14-26
       │
4. Page mount
      useEffect → fetch/axios ไป meeting / 2way API
      (ไม่มี getStaticProps — ทุกอย่าง client-side)

ไม่มีการห่อ auth HOC / ไม่มี redirect ไป login ภายในแอปนี้

---

Routing map (หลัง basename)

Path	Component	Fetch หลัก
/	pages/index.tsx Home	GET {MEETING}/secure/group/listgroup (:18-19)
/listapprover	listapprover	GET .../secure/approver/listApprover (:16-17)
/creategroup	creategroup	dropdowns + POST .../creategroup + 2way search
/editgroup	editgroup	listgroup + POST .../editgroup
/createapprover	createapprover	listApprover + delete + addNew

ภายใน list:

• สร้างกลุ่ม → navigate /creategroup
• แก้ไข → /editgroup?groupID=... (pattern เดียวกับ Next twin)
• จัดการผู้อนุมัติ → /createapprover

---

Env vars ที่โค้ดอ่าน

Var	ใช้ทำ	มีใน repo?
REACT_APP_MEETING_API	base ของทุก /secure/*	ไม่มี .env ใน git
REACT_APP_2WAY_API	POST /getUserByCondition	ไม่มี .env ใน git
PUBLIC_URL	basename + Sidebar href	ได้จาก homepage ตอน build = /meeting-backoffice

CRA ฝัง REACT_APP_* ตอน npm run build เท่านั้น — ไม่ใช่ runtime config ของ static host

สิ่งที่พบใน bundle ที่ commit (main.633a23c6.js)

วัตถุ process.env ที่ถูก inline มีอย่างน้อย:

PUBLIC_URL:"/meeting-backoffice", WDS_SOCKET_*, FAST_REFRESH

ไม่พบ ค่า string ของ uat-vtrcapi / vtrcapi ใน bundle — การเข้าถึงเป็น .REACT_APP_MEETING_API / .REACT_APP_2WAY_API บน object นั้น

ถ้า property ไม่ได้ถูกตั้งตอน build ค่าจะเป็น undefined และ URL กลายเป็น "undefined/secure/..." (หรือ equivalent) — CORR ความเสี่ยงสูง สำหรับ artifact ที่ commit ไว้

ยืนยัน: ไม่มีไฟล์ .env* ใน repo (glob ว่าง)

---

แคตตาล็อก API (จาก src/)

Base meeting = process.env.REACT_APP_MEETING_API

Method	Path	ไฟล์
GET	/secure/group/listgroup	pages/index.tsx:19, editgroup:284
POST	/secure/group/creategroup	creategroup:317
POST	/secure/group/editgroup	editgroup:374
GET	/secure/approver/listApprover	listapprover:17, createapprover:139
POST	/secure/approver/addNewApprover	createapprover:349
DELETE	/secure/approver/deleteapprover	createapprover:337
GET	/secure/finduserlistbyorg	create/edit/approver
GET	/secure/finddropdownbyorg/org/	同上
GET	/secure/finddropdownbyorg/division/	同上
GET	/secure/finddropdownbyorg/department/	同上

Base 2way = process.env.REACT_APP_2WAY_API

Method	Path	ไฟล์	Header พิเศษ
POST	/getUserByCondition	creategroup:361-366, createapprover:386-391	Authorization: Bearer testnaja

Hardcoded Bearer testnaja

headers: {
  Authorization: `Bearer testnaja`,
},

(creategroup/index.tsx:366, createapprover/index.tsx:391)

ค่านี้ถูก bake เข้า main.633a23c6.js ด้วย (พบสตริง Authorization:"Bearer testnaja" ใน bundle) — เป็น test token ที่หลุดเข้า production artifact

ใน meeting-backoffice (Next) การเรียกเดียวกัน ไม่มี header นี้ — พฤติกรรม auth ระหว่างสอง twin ไม่เหมือนกัน

---

Auth model ของแอปนี้

มีไหม	รายละเอียด
[token] / redirectbypass	ไม่มี ใน App.tsx routes
localStorage token helper	ไม่มี ไฟล์ utils/auth
อ่าน session จาก parent backoffice	ไม่พบ postMessage / shared cookie read ใน src/
Authorization บน /secure/*	ส่วนใหญ่ไม่แนบ; เฉพาะ 2way search ใช้ testnaja

ข้อสรุปจากซอร์ส: แอปนี้ ไม่มี auth flow ของตัวเอง พึ่ง (ก) การที่ผู้ใช้ผ่าน auth ของ vtrc-backoffice* ก่อนเข้าเมนู และ (ข) พฤติกรรม backend /secure/* ที่อาจไม่ enforce auth — ดูเอกสาร meeting-vtrc-api

UNVERIFIED: ว่า gateway หน้า backoffice กันคนนอกไม่ให้เปิด /meeting-backoffice/ โดยตรงได้หรือไม่

---

Home page fetch pattern (ต่างจาก SSG)

pages/index.tsx (สรุปจากโค้ด):

useEffect → set loading
  fetch(`${REACT_APP_MEETING_API}/secure/group/listgroup`)
  → json → set listGroupDataRs
  catch console.error("fetch Data Home", ...)
  finally clear loading (circular spinner)

ได้ข้อมูลสดทุกครั้งที่เปิดหน้า — ดีกว่า Next twin ที่ SSG ค้างตาม build แต่พังทันทีถ้า env ไม่ถูก bake

---

Approver save — เหมือน Next twin

createapprover: DELETE deleteapprover แล้ว POST addNewApprover; sourceDB hardcode แนวเดียวกับ twin (ตรวจในไฟล์หน้า createapprover คู่กับ Next)

---

Layout shell

Layout
  ├── Navbar (แถบสีแดง — โครงเดียวกับ Next)
  ├── Sidebar (เมนู 2 รายการ + PUBLIC_URL)
  └── <Outlet /> / children ของ react-router

ไม่ใช้ Next Layout children pattern — ใช้ react-router nested route element={<Layout />}

---

สิ่งที่ pipeline นี้ไม่ทำ

• ไม่เรียก Sentry
• ไม่มี i18n framework (ข้อความไทยใน JSX)
• ไม่มี bypass login จาก meeting API
• ไม่สร้าง PDF / ส่งอีเมล