init

src/app/places-app.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect, useReducer } from "react";
+import { COLLECTIONS } from "@/lib/mock-data";
+import {
+  INITIAL_STATE,
+  reducer,
+  type Screen,
+  type Tab,
+} from "@/lib/app-state";
+import { TabBar } from "@/components/ui-primitives";
+import { Icons } from "@/components/icons";
+import { PlacesListScreen } from "@/screens/places-list-screen";
+import { PlaceDetailScreen } from "@/screens/place-detail-screen";
+import { CollectionsListScreen } from "@/screens/collections-list-screen";
+import { CollectionDetailScreen } from "@/screens/collection-detail-screen";
+import { ProfileScreen } from "@/screens/profile-screen";
+import { AddPlaceSheet } from "@/sheets/add-place-sheet";
+import { InviteDialog } from "@/sheets/invite-dialog";
+import { MembersSheet, ConfirmDialog } from "@/sheets/members-sheet";
+
+export function PlacesApp() {
+  const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+
+  useEffect(() => {
+    if (!state.toast) return;
+    const key = state.toastKey;
+    const id = setTimeout(
+      () => dispatch({ type: "CLEAR_TOAST", key }),
+      2200,
+    );
+    return () => clearTimeout(id);
+  }, [state.toast, state.toastKey]);
+
+  // Online/offline detection
+  useEffect(() => {
+    const sync = () =>
+      dispatch({ type: "SET_OFFLINE", value: !navigator.onLine });
+    sync();
+    window.addEventListener("online", sync);
+    window.addEventListener("offline", sync);
+    return () => {
+      window.removeEventListener("online", sync);
+      window.removeEventListener("offline", sync);
+    };
+  }, []);
+
+  const top = state.stack[state.stack.length - 1];
+  const activeTab: Tab =
+    top.screen === "place" || top.screen === "collection"
+      ? state.tab
+      : (top.screen as Tab);
+
+  const onTab = (id: string) => {
+    if (id === "profile" || id === "collections" || id === "places") {
+      dispatch({ type: "TAB", tab: id });
+    }
+  };
+
+  const renderScreen = (screen: Screen) => {
+    if (screen === "places")
+      return <PlacesListScreen state={state} dispatch={dispatch} />;
+    if (screen === "collections")
+      return <CollectionsListScreen state={state} dispatch={dispatch} />;
+    if (screen === "profile")
+      return <ProfileScreen state={state} dispatch={dispatch} />;
+    if (screen === "place")
+      return (
+        <PlaceDetailScreen
+          state={{ ...state, placeId: top.placeId }}
+          dispatch={dispatch}
+        />
+      );
+    if (screen === "collection")
+      return (
+        <CollectionDetailScreen
+          state={{ ...state, collectionId: top.collectionId }}
+          dispatch={dispatch}
+        />
+      );
+    return null;
+  };
+
+  const m = state.modal;
+  const placeForDelete =
+    m?.type === "confirmDeletePlace"
+      ? state.places.find((p) => p.id === m.placeId)
+      : null;
+  const collectionForDelete =
+    m?.type === "confirmDeleteCollection"
+      ? COLLECTIONS.find((c) => c.id === m.collectionId)
+      : null;
+
+  return (
+    <div className="app-frame">
+      {renderScreen(top.screen)}
+      <TabBar
+        active={activeTab}
+        onTab={onTab}
+        onFab={() => dispatch({ type: "OPEN_ADD" })}
+        showFab={top.screen !== "profile"}
+      />
+
+      {m?.type === "add" && (
+        <AddPlaceSheet
+          onClose={() => dispatch({ type: "CLOSE_MODAL" })}
+          dispatch={dispatch}
+        />
+      )}
+      {m?.type === "invite" && (
+        <InviteDialog
+          collectionId={m.collectionId}
+          onClose={() => dispatch({ type: "CLOSE_MODAL" })}
+          dispatch={dispatch}
+        />
+      )}
+      {m?.type === "members" && (
+        <MembersSheet
+          collectionId={m.collectionId}
+          onClose={() => dispatch({ type: "CLOSE_MODAL" })}
+          dispatch={dispatch}
+        />
+      )}
+      {m?.type === "confirmDeletePlace" && placeForDelete && (
+        <ConfirmDialog
+          title="Xóa địa điểm?"
+          body={`"${placeForDelete.name}" sẽ bị xóa khỏi tất cả bộ sưu tập. Không thể hoàn tác.`}
+          confirmLabel="Xóa"
+          onConfirm={() =>
+            dispatch({ type: "DELETE_PLACE", placeId: m.placeId })
+          }
+          onClose={() => dispatch({ type: "CLOSE_MODAL" })}
+        />
+      )}
+      {m?.type === "confirmDeleteCollection" && collectionForDelete && (
+        <ConfirmDialog
+          title="Xóa bộ sưu tập?"
+          body={`"${collectionForDelete.name}" sẽ bị xóa. Các địa điểm bên trong vẫn còn ở "Địa điểm".`}
+          confirmLabel="Xóa"
+          onConfirm={() => {
+            dispatch({ type: "CLOSE_MODAL" });
+            dispatch({ type: "BACK" });
+            dispatch({ type: "TOAST", value: "Đã xóa" });
+          }}
+          onClose={() => dispatch({ type: "CLOSE_MODAL" })}
+        />
+      )}
+
+      {state.toast && (
+        <div className="toast" key={state.toastKey}>
+          <Icons.Check size={14} stroke={2.5} />
+          {state.toast}
+        </div>
+      )}
+    </div>
+  );
+}