({
- rootItemId: initialItemNode.page._id,
- dataLoader: {
- getItem: async (itemId) => {
- const response = await apiv3Get('/page-listing/item', { id: itemId });
- return response.data;
- },
- getChildren: async (itemId) => {
- const response = await apiv3Get('/page-listing/children', { id: itemId });
- return response.data.children.map(child => child._id);
- },
- },
- features: [asyncDataLoaderFeature],
-});
-
-// 既存のCustomTreeItemに渡すためのアダプター
-const adaptedNodes = tree.getItems().map(item =>
- new ItemNode(item.getItemData())
-);
-
-return (
-
- {adaptedNodes.map(node => (
-
-);
-```
-
-#### **Phase 2: Virtualization導入**
-
-**ファイル**: `ItemsTree.tsx` (Phase1をベースに拡張)
-```typescript
-const virtualizer = useVirtualizer({
- count: adaptedNodes.length,
- getScrollElement: () => containerRef.current,
- estimateSize: () => 40,
-});
-
-return (
-
-
- {virtualizer.getVirtualItems().map(virtualItem => {
- const node = adaptedNodes[virtualItem.index];
- return (
-
-
- );
- })}
-
-
ダッシュボードコンテンツ
+
+Dashboard.getLayout = function getLayout(page) {
+ return {page}
+}
+
+export default Dashboard
+
+// pages/_app.tsx
+export default function MyApp({ Component, pageProps }) {
+ const getLayout = Component.getLayout ?? ((page) => page)
+ return getLayout( = NextPage & {
+ getLayout?: (page: ReactElement) => ReactNode
+}
+
+export type AppPropsWithLayout = AppProps & {
+ Component: NextPageWithLayout
+}
+
+// pages/_app.tsx
+import type { AppPropsWithLayout } from '../types/layout'
+
+export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+ const getLayout = Component.getLayout ?? ((page) => page)
+ return getLayout(プロフィールコンテンツ
+}
+
+ProfilePage.getLayout = nestLayout(getBaseLayout, getDashboardLayout)
+```
+
+### 状態管理の最適化
+
+```typescript
+// レイアウトごとのコンテキスト分割
+const AuthLayout = ({ children }) => (
+
+
+ {children}
+
+
+)
+
+const PublicLayout = ({ children }) => (
+
+ {children}
+
+)
+
+// 各ページで適切なレイアウトを選択
+Page.getLayout = (page) => {page}
+```
+
+## バッドプラクティスと実装時の落とし穴
+
+### 避けるべきアンチパターン
+
+**❌ レイアウトの再作成**
+```typescript
+// 悪い例：レイアウトの永続性が失われる
+const BadPage = () => {
+ return (
+
+ ページコンテンツ
+
+ )
+}
+
+// ✅ 良い例：getLayout パターンを使用
+const GoodPage = () => ページコンテンツ
+GoodPage.getLayout = (page) => {page}
+```
+
+**❌ _app.tsx での条件付きレンダリング**
+```typescript
+// 悪い例：レイアウトの再マウントを引き起こす
+function MyApp({ Component, pageProps, router }) {
+ if (router.pathname.startsWith('/dashboard')) {
+ return {children}
+}
+```
+
+## 他のレイアウト管理手法との比較
+
+### Pages Router 内での比較
+
+| 手法 | 複雑度 | パフォーマンス | 柔軟性 | 学習曲線 |
+|------|--------|----------------|--------|----------|
+| getLayout | 中 | 高 | 高 | 中 |
+| HOCs | 高 | 中 | 高 | 高 |
+| _app.js ルーティング | 低 | 高 | 低 | 低 |
+| Context ベース | 高 | 中 | 高 | 高 |
+| ラッパーコンポーネント | 低 | 低 | 低 | 低 |
+
+### Next.js 13+ App Router との比較
+
+**App Router の利点：**
+- ビルトインのレイアウトネスティング
+- ファイルシステムベースの直感的な構造
+- 自動的な状態永続化
+- `loading.js` と `error.js` による組み込みの状態管理
+
+**getLayout パターンの利点：**
+- 明示的なレイアウト制御
+- 成熟した安定したパターン
+- シンプルなメンタルモデル
+- 優れた TTFB パフォーマンス
+
+**パフォーマンス比較：**
+- **TTFB**: Pages Router が App Router より最大 2 倍高速
+- **開発サーバー**: Pages Router がより安定
+- **バンドルサイズ**: getLayout により選択的な読み込みが可能
+
+## SEO と SSR/SSG への影響
+
+### Core Web Vitals への影響
+
+**測定された改善効果：**
+- **LCP (Largest Contentful Paint)**: レイアウトの永続化により改善
+- **INP (Interaction to Next Paint)**: JavaScript 実行時間の削減
+- **CLS (Cumulative Layout Shift)**: レイアウトシフトの除去
+
+**Netflix の事例：**
+- Time-to-Interactive が **50% 削減**
+- JavaScript バンドルサイズが **200KB 削減**
+- デスクトップユーザーの 97% が高速な First Input Delay を体験
+
+### SSR/SSG との統合
+
+```typescript
+// SSR との完全な互換性
+export async function getServerSideProps() {
+ const data = await fetchData()
+ return { props: { data } }
+}
+
+function Page({ data }) {
+ return {data.content}
+}
+
+Page.getLayout = (page) => {page}
+```
+
+## 実際のプロジェクトでの活用例
+
+### 企業での実装事例
+
+**Netflix:**
+- ログアウト済みホームページで Time-to-Interactive を 50% 削減
+- 戦略的なプリフェッチで後続ページロードを 30% 改善
+
+**Hulu:**
+- Next.js による統一されたフロントエンドアーキテクチャ
+- CSS-in-JS の自動コード分割を実装
+
+**Sonos:**
+- ビルド時間を **75% 短縮**
+- パフォーマンススコアを **10% 改善**
+
+## パフォーマンス測定と最適化
+
+### 測定ツールの設定
+
+```javascript
+// next.config.js - Bundle Analyzer の設定
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+ enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withBundleAnalyzer(nextConfig);
+
+// 使用方法
+// ANALYZE=true npm run build
+```
+
+### React DevTools Profiler の活用
+
+```javascript
+import { Profiler } from 'react';
+
+function onRenderCallback(id, phase, actualDuration, baseDuration) {
+ console.log({ id, phase, actualDuration, baseDuration });
+}
+
+
+ {children}
+
+```
+
+### 最適化テクニック
+
+**メモ化の実装：**
+```typescript
+import { memo, useMemo, useCallback } from 'react'
+
+const Layout = memo(({ children, menuItems }) => {
+ const processedMenu = useMemo(() =>
+ menuItems.filter(item => item.visible).sort(),
+ [menuItems]
+ );
+
+ const handleNavigation = useCallback((path) => {
+ router.push(path);
+ }, [router]);
+
+ return (
+
+
+ );
+});
+```
+
+**動的インポートによるコード分割：**
+```typescript
+import dynamic from 'next/dynamic';
+
+const DynamicSidebar = dynamic(() => import('../components/Sidebar'), {
+ loading: () =>
+
+ {children}
+
+);
+```
+
+### パフォーマンスバジェットの実装
+
+```javascript
+export const PERFORMANCE_BUDGETS = {
+ layoutRenderTime: 16, // 60fps のための 16ms
+ memoryUsage: 50 * 1024 * 1024, // 50MB
+ bundleSize: 200 * 1024, // 200KB
+ firstContentfulPaint: 2000, // 2秒
+};
+
+const measureLayoutPerformance = (layoutName, renderFn) => {
+ const start = performance.now();
+ const result = renderFn();
+ const duration = performance.now() - start;
+
+ if (duration > PERFORMANCE_BUDGETS.layoutRenderTime) {
+ console.warn(`Layout ${layoutName} がレンダーバジェットを超過: ${duration}ms`);
+ }
+
+ return result;
+};
+```
+
+## 実装チェックリスト
+
+### 初期設定
+- [ ] TypeScript の型定義を設定
+- [ ] `_app.tsx` に getLayout パターンを実装
+- [ ] React DevTools をインストール
+- [ ] Bundle Analyzer を設定
+
+### 最適化の優先順位
+
+**高影響・低労力：**
+- [ ] レイアウトコンポーネントに React.memo を実装
+- [ ] Bundle Analyzer で大きな依存関係を特定
+- [ ] Context Provider をレイアウトごとに分割
+
+**中影響・中労力：**
+- [ ] 非クリティカルなレイアウトコンポーネントに動的インポートを実装
+- [ ] Suspense 境界を追加してストリーミングを改善
+- [ ] 自動パフォーマンス監視を設定
+
+**高影響・高労力：**
+- [ ] 状態管理アーキテクチャの再設計
+- [ ] 包括的なプログレッシブエンハンスメントの実装
+- [ ] 高度なパフォーマンスバジェットシステムの作成
+
+## まとめ
+
+getLayout パターンは、Next.js Pages Router において**強力なパフォーマンス最適化とアーキテクチャの柔軟性**を提供します。適切に実装すれば、以下の利点が得られます：
+
+1. **パフォーマンスの向上**: 不要な再レンダリングの削減とバンドルサイズの最適化
+2. **ユーザー体験の向上**: 状態の永続化とスムーズなページ遷移
+3. **アーキテクチャの柔軟性**: ページごとのレイアウトカスタマイズとパフォーマンスの維持
+4. **メモリ効率**: コンポーネントの再利用による最適なリソース使用
+
+App Router が新しい代替手段を提供する一方で、getLayout パターンの理解は React のレンダリング最適化とコンポーネントライフサイクル管理への深い洞察を提供します。Pages Router アプリケーションでは、プロジェクトの開始時から getLayout を実装することで、アプリケーションのスケールに応じて最大限のパフォーマンス利点とアーキテクチャの柔軟性を維持できます。
\ No newline at end of file
diff --git a/.serena/memories/page-state-hooks-useLatestRevision-degradation.md b/.serena/memories/page-state-hooks-useLatestRevision-degradation.md
new file mode 100644
index 00000000000..97bf5abe8a1
--- /dev/null
+++ b/.serena/memories/page-state-hooks-useLatestRevision-degradation.md
@@ -0,0 +1,440 @@
+# Page State Hooks - useLatestRevision リファクタリング記録
+
+**Date**: 2025-10-31
+**Branch**: support/use-jotai
+
+## 🎯 実施内容のサマリー
+
+`support/use-jotai` ブランチで `useLatestRevision` が機能していなかった問題を解決し、リビジョン管理の状態管理を大幅に改善しました。
+
+### 主な成果
+
+1. ✅ `IPageInfoForEntity.latestRevisionId` を導入
+2. ✅ `useSWRxIsLatestRevision` を SWR ベースで実装（Jotai atom から脱却）
+3. ✅ `remoteRevisionIdAtom` を完全削除（状態管理の簡素化）
+4. ✅ `useIsRevisionOutdated` の意味論を改善（「意図的な過去閲覧」を考慮）
+5. ✅ `useRevisionIdFromUrl` で URL パラメータ取得を一元化
+
+---
+
+## 📋 実装の要点
+
+### 1. `IPageInfoForEntity` に `latestRevisionId` を追加
+
+**ファイル**: `packages/core/src/interfaces/page.ts`
+
+```typescript
+export type IPageInfoForEntity = Omit & {
+ // ... existing fields
+ latestRevisionId?: string; // ✅ 追加
+};
+```
+
+**ファイル**: `apps/app/src/server/service/page/index.ts:2605`
+
+```typescript
+const infoForEntity: Omit = {
+ // ... existing fields
+ latestRevisionId: page.revision != null ? getIdStringForRef(page.revision) : undefined,
+};
+```
+
+**データフロー**: SSR で `constructBasicPageInfo` が自動的に `latestRevisionId` を設定 → `useSWRxPageInfo` で参照
+
+---
+
+### 2. `useSWRxIsLatestRevision` を SWR ベースで実装
+
+**ファイル**: `stores/page.tsx:164-191`
+
+```typescript
+export const useSWRxIsLatestRevision = (): SWRResponse => {
+ const currentPage = useCurrentPageData();
+ const pageId = currentPage?._id;
+ const shareLinkId = useShareLinkId();
+ const { data: pageInfo } = useSWRxPageInfo(pageId, shareLinkId);
+
+ const latestRevisionId = pageInfo && 'latestRevisionId' in pageInfo
+ ? pageInfo.latestRevisionId
+ : undefined;
+
+ const key = useMemo(() => {
+ if (currentPage?.revision?._id == null) {
+ return null;
+ }
+ return ['isLatestRevision', currentPage.revision._id, latestRevisionId ?? null];
+ }, [currentPage?.revision?._id, latestRevisionId]);
+
+ return useSWRImmutable(
+ key,
+ ([, currentRevisionId, latestRevisionId]) => {
+ if (latestRevisionId == null) {
+ return true; // Assume latest if not available
+ }
+ return latestRevisionId === currentRevisionId;
+ },
+ );
+};
+```
+
+**使用箇所**: OldRevisionAlert, DisplaySwitcher, PageEditorReadOnly
+
+**判定**: `.data !== false` で「古いリビジョン」を検出
+
+---
+
+### 3. `remoteRevisionIdAtom` の完全削除
+
+**削除理由**:
+- `useSWRxPageInfo.data.latestRevisionId` で代替可能
+- 「Socket.io 更新検知」と「最新リビジョン保持」の用途が混在していた
+- 状態管理が複雑化していた
+
+**重要**: `RemoteRevisionData.remoteRevisionId` は型定義に残した
+→ コンフリクト解決時に「どのリビジョンに対して保存するか」の情報として必要
+
+---
+
+### 4. `useIsRevisionOutdated` の意味論的改善
+
+**改善前**: 単純に「現在のリビジョン ≠ 最新リビジョン」を判定
+**問題**: URL `?revisionId=xxx` で意図的に過去を見ている場合も `true` を返していた
+
+**改善後**: 「ユーザーが意図的に過去リビジョンを見ているか」を考慮
+
+**ファイル**: `states/context.ts:82-100`
+
+```typescript
+export const useRevisionIdFromUrl = (): string | undefined => {
+ const router = useRouter();
+ const revisionId = router.query.revisionId;
+ return typeof revisionId === 'string' ? revisionId : undefined;
+};
+
+export const useIsViewingSpecificRevision = (): boolean => {
+ const revisionId = useRevisionIdFromUrl();
+ return revisionId != null;
+};
+```
+
+**ファイル**: `stores/page.tsx:193-219`
+
+```typescript
+export const useIsRevisionOutdated = (): boolean => {
+ const { data: isLatestRevision } = useSWRxIsLatestRevision();
+ const isViewingSpecificRevision = useIsViewingSpecificRevision();
+
+ // If user intentionally views a specific revision, don't show "outdated" alert
+ if (isViewingSpecificRevision) {
+ return false;
+ }
+
+ if (isLatestRevision == null) {
+ return false;
+ }
+
+ // User expects latest, but it's not latest = outdated
+ return !isLatestRevision;
+};
+```
+
+---
+
+## 🎭 動作例
+
+| 状況 | isLatestRevision | isViewingSpecificRevision | isRevisionOutdated | 意味 |
+|------|------------------|---------------------------|---------------------|------|
+| 最新を表示中 | true | false | false | 正常 |
+| Socket.io更新を受信 | false | false | **true** | 「再fetchせよ」 |
+| URL `?revisionId=old` で過去を閲覧 | false | true | false | 「意図的な過去閲覧」 |
+
+---
+
+## 🔄 現状の remoteRevision 系 atom と useSetRemoteLatestPageData
+
+### 削除済み
+- ✅ `remoteRevisionIdAtom` - 完全削除（`useSWRxPageInfo.data.latestRevisionId` で代替）
+
+### 残存している atom（未整理）
+- ⚠️ `remoteRevisionBodyAtom` - ConflictDiffModal で使用
+- ⚠️ `remoteRevisionLastUpdateUserAtom` - ConflictDiffModal, PageStatusAlert で使用
+- ⚠️ `remoteRevisionLastUpdatedAtAtom` - ConflictDiffModal で使用
+
+### `useSetRemoteLatestPageData` の役割
+
+**定義**: `states/page/use-set-remote-latest-page-data.ts`
+
+```typescript
+export type RemoteRevisionData = {
+ remoteRevisionId: string; // 型には含むが atom には保存しない
+ remoteRevisionBody: string;
+ remoteRevisionLastUpdateUser?: IUserHasId;
+ remoteRevisionLastUpdatedAt: Date;
+};
+
+export const useSetRemoteLatestPageData = (): SetRemoteLatestPageData => {
+ // remoteRevisionBodyAtom, remoteRevisionLastUpdateUserAtom, remoteRevisionLastUpdatedAtAtom を更新
+ // remoteRevisionId は atom に保存しない（コンフリクト解決時のパラメータとしてのみ使用）
+};
+```
+
+**使用箇所**（6箇所）:
+
+1. **`page-updated.ts`** - Socket.io でページ更新受信時
+ ```typescript
+ // 他のユーザーがページを更新したときに最新リビジョン情報を保存
+ setRemoteLatestPageData({
+ remoteRevisionId: s2cMessagePageUpdated.revisionId,
+ remoteRevisionBody: s2cMessagePageUpdated.revisionBody,
+ remoteRevisionLastUpdateUser: s2cMessagePageUpdated.remoteLastUpdateUser,
+ remoteRevisionLastUpdatedAt: s2cMessagePageUpdated.revisionUpdateAt,
+ });
+ ```
+
+2. **`page-operation.ts`** - 自分がページ保存した後（`useUpdateStateAfterSave`）
+ ```typescript
+ // 自分が保存した後の最新リビジョン情報を保存
+ setRemoteLatestPageData({
+ remoteRevisionId: updatedPage.revision._id,
+ remoteRevisionBody: updatedPage.revision.body,
+ remoteRevisionLastUpdateUser: updatedPage.lastUpdateUser,
+ remoteRevisionLastUpdatedAt: updatedPage.updatedAt,
+ });
+ ```
+
+3. **`conflict.tsx`** - コンフリクト解決時（`useConflictResolver`）
+ ```typescript
+ // コンフリクト発生時にリモートリビジョン情報を保存
+ setRemoteLatestPageData(remoteRevidsionData);
+ ```
+
+4. **`drawio-modal-launcher-for-view.ts`** - Drawio 編集でコンフリクト発生時
+5. **`handsontable-modal-launcher-for-view.ts`** - Handsontable 編集でコンフリクト発生時
+6. **定義ファイル自体**
+
+### 現在のデータフロー
+
+```
+┌─────────────────────────────────────────────────────┐
+│ Socket.io / 保存処理 / コンフリクト │
+└─────────────────────────────────────────────────────┘
+ ↓
+┌─────────────────────────────────────────────────────┐
+│ useSetRemoteLatestPageData │
+│ ├─ remoteRevisionBodyAtom ← body │
+│ ├─ remoteRevisionLastUpdateUserAtom ← user │
+│ └─ remoteRevisionLastUpdatedAtAtom ← date │
+│ (remoteRevisionId は保存しない) │
+└─────────────────────────────────────────────────────┘
+ ↓
+┌─────────────────────────────────────────────────────┐
+│ 使用箇所 │
+│ ├─ ConflictDiffModal: body, user, date を表示 │
+│ └─ PageStatusAlert: user を表示 │
+└─────────────────────────────────────────────────────┘
+```
+
+### 問題点
+
+1. **PageInfo (latestRevisionId) との同期がない**:
+ - Socket.io 更新時に `remoteRevision*` atom は更新される
+ - しかし `useSWRxPageInfo.data.latestRevisionId` は更新されない
+ - → `useSWRxIsLatestRevision()` と `useIsRevisionOutdated()` がリアルタイム更新を検知できない
+
+2. **用途が限定的**:
+ - 主に ConflictDiffModal でリモートリビジョンの詳細を表示するために使用
+ - PageStatusAlert でも使用しているが、本来は `useIsRevisionOutdated()` で十分
+
+3. **データの二重管理**:
+ - リビジョン ID: `useSWRxPageInfo.data.latestRevisionId` で管理
+ - リビジョン詳細 (body, user, date): atom で管理
+ - 一貫性のないデータ管理
+
+---
+
+## 🎯 次に取り組むべきタスク
+
+### PageInfo (useSWRxPageInfo) の mutate が必要な3つのタイミング
+
+#### 1. 🔴 SSR時の optimistic update
+
+**問題**:
+- SSR で `pageWithMeta.meta` (IPageInfoForEntity) が取得されているが、`useSWRxPageInfo` のキャッシュに入っていない
+- クライアント初回レンダリング時に PageInfo が未取得状態になる
+
+**実装方針**:
+```typescript
+// [[...path]]/index.page.tsx または適切な場所
+const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId, shareLinkId);
+
+useEffect(() => {
+ if (pageWithMeta?.meta) {
+ mutatePageInfo(pageWithMeta.meta, { revalidate: false });
+ }
+}, [pageWithMeta?.meta, mutatePageInfo]);
+```
+
+**Note**:
+- Jotai の hydrate とは別レイヤー（Jotai は atom、これは SWR のキャッシュ）
+- `useSWRxPageInfo` は既に `initialData` パラメータを持っているが、呼び出し側で渡していない
+- **重要**: `mutatePageInfo` は bound mutate（hook から返されるもの）を使う
+
+---
+
+#### 2. 🔴 same route 遷移時の mutate
+
+**問題**:
+- `[[...path]]` ルート内での遷移（例: `/pageA` → `/pageB`）時に PageInfo が更新されない
+- `useFetchCurrentPage` が新しいページを取得しても PageInfo は古いまま
+
+**実装方針**:
+```typescript
+// states/page/use-fetch-current-page.ts
+export const useFetchCurrentPage = () => {
+ const shareLinkId = useAtomValue(shareLinkIdAtom);
+ const revisionIdFromUrl = useRevisionIdFromUrl();
+
+ // ✅ 追加: PageInfo の mutate 関数を取得
+ const { mutate: mutatePageInfo } = useSWRxPageInfo(currentPageId, shareLinkId);
+
+ const fetchCurrentPage = useAtomCallback(
+ useCallback(async (get, set, args) => {
+ // ... 既存のフェッチ処理 ...
+
+ const { data } = await apiv3Get('/page', params);
+ const { page: newData } = data;
+
+ set(currentPageDataAtom, newData);
+ set(currentPageIdAtom, newData._id);
+
+ // ✅ 追加: PageInfo を再フェッチ
+ mutatePageInfo(); // 引数なし = revalidate (再フェッチ)
+
+ return newData;
+ }, [shareLinkId, revisionIdFromUrl, mutatePageInfo])
+ );
+};
+```
+
+**Note**:
+- `mutatePageInfo()` を引数なしで呼ぶと SWR が再フェッチする
+- `/page` API からは meta が取得できないため、再フェッチが必要
+
+---
+
+#### 3. 🔴 Socket.io 更新時の mutate
+
+**問題**:
+- Socket.io で他のユーザーがページを更新したとき、`useSWRxPageInfo` のキャッシュが更新されない
+- `latestRevisionId` が古いままになる
+- **重要**: `useSWRxIsLatestRevision()` と `useIsRevisionOutdated()` が正しく動作しない
+
+**実装方針**:
+```typescript
+// client/services/side-effects/page-updated.ts
+const { mutate: mutatePageInfo } = useSWRxPageInfo(currentPage?._id, shareLinkId);
+
+const remotePageDataUpdateHandler = useCallback((data) => {
+ const { s2cMessagePageUpdated } = data;
+
+ // 既存: remoteRevision atom を更新
+ setRemoteLatestPageData(remoteData);
+
+ // ✅ 追加: PageInfo の latestRevisionId を optimistic update
+ if (currentPage?._id != null) {
+ mutatePageInfo((currentPageInfo) => {
+ if (currentPageInfo && 'latestRevisionId' in currentPageInfo) {
+ return {
+ ...currentPageInfo,
+ latestRevisionId: s2cMessagePageUpdated.revisionId,
+ };
+ }
+ return currentPageInfo;
+ }, { revalidate: false });
+ }
+}, [currentPage?._id, mutatePageInfo, setRemoteLatestPageData]);
+```
+
+**Note**:
+- 引数に updater 関数を渡して既存データを部分更新
+- `revalidate: false` で再フェッチを抑制（optimistic update のみ）
+
+---
+
+### SWR の mutate の仕組み
+
+**Bound mutate** (推奨):
+```typescript
+const { data, mutate } = useSWRxPageInfo(pageId, shareLinkId);
+mutate(newData, options); // 自動的に key に紐付いている
+```
+
+**グローバル mutate**:
+```typescript
+import { mutate } from 'swr';
+mutate(['/page/info', pageId, shareLinkId, isGuestUser], newData, options);
+```
+
+**optimistic update のオプション**:
+- `{ revalidate: false }` - 再フェッチせず、キャッシュのみ更新
+- `mutate()` (引数なし) - 再フェッチ
+- `mutate(updater, options)` - updater 関数で部分更新
+
+---
+
+### 🟡 優先度 中: PageStatusAlert の重複ロジック削除
+
+**ファイル**: `src/client/components/PageStatusAlert.tsx`
+
+**現状**: 独自に `isRevisionOutdated` を計算している
+**提案**: `useIsRevisionOutdated()` を使用
+
+---
+
+### 🟢 優先度 低
+
+- テストコードの更新
+- `initLatestRevisionField` の役割ドキュメント化
+
+---
+
+## 📊 アーキテクチャの改善
+
+### Before (問題のある状態)
+
+```
+┌─────────────────────┐
+│ latestRevisionAtom │ ← atom(true) でハードコード（機能せず）
+└─────────────────────┘
+┌─────────────────────┐
+│ remoteRevisionIdAtom│ ← 複数の用途で混在（Socket.io更新 + 最新リビジョン保持）
+└─────────────────────┘
+```
+
+### After (改善後)
+
+```
+┌──────────────────────────────┐
+│ useSWRxPageInfo │
+│ └─ data.latestRevisionId │ ← SSR で自動設定、SWR でキャッシュ管理
+└──────────────────────────────┘
+ ↓
+┌──────────────────────────────┐
+│ useSWRxIsLatestRevision() │ ← SWR ベース、汎用的な状態確認
+└──────────────────────────────┘
+ ↓
+┌──────────────────────────────┐
+│ useIsRevisionOutdated() │ ← 「再fetch推奨」のメッセージ性
+│ + useIsViewingSpecificRevision│ ← URL パラメータを考慮
+└──────────────────────────────┘
+```
+
+---
+
+## ✅ メリット
+
+1. **状態管理の簡素化**: Jotai atom を削減、SWR の既存インフラを活用
+2. **データフローの明確化**: SSR → SWR → hooks という一貫した流れ
+3. **意味論の改善**: `useIsRevisionOutdated` が「再fetch推奨」を正確に表現
+4. **保守性の向上**: URL パラメータ取得を `useRevisionIdFromUrl` に集約
+5. **型安全性**: `IPageInfoForEntity` で厳密に型付け
diff --git a/.serena/memories/page-transition-and-rendering-flow.md b/.serena/memories/page-transition-and-rendering-flow.md
new file mode 100644
index 00000000000..5c2c8be347b
--- /dev/null
+++ b/.serena/memories/page-transition-and-rendering-flow.md
@@ -0,0 +1,65 @@
+# ページ遷移とレンダリングのデータフロー
+
+このドキュメントは、GROWIのページ遷移からレンダリングまでのデータフローを解説します。
+
+## 登場人物
+
+1. **`[[...path]].page.tsx`**: Next.js の動的ルーティングを担うメインコンポーネント。サーバーサイドとクライアントサイドの両方で動作します。
+2. **`useSameRouteNavigation.ts`**: クライアントサイドでのパス変更を検知し、データ取得を**トリガー**するフック。
+3. **`useFetchCurrentPage.ts`**: データ取得と関連する Jotai atom の更新を一元管理するフック。データ取得が本当に必要かどうかの最終判断も担います。
+4. **`useShallowRouting.ts`**: サーバーサイドで正規化されたパスとブラウザのURLを同期させるフック。
+5. **`server-side-props.ts`**: サーバーサイドレンダリング（SSR）時にページデータを取得し、`props` としてページコンポーネントに渡します。
+
+---
+
+## フロー1: サーバーサイドレンダリング（初回アクセス時）
+
+ユーザーがURLに直接アクセスするか、ページをリロードした際のフローです。
+
+1. **リクエスト受信**: サーバーがユーザーからのリクエスト（例: `/user/username/memo`）を受け取ります。
+2. **`getServerSideProps` の実行**:
+ - `server-side-props.ts` の `getServerSidePropsForInitial` が実行されます。
+ - `retrievePageData` が呼び出され、パスの正規化（例: `/user/username` → `/user/username/`）が行われ、APIからページデータを取得します。
+ - 取得したデータと、正規化後のパス (`currentPathname`) を `props` として `[[...path]].page.tsx` に渡します。
+3. **コンポーネントのレンダリングとJotai Atomの初期化**:
+ - `[[...path]].page.tsx` は `props` を受け取り、そのデータで `currentPageDataAtom` などのJotai Atomを初期化します。
+ - `PageView` などのコンポーネントがサーバーサイドでレンダリングされます。
+4. **クライアントサイドでのハイドレーションとURL正規化**:
+ - レンダリングされたHTMLがブラウザに送信され、Reactがハイドレーションを行います。
+ - **`useShallowRouting`** が実行され、ブラウザのURL (`/user/username/memo`) と `props.currentPathname` (`/user/username/memo/`) を比較します。
+ - 差異がある場合、`router.replace` を `shallow: true` で実行し、ブラウザのURLをサーバーが認識している正規化後のパスに静かに更新します。
+
+---
+
+## フロー2: クライアントサイドナビゲーション（` = mockDeep();
+mockRouter.asPath = '/test-path'; // TypeScript補完・型チェック有効
+
+// 複雑なUnion型も完全サポート
+interface ComplexProps {
+ currentPageId?: string | null;
+ currentPathname?: string | null;
+}
+const mockProps: DeepMockProxy = mockDeep();
+```
+
+### React Testing Library + Jotai統合
+```typescript
+const renderWithProvider = (ui: React.ReactElement, scope?: Scope) => {
+ const Wrapper = ({ children }: { children: React.ReactNode }) => (
+ {children}
+ );
+ return render(ui, { wrapper: Wrapper });
+};
+```
+
+## 実践パターン
+
+### 非同期テスト
+```typescript
+import { waitFor, act } from '@testing-library/react';
+
+await act(async () => {
+ result.current.triggerAsyncAction();
+});
+
+await waitFor(() => {
+ expect(result.current.isLoading).toBe(false);
+});
+```
+
+### 詳細アサーション
+```typescript
+expect(mockFunction).toHaveBeenCalledWith(
+ expect.objectContaining({
+ pathname: '/expected-path',
+ data: expect.any(Object)
+ })
+);
+```
+
+## 実行コマンド
+
+### 基本テスト実行
+```bash
+# Vitest単体
+pnpm run test:vitest
+
+# Vitest単体（coverageあり）
+pnpm run test:vitest:coverage
+
+# 特定ファイルのみ実行（coverageあり）
+pnpm run test:vitest src/path/to/test.spec.tsx
+```
+
+### package.jsonスクリプト参照
+```json
+{
+ "scripts": {
+ "test": "run-p test:*",
+ "test:jest": "cross-env NODE_ENV=test TS_NODE_PROJECT=test/integration/tsconfig.json jest",
+ "test:vitest": "vitest run --coverage"
+ }
+}
+```
+
+## Jest→Vitest移行要点
+- `jest.config.js` → `vitest.config.ts`
+- `@types/jest` → `vitest/globals`
+- ESModulesネイティブサポート → 高速起動・実行
+
+この設定により型安全性と保守性を両立した高品質テストが可能。
\ No newline at end of file
diff --git a/.serena/serena_config.yml b/.serena/serena_config.yml
new file mode 100644
index 00000000000..f95ea3fd557
--- /dev/null
+++ b/.serena/serena_config.yml
@@ -0,0 +1,10 @@
+web_dashboard: false
+# whether to open the Serena web dashboard (which will be accessible through your web browser) that
+# shows Serena's current session logs - as an alternative to the GUI log window which
+# is supported on all platforms.
+
+web_dashboard_open_on_launch: false
+# whether to open a browser window with the web dashboard when Serena starts (provided that web_dashboard
+# is enabled). If set to False, you can still open the dashboard manually by navigating to
+# http://localhost:24282/dashboard/ in your web browser (24282 = 0x5EDA, SErena DAshboard).
+# If you have multiple instances running, a higher port will be used; try port 24283, 24284, etc.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72c65cfc54b..8307593fb58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,66 @@
# Changelog
-## [Unreleased](https://github.com/growilabs/compare/v7.3.4...HEAD)
+## [Unreleased](https://github.com/growilabs/compare/v7.3.9...HEAD)
*Please do not manually update this file. We've automated the process.*
+## [v7.3.9](https://github.com/growilabs/compare/v7.3.8...v7.3.9) - 2025-12-09
+
+### 🐛 Bug Fixes
+
+* fix: Change the name of maintenance mode. (#10559) @hikaru-n-cpu
+
+### 🧰 Maintenance
+
+* support: Add new intern names to staff credits (#10556) @riona-k
+
+## [v7.3.8](https://github.com/growilabs/compare/v7.3.7...v7.3.8) - 2025-12-04
+
+### 💎 Features
+
+* feat: Enable page bulk export for GROWI.cloud (#10292) @arafubeatbox
+* feat: Users statistics table for admin (#10539) @riona-k
+
+### 🧰 Maintenance
+
+* ci(deps): bump validator from 13.15.20 to 13.15.22 (#10560) @[dependabot[bot]](https://github.com/apps/dependabot)
+
+## [v7.3.7](https://github.com/growilabs/compare/v7.3.6...v7.3.7) - 2025-11-25
+
+### 💎 Features
+
+* feat(pdf-converter): Enable puppeteer-cluster config of pdf-converter from env var (#10516) @arafubeatbox
+
+### 🐛 Bug Fixes
+
+* fix: Admin form degradation (#10540) @yuki-takei
+
+## [v7.3.6](https://github.com/growilabs/compare/v7.3.5...v7.3.6) - 2025-11-18
+
+### 🐛 Bug Fixes
+
+* fix: Printing styles (#10505) @yuki-takei
+
+### 🧰 Maintenance
+
+* ci(deps): bump js-yaml from 4.1.0 to 4.1.1 (#10511) @[dependabot[bot]](https://github.com/apps/dependabot)
+* support: Configure biome for app routes excluding apiv3 (#10496) @arafubeatbox
+
+## [v7.3.5](https://github.com/growilabs/compare/v7.3.4...v7.3.5) - 2025-11-10
+
+### 💎 Features
+
+* feat: Activity Log on the user page for viewing recent activity (#10487) @arvid-e
+
+### 🐛 Bug Fixes
+
+* fix: PDF-converter major/minor tags not updated on release (#10476) @arafubeatbox
+
+### 🧰 Maintenance
+
+* support: Configure biome for app/src/server/models dir (#10419) @arafubeatbox
+* support: Playwright tests biome migration (#10248) @arafubeatbox
+
## [v7.3.4](https://github.com/growilabs/compare/v7.3.3...v7.3.4) - 2025-11-04
### 🚀 Improvement
diff --git a/CLAUDE.md b/CLAUDE.md
index 432a772be7a..ce91e507cd0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,9 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
## Language
-If it is detected at the start or during a session that the user's primary language is not English, always respond in that language from then on. However, technical terms may remain in English as needed.
+If we detect at the beginning of a conversation that the user's primary language is not English, we will always respond in that language. However, we may retain technical terms in English if necessary.
+
+When generating source code, all comments and explanations within the code will be written in English.
## Project Overview
diff --git a/apps/app/.eslintrc.js b/apps/app/.eslintrc.js
index 61773f717b8..be2edbd68be 100644
--- a/apps/app/.eslintrc.js
+++ b/apps/app/.eslintrc.js
@@ -32,23 +32,13 @@ module.exports = {
'src/linter-checker/**',
'src/migrations/**',
'src/models/**',
- 'src/features/callout/**',
- 'src/features/comment/**',
- 'src/features/templates/**',
- 'src/features/mermaid/**',
- 'src/features/search/**',
- 'src/features/plantuml/**',
- 'src/features/external-user-group/**',
- 'src/features/page-bulk-export/**',
- 'src/features/growi-plugin/**',
- 'src/features/opentelemetry/**',
- 'src/features/openai/**',
- 'src/features/rate-limiter/**',
+ 'src/features/**',
'src/stores-universal/**',
'src/interfaces/**',
'src/utils/**',
'src/components/**',
'src/services/**',
+ 'src/states/**',
'src/stores/**',
'src/pages/**',
'src/server/crowi/**',
@@ -58,6 +48,43 @@ module.exports = {
'src/server/util/**',
'src/server/app.ts',
'src/server/repl.ts',
+ 'src/server/middlewares/**',
+ 'src/server/routes/*.js',
+ 'src/server/routes/*.ts',
+ 'src/server/routes/attachment/**',
+ 'src/server/routes/apiv3/interfaces/**',
+ 'src/server/routes/apiv3/pages/**',
+ 'src/server/routes/apiv3/user/**',
+ 'src/server/routes/apiv3/personal-setting/**',
+ 'src/server/routes/apiv3/security-settings/**',
+ 'src/server/routes/apiv3/app-settings/**',
+ 'src/server/routes/apiv3/page/**',
+ 'src/server/routes/apiv3/*.js',
+ 'src/server/routes/apiv3/*.ts',
+ 'src/server/service/*.ts',
+ 'src/server/service/*.js',
+ 'src/server/service/access-token/**',
+ 'src/server/service/config-manager/**',
+ 'src/server/service/page/**',
+ 'src/server/service/page-listing/**',
+ 'src/server/service/revision/**',
+ 'src/server/service/s2s-messaging/**',
+ 'src/server/service/search-delegator/**',
+ 'src/server/service/search-reconnect-context/**',
+ 'src/server/service/slack-command-handler/**',
+ 'src/server/service/slack-event-handler/**',
+ 'src/server/service/socket-io/**',
+ 'src/server/service/system-events/**',
+ 'src/server/service/user-notification/**',
+ 'src/server/service/yjs/**',
+ 'src/server/service/file-uploader/**',
+ 'src/server/service/global-notification/**',
+ 'src/server/service/growi-bridge/**',
+ 'src/server/service/growi-info/**',
+ 'src/server/service/import/**',
+ 'src/server/service/in-app-notification/**',
+ 'src/server/service/interfaces/**',
+ 'src/server/service/normalize-data/**',
],
settings: {
// resolve path aliases by eslint-import-resolver-typescript
@@ -66,6 +93,7 @@ module.exports = {
},
},
rules: {
+ 'space-before-function-paren': 'off',
'@typescript-eslint/no-var-requires': 'off',
// set 'warn' temporarily -- 2021.08.02 Yuki Takei
diff --git a/apps/app/.swc/plugins/v7_linux_x86_64_0.106.16/85face98bcf0ea217842cb93383692497c6ae8a7da71a76bf3d93a3a42b4228c b/apps/app/.swc/plugins/v7_linux_x86_64_0.106.16/85face98bcf0ea217842cb93383692497c6ae8a7da71a76bf3d93a3a42b4228c
new file mode 100644
index 00000000000..bbbc3452344
Binary files /dev/null and b/apps/app/.swc/plugins/v7_linux_x86_64_0.106.16/85face98bcf0ea217842cb93383692497c6ae8a7da71a76bf3d93a3a42b4228c differ
diff --git a/apps/app/bin/github-actions/update-readme.sh b/apps/app/bin/github-actions/update-readme.sh
index 29ef8885185..3f2020bd4f8 100644
--- a/apps/app/bin/github-actions/update-readme.sh
+++ b/apps/app/bin/github-actions/update-readme.sh
@@ -2,4 +2,4 @@
cd docker
-sed -i -e "s/^\([*] \[\`\)[^\`]\+\(\`, \`7\.0\`, .\+\]\)\(.\+\/blob\/v\).\+\(\/apps\/app\/docker\/Dockerfile.\+\)$/\1${RELEASED_VERSION}\2\3${RELEASED_VERSION}\4/" README.md
+sed -i -e "s/^\([*] \[\`\)[^\`]\+\(\`, \`7\.4\`, .\+\]\)\(.\+\/blob\/v\).\+\(\/apps\/app\/docker\/Dockerfile.\+\)$/\1${RELEASED_VERSION}\2\3${RELEASED_VERSION}\4/" README.md
diff --git a/apps/app/docker/README.md b/apps/app/docker/README.md
index 8949a6b67f3..0e913e0479a 100644
--- a/apps/app/docker/README.md
+++ b/apps/app/docker/README.md
@@ -10,9 +10,9 @@ GROWI Official docker image
Supported tags and respective Dockerfile links
------------------------------------------------
-* [`7.1.0`, `7.1`, `7`, `latest` (Dockerfile)](https://github.com/growilabs/growi/blob/v7.1.0/apps/app/docker/Dockerfile)
-* [`7.0.23`, `7.0` (Dockerfile)](https://github.com/growilabs/growi/blob/v7.0.23/apps/app/docker/Dockerfile)
-* [`6.3.2`, `6.3`, `6` (Dockerfile)](https://github.com/growilabs/growi/blob/v6.3.2/apps/app/docker/Dockerfile)
+* [`7.4.0`, `7.4`, `7`, `latest` (Dockerfile)](https://github.com/growilabs/growi/blob/v7.4.0/apps/app/docker/Dockerfile)
+* [`7.3.0`, `7.3` (Dockerfile)](https://github.com/growilabs/growi/blob/v7.3.0/apps/app/docker/Dockerfile)
+* [`7.2.0`, `7.2` (Dockerfile)](https://github.com/growilabs/growi/blob/v7.2.0/apps/app/docker/Dockerfile)
What is GROWI?
diff --git a/apps/app/docs/plan/README.md b/apps/app/docs/plan/README.md
new file mode 100644
index 00000000000..944e685c914
--- /dev/null
+++ b/apps/app/docs/plan/README.md
@@ -0,0 +1,40 @@
+# React State Management Documentation
+
+# React State Management Documentation
+
+## Current Documentation
+
+### [`jotai-migration.md`](jotai-migration.md)
+Jotai移行のガイドドキュメント（実装方針・パターン）
+
+- 移行方針と背景
+- 実装パターンとガイドライン
+- 判断基準とベストプラクティス
+- 移行の成果と技術スタック
+
+### [`jotai-migration-progress.md`](jotai-migration-progress.md)
+実装進捗と次のステップ（随時更新）
+
+- 完了済み実装の一覧
+- 次の実装ステップと優先順位
+- 進捗サマリーと更新履歴
+
+---
+
+## ドキュメント構造について
+
+### 設計方針
+**役割分離**: 安定的なガイドと頻繁に更新される進捗を分離
+
+- **`jotai-migration.md`**: 実装方針とパターン（安定的）
+- **`jotai-migration-progress.md`**: 進捗と次のステップ（頻繁更新）
+
+### メリット
+- **メンテナンス性向上**: 更新頻度に応じた適切な構造
+- **情報の明確化**: 各ドキュメントの責務が明確
+- **開発効率向上**: 必要な情報に素早くアクセス可能
+
+### 推奨される利用方法
+1. **新規参入者**: `jotai-migration.md` で実装方針とパターンを理解
+2. **開発者**: `jotai-migration-progress.md` で次のタスクを確認
+3. **レビュー**: `jotai-migration.md` の実装パターンで一貫性を保証
diff --git a/apps/app/next.config.js b/apps/app/next.config.js
index 78c1c872aba..9b63078c004 100644
--- a/apps/app/next.config.js
+++ b/apps/app/next.config.js
@@ -58,6 +58,7 @@ const getTranspilePackages = () => {
'github-slugger',
'html-url-attributes',
'estree-util-is-identifier-name',
+ 'superjson',
...listPrefixedPackages([
'remark-',
'rehype-',
@@ -159,8 +160,10 @@ module.exports = async (phase) => {
};
// production server
+ // Skip withSuperjson() in production server phase because the pages directory
+ // doesn't exist in the production build and withSuperjson() tries to find it
if (phase === PHASE_PRODUCTION_SERVER) {
- return withSuperjson()(nextConfig);
+ return nextConfig;
}
const withBundleAnalyzer = require('@next/bundle-analyzer')({
diff --git a/apps/app/package.json b/apps/app/package.json
index aca90c5bc39..f562913ebe5 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -1,6 +1,6 @@
{
"name": "@growi/app",
- "version": "7.3.5-RC.0",
+ "version": "7.4.0-RC.0",
"license": "MIT",
"private": "true",
"scripts": {
@@ -28,7 +28,7 @@
"launch-dev:ci": "cross-env NODE_ENV=development pnpm run dev:migrate && pnpm run ts-node src/server/app.ts --ci",
"lint:typecheck": "vue-tsc --noEmit",
"lint:eslint": "eslint --quiet \"**/*.{js,mjs,jsx,ts,mts,tsx}\"",
- "lint:biome": "biome check",
+ "lint:biome": "biome check --diagnostic-level=error",
"lint:styles": "stylelint \"src/**/*.scss\"",
"lint:openapi:apiv3": "node node_modules/swagger2openapi/oas-validate tmp/openapi-spec-apiv3.json",
"lint:openapi:apiv1": "node node_modules/swagger2openapi/oas-validate tmp/openapi-spec-apiv1.json",
@@ -127,7 +127,6 @@
"diff_match_patch": "^0.1.1",
"dotenv-flow": "^3.2.0",
"ejs": "^3.1.10",
- "esa-node": "^0.2.2",
"escape-string-regexp": "^4.0.0",
"expose-gc": "^1.0.0",
"express": "^4.20.0",
@@ -147,8 +146,10 @@
"i18next-resources-to-backend": "^1.2.1",
"is-absolute-url": "^4.0.1",
"is-iso-date": "^0.0.1",
+ "jotai": "^2.12.3",
+ "js-cookie": "^3.0.5",
"js-tiktoken": "^1.0.15",
- "js-yaml": "^4.1.0",
+ "js-yaml": "^4.1.1",
"jsonrepair": "^3.12.0",
"katex": "^0.16.21",
"ldapjs": "^3.0.2",
@@ -175,7 +176,7 @@
"next": "^14.2.32",
"next-dynamic-loading-props": "^0.1.1",
"next-i18next": "^15.3.1",
- "next-superjson": "^0.0.4",
+ "next-superjson": "^1.0.7",
"next-themes": "^0.2.1",
"nocache": "^4.0.0",
"node-cron": "^3.0.2",
@@ -230,7 +231,7 @@
"sanitize-filename": "^1.6.3",
"socket.io": "^4.7.5",
"string-width": "=4.2.2",
- "superjson": "^1.9.1",
+ "superjson": "^2.2.2",
"swagger-jsdoc": "^6.2.8",
"swr": "^2.3.2",
"throttle-debounce": "^5.0.0",
@@ -246,7 +247,7 @@
"url-join": "^4.0.0",
"usehooks-ts": "^2.6.0",
"uuid": "^11.0.3",
- "validator": "^13.15.20",
+ "validator": "^13.15.22",
"ws": "^8.17.1",
"xss": "^1.0.15",
"y-mongodb-provider": "^0.2.0",
@@ -269,10 +270,13 @@
"@growi/editor": "workspace:^",
"@growi/ui": "workspace:^",
"@handsontable/react": "=2.1.0",
+ "@headless-tree/core": "^1.5.1",
+ "@headless-tree/react": "^1.5.1",
"@next/bundle-analyzer": "^14.1.3",
"@popperjs/core": "^2.11.8",
"@swc-node/jest": "^1.8.1",
"@swc/jest": "^0.2.36",
+ "@tanstack/react-virtual": "^3.13.12",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/user-event": "^14.5.2",
"@types/archiver": "^6.0.2",
@@ -280,6 +284,7 @@
"@types/express": "^4.17.21",
"@types/hast": "^3.0.4",
"@types/jest": "^29.5.2",
+ "@types/js-cookie": "^3.0.6",
"@types/ldapjs": "^2.2.5",
"@types/mdast": "^4.0.4",
"@types/node-cron": "^3.0.11",
@@ -315,6 +320,7 @@
"jest": "^29.5.0",
"jest-date-mock": "^1.0.8",
"jest-localstorage-mock": "^2.4.14",
+ "jotai-devtools": "^0.11.0",
"load-css-file": "^1.0.0",
"material-icons": "^1.11.3",
"mdast-util-directive": "^3.0.0",
diff --git a/apps/app/public/static/locales/en_US/admin.json b/apps/app/public/static/locales/en_US/admin.json
index 388c8d09f0a..d6acb02ba04 100644
--- a/apps/app/public/static/locales/en_US/admin.json
+++ b/apps/app/public/static/locales/en_US/admin.json
@@ -339,7 +339,7 @@
"supplymentary_message_to_start": "As for the API, only the administrator API will be functional.",
"start_maintenance_mode": "Start maintenance mode",
"end_maintenance_mode": "End maintenance mode",
- "description": "Maintenance mode restricts all user operations. Always start the maintenance mode before \"importing data\" and \"upgrading to V5\". To exit, go to \"Security Settings\" > \"Maintenance Mode\"."
+ "description": "Maintenance mode restricts all user operations. Always start the maintenance mode before \"importing data\" and \"upgrading to V5\". To exit, go to \"App Settings\" > \"Maintenance Mode\"."
},
"app_setting": {
"site_name": "Site name",
@@ -531,7 +531,7 @@
"page_path": "Page Path",
"beta_warning": "This function is Beta.",
"import_from": "Import from {{from}}",
- "import_growi_archive": "Import GROWI archive",
+ "import_growi_archive": "Import Archive Data",
"error": {
"only_upsert_available": "Only 'Upsert' option is available for pages collection."
},
@@ -577,23 +577,11 @@
}
}
},
- "esa_settings": {
- "team_name": "Team name",
- "access_token": "Access token",
- "test_connection": "Test connection to esa"
- },
- "qiita_settings": {
- "team_name": "Team name",
- "access_token": "Access token",
- "test_connection": "Test connection to qiita:team"
- },
"import": "Import",
"skip_username_and_email_when_overlapped": "Skip username and email using same username and email in new environment",
"prepare_new_account_for_migration": "Prepare new account for migration",
"archive_data_import_detail": "More Details? Ckick here.",
- "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html",
- "page_skip": "Pages with a name that already exists on GROWI are not imported",
- "Directory_hierarchy_tag": "Directory hierarchy tag"
+ "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html"
},
"export_management": {
"export_archive_data": "Export Archive Data",
@@ -796,7 +784,11 @@
"unset": "No",
"related_username": "Related user's ",
"cannot_invite_maximum_users": "Can not invite more than the maximum number of users.",
- "current_users": "Current users:"
+ "user_statistics": {
+ "total": "Total Users",
+ "active": "Active",
+ "inactive": "Inactive"
+ }
},
"user_group_management": {
"user_group_management": "User Group Management",
@@ -1011,12 +1003,6 @@
"ADMIN_ARCHIVE_DATA_UPLOAD": "Upload Archived Data",
"ADMIN_GROWI_DATA_IMPORTED": "Import Archived Data",
"ADMIN_UPLOADED_GROWI_DATA_DISCARDED": "Discard Archived Data",
- "ADMIN_ESA_DATA_IMPORTED": "Import from esa.io",
- "ADMIN_ESA_DATA_UPDATED": "Update esa.io import settings",
- "ADMIN_CONNECTION_TEST_OF_ESA_DATA": "Test connection to esa",
- "ADMIN_QIITA_DATA_IMPORTED": "Import from Qiita:Team",
- "ADMIN_QIITA_DATA_UPDATED": "Update Qiita:Team import settings",
- "ADMIN_CONNECTION_TEST_OF_QIITA_DATA": "Test connection to Qiita:Team",
"ADMIN_ARCHIVE_DATA_CREATE": "Create Archived Data",
"ADMIN_ARCHIVE_DATA_DOWNLOAD": "Download Archive Data",
"ADMIN_ARCHIVE_DATA_DELETE": "Delete Archive Data",
diff --git a/apps/app/public/static/locales/en_US/translation.json b/apps/app/public/static/locales/en_US/translation.json
index 413636484c9..64dcaa9db8c 100644
--- a/apps/app/public/static/locales/en_US/translation.json
+++ b/apps/app/public/static/locales/en_US/translation.json
@@ -999,7 +999,18 @@
},
"user_home_page": {
"bookmarks": "Bookmarks",
- "recently_created": "Recently Created"
+ "recently_created": "Recently Created",
+ "recent_activity": "Recent Activity",
+ "unknown_action": "made an unspecified change",
+ "page_create": "created a page",
+ "page_update": "updated a page",
+ "page_delete": "deleted a page",
+ "page_delete_completely": "deleted a page",
+ "page_rename": "renamed a page",
+ "page_revert": "reverted a page",
+ "page_like": "liked a page",
+ "page_duplicate": "duplicated a page",
+ "comment_create": "posted a comment"
},
"bookmark_folder": {
"bookmark_folder": "bookmark folder",
diff --git a/apps/app/public/static/locales/fr_FR/admin.json b/apps/app/public/static/locales/fr_FR/admin.json
index 132fc234a8d..032b8df7bee 100644
--- a/apps/app/public/static/locales/fr_FR/admin.json
+++ b/apps/app/public/static/locales/fr_FR/admin.json
@@ -339,7 +339,7 @@
"supplymentary_message_to_start": "Seul l'API d'administration sera actif.",
"start_maintenance_mode": "Activer le mode maitenance",
"end_maintenance_mode": "Désactiver le mode maitenance",
- "description": "Le mode maintenance restreint l'utilisation de GROWI. Toujours démarrer le mode maintenance avant l'\"import de données\" et la \"conversion vers la V5\"."
+ "description": "Le mode maintenance restreint l'utilisation de GROWI. Toujours démarrer le mode maintenance avant l'\"import de données\" et la \"conversion vers la V5\".Pour quitter ce mode, veuillez vous rendre dans « Paramètres de l'application » > « Mode maintenance »."
},
"app_setting": {
"site_name": "Nom",
@@ -531,7 +531,7 @@
"page_path": "Chemin de page",
"beta_warning": "Cette fonctionnalité est en beta.",
"import_from": "Importer depuis {{from}}",
- "import_growi_archive": "Importer une archive GROWI",
+ "import_growi_archive": "Importer les données d'archive",
"error": {
"only_upsert_available": "Seul l'option 'Upsert' est disponible pour les collections de pages"
},
@@ -577,23 +577,11 @@
}
}
},
- "esa_settings": {
- "team_name": "Nom de l'équipe",
- "access_token": "Jeton d'accès",
- "test_connection": "Essai de la connection esa"
- },
- "qiita_settings": {
- "team_name": "Nom de l'équipe",
- "access_token": "Jeton d'accès",
- "test_connection": "Essai de la connection qiita:team"
- },
"import": "Importer",
"skip_username_and_email_when_overlapped": "Passe le nom et adresse courriel exactes dans le nouvel environnement",
"prepare_new_account_for_migration": "Préparer le compte pour la migration",
"archive_data_import_detail": "En savoir plus",
- "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html",
- "page_skip": "Les pages ayant le nom d'une page déjà existante ne seront pas importées.",
- "Directory_hierarchy_tag": "Tag de hiérarchie"
+ "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html"
},
"export_management": {
"export_archive_data": "Archive de données d'export",
@@ -796,7 +784,11 @@
"unset": "Non",
"related_username": "Utilisateur ",
"cannot_invite_maximum_users": "La limite maximale d'utilisateurs invitables est atteinte.",
- "current_users": "Utilisateurs:"
+ "user_statistics": {
+ "total": "Utilisateurs totaux",
+ "active": "Actifs",
+ "inactive": "Inactifs"
+ }
},
"user_group_management": {
"user_group_management": "Gestion des groupes",
@@ -1010,12 +1002,6 @@
"ADMIN_ARCHIVE_DATA_UPLOAD": "Téléverser les données d'archive",
"ADMIN_GROWI_DATA_IMPORTED": "Importer les données d'archive",
"ADMIN_UPLOADED_GROWI_DATA_DISCARDED": "Supprimer les données d'archive",
- "ADMIN_ESA_DATA_IMPORTED": "Importer depuis esa.io",
- "ADMIN_ESA_DATA_UPDATED": "Mettre à jour les paramètres d'import esa.io",
- "ADMIN_CONNECTION_TEST_OF_ESA_DATA": "Tester la connexion esa",
- "ADMIN_QIITA_DATA_IMPORTED": "Importer depuis Qiita:Team",
- "ADMIN_QIITA_DATA_UPDATED": "Mettre à jour les paramètres d'import Qiita:Team",
- "ADMIN_CONNECTION_TEST_OF_QIITA_DATA": "Tester la connexion Qiita:Team",
"ADMIN_ARCHIVE_DATA_CREATE": "Créer données d'archive",
"ADMIN_ARCHIVE_DATA_DOWNLOAD": "Télécharger les données d'archive",
"ADMIN_ARCHIVE_DATA_DELETE": "Supprimer les données d'archive",
diff --git a/apps/app/public/static/locales/fr_FR/translation.json b/apps/app/public/static/locales/fr_FR/translation.json
index 0ac01bb785e..3a6f2792703 100644
--- a/apps/app/public/static/locales/fr_FR/translation.json
+++ b/apps/app/public/static/locales/fr_FR/translation.json
@@ -993,7 +993,18 @@
},
"user_home_page": {
"bookmarks": "Favoris",
- "recently_created": "Page récentes"
+ "recently_created": "Page récentes",
+ "recent_activity": "Activité récente",
+ "unknown_action": "a effectué une modification non spécifiée",
+ "page_create": "a créé une page",
+ "page_update": "a mis à jour une page",
+ "page_delete": "a supprimé une page",
+ "page_delete_completely": "a supprimé complètement une page",
+ "page_rename": "a renommé une page",
+ "page_revert": "a restauré une page",
+ "page_duplicate": "a dupliqué une page",
+ "page_like": "a aimé une page",
+ "comment_create": "a publié un commentaire"
},
"bookmark_folder": {
"bookmark_folder": "dossier de favoris",
diff --git a/apps/app/public/static/locales/ja_JP/admin.json b/apps/app/public/static/locales/ja_JP/admin.json
index 6e8254fefff..fbea2868428 100644
--- a/apps/app/public/static/locales/ja_JP/admin.json
+++ b/apps/app/public/static/locales/ja_JP/admin.json
@@ -348,7 +348,7 @@
"supplymentary_message_to_start": "API についても管理者用 API しか機能しなくなります。",
"start_maintenance_mode": "メンテナンスモードを開始する",
"end_maintenance_mode": "メンテナンスモードを終了する",
- "description": "メンテナンスモードでは、ユーザーのあらゆる操作を制限します。「データのインポート」および「V5 へのアップグレード」の際には必ずメンテナンスモードを開始してから行ってください。終了するには「セキュリティ設定」>「メンテナンスモード」から操作してください。"
+ "description": "メンテナンスモードでは、ユーザーのあらゆる操作を制限します。「データのインポート」および「V5 へのアップグレード」の際には必ずメンテナンスモードを開始してから行ってください。終了するには「アプリ設定」>「メンテナンスモード」から操作してください。"
},
"app_setting": {
"site_name": "サイト名",
@@ -540,7 +540,7 @@
"page_path": "ページパス",
"beta_warning": "この機能はベータ版です",
"import_from": "{{from}} からインポート",
- "import_growi_archive": "GROWI アーカイブをインポート",
+ "import_growi_archive": "データインポート",
"error": {
"only_upsert_available": "pages コレクションには 'Upsert' オプションのみ対応しています"
},
@@ -586,23 +586,11 @@
}
}
},
- "esa_settings": {
- "team_name": "チーム名",
- "access_token": "アクセストークン",
- "test_connection": "接続テスト"
- },
- "qiita_settings": {
- "team_name": "チーム名",
- "access_token": "アクセストークン",
- "test_connection": "接続テスト"
- },
"import": "インポート",
"skip_username_and_email_when_overlapped": "ユーザー名またはメールアドレスが同じ場合、その部分がスキップされます。",
"prepare_new_account_for_migration": "移行用のアカウントを新環境で用意してください。",
"archive_data_import_detail": "参考： GROWI Docs - データのインポート",
- "admin_archive_data_import_guide_url": "https://docs.growi.org/ja/admin-guide/management-cookbook/import.html#growi-%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%83%87%E3%83%BC%E3%82%BF%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88",
- "page_skip": "既に GROWI 側に同名のページが存在する場合、そのページはスキップされます",
- "Directory_hierarchy_tag": "ディレクトリ階層タグ"
+ "admin_archive_data_import_guide_url": "https://docs.growi.org/ja/admin-guide/management-cookbook/import.html#growi-%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%83%87%E3%83%BC%E3%82%BF%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88"
},
"export_management": {
"export_archive_data": "データアーカイブ",
@@ -805,7 +793,11 @@
"unset": "未設定",
"related_username": "関連付けられているユーザーの ",
"cannot_invite_maximum_users": "ユーザーが上限に達したため招待できません。",
- "current_users": "現在のユーザー数："
+ "user_statistics": {
+ "total": "総ユーザー数",
+ "active": "アクティブ",
+ "inactive": "非アクティブ"
+ }
},
"user_group_management": {
"user_group_management": "グループ管理",
@@ -1020,12 +1012,6 @@
"ADMIN_ARCHIVE_DATA_UPLOAD": "アーカイブデータのアップロード",
"ADMIN_GROWI_DATA_IMPORTED": "アーカイブデータのインポート",
"ADMIN_UPLOADED_GROWI_DATA_DISCARDED": "アーカイブデータの破棄",
- "ADMIN_ESA_DATA_IMPORTED": "esa.io からインポート",
- "ADMIN_ESA_DATA_UPDATED": "esa.io のインポート設定の更新",
- "ADMIN_CONNECTION_TEST_OF_ESA_DATA": "esa.io の接続テスト",
- "ADMIN_QIITA_DATA_IMPORTED": "Qiita:Team からのインポート",
- "ADMIN_QIITA_DATA_UPDATED": "Qiita:Team のインポート設定の更新",
- "ADMIN_CONNECTION_TEST_OF_QIITA_DATA": "Qiita:Team の接続テスト",
"ADMIN_ARCHIVE_DATA_CREATE": "アーカイブデータの作成",
"ADMIN_ARCHIVE_DATA_DOWNLOAD": "アーカイブデータのダウンロード",
"ADMIN_ARCHIVE_DATA_DELETE": "アーカイブデータの削除",
diff --git a/apps/app/public/static/locales/ja_JP/translation.json b/apps/app/public/static/locales/ja_JP/translation.json
index 2f90269d566..3afef6febc5 100644
--- a/apps/app/public/static/locales/ja_JP/translation.json
+++ b/apps/app/public/static/locales/ja_JP/translation.json
@@ -1032,7 +1032,18 @@
},
"user_home_page": {
"bookmarks": "ブックマーク",
- "recently_created": "最近作成したページ"
+ "recently_created": "最近作成したページ",
+ "recent_activity": "最近のアクティビティ",
+ "unknown_action": "未指定の変更を加えました",
+ "page_create": "ページを作成しました",
+ "page_update": "ページを更新しました",
+ "page_delete": "ページを削除しました",
+ "page_delete_completely": "ページを完全に削除しました",
+ "page_rename": "ページの名前を変更しました",
+ "page_revert": "ページを元に戻しました",
+ "page_duplicate": "ページを複製しました",
+ "page_like": "ページをいいねしました",
+ "comment_create": "コメントを投稿しました"
},
"bookmark_folder": {
"bookmark_folder": "ブックマークフォルダ",
diff --git a/apps/app/public/static/locales/ko_KR/admin.json b/apps/app/public/static/locales/ko_KR/admin.json
index 5f6d90daf70..27b4151aefd 100644
--- a/apps/app/public/static/locales/ko_KR/admin.json
+++ b/apps/app/public/static/locales/ko_KR/admin.json
@@ -339,7 +339,7 @@
"supplymentary_message_to_start": "API의 경우 관리자 API만 작동합니다.",
"start_maintenance_mode": "유지 보수 모드 시작",
"end_maintenance_mode": "유지 보수 모드 종료",
- "description": "유지 보수 모드는 모든 사용자 작업을 제한합니다. 데이터 가져오기 및 V5로 업그레이드 전에 항상 유지 보수 모드를 시작하십시오. 종료하려면 보안 설정 > 유지 보수 모드로 이동하십시오."
+ "description": "유지 보수 모드는 모든 사용자 작업을 제한합니다. 데이터 가져오기 및 V5로 업그레이드 전에 항상 유지 보수 모드를 시작하십시오. 종료하려면 보안 설정 > 유지 보수 모드로 이동하십시오.종료하려면 ‘앱 설정’ > '유지보수 모드'에서 조작하십시오."
},
"app_setting": {
"site_name": "사이트 이름",
@@ -531,7 +531,7 @@
"page_path": "페이지 경로",
"beta_warning": "이 기능은 베타입니다.",
"import_from": "{{from}}에서 가져오기",
- "import_growi_archive": "GROWI 아카이브 가져오기",
+ "import_growi_archive": "아카이브 데이터 가져오기",
"error": {
"only_upsert_available": "페이지 컬렉션에는 'Upsert' 옵션만 사용할 수 있습니다."
},
@@ -577,23 +577,11 @@
}
}
},
- "esa_settings": {
- "team_name": "팀 이름",
- "access_token": "액세스 토큰",
- "test_connection": "esa 연결 테스트"
- },
- "qiita_settings": {
- "team_name": "팀 이름",
- "access_token": "액세스 토큰",
- "test_connection": "qiita:team 연결 테스트"
- },
"import": "가져오기",
"skip_username_and_email_when_overlapped": "새 환경에서 동일한 사용자 이름과 이메일을 사용하는 경우 사용자 이름과 이메일 건너뛰기",
"prepare_new_account_for_migration": "마이그레이션을 위한 새 계정 준비",
"archive_data_import_detail": "자세한 내용은 여기를 클릭하십시오.",
- "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html",
- "page_skip": "GROWI에 이미 존재하는 이름의 페이지는 가져오지 않습니다.",
- "Directory_hierarchy_tag": "디렉토리 계층 태그"
+ "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html"
},
"export_management": {
"export_archive_data": "아카이브 데이터 내보내기",
@@ -796,7 +784,11 @@
"unset": "아니요",
"related_username": "관련 사용자 ",
"cannot_invite_maximum_users": "최대 사용자 수 이상을 초대할 수 없습니다.",
- "current_users": "현재 사용자:"
+ "user_statistics": {
+ "total": "총 사용자",
+ "active": "활성",
+ "inactive": "비활성"
+ }
},
"user_group_management": {
"user_group_management": "사용자 그룹 관리",
@@ -1011,12 +1003,6 @@
"ADMIN_ARCHIVE_DATA_UPLOAD": "아카이브 데이터 업로드",
"ADMIN_GROWI_DATA_IMPORTED": "아카이브 데이터 가져오기",
"ADMIN_UPLOADED_GROWI_DATA_DISCARDED": "업로드된 GROWI 데이터 버리기",
- "ADMIN_ESA_DATA_IMPORTED": "esa.io에서 가져오기",
- "ADMIN_ESA_DATA_UPDATED": "esa.io 가져오기 설정 업데이트",
- "ADMIN_CONNECTION_TEST_OF_ESA_DATA": "esa 연결 테스트",
- "ADMIN_QIITA_DATA_IMPORTED": "Qiita:Team에서 가져오기",
- "ADMIN_QIITA_DATA_UPDATED": "Qiita:Team 가져오기 설정 업데이트",
- "ADMIN_CONNECTION_TEST_OF_QIITA_DATA": "Qiita:Team 연결 테스트",
"ADMIN_ARCHIVE_DATA_CREATE": "아카이브 데이터 생성",
"ADMIN_ARCHIVE_DATA_DOWNLOAD": "아카이브 데이터 다운로드",
"ADMIN_ARCHIVE_DATA_DELETE": "아카이브 데이터 삭제",
diff --git a/apps/app/public/static/locales/ko_KR/translation.json b/apps/app/public/static/locales/ko_KR/translation.json
index 498e8475a5a..6951b1f0b41 100644
--- a/apps/app/public/static/locales/ko_KR/translation.json
+++ b/apps/app/public/static/locales/ko_KR/translation.json
@@ -959,7 +959,18 @@
},
"user_home_page": {
"bookmarks": "북마크",
- "recently_created": "최근 생성됨"
+ "recently_created": "최근 생성됨",
+ "recent_activity": "최근 활동",
+ "unknown_action": "지정되지 않은 변경 사항을 적용했습니다",
+ "page_create": "페이지를 생성했습니다",
+ "page_update": "페이지를 업데이트했습니다",
+ "page_delete": "페이지를 삭제했습니다",
+ "page_delete_completely": "페이지를 완전히 삭제했습니다",
+ "page_rename": "페이지 이름을 변경했습니다",
+ "page_revert": "페이지를 되돌렸습니다",
+ "page_duplicate": "페이지를 복제했습니다",
+ "page_like": "페이지에 좋아요를 눌렀습니다",
+ "comment_create": "댓글을 게시했습니다"
},
"bookmark_folder": {
"bookmark_folder": "북마크 폴더",
diff --git a/apps/app/public/static/locales/zh_CN/admin.json b/apps/app/public/static/locales/zh_CN/admin.json
index 005575f6027..2437d1e039c 100644
--- a/apps/app/public/static/locales/zh_CN/admin.json
+++ b/apps/app/public/static/locales/zh_CN/admin.json
@@ -348,7 +348,7 @@
"supplymentary_message_to_start": "至于API，只有管理员的API将是有效的。",
"start_maintenance_mode": "启动维护模式",
"end_maintenance_mode": "结束维护模式",
- "description": "维护模式限制了所有的用户操作。 在执行 \"数据导入 \"和 \"升级到V5 \"之前，务必启动维护模式。 要退出，进入 \"安全设置\">\"维护模式\"。"
+ "description": "维护模式限制了所有的用户操作。 在执行 \"数据导入 \"和 \"升级到V5 \"之前，务必启动维护模式。 要退出，进入 \"系统设置\">\"维护模式\"。"
},
"app_setting": {
"site_name": "网站名称 ",
@@ -540,7 +540,7 @@
"page_path": "相对路径",
"beta_warning": "这个函数是Beta。",
"import_from": "Import from {{from}}",
- "import_growi_archive": "Import GROWI archive",
+ "import_archive_data": "导入存档数据",
"error": {
"only_upsert_available": "Only 'Upsert' option is available for pages collection."
},
@@ -586,23 +586,11 @@
}
}
},
- "esa_settings": {
- "team_name": "Team name",
- "access_token": "Access token",
- "test_connection": "Test connection to esa"
- },
- "qiita_settings": {
- "team_name": "Team name",
- "access_token": "Access token",
- "test_connection": "Test connection to qiita:team"
- },
"import": "Import",
"skip_username_and_email_when_overlapped": "Skip username and email using same username and email in new environment",
"prepare_new_account_for_migration": "Prepare new account for migration",
"archive_data_import_detail": "More details? Click here.",
- "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html",
- "page_skip": "Pages with a name that already exists on GROWI are not imported",
- "Directory_hierarchy_tag": "Directory hierarchy tag"
+ "admin_archive_data_import_guide_url": "https://docs.growi.org/en/admin-guide/management-cookbook/import.html"
},
"export_management": {
"export_archive_data": "导出主题数据",
@@ -805,7 +793,11 @@
"unset": "否",
"related_username": "相关用户的",
"cannot_invite_maximum_users": "邀请的用户数不能超过最大值。",
- "current_users": "当前用户:"
+ "user_statistics": {
+ "total": "用户总数",
+ "active": "活跃",
+ "inactive": "非活跃"
+ }
},
"user_group_management": {
"user_group_management": "用户组管理",
@@ -1020,12 +1012,6 @@
"ADMIN_ARCHIVE_DATA_UPLOAD": "上传存档数据",
"ADMIN_GROWI_DATA_IMPORTED": "导入存档数据",
"ADMIN_UPLOADED_GROWI_DATA_DISCARDED": "丢弃存档数据",
- "ADMIN_ESA_DATA_IMPORTED": "从 esa.io 导入",
- "ADMIN_ESA_DATA_UPDATED": "更新 esa.io 导入设置",
- "ADMIN_CONNECTION_TEST_OF_ESA_DATA": "测试与 esa 的连接",
- "ADMIN_QIITA_DATA_IMPORTED": "从 Qiita:Team 导入",
- "ADMIN_QIITA_DATA_UPDATED": "更新 Qiita：团队导入设置",
- "ADMIN_CONNECTION_TEST_OF_QIITA_DATA": "测试与 Qiita:Team 的连接",
"ADMIN_ARCHIVE_DATA_CREATE": "创建归档数据",
"ADMIN_ARCHIVE_DATA_DOWNLOAD": "下载存档数据",
"ADMIN_ARCHIVE_DATA_DELETE": "删除存档数据",
diff --git a/apps/app/public/static/locales/zh_CN/translation.json b/apps/app/public/static/locales/zh_CN/translation.json
index 050b740b50b..fa2d3ef01ca 100644
--- a/apps/app/public/static/locales/zh_CN/translation.json
+++ b/apps/app/public/static/locales/zh_CN/translation.json
@@ -1004,7 +1004,18 @@
},
"user_home_page": {
"bookmarks": "书签",
- "recently_created": "最近创建页面"
+ "recently_created": "最近创建页面",
+ "recent_activity": "最近动态",
+ "unknown_action": "进行了未指明的更改",
+ "page_create": "创建了页面",
+ "page_update": "更新了页面",
+ "page_delete": "删除了页面",
+ "page_delete_completely": "彻底删除了页面",
+ "page_rename": "重命名了页面",
+ "page_revert": "还原了页面",
+ "page_duplicate": "复制了页面",
+ "page_like": "赞了页面",
+ "comment_create": "发布了评论"
},
"bookmark_folder": {
"bookmark_folder": "书签文件夹",
diff --git a/apps/app/resource/Contributor.js b/apps/app/resource/Contributor.js
index eb224e11971..1cfee4553d9 100644
--- a/apps/app/resource/Contributor.js
+++ b/apps/app/resource/Contributor.js
@@ -78,6 +78,13 @@ const contributors = [
{ name: 'shironegi39' },
{ name: 'ryo-h15' },
{ name: 'jam411' },
+ { name: 'Naoki427' },
+ { name: 'yusa-bot' },
+ { name: 'arvid-e' },
+ { name: 'riona-k' },
+ { name: 'hiroki-hgs' },
+ { name: 'taikou-m' },
+ { name: 'hikaru-n-cpu' },
],
},
],
diff --git a/apps/app/src/client/components/Admin/AdminHome/AdminHome.jsx b/apps/app/src/client/components/Admin/AdminHome/AdminHome.jsx
index 5e735a5a930..fc43abd8c32 100644
--- a/apps/app/src/client/components/Admin/AdminHome/AdminHome.jsx
+++ b/apps/app/src/client/components/Admin/AdminHome/AdminHome.jsx
@@ -17,6 +17,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
import { EnvVarsTable } from './EnvVarsTable';
import SystemInfomationTable from './SystemInfomationTable';
+
const logger = loggerFactory('growi:admin');
const AdminHome = (props) => {
@@ -59,7 +60,7 @@ const AdminHome = (props) => {
)
}
{
- // Alert message will be displayed in case that V5 migration has not been compleated
+ // Alert message will be displayed in case that V5 migration has not been compleated
(migrationStatus != null && !migrationStatus.isV5Compatible)
&& (
@@ -90,7 +91,7 @@ const AdminHome = (props) => {
{t('admin:admin_top.env_var_priority')}
{/* eslint-disable-next-line react/no-danger */}
- {adminHomeContainer.state.envVars &&
}
+
,
+ envVars?: Record,
}
export const EnvVarsTable: React.FC = (props: EnvVarsTableProps) => {
+ const { envVars } = props;
+ if (envVars == null) {
+ return
diff --git a/apps/app/src/client/components/Admin/AdminHome/SystemInfomationTable.tsx b/apps/app/src/client/components/Admin/AdminHome/SystemInfomationTable.tsx
index e1ef6a63cfd..c1ce1241987 100644
--- a/apps/app/src/client/components/Admin/AdminHome/SystemInfomationTable.tsx
+++ b/apps/app/src/client/components/Admin/AdminHome/SystemInfomationTable.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+import { LoadingSpinner } from '@growi/ui/dist/components';
+
import AdminHomeContainer from '~/client/services/AdminHomeContainer';
import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -17,7 +19,7 @@ const SystemInformationTable = (props: Props) => {
} = adminHomeContainer.state;
if (growiVersion == null || nodeVersion == null || npmVersion == null || pnpmVersion == null) {
- return <>;
+ return
-
-
{t('admin:app_setting.page_bulk_export_settings')}
-
-
+
+
+
{t('admin:app_setting.page_bulk_export_settings')}
+
- )}
+
diff --git a/apps/app/src/client/components/Admin/App/MaintenanceMode.tsx b/apps/app/src/client/components/Admin/App/MaintenanceMode.tsx
index 846537bed97..8f73c4e5785 100644
--- a/apps/app/src/client/components/Admin/App/MaintenanceMode.tsx
+++ b/apps/app/src/client/components/Admin/App/MaintenanceMode.tsx
@@ -3,21 +3,18 @@ import React, { useState, useCallback } from 'react';
import { useTranslation } from 'next-i18next';
+import { useMaintenanceModeActions } from '~/client/services/maintenance-mode';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
-import loggerFactory from '~/utils/logger';
+import { useIsMaintenanceMode } from '~/states/global';
import { ConfirmModal } from './ConfirmModal';
-const logger = loggerFactory('growi:maintenanceMode');
-
export const MaintenanceMode: FC = () => {
const { t } = useTranslation();
- const {
- data: isMaintenanceMode, start: startMaintenanceMode, end: endMaintenanceMode,
- } = useIsMaintenanceMode();
+ const isMaintenanceMode = useIsMaintenanceMode();
+ const { start: startMaintenanceMode, end: endMaintenanceMode } = useMaintenanceModeActions();
const [isModalOpen, setModalOpen] = useState
(false);
diff --git a/apps/app/src/client/components/Admin/App/V5PageMigration.tsx b/apps/app/src/client/components/Admin/App/V5PageMigration.tsx
index 32587d48355..02fa341197d 100644
--- a/apps/app/src/client/components/Admin/App/V5PageMigration.tsx
+++ b/apps/app/src/client/components/Admin/App/V5PageMigration.tsx
@@ -4,13 +4,13 @@ import React, { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { toastError, toastSuccess } from '~/client/util/toastr';
+import { useAdminSocket } from '~/features/admin/states/socket-io';
import type {
PMStartedData, PMMigratingData, PMErrorCountData, PMEndedData,
} from '~/interfaces/websocket';
import {
SocketEventName,
} from '~/interfaces/websocket';
-import { useGlobalAdminSocket } from '~/stores/websocket';
import AdminAppContainer from '../../../services/AdminAppContainer';
import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -33,7 +33,7 @@ const V5PageMigration: FC = (props: Props) => {
const [current, setCurrent] = useState(0);
const [isSucceeded, setSucceeded] = useState(undefined);
- const { data: adminSocket } = useGlobalAdminSocket();
+ const adminSocket = useAdminSocket();
const { t } = useTranslation();
const { adminAppContainer } = props;
diff --git a/apps/app/src/client/components/Admin/AuditLog/AuditLogSettings.tsx b/apps/app/src/client/components/Admin/AuditLog/AuditLogSettings.tsx
index 438f33cb497..2704bf28644 100644
--- a/apps/app/src/client/components/Admin/AuditLog/AuditLogSettings.tsx
+++ b/apps/app/src/client/components/Admin/AuditLog/AuditLogSettings.tsx
@@ -1,22 +1,21 @@
import type { FC } from 'react';
import React, { useState } from 'react';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'react-i18next';
import { Collapse } from 'reactstrap';
import { AllSupportedActions } from '~/interfaces/activity';
-import { useActivityExpirationSeconds, useAuditLogAvailableActions } from '~/stores-universal/context';
+import { activityExpirationSecondsAtom, auditLogAvailableActionsAtom } from '~/states/server-configurations';
export const AuditLogSettings: FC = () => {
const { t } = useTranslation();
const [isExpandActionList, setIsExpandActionList] = useState(false);
- const { data: activityExpirationSecondsData } = useActivityExpirationSeconds();
- const activityExpirationSeconds = activityExpirationSecondsData != null ? activityExpirationSecondsData : 2592000;
+ const activityExpirationSeconds = useAtomValue(activityExpirationSecondsAtom) || 2592000;
- const { data: availableActionsData } = useAuditLogAvailableActions();
- const availableActions = availableActionsData != null ? availableActionsData : [];
+ const availableActions = useAtomValue(auditLogAvailableActionsAtom);
return (
<>
diff --git a/apps/app/src/client/components/Admin/AuditLogManagement.tsx b/apps/app/src/client/components/Admin/AuditLogManagement.tsx
index be3c31caa9c..8a8704908db 100644
--- a/apps/app/src/client/components/Admin/AuditLogManagement.tsx
+++ b/apps/app/src/client/components/Admin/AuditLogManagement.tsx
@@ -3,12 +3,13 @@ import React, { useState, useCallback, useRef } from 'react';
import { LoadingSpinner } from '@growi/ui/dist/components';
import { format } from 'date-fns/format';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'react-i18next';
import type { IClearable } from '~/client/interfaces/clearable';
import { toastError } from '~/client/util/toastr';
import type { SupportedActionType } from '~/interfaces/activity';
-import { useAuditLogEnabled, useAuditLogAvailableActions } from '~/stores-universal/context';
+import { auditLogEnabledAtom, auditLogAvailableActionsAtom } from '~/states/server-configurations';
import { useSWRxActivity } from '~/stores/activity';
import PaginationWrapper from '../PaginationWrapper';
@@ -34,7 +35,7 @@ export const AuditLogManagement: FC = () => {
const typeaheadRef = useRef(null);
- const { data: auditLogAvailableActionsData } = useAuditLogAvailableActions();
+ const auditLogAvailableActionsData = useAtomValue(auditLogAvailableActionsAtom);
/*
* State
@@ -67,7 +68,7 @@ export const AuditLogManagement: FC = () => {
toastError('Failed to get Audit Log');
}
- const { data: auditLogEnabled } = useAuditLogEnabled();
+ const auditLogEnabled = useAtomValue(auditLogEnabledAtom);
/*
* Functions
diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx
index 3e1aad0695f..864b5bb5c4e 100644
--- a/apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx
+++ b/apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx
@@ -1,5 +1,6 @@
import React, { useCallback, useState, type JSX } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
import { useTranslation } from 'react-i18next';
import ImageCropModal from '~/client/components/Common/ImageCropModal';
@@ -7,7 +8,8 @@ import {
apiv3Delete, apiv3PostForm, apiv3Put,
} from '~/client/util/apiv3-client';
import { toastError, toastSuccess } from '~/client/util/toastr';
-import { useIsDefaultLogo, useIsCustomizedLogoUploaded } from '~/stores-universal/context';
+import { useIsDefaultLogo } from '~/states/global';
+import { isCustomizedLogoUploadedAtom } from '~/states/server-configurations';
import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
@@ -18,8 +20,9 @@ const CUSTOMIZED_LOGO = '/attachment/brand-logo';
const CustomizeLogoSetting = (): JSX.Element => {
const { t } = useTranslation();
- const { data: isDefaultLogo } = useIsDefaultLogo();
- const { data: isCustomizedLogoUploaded, mutate: mutateIsCustomizedLogoUploaded } = useIsCustomizedLogoUploaded();
+ const isDefaultLogo = useIsDefaultLogo();
+ const isCustomizedLogoUploaded = useAtomValue(isCustomizedLogoUploadedAtom);
+ const setIsCustomizedLogoUploaded = useSetAtom(isCustomizedLogoUploadedAtom);
const [uploadLogoSrc, setUploadLogoSrc] = useState(null);
const [isImageCropModalShow, setIsImageCropModalShow] = useState(false);
@@ -35,7 +38,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
}
}, []);
- const onClickSubmit = useCallback(async() => {
+ const onClickSubmit = useCallback(async () => {
try {
await apiv3Put('/customize-setting/customize-logo', { isDefaultLogo: isDefaultLogoSelected });
toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_logo'), ns: 'commons' }));
@@ -45,10 +48,10 @@ const CustomizeLogoSetting = (): JSX.Element => {
}
}, [t, isDefaultLogoSelected]);
- const onClickDeleteBtn = useCallback(async() => {
+ const onClickDeleteBtn = useCallback(async () => {
try {
await apiv3Delete('/customize-setting/delete-brand-logo');
- mutateIsCustomizedLogoUploaded(false);
+ setIsCustomizedLogoUploaded(false);
toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.current_logo'), ns: 'commons' }));
}
catch (err) {
@@ -56,15 +59,15 @@ const CustomizeLogoSetting = (): JSX.Element => {
setRetrieveError(err);
throw new Error('Failed to delete logo');
}
- }, [mutateIsCustomizedLogoUploaded, t]);
+ }, [setIsCustomizedLogoUploaded, t]);
- const processImageCompletedHandler = useCallback(async(croppedImage) => {
+ const processImageCompletedHandler = useCallback(async (croppedImage) => {
try {
const formData = new FormData();
formData.append('file', croppedImage);
await apiv3PostForm('/customize-setting/upload-brand-logo', formData);
- mutateIsCustomizedLogoUploaded(true);
+ setIsCustomizedLogoUploaded(true);
toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.current_logo'), ns: 'commons' }));
}
catch (err) {
@@ -72,7 +75,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
setRetrieveError(err);
throw new Error('Failed to upload brand logo');
}
- }, [mutateIsCustomizedLogoUploaded, t]);
+ }, [setIsCustomizedLogoUploaded, t]);
return (
@@ -113,13 +116,13 @@ const CustomizeLogoSetting = (): JSX.Element => {
onChange={() => { setIsDefaultLogoSelected(false) }}
/>
- { t('admin:customize_settings.upload_logo') }
+ {t('admin:customize_settings.upload_logo')}
- { t('admin:customize_settings.current_logo') }
+ {t('admin:customize_settings.current_logo')}
{isCustomizedLogoUploaded && (
@@ -128,7 +131,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
- { t('admin:customize_settings.delete_logo') }
+ {t('admin:customize_settings.delete_logo')}
)}
@@ -136,7 +139,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
- { t('admin:customize_settings.upload_new_logo') }
+ {t('admin:customize_settings.upload_new_logo')}
diff --git a/apps/app/src/client/components/Admin/Customize/CustomizeTitle.tsx b/apps/app/src/client/components/Admin/Customize/CustomizeTitle.tsx
index cbe27632790..f3eae88d7d5 100644
--- a/apps/app/src/client/components/Admin/Customize/CustomizeTitle.tsx
+++ b/apps/app/src/client/components/Admin/Customize/CustomizeTitle.tsx
@@ -7,7 +7,7 @@ import { Card, CardBody } from 'reactstrap';
import { apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCustomizeTitle } from '~/stores-universal/context';
+import { useCustomTitleTemplate } from '~/states/global';
import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
@@ -15,7 +15,7 @@ export const CustomizeTitle: FC = () => {
const { t } = useTranslation('admin');
- const { data: customizeTitle } = useCustomizeTitle();
+ const customTitleTemplate = useCustomTitleTemplate();
const {
register,
@@ -26,9 +26,9 @@ export const CustomizeTitle: FC = () => {
// Sync form with store data
useEffect(() => {
reset({
- customizeTitle: customizeTitle ?? '',
+ customizeTitle: customTitleTemplate ?? '',
});
- }, [customizeTitle, reset]);
+ }, [customTitleTemplate, reset]);
const onSubmit = useCallback(async(data) => {
try {
diff --git a/apps/app/src/client/components/Admin/ElasticsearchManagement/ElasticsearchManagement.tsx b/apps/app/src/client/components/Admin/ElasticsearchManagement/ElasticsearchManagement.tsx
index ac95afa1799..54e5fca456d 100644
--- a/apps/app/src/client/components/Admin/ElasticsearchManagement/ElasticsearchManagement.tsx
+++ b/apps/app/src/client/components/Admin/ElasticsearchManagement/ElasticsearchManagement.tsx
@@ -1,13 +1,13 @@
import React, { useEffect, useState, useCallback } from 'react';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
-
import { apiv3Get, apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
+import { useAdminSocket } from '~/features/admin/states/socket-io';
import { SocketEventName } from '~/interfaces/websocket';
-import { useIsSearchServiceReachable } from '~/stores-universal/context';
-import { useAdminSocket } from '~/stores/socket-io';
+import { isSearchServiceReachableAtom } from '~/states/server-configurations';
import NormalizeIndicesControls from './NormalizeIndicesControls';
import RebuildIndexControls from './RebuildIndexControls';
@@ -16,8 +16,9 @@ import StatusTable from './StatusTable';
const ElasticsearchManagement = (): JSX.Element => {
const { t } = useTranslation('admin');
- const { data: isSearchServiceReachable } = useIsSearchServiceReachable();
- const { data: socket } = useAdminSocket();
+ // Get search service reachable flag from atom
+ const isSearchServiceReachable = useAtomValue(isSearchServiceReachableAtom);
+ const socket = useAdminSocket();
const [isInitialized, setIsInitialized] = useState(false);
@@ -77,7 +78,7 @@ const ElasticsearchManagement = (): JSX.Element => {
if (socket == null) {
return;
}
- socket.on(SocketEventName.AddPageProgress, (data) => {
+ socket.on(SocketEventName.AddPageProgress, () => {
setIsRebuildingProcessing(true);
});
diff --git a/apps/app/src/client/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx b/apps/app/src/client/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx
index 405b9a61113..ec6808d3d89 100644
--- a/apps/app/src/client/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx
+++ b/apps/app/src/client/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx
@@ -3,8 +3,8 @@ import React from 'react';
import { useTranslation } from 'next-i18next';
import PropTypes from 'prop-types';
+import { useAdminSocket } from '~/features/admin/states/socket-io';
import { SocketEventName } from '~/interfaces/websocket';
-import { useAdminSocket } from '~/stores/socket-io';
import LabeledProgressBar from '../Common/LabeledProgressBar';
@@ -99,7 +99,7 @@ class RebuildIndexControls extends React.Component {
const RebuildIndexControlsFC = (props) => {
const { t } = useTranslation('admin');
- const { data: socket } = useAdminSocket();
+ const socket = useAdminSocket();
return
;
};
diff --git a/apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx b/apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx
index 5a8a384cc3e..24968b6fff6 100644
--- a/apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx
+++ b/apps/app/src/client/components/Admin/ExportArchiveDataPage.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
import { apiDelete } from '~/client/util/apiv1-client';
import { apiv3Get } from '~/client/util/apiv3-client';
import { toastError, toastSuccess } from '~/client/util/toastr';
-import { useAdminSocket } from '~/stores/socket-io';
+import { useAdminSocket } from '~/features/admin/states/socket-io';
import LabeledProgressBar from './Common/LabeledProgressBar';
import ArchiveFilesTable from './ExportArchiveData/ArchiveFilesTable';
@@ -20,7 +20,7 @@ const IGNORED_COLLECTION_NAMES = [
];
const ExportArchiveDataPage = (): JSX.Element => {
- const { data: socket } = useAdminSocket();
+ const socket = useAdminSocket();
const { t } = useTranslation('admin');
const [collections, setCollections] = useState
([]);
diff --git a/apps/app/src/client/components/Admin/G2GDataTransfer.tsx b/apps/app/src/client/components/Admin/G2GDataTransfer.tsx
index 768e854fb25..c4444177155 100644
--- a/apps/app/src/client/components/Admin/G2GDataTransfer.tsx
+++ b/apps/app/src/client/components/Admin/G2GDataTransfer.tsx
@@ -7,9 +7,9 @@ import { useTranslation } from 'next-i18next';
import { useGenerateTransferKey } from '~/client/services/g2g-transfer';
import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
import { toastError, toastSuccess } from '~/client/util/toastr';
+import { useAdminSocket } from '~/features/admin/states/socket-io';
import { G2G_PROGRESS_STATUS, type G2GProgress } from '~/interfaces/g2g-transfer';
-import { useGrowiDocumentationUrl } from '~/stores-universal/context';
-import { useAdminSocket } from '~/stores/socket-io';
+import { useGrowiDocumentationUrl } from '~/states/context';
import CustomCopyToClipBoard from '../Common/CustomCopyToClipBoard';
@@ -22,7 +22,7 @@ const IGNORED_COLLECTION_NAMES = [
];
const G2GDataTransfer = (): JSX.Element => {
- const { data: socket } = useAdminSocket();
+ const socket = useAdminSocket();
const { t } = useTranslation(['admin', 'commons']);
const [startTransferKey, setStartTransferKey] = useState('');
@@ -124,7 +124,7 @@ const G2GDataTransfer = (): JSX.Element => {
}
}, [setTransferring, startTransferKey, selectedCollections, optionsMap]);
- const { data: documentationUrl } = useGrowiDocumentationUrl();
+ const documentationUrl = useGrowiDocumentationUrl();
// File upload
// const onChangeFileUploadTypeHandler = useCallback((e: ChangeEvent, type: string) => {
diff --git a/apps/app/src/client/components/Admin/ImportData/GrowiArchive/ImportForm.jsx b/apps/app/src/client/components/Admin/ImportData/GrowiArchive/ImportForm.jsx
index 311f95d84ca..db074fd678c 100644
--- a/apps/app/src/client/components/Admin/ImportData/GrowiArchive/ImportForm.jsx
+++ b/apps/app/src/client/components/Admin/ImportData/GrowiArchive/ImportForm.jsx
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
import { apiv3Post } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
+import { useAdminSocket } from '~/features/admin/states/socket-io';
import { GrowiArchiveImportOption } from '~/models/admin/growi-archive-import-option';
import { ImportOptionForPages } from '~/models/admin/import-option-for-pages';
import { ImportOptionForRevisions } from '~/models/admin/import-option-for-revisions';
-import { useAdminSocket } from '~/stores/socket-io';
import ErrorViewer from './ErrorViewer';
@@ -507,7 +507,7 @@ ImportForm.propTypes = {
const ImportFormWrapperFc = (props) => {
const { t } = useTranslation('admin');
- const { data: socket } = useAdminSocket();
+ const socket = useAdminSocket();
if (socket == null) {
return;
diff --git a/apps/app/src/client/components/Admin/ImportData/ImportDataPageContents.jsx b/apps/app/src/client/components/Admin/ImportData/ImportDataPageContents.jsx
index f37d4798d60..ce626c3098d 100644
--- a/apps/app/src/client/components/Admin/ImportData/ImportDataPageContents.jsx
+++ b/apps/app/src/client/components/Admin/ImportData/ImportDataPageContents.jsx
@@ -1,280 +1,18 @@
-import React, { useEffect } from 'react';
-
-import { useTranslation } from 'next-i18next';
-import PropTypes from 'prop-types';
-import { useForm } from 'react-hook-form';
-
-import AdminImportContainer from '~/client/services/AdminImportContainer';
-import { toastError } from '~/client/util/toastr';
-import { toArrayIfNot } from '~/utils/array-utils';
-import loggerFactory from '~/utils/logger';
-
import { withUnstatedContainers } from '../../UnstatedUtils';
import GrowiArchiveSection from './GrowiArchiveSection';
-const logger = loggerFactory('growi:importer');
-
-const ImportDataPageContents = ({ t, adminImportContainer }) => {
- const { register: registerEsa, reset: resetEsa, handleSubmit: handleSubmitEsa } = useForm();
- const { register: registerQiita, reset: resetQiita, handleSubmit: handleSubmitQiita } = useForm();
-
- useEffect(() => {
- resetEsa({
- esaTeamName: adminImportContainer.state.esaTeamName || '',
- esaAccessToken: adminImportContainer.state.esaAccessToken || '',
- });
- }, [resetEsa, adminImportContainer.state.esaTeamName, adminImportContainer.state.esaAccessToken]);
-
- useEffect(() => {
- resetQiita({
- qiitaTeamName: adminImportContainer.state.qiitaTeamName || '',
- qiitaAccessToken: adminImportContainer.state.qiitaAccessToken || '',
- });
- }, [resetQiita, adminImportContainer.state.qiitaTeamName, adminImportContainer.state.qiitaAccessToken]);
-
+const ImportDataPageContents = () => {
return (
);
};
-ImportDataPageContents.propTypes = {
- t: PropTypes.func.isRequired,
- adminImportContainer: PropTypes.instanceOf(AdminImportContainer).isRequired,
-};
-
-const ImportDataPageContentsWrapperFc = (props) => {
- const { t } = useTranslation('admin');
-
- const { adminImportContainer } = props;
-
- useEffect(() => {
- const fetchImportSettingsData = async() => {
- await adminImportContainer.retrieveImportSettingsData();
- };
-
- try {
- fetchImportSettingsData();
- }
- catch (err) {
- const errs = toArrayIfNot(err);
- toastError(errs);
- logger.error(errs);
- }
- }, [adminImportContainer]);
-
- return
diff --git a/apps/app/src/client/components/Admin/Security/SecuritySetting/index.tsx b/apps/app/src/client/components/Admin/Security/SecuritySetting/index.tsx
index f12eef8df6f..ac04ce83f5c 100644
--- a/apps/app/src/client/components/Admin/Security/SecuritySetting/index.tsx
+++ b/apps/app/src/client/components/Admin/Security/SecuritySetting/index.tsx
@@ -36,10 +36,21 @@ const SecuritySettingComponent: React.FC = ({ adminGeneralSecurityContain
const onSubmit = useCallback(async(data: FormData) => {
try {
- // Update sessionMaxAge from form data
- await adminGeneralSecurityContainer.setSessionMaxAge(data.sessionMaxAge);
- // Save all security settings
- await adminGeneralSecurityContainer.updateGeneralSecuritySetting();
+ // Save all security settings with form data
+ await adminGeneralSecurityContainer.updateGeneralSecuritySetting({
+ sessionMaxAge: data.sessionMaxAge,
+ restrictGuestMode: adminGeneralSecurityContainer.state.currentRestrictGuestMode,
+ pageDeletionAuthority: adminGeneralSecurityContainer.state.currentPageDeletionAuthority,
+ pageCompleteDeletionAuthority: adminGeneralSecurityContainer.state.currentPageCompleteDeletionAuthority,
+ pageRecursiveDeletionAuthority: adminGeneralSecurityContainer.state.currentPageRecursiveDeletionAuthority,
+ pageRecursiveCompleteDeletionAuthority: adminGeneralSecurityContainer.state.currentPageRecursiveCompleteDeletionAuthority,
+ isAllGroupMembershipRequiredForPageCompleteDeletion: adminGeneralSecurityContainer.state.isAllGroupMembershipRequiredForPageCompleteDeletion,
+ hideRestrictedByGroup: adminGeneralSecurityContainer.state.currentGroupRestrictionDisplayMode === 'Hidden',
+ hideRestrictedByOwner: adminGeneralSecurityContainer.state.currentOwnerRestrictionDisplayMode === 'Hidden',
+ isUsersHomepageDeletionEnabled: adminGeneralSecurityContainer.state.isUsersHomepageDeletionEnabled,
+ isForceDeleteUserHomepageOnUserDeletion: adminGeneralSecurityContainer.state.isForceDeleteUserHomepageOnUserDeletion,
+ isRomUserAllowedToComment: adminGeneralSecurityContainer.state.isRomUserAllowedToComment,
+ });
toastSuccess(t('security_settings.updated_general_security_setting'));
}
catch (err) {
diff --git a/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithProxySettings.jsx b/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithProxySettings.jsx
index dfe58ca90b0..40759cbd181 100644
--- a/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithProxySettings.jsx
+++ b/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithProxySettings.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import { apiv3Delete, apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useAppTitle } from '~/stores-universal/context';
+import { useAppTitle } from '~/states/global';
import loggerFactory from '~/utils/logger';
@@ -26,7 +26,7 @@ const CustomBotWithProxySettings = (props) => {
const [integrationIdToDelete, setIntegrationIdToDelete] = useState(null);
const [siteName, setSiteName] = useState('');
const { t } = useTranslation();
- const { data: appTitle } = useAppTitle();
+ const appTitle = useAppTitle();
// componentDidUpdate
useEffect(() => {
diff --git a/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithoutProxySettings.jsx b/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithoutProxySettings.jsx
index 82c09161f84..3cb09ad58dc 100644
--- a/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithoutProxySettings.jsx
+++ b/apps/app/src/client/components/Admin/SlackIntegration/CustomBotWithoutProxySettings.jsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { useTranslation } from 'next-i18next';
import PropTypes from 'prop-types';
-import { useAppTitle } from '~/stores-universal/context';
+import { useAppTitle } from '~/states/global';
import { CustomBotWithoutProxyConnectionStatus } from './CustomBotWithoutProxyConnectionStatus';
import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './CustomBotWithoutProxySettingsAccordion';
@@ -11,7 +11,7 @@ import CustomBotWithoutProxySettingsAccordion, { botInstallationStep } from './C
const CustomBotWithoutProxySettings = (props) => {
const { connectionStatuses } = props;
const { t } = useTranslation();
- const { data: appTitle } = useAppTitle();
+ const appTitle = useAppTitle();
const [siteName, setSiteName] = useState('');
useEffect(() => {
diff --git a/apps/app/src/client/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.tsx b/apps/app/src/client/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.tsx
index 025a92a061e..2790cd5d075 100644
--- a/apps/app/src/client/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.tsx
+++ b/apps/app/src/client/components/Admin/SlackIntegration/DeleteSlackBotSettingsModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
import { useTranslation } from 'next-i18next';
import {
@@ -29,53 +29,70 @@ export const DeleteSlackBotSettingsModal = React.memo((props: DeleteSlackBotSett
onClose?.();
}, [onClose]);
+ // Memoize conditional content
+ const headerContent = useMemo(() => {
+ if (isResetAll) {
+ return (
+ <>
+ delete_forever
+ {t('admin:slack_integration.reset_all_settings')}
+
+ );
+ }
+ return (
+ <>
+ delete
+ {t('admin:slack_integration.delete_slackbot_settings')}
+
+ );
+ }, [isResetAll, t]);
+
+ const bodyContent = useMemo(() => {
+ const htmlContent = isResetAll
+ ? t('admin:slack_integration.all_settings_of_the_bot_will_be_reset')
+ : t('admin:slack_integration.slackbot_settings_notice');
+ return (
+ delete_forever
+ {t('admin:slack_integration.reset')}
+
+ );
+ }
+ return (
+ <>
+ delete
+ {t('admin:slack_integration.delete')}
+
+ );
+ }, [isResetAll, t]);
+
+ // Early return optimization
+ if (!isOpen) {
+ return <>;
+ }
+
return (
-
- {isResetAll && (
- <>
- delete_forever
- {t('admin:slack_integration.reset_all_settings')}
-
- )}
- {!isResetAll && (
- <>
- delete
- {t('admin:slack_integration.delete_slackbot_settings')}
-
- )}
-
+ {headerContent}
- {isResetAll && (
-
{t('Cancel')}
- {isResetAll && (
- <>
- delete_forever
- {t('admin:slack_integration.reset')}
-
- )}
- {!isResetAll && (
- <>
- delete
- {t('admin:slack_integration.delete')}
-
- )}
+ {deleteButtonContent}
diff --git a/apps/app/src/client/components/Admin/SlackIntegration/OfficialBotSettings.jsx b/apps/app/src/client/components/Admin/SlackIntegration/OfficialBotSettings.jsx
index 0f257274ec9..b9f0283d6fc 100644
--- a/apps/app/src/client/components/Admin/SlackIntegration/OfficialBotSettings.jsx
+++ b/apps/app/src/client/components/Admin/SlackIntegration/OfficialBotSettings.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
import { apiv3Delete, apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useAppTitle } from '~/stores-universal/context';
+import { useAppTitle } from '~/states/global';
import loggerFactory from '~/utils/logger';
@@ -27,7 +27,7 @@ const OfficialBotSettings = (props) => {
const [siteName, setSiteName] = useState('');
const [integrationIdToDelete, setIntegrationIdToDelete] = useState(null);
const { t } = useTranslation();
- const { data: appTitle } = useAppTitle();
+ const appTitle = useAppTitle();
const addSlackAppIntegrationHandler = async() => {
if (onClickAddSlackWorkspaceBtn != null) {
diff --git a/apps/app/src/client/components/Admin/SlackIntegration/WithProxyAccordions.jsx b/apps/app/src/client/components/Admin/SlackIntegration/WithProxyAccordions.jsx
index b75f286b522..0036378580a 100644
--- a/apps/app/src/client/components/Admin/SlackIntegration/WithProxyAccordions.jsx
+++ b/apps/app/src/client/components/Admin/SlackIntegration/WithProxyAccordions.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
import { apiv3Put, apiv3Post } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useSiteUrl } from '~/stores-universal/context';
+import { useSiteUrlWithEmptyValueWarn } from '~/states/global';
import loggerFactory from '~/utils/logger';
import CustomCopyToClipBoard from '../../Common/CustomCopyToClipBoard';
@@ -286,7 +286,7 @@ const TestProcess = ({
const WithProxyAccordions = (props) => {
const { t } = useTranslation();
- const { data: siteUrl } = useSiteUrl();
+ const siteUrl = useSiteUrlWithEmptyValueWarn();
const [isLatestConnectionSuccess, setIsLatestConnectionSuccess] = useState(false);
const submitForm = () => {
diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupModal.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupModal.tsx
index d8d52568570..f5edb90fd47 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupModal.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupModal.tsx
@@ -1,5 +1,7 @@
import type { FC } from 'react';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, {
+ useState, useEffect, useCallback, useMemo,
+} from 'react';
import type { Ref, IUserGroup, IUserGroupHasId } from '@growi/core';
import { useTranslation } from 'next-i18next';
@@ -16,12 +18,12 @@ type Props = {
isExternalGroup?: boolean
};
-export const UserGroupModal: FC = (props: Props) => {
+const UserGroupModalSubstance: FC = (props: Props) => {
const { t } = useTranslation('admin');
const {
- userGroup, buttonLabel, onClickSubmit, isShow, onHide, isExternalGroup = false,
+ userGroup, buttonLabel, onClickSubmit, onHide, isExternalGroup = false,
} = props;
/*
@@ -42,6 +44,14 @@ export const UserGroupModal: FC = (props: Props) => {
setDescription(e.target.value);
}, []);
+ // Memoized user group data for submission
+ const userGroupData = useMemo(() => ({
+ _id: userGroup?._id,
+ name: currentName,
+ description: currentDescription,
+ parent: currentParent,
+ }), [userGroup?._id, currentName, currentDescription, currentParent]);
+
const onSubmitHandler = useCallback(async(e) => {
e.preventDefault(); // no reload
@@ -49,13 +59,8 @@ export const UserGroupModal: FC = (props: Props) => {
return;
}
- await onClickSubmit({
- _id: userGroup?._id,
- name: currentName,
- description: currentDescription,
- parent: currentParent,
- });
- }, [userGroup, currentName, currentDescription, currentParent, onClickSubmit]);
+ await onClickSubmit(userGroupData);
+ }, [onClickSubmit, userGroupData]);
// componentDidMount
useEffect(() => {
@@ -66,58 +71,68 @@ export const UserGroupModal: FC = (props: Props) => {
}
}, [userGroup]);
+ return (
+
+ );
+};
+
+export const UserGroupModal: FC = (props: Props) => {
+ const { isShow, onHide } = props;
+
return (
-
+ {isShow && (
+
);
};
diff --git a/apps/app/src/client/components/Admin/UserGroup/UserGroupPage.tsx b/apps/app/src/client/components/Admin/UserGroup/UserGroupPage.tsx
index abdbb77bd25..2c665cba7fa 100644
--- a/apps/app/src/client/components/Admin/UserGroup/UserGroupPage.tsx
+++ b/apps/app/src/client/components/Admin/UserGroup/UserGroupPage.tsx
@@ -4,6 +4,7 @@ import React, { useState, useCallback } from 'react';
import {
GroupType, getIdForRef, type IGrantedGroup, type IUserGroup, type IUserGroupHasId,
} from '@growi/core';
+import { useAtomValue } from 'jotai';
import dynamic from 'next/dynamic';
import { useTranslation } from 'react-i18next';
@@ -12,7 +13,7 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
import { ExternalGroupManagement } from '~/features/external-user-group/client/components/ExternalUserGroup/ExternalUserGroupManagement';
import { useSWRxExternalUserGroupList } from '~/features/external-user-group/client/stores/external-user-group';
import type { PageActionOnGroupDelete } from '~/interfaces/user-group';
-import { useIsAclEnabled } from '~/stores-universal/context';
+import { isAclEnabledAtom } from '~/states/server-configurations';
import { useSWRxUserGroupList, useSWRxChildUserGroupList, useSWRxUserGroupRelationList } from '~/stores/user-group';
@@ -23,7 +24,7 @@ const UserGroupTable = dynamic(() => import('./UserGroupTable').then(mod => mod.
export const UserGroupPage: FC = () => {
const { t } = useTranslation();
- const { data: isAclEnabled } = useIsAclEnabled();
+ const isAclEnabled = useAtomValue(isAclEnabledAtom);
/*
* Fetch
diff --git a/apps/app/src/client/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx b/apps/app/src/client/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx
index b7858c464cc..d90f570a52c 100644
--- a/apps/app/src/client/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx
+++ b/apps/app/src/client/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx
@@ -6,7 +6,7 @@ import {
Modal, ModalHeader, ModalBody, ModalFooter,
} from 'reactstrap';
-import { useUpdateUserGroupConfirmModal } from '~/stores/modal';
+import { useUpdateUserGroupConfirmModalStatus, useUpdateUserGroupConfirmModalActions } from '~/states/ui/modal/update-user-group-confirm';
export const UpdateParentConfirmModal: FC = () => {
@@ -14,7 +14,8 @@ export const UpdateParentConfirmModal: FC = () => {
const [isForceUpdate, setForceUpdate] = useState(false);
- const { data: modalStatus, close: closeModal } = useUpdateUserGroupConfirmModal();
+ const modalStatus = useUpdateUserGroupConfirmModalStatus();
+ const { close: closeModal } = useUpdateUserGroupConfirmModalActions();
if (modalStatus == null) {
closeModal();
diff --git a/apps/app/src/client/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx b/apps/app/src/client/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx
index 1fac1b4a22d..3ac23220143 100644
--- a/apps/app/src/client/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx
+++ b/apps/app/src/client/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx
@@ -6,6 +6,7 @@ import {
GroupType, getIdStringForRef, type IGrantedGroup, type IUserGroup, type IUserGroupHasId,
} from '@growi/core';
import { objectIdUtils } from '@growi/core/dist/utils';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import dynamic from 'next/dynamic';
import Link from 'next/link';
@@ -18,8 +19,8 @@ import { toastSuccess, toastError } from '~/client/util/toastr';
import type { IExternalUserGroupHasId } from '~/features/external-user-group/interfaces/external-user-group';
import type { PageActionOnGroupDelete, SearchType } from '~/interfaces/user-group';
import { SearchTypes } from '~/interfaces/user-group';
-import { useIsAclEnabled } from '~/stores-universal/context';
-import { useUpdateUserGroupConfirmModal } from '~/stores/modal';
+import { isAclEnabledAtom } from '~/states/server-configurations';
+import { useUpdateUserGroupConfirmModalActions } from '~/states/ui/modal/update-user-group-confirm';
import { useSWRxUserGroupPages, useSWRxSelectableParentUserGroups, useSWRxSelectableChildUserGroups } from '~/stores/user-group';
import loggerFactory from '~/utils/logger';
@@ -104,9 +105,9 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
const { data: ancestorUserGroups, mutate: mutateAncestorUserGroups } = useAncestorUserGroups(currentUserGroupId, isExternalGroup);
- const { data: isAclEnabled } = useIsAclEnabled();
+ const isAclEnabled = useAtomValue(isAclEnabledAtom);
- const { open: openUpdateParentConfirmModal } = useUpdateUserGroupConfirmModal();
+ const { open: openUpdateParentConfirmModal } = useUpdateUserGroupConfirmModalActions();
const parentUserGroup = (() => {
if (isExternalGroup) {
@@ -365,7 +366,6 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
{ ancestorUserGroup._id === currentUserGroupId ? (
{ancestorUserGroup.name}
diff --git a/apps/app/src/client/components/Admin/UserManagement.tsx b/apps/app/src/client/components/Admin/UserManagement.tsx
index 58fef933ee4..867f631be22 100644
--- a/apps/app/src/client/components/Admin/UserManagement.tsx
+++ b/apps/app/src/client/components/Admin/UserManagement.tsx
@@ -13,6 +13,7 @@ import { withUnstatedContainers } from '../UnstatedUtils';
import InviteUserControl from './Users/InviteUserControl';
import PasswordResetModal from './Users/PasswordResetModal';
+import UserStatisticsTable from './Users/UserStatisticsTable';
import UserTable from './Users/UserTable';
import styles from './UserManagement.module.scss';
@@ -40,7 +41,8 @@ const UserManagement = (props: UserManagementProps) => {
// for Next routing
useEffect(() => {
pagingHandler(1);
- }, [pagingHandler]);
+ adminUsersContainer.retrieveUserStatistics();
+ }, [pagingHandler, adminUsersContainer]);
const validateToggleStatus = (statusType: string) => {
return (adminUsersContainer.isSelected(statusType)) ? (
@@ -134,6 +136,9 @@ const UserManagement = (props: UserManagementProps) => {
{t('user_management.user_management')}
+
diff --git a/apps/app/src/client/components/Admin/Users/PasswordResetModal.jsx b/apps/app/src/client/components/Admin/Users/PasswordResetModal.jsx
index c97ad171ba7..bf76f7e18fc 100644
--- a/apps/app/src/client/components/Admin/Users/PasswordResetModal.jsx
+++ b/apps/app/src/client/components/Admin/Users/PasswordResetModal.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import { LoadingSpinner } from '@growi/ui/dist/components';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import PropTypes from 'prop-types';
import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -11,7 +12,7 @@ import {
import AdminUsersContainer from '~/client/services/AdminUsersContainer';
import { apiv3Put } from '~/client/util/apiv3-client';
import { toastError } from '~/client/util/toastr';
-import { useIsMailerSetup } from '~/stores-universal/context';
+import { isMailerSetupAtom } from '~/states/server-configurations';
class PasswordResetModal extends React.Component {
@@ -204,7 +205,7 @@ class PasswordResetModal extends React.Component {
const PasswordResetModalWrapperFC = (props) => {
const { t } = useTranslation('admin');
- const { data: isMailerSetup } = useIsMailerSetup();
+ const isMailerSetup = useAtomValue(isMailerSetupAtom);
return
;
};
diff --git a/apps/app/src/client/components/Admin/Users/RevokeAdminButton.tsx b/apps/app/src/client/components/Admin/Users/RevokeAdminButton.tsx
index 42334486b3c..e02c5cb6473 100644
--- a/apps/app/src/client/components/Admin/Users/RevokeAdminButton.tsx
+++ b/apps/app/src/client/components/Admin/Users/RevokeAdminButton.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
import AdminUsersContainer from '~/client/services/AdminUsersContainer';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -17,7 +17,7 @@ type RevokeAdminButtonProps = {
const RevokeAdminButton = (props: RevokeAdminButtonProps): JSX.Element => {
const { t } = useTranslation('admin');
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser(); // hook returns single value now
const { adminUsersContainer, user } = props;
const onClickRevokeAdminBtnHandler = useCallback(async() => {
diff --git a/apps/app/src/client/components/Admin/Users/RevokeAdminMenuItem.tsx b/apps/app/src/client/components/Admin/Users/RevokeAdminMenuItem.tsx
index 8dee4aad894..fec813ec108 100644
--- a/apps/app/src/client/components/Admin/Users/RevokeAdminMenuItem.tsx
+++ b/apps/app/src/client/components/Admin/Users/RevokeAdminMenuItem.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'next-i18next';
import AdminUsersContainer from '~/client/services/AdminUsersContainer';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -33,7 +33,7 @@ const RevokeAdminMenuItem = (props: Props): JSX.Element => {
const { adminUsersContainer, user } = props;
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const clickRevokeAdminBtnHandler = useCallback(async() => {
try {
diff --git a/apps/app/src/client/components/Admin/Users/StatusSuspendMenuItem.tsx b/apps/app/src/client/components/Admin/Users/StatusSuspendMenuItem.tsx
index 8d9c7a2fce4..ca60ade2af1 100644
--- a/apps/app/src/client/components/Admin/Users/StatusSuspendMenuItem.tsx
+++ b/apps/app/src/client/components/Admin/Users/StatusSuspendMenuItem.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'next-i18next';
import { withUnstatedContainers } from '~/client/components/UnstatedUtils';
import AdminUsersContainer from '~/client/services/AdminUsersContainer';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
const SuspendAlert = React.memo((): JSX.Element => {
@@ -32,7 +32,7 @@ const StatusSuspendMenuItem = (props: Props): JSX.Element => {
const { adminUsersContainer, user } = props;
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser(); // custom hook now returns single value
const clickDeactiveBtnHandler = useCallback(async() => {
try {
diff --git a/apps/app/src/client/components/Admin/Users/UserInviteModal.jsx b/apps/app/src/client/components/Admin/Users/UserInviteModal.jsx
index 3cd5d95de62..9cca047387f 100644
--- a/apps/app/src/client/components/Admin/Users/UserInviteModal.jsx
+++ b/apps/app/src/client/components/Admin/Users/UserInviteModal.jsx
@@ -1,5 +1,6 @@
import React from 'react';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import PropTypes from 'prop-types';
import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -8,10 +9,9 @@ import {
Modal, ModalHeader, ModalBody, ModalFooter,
} from 'reactstrap';
-
import AdminUsersContainer from '~/client/services/AdminUsersContainer';
import { toastSuccess, toastError, toastWarning } from '~/client/util/toastr';
-import { useIsMailerSetup } from '~/stores-universal/context';
+import { isMailerSetupAtom } from '~/states/server-configurations';
import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -280,7 +280,7 @@ class UserInviteModal extends React.Component {
const UserInviteModalWrapperFC = (props) => {
const { t } = useTranslation();
- const { data: isMailerSetup } = useIsMailerSetup();
+ const isMailerSetup = useAtomValue(isMailerSetupAtom);
return
;
};
diff --git a/apps/app/src/client/components/Admin/Users/UserStatisticsTable.tsx b/apps/app/src/client/components/Admin/Users/UserStatisticsTable.tsx
new file mode 100644
index 00000000000..941417b0cf2
--- /dev/null
+++ b/apps/app/src/client/components/Admin/Users/UserStatisticsTable.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+type UserStatistics = {
+ total: number;
+ active: { total: number };
+ inactive: { total: number };
+};
+
+type Props = {
+ userStatistics?: UserStatistics | null;
+};
+
+const UserStatisticsTable: React.FC
= ({ userStatistics }) => {
+ const { t } = useTranslation('admin');
+ if (userStatistics == null) return null;
+
+ return (
+
+
+
+ {t('user_management.user_statistics.total')}
+ { userStatistics.total }
+
+
+ {t('user_management.user_statistics.active')}
+ { userStatistics.active.total }
+
+
+ {t('user_management.user_statistics.inactive')}
+ { userStatistics.inactive.total }
+
+
+
+ );
+};
+
+export default UserStatisticsTable;
diff --git a/apps/app/src/client/components/AlertSiteUrlUndefined.tsx b/apps/app/src/client/components/AlertSiteUrlUndefined.tsx
index 03f57c9926d..666b8c74e95 100644
--- a/apps/app/src/client/components/AlertSiteUrlUndefined.tsx
+++ b/apps/app/src/client/components/AlertSiteUrlUndefined.tsx
@@ -2,7 +2,7 @@ import type { JSX } from 'react';
import { useTranslation } from 'next-i18next';
-import { useSiteUrl } from '~/stores-universal/context';
+import { useSiteUrl } from '~/states/global';
const isValidUrl = (str: string): boolean => {
try {
@@ -17,12 +17,7 @@ const isValidUrl = (str: string): boolean => {
export const AlertSiteUrlUndefined = (): JSX.Element => {
const { t } = useTranslation('commons');
- const { data: siteUrl, error: errorSiteUrl } = useSiteUrl();
- const isLoadingSiteUrl = siteUrl === undefined && errorSiteUrl === undefined;
-
- if (isLoadingSiteUrl) {
- return <>;
- }
+ const siteUrl = useSiteUrl();
if (typeof siteUrl === 'string' && isValidUrl(siteUrl)) {
return <>;
diff --git a/apps/app/src/client/components/Bookmarks/BookmarkFolderItem.tsx b/apps/app/src/client/components/Bookmarks/BookmarkFolderItem.tsx
index 7387a6c8b36..d9c3aad935a 100644
--- a/apps/app/src/client/components/Bookmarks/BookmarkFolderItem.tsx
+++ b/apps/app/src/client/components/Bookmarks/BookmarkFolderItem.tsx
@@ -12,7 +12,7 @@ import { toastError } from '~/client/util/toastr';
import type { BookmarkFolderItems, DragItemDataType, DragItemType } from '~/interfaces/bookmark-info';
import { DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
import type { onDeletedBookmarkFolderFunction } from '~/interfaces/ui';
-import { useBookmarkFolderDeleteModal } from '~/stores/modal';
+import { useDeleteBookmarkFolderModalActions } from '~/states/ui/modal/delete-bookmark-folder';
import { BookmarkFolderItemControl } from './BookmarkFolderItemControl';
import { BookmarkFolderNameInput } from './BookmarkFolderNameInput';
@@ -49,7 +49,7 @@ export const BookmarkFolderItem: FC = (props: BookmarkF
const [isRenameAction, setIsRenameAction] = useState(false);
const [isCreateAction, setIsCreateAction] = useState(false);
- const { open: openDeleteBookmarkFolderModal } = useBookmarkFolderDeleteModal();
+ const { open: openDeleteBookmarkFolderModal } = useDeleteBookmarkFolderModalActions();
const childrenExists = hasChildren({ childFolder, bookmarks });
diff --git a/apps/app/src/client/components/Bookmarks/BookmarkFolderMenu.tsx b/apps/app/src/client/components/Bookmarks/BookmarkFolderMenu.tsx
index ec029f875e6..dabdc147730 100644
--- a/apps/app/src/client/components/Bookmarks/BookmarkFolderMenu.tsx
+++ b/apps/app/src/client/components/Bookmarks/BookmarkFolderMenu.tsx
@@ -7,7 +7,7 @@ import { DropdownItem, DropdownMenu, UncontrolledDropdown } from 'reactstrap';
import { addBookmarkToFolder, toggleBookmark } from '~/client/util/bookmark-utils';
import { toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { useSWRMUTxCurrentUserBookmarks } from '~/stores/bookmark';
import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
import { useSWRMUTxPageInfo } from '~/stores/page';
@@ -34,7 +34,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
const [selectedItem, setSelectedItem] = useState(null);
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
const { trigger: mutateCurrentUserBookmarks } = useSWRMUTxCurrentUserBookmarks();
diff --git a/apps/app/src/client/components/Bookmarks/BookmarkFolderTree.tsx b/apps/app/src/client/components/Bookmarks/BookmarkFolderTree.tsx
index f206ac6d221..037bf03e3e7 100644
--- a/apps/app/src/client/components/Bookmarks/BookmarkFolderTree.tsx
+++ b/apps/app/src/client/components/Bookmarks/BookmarkFolderTree.tsx
@@ -9,13 +9,14 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
import { toastSuccess } from '~/client/util/toastr';
import type { OnDeletedFunction } from '~/interfaces/ui';
-import { useIsReadOnlyUser } from '~/stores-universal/context';
+import { useIsReadOnlyUser } from '~/states/context';
+import { useCurrentPageData } from '~/states/page';
+import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
import {
useSWRxUserBookmarks, useSWRMUTxCurrentUserBookmarks,
} from '~/stores/bookmark';
import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
-import { usePageDeleteModal } from '~/stores/modal';
-import { mutateAllPageInfo, useSWRMUTxPageInfo, useSWRxCurrentPage } from '~/stores/page';
+import { mutateAllPageInfo, useSWRMUTxPageInfo } from '~/stores/page';
import { BookmarkFolderItem } from './BookmarkFolderItem';
import { BookmarkItem } from './BookmarkItem';
@@ -41,13 +42,13 @@ export const BookmarkFolderTree: React.FC = (props: Props) => {
const { t } = useTranslation();
const router = useRouter();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: currentPage } = useSWRxCurrentPage();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const currentPage = useCurrentPageData();
const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(userId);
const { data: userBookmarks, mutate: mutateUserBookmarks } = useSWRxUserBookmarks(userId ?? null);
const { trigger: mutatePageInfo } = useSWRMUTxPageInfo(currentPage?._id ?? null);
const { trigger: mutateCurrentUserBookmarks } = useSWRMUTxCurrentUserBookmarks();
- const { open: openDeleteModal } = usePageDeleteModal();
+ const { open: openDeleteModal } = usePageDeleteModalActions();
const bookmarkFolderTreeMutation = useCallback(() => {
mutateUserBookmarks();
diff --git a/apps/app/src/client/components/Bookmarks/BookmarkItem.tsx b/apps/app/src/client/components/Bookmarks/BookmarkItem.tsx
index ef68958c39c..5f8788bbb59 100644
--- a/apps/app/src/client/components/Bookmarks/BookmarkItem.tsx
+++ b/apps/app/src/client/components/Bookmarks/BookmarkItem.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, type JSX } from 'react';
import nodePath from 'path';
-import type { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '@growi/core';
+import type { IPageHasId, IPageInfoExt, IPageToDeleteWithMeta } from '@growi/core';
import { DevidedPagePath } from '@growi/core/dist/models';
import { pathUtils } from '@growi/core/dist/utils';
import { useRouter } from 'next/router';
@@ -15,8 +15,9 @@ import { addBookmarkToFolder, renamePage } from '~/client/util/bookmark-utils';
import { toastError, toastSuccess } from '~/client/util/toastr';
import type { BookmarkFolderItems, DragItemDataType } from '~/interfaces/bookmark-info';
import { DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
-import { usePutBackPageModal } from '~/stores/modal';
-import { mutateAllPageInfo, useSWRMUTxCurrentPage, useSWRxPageInfo } from '~/stores/page';
+import { useFetchCurrentPage } from '~/states/page';
+import { usePutBackPageModalActions } from '~/states/ui/modal/put-back-page';
+import { mutateAllPageInfo, useSWRxPageInfo } from '~/stores/page';
import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
import { PageListItemS } from '../PageList/PageListItemS';
@@ -47,11 +48,11 @@ export const BookmarkItem = (props: Props): JSX.Element => {
isReadOnlyUser, isOperable, bookmarkedPage, onClickDeleteMenuItemHandler,
parentFolder, level, canMoveToRoot, bookmarkFolderTreeMutation,
} = props;
- const { open: openPutBackPageModal } = usePutBackPageModal();
+ const { open: openPutBackPageModal } = usePutBackPageModalActions();
const [isRenameInputShown, setRenameInputShown] = useState(false);
const { data: pageInfo, mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkedPage?._id);
- const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
+ const { fetchCurrentPage } = useFetchCurrentPage();
const paddingLeft = BASE_BOOKMARK_PADDING + (BASE_FOLDER_PADDING * (level));
const dragItem: Partial = {
@@ -116,7 +117,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
}
}, [bookmarkedPage, cancel, bookmarkFolderTreeMutation, mutatePageInfo]);
- const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoAll | undefined): Promise => {
+ const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoExt | undefined): Promise => {
if (bookmarkedPage == null) return;
if (bookmarkedPage._id == null || bookmarkedPage.path == null) {
@@ -145,7 +146,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
mutateAllPageInfo();
bookmarkFolderTreeMutation();
router.push(`/${pageId}`);
- mutateCurrentPage();
+ fetchCurrentPage({ force: true });
toastSuccess(t('page_has_been_reverted', { path }));
}
catch (err) {
@@ -153,7 +154,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
}
};
openPutBackPageModal({ pageId, path }, { onPutBacked: putBackedHandler });
- }, [bookmarkedPage, openPutBackPageModal, bookmarkFolderTreeMutation, router, mutateCurrentPage, t]);
+ }, [bookmarkedPage, openPutBackPageModal, bookmarkFolderTreeMutation, router, fetchCurrentPage, t]);
if (bookmarkedPage == null) {
return <>;
diff --git a/apps/app/src/client/components/Comments.tsx b/apps/app/src/client/components/Comments.tsx
index 44172f063e5..576bf4ae7b5 100644
--- a/apps/app/src/client/components/Comments.tsx
+++ b/apps/app/src/client/components/Comments.tsx
@@ -8,9 +8,10 @@ import { useTranslation } from 'next-i18next';
import dynamic from 'next/dynamic';
import { debounce } from 'throttle-debounce';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
+import { useIsTrashPage } from '~/states/page';
import { useSWRxPageComment } from '~/stores/comment';
-import { useIsTrashPage, useSWRMUTxPageInfo } from '~/stores/page';
+import { useSWRMUTxPageInfo } from '~/stores/page';
const { isTopPage } = pagePathUtils;
@@ -36,8 +37,8 @@ export const Comments = (props: CommentsProps): JSX.Element => {
const { mutate } = useSWRxPageComment(pageId);
const { trigger: mutatePageInfo } = useSWRMUTxPageInfo(pageId);
- const { data: isDeleted } = useIsTrashPage();
- const { data: currentUser } = useCurrentUser();
+ const isDeleted = useIsTrashPage();
+ const currentUser = useCurrentUser();
const pageCommentParentRef = useRef(null);
diff --git a/apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.tsx b/apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.tsx
index ec4e404b6bc..8a4bf65ca49 100644
--- a/apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.tsx
+++ b/apps/app/src/client/components/Common/DrawerToggler/DrawerToggler.tsx
@@ -1,7 +1,6 @@
import { type ReactNode, type JSX } from 'react';
-import { useDrawerOpened } from '~/stores/ui';
-
+import { useDrawerOpened } from '~/states/ui/sidebar';
import styles from './DrawerToggler.module.scss';
@@ -17,7 +16,7 @@ export const DrawerToggler = (props: Props): JSX.Element => {
const { className, children } = props;
- const { data: isOpened, mutate } = useDrawerOpened();
+ const [isOpened, setIsOpened] = useDrawerOpened();
return (
@@ -26,7 +25,7 @@ export const DrawerToggler = (props: Props): JSX.Element => {
type="button"
aria-expanded="false"
aria-label="Toggle navigation"
- onClick={() => mutate(!isOpened)}
+ onClick={() => setIsOpened(!isOpened)}
>
{children}
diff --git a/apps/app/src/client/components/Common/Dropdown/PageItemControl.tsx b/apps/app/src/client/components/Common/Dropdown/PageItemControl.tsx
index 44f8476c13e..1c76f7756c5 100644
--- a/apps/app/src/client/components/Common/Dropdown/PageItemControl.tsx
+++ b/apps/app/src/client/components/Common/Dropdown/PageItemControl.tsx
@@ -3,7 +3,7 @@ import React, {
} from 'react';
import {
- type IPageInfoAll, isIPageInfoForOperation,
+ type IPageInfoExt, isIPageInfoForOperation,
} from '@growi/core/dist/interfaces';
import { LoadingSpinner } from '@growi/ui/dist/components';
import { useTranslation } from 'next-i18next';
@@ -33,18 +33,18 @@ export type MenuItemType = typeof MenuItemType[keyof typeof MenuItemType];
export type ForceHideMenuItems = MenuItemType[];
-export type AdditionalMenuItemsRendererProps = { pageInfo: IPageInfoAll };
+export type AdditionalMenuItemsRendererProps = { pageInfo: IPageInfoExt };
type CommonProps = {
- pageInfo?: IPageInfoAll,
+ pageInfo?: IPageInfoExt,
isEnableActions?: boolean,
isReadOnlyUser?: boolean,
forceHideMenuItems?: ForceHideMenuItems,
onClickBookmarkMenuItem?: (pageId: string, newValue?: boolean) => Promise
,
- onClickRenameMenuItem?: (pageId: string, pageInfo: IPageInfoAll | undefined) => Promise | void,
+ onClickRenameMenuItem?: (pageId: string, pageInfo: IPageInfoExt | undefined) => Promise | void,
onClickDuplicateMenuItem?: (pageId: string) => Promise | void,
- onClickDeleteMenuItem?: (pageId: string, pageInfo: IPageInfoAll | undefined) => Promise | void,
+ onClickDeleteMenuItem?: (pageId: string, pageInfo: IPageInfoExt | undefined) => Promise | void,
onClickRevertMenuItem?: (pageId: string) => Promise | void,
onClickPathRecoveryMenuItem?: (pageId: string) => Promise | void,
@@ -58,6 +58,7 @@ type CommonProps = {
type DropdownMenuProps = CommonProps & {
pageId: string,
isLoading?: boolean,
+ isDataUnavailable?: boolean,
operationProcessData?: IPageOperationProcessData,
}
@@ -65,7 +66,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
const { t } = useTranslation('');
const {
- pageId, isLoading, pageInfo, isEnableActions, isReadOnlyUser, forceHideMenuItems, operationProcessData,
+ pageId, isLoading, isDataUnavailable, pageInfo, isEnableActions, isReadOnlyUser, forceHideMenuItems, operationProcessData,
onClickBookmarkMenuItem, onClickRenameMenuItem, onClickDuplicateMenuItem, onClickDeleteMenuItem,
onClickRevertMenuItem, onClickPathRecoveryMenuItem,
additionalMenuItemOnTopRenderer: AdditionalMenuItemsOnTop,
@@ -86,7 +87,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
if (onClickRenameMenuItem == null) {
return;
}
- if (!pageInfo?.isMovable) {
+ if (!isIPageInfoForOperation(pageInfo) || !pageInfo?.isMovable) {
logger.warn('This page could not be renamed.');
return;
}
@@ -113,7 +114,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
if (pageInfo == null || onClickDeleteMenuItem == null) {
return;
}
- if (!pageInfo.isDeletable) {
+ if (!isIPageInfoForOperation(pageInfo) || !pageInfo?.isDeletable) {
logger.warn('This page could not be deleted.');
return;
}
@@ -130,7 +131,15 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
let contents = <>;
- if (isLoading) {
+ if (isDataUnavailable) {
+ // Show message when data is not available (e.g., fetch error)
+ contents = (
+
+ error_outline No data available
+
+ );
+ }
+ else if (isLoading) {
contents = (
@@ -176,7 +185,8 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
) }
{/* Move/Rename */}
- { !forceHideMenuItems?.includes(MenuItemType.RENAME) && isEnableActions && !isReadOnlyUser && pageInfo.isMovable && (
+ { !forceHideMenuItems?.includes(MenuItemType.RENAME) && isEnableActions && !isReadOnlyUser
+ && isIPageInfoForOperation(pageInfo) && pageInfo.isMovable && (
{ showDeviderBeforeDelete && {
@@ -304,7 +316,9 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
}
}, [mutatePageInfo, onClickBookmarkMenuItem, shouldFetch]);
- const isLoading = shouldFetch && fetchedPageInfo == null;
+ // isLoading should be true only when fetching is in progress (data and error are both undefined)
+ const isLoading = shouldFetch && fetchedPageInfo == null && fetchError == null;
+ const isDataUnavailable = !isLoading && fetchedPageInfo == null && presetPageInfo == null;
const renameMenuItemClickHandler = useCallback(async() => {
if (onClickRenameMenuItem == null) {
@@ -347,6 +361,7 @@ export const PageItemControlSubstance = (props: PageItemControlSubstanceProps):
= (props: Props) => {
reset();
}, [reset]);
- const onImageLoaded = (image) => {
+ // Memoize image processing functions
+ const onImageLoaded = useCallback((image) => {
setImageRef(image);
reset();
return false;
- };
-
+ }, [reset]);
- const getCroppedImg = async(image: HTMLImageElement, crop: ICropOptions) => {
+ const getCroppedImg = useCallback(async(image: HTMLImageElement, crop: ICropOptions) => {
const {
naturalWidth: imageNaturalWidth, naturalHeight: imageNaturalHeight, width: imageWidth, height: imageHeight,
} = image;
@@ -107,82 +107,86 @@ const ImageCropModal: FC = (props: Props) => {
logger.error(err);
toastError(new Error('Failed to draw image'));
}
- };
+ }, []);
// Convert base64 Image to blob
- const convertBase64ToBlob = async(base64Image: string) => {
+ const convertBase64ToBlob = useCallback(async(base64Image: string) => {
const base64Response = await fetch(base64Image);
return base64Response.blob();
- };
+ }, []);
- // Clear image and set isImageCrop true on modal close
- const onModalCloseHandler = async() => {
+ // Memoize event handlers
+ const onModalCloseHandler = useCallback(async() => {
setImageRef(null);
onModalClose();
- };
+ }, [onModalClose]);
- // Process and save image
- // Cropping image is optional
- // If crop is active , the saved image is cropped image (png). Otherwise, the original image will be saved (Original size and file type)
- const processAndSaveImage = async() => {
+ const processAndSaveImage = useCallback(async() => {
if (imageRef && cropOptions?.width && cropOptions.height) {
const processedImage = isCropImage ? await getCroppedImg(imageRef, cropOptions) : await convertBase64ToBlob(imageRef.src);
// Save image to database
onImageProcessCompleted(processedImage);
}
onModalCloseHandler();
- };
+ }, [imageRef, cropOptions, isCropImage, getCroppedImg, convertBase64ToBlob, onImageProcessCompleted, onModalCloseHandler]);
+
+ const toggleCropMode = useCallback(() => setIsCropImage(!isCropImage), [isCropImage]);
+ const handleCropChange = useCallback((crop: CropOptions) => setCropOtions(crop), []);
return (
-
- {t('crop_image_modal.image_crop')}
-
-
- {
- isCropImage
- ? (
- setCropOtions(crop)}
- circularCrop={isCircular}
- />
+ {isShow && (
+ <>
+
+ {t('crop_image_modal.image_crop')}
+
+
+ {
+ isCropImage
+ ? (
+
+
+
+ {t('commons:Reset')}
+
+ { !showCropOption && (
+
+
+
+ { t('crop_image_modal.image_crop') }
+
+
+
-
-
- {t('commons:Reset')}
-
- { !showCropOption && (
-
-
-
- { t('crop_image_modal.image_crop') }
-
-
-
- {t('crop_image_modal.cancel')}
-
-
- { isCropImage ? t('crop_image_modal.crop') : t('crop_image_modal.save') }
-
-
+ }
+
+ {t('crop_image_modal.cancel')}
+
+
+ { isCropImage ? t('crop_image_modal.crop') : t('crop_image_modal.save') }
+
+
+
+ )}
);
};
diff --git a/apps/app/src/client/components/CreateTemplateModal.tsx b/apps/app/src/client/components/CreateTemplateModal/CreateTemplateModal.tsx
similarity index 69%
rename from apps/app/src/client/components/CreateTemplateModal.tsx
rename to apps/app/src/client/components/CreateTemplateModal/CreateTemplateModal.tsx
index a65d1ae1914..18178e57cbf 100644
--- a/apps/app/src/client/components/CreateTemplateModal.tsx
+++ b/apps/app/src/client/components/CreateTemplateModal/CreateTemplateModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
import { pathUtils } from '@growi/core/dist/utils';
import { useTranslation } from 'next-i18next';
@@ -67,9 +67,11 @@ export const CreateTemplateModal: React.FC = ({
}
}, [createTemplate, onClose, path, t]);
- const parentPath = pathUtils.addTrailingSlash(path);
+ // Memoize computed path
+ const parentPath = useMemo(() => pathUtils.addTrailingSlash(path), [path]);
- const renderTemplateCard = (target: TargetType, label: LabelType) => (
+ // Memoize template card rendering function
+ const renderTemplateCard = useCallback((target: TargetType, label: LabelType) => (
= ({
onClickHandler={() => onClickTemplateButtonHandler(label)}
/>
- );
-
- if (!isCreatable) {
- return <>;
- }
+ ), [isCreating, onClickTemplateButtonHandler]);
return (
-
- {t('template.modal_label.Create/Edit Template Page')}
-
-
-
-
- {parentPath}
-
- {renderTemplateCard('children', '_template')}
- {renderTemplateCard('descendants', '__template')}
-
-
+ {(isCreatable && isOpen) && (
+ <>
+
+ {t('template.modal_label.Create/Edit Template Page')}
+
+
+
+
+ {parentPath}
+
+ {renderTemplateCard('children', '_template')}
+ {renderTemplateCard('descendants', '__template')}
+
+
+
+ )}
);
};
diff --git a/apps/app/src/client/components/CreateTemplateModal/dynamic.tsx b/apps/app/src/client/components/CreateTemplateModal/dynamic.tsx
new file mode 100644
index 00000000000..da39e26bc16
--- /dev/null
+++ b/apps/app/src/client/components/CreateTemplateModal/dynamic.tsx
@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '../../../components/utils/use-lazy-loader';
+
+type CreateTemplateModalProps = {
+ path: string;
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+export const CreateTemplateModalLazyLoaded = (props: CreateTemplateModalProps): JSX.Element => {
+ const CreateTemplateModal = useLazyLoader(
+ 'create-template-modal',
+ () => import('./CreateTemplateModal').then(mod => ({ default: mod.CreateTemplateModal })),
+ props.isOpen,
+ );
+
+ return CreateTemplateModal != null ?
diff --git a/apps/app/src/client/components/DeleteBookmarkFolderModal.tsx b/apps/app/src/client/components/DeleteBookmarkFolderModal.tsx
deleted file mode 100644
index bd8bd7be131..00000000000
--- a/apps/app/src/client/components/DeleteBookmarkFolderModal.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-
-import type { FC } from 'react';
-import React from 'react';
-
-import { useTranslation } from 'next-i18next';
-import {
- Modal, ModalBody, ModalFooter, ModalHeader,
-} from 'reactstrap';
-
-import { FolderIcon } from '~/client/components/Icons/FolderIcon';
-import { deleteBookmarkFolder } from '~/client/util/bookmark-utils';
-import { toastError } from '~/client/util/toastr';
-import { useBookmarkFolderDeleteModal } from '~/stores/modal';
-
-
-const DeleteBookmarkFolderModal: FC = () => {
- const { t } = useTranslation();
- const { data: deleteBookmarkFolderModalData, close: closeBookmarkFolderDeleteModal } = useBookmarkFolderDeleteModal();
- const isOpened = deleteBookmarkFolderModalData?.isOpened ?? false;
-
- async function deleteBookmark() {
- if (deleteBookmarkFolderModalData == null || deleteBookmarkFolderModalData.bookmarkFolder == null) {
- return;
- }
- if (deleteBookmarkFolderModalData.bookmarkFolder != null) {
- try {
- await deleteBookmarkFolder(deleteBookmarkFolderModalData.bookmarkFolder._id);
- const onDeleted = deleteBookmarkFolderModalData.opts?.onDeleted;
- if (onDeleted != null) {
- onDeleted(deleteBookmarkFolderModalData.bookmarkFolder._id);
- }
- closeBookmarkFolderDeleteModal();
- }
- catch (err) {
- toastError(err);
- }
- }
- }
- async function onClickDeleteButton() {
- await deleteBookmark();
- }
-
- return (
-
-
- delete
- {t('bookmark_folder.delete_modal.modal_header_label')}
-
-
-
- { t('bookmark_folder.delete_modal.modal_body_description') }:
- {t('bookmark_folder.delete_modal.modal_body_alert')}
-
-
-
- delete
- {t('bookmark_folder.delete_modal.modal_footer_button')}
-
-
-
-
- );
-};
-
-export { DeleteBookmarkFolderModal };
diff --git a/apps/app/src/client/components/DeleteBookmarkFolderModal/DeleteBookmarkFolderModal.tsx b/apps/app/src/client/components/DeleteBookmarkFolderModal/DeleteBookmarkFolderModal.tsx
new file mode 100644
index 00000000000..074e3e2fec4
--- /dev/null
+++ b/apps/app/src/client/components/DeleteBookmarkFolderModal/DeleteBookmarkFolderModal.tsx
@@ -0,0 +1,96 @@
+
+import type { FC } from 'react';
+import { useCallback } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import {
+ Modal, ModalBody, ModalFooter, ModalHeader,
+} from 'reactstrap';
+
+import { FolderIcon } from '~/client/components/Icons/FolderIcon';
+import { deleteBookmarkFolder } from '~/client/util/bookmark-utils';
+import { toastError } from '~/client/util/toastr';
+import type { BookmarkFolderItems } from '~/interfaces/bookmark-info';
+import { useDeleteBookmarkFolderModalStatus, useDeleteBookmarkFolderModalActions } from '~/states/ui/modal/delete-bookmark-folder';
+
+/**
+ * DeleteBookmarkFolderModalSubstance - Presentation component (all logic here)
+ */
+type DeleteBookmarkFolderModalSubstanceProps = {
+ bookmarkFolder: BookmarkFolderItems;
+ onDeleted?: (folderId: string) => void;
+ closeModal: () => void;
+};
+
+const DeleteBookmarkFolderModalSubstance = ({
+ bookmarkFolder,
+ onDeleted,
+ closeModal,
+}: DeleteBookmarkFolderModalSubstanceProps): React.JSX.Element => {
+ const { t } = useTranslation();
+
+ const deleteBookmark = useCallback(async() => {
+ try {
+ await deleteBookmarkFolder(bookmarkFolder._id);
+ if (onDeleted != null) {
+ onDeleted(bookmarkFolder._id);
+ }
+ closeModal();
+ }
+ catch (err) {
+ toastError(err);
+ }
+ }, [bookmarkFolder, onDeleted, closeModal]);
+
+ const onClickDeleteButton = useCallback(async() => {
+ await deleteBookmark();
+ }, [deleteBookmark]);
+
+ return (
+
+
+ delete
+ {t('bookmark_folder.delete_modal.modal_header_label')}
+
+
+
+ { t('bookmark_folder.delete_modal.modal_body_description') }:
+ {t('bookmark_folder.delete_modal.modal_body_alert')}
+
+
+
+ delete
+ {t('bookmark_folder.delete_modal.modal_footer_button')}
+
+
+
+ );
+};
+
+/**
+ * DeleteBookmarkFolderModal - Container component (lightweight, always rendered)
+ */
+const DeleteBookmarkFolderModal: FC = () => {
+ const { isOpened, bookmarkFolder, opts } = useDeleteBookmarkFolderModalStatus();
+ const { close: closeModal } = useDeleteBookmarkFolderModalActions();
+
+ return (
+
+ {isOpened && bookmarkFolder != null && (
+
+ );
+};
+
+export { DeleteBookmarkFolderModal };
diff --git a/apps/app/src/client/components/DeleteBookmarkFolderModal/dynamic.tsx b/apps/app/src/client/components/DeleteBookmarkFolderModal/dynamic.tsx
new file mode 100644
index 00000000000..566b8f8ed40
--- /dev/null
+++ b/apps/app/src/client/components/DeleteBookmarkFolderModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useDeleteBookmarkFolderModalStatus } from '~/states/ui/modal/delete-bookmark-folder';
+
+type DeleteBookmarkFolderModalProps = Record
;
+
+export const DeleteBookmarkFolderModalLazyLoaded = (): JSX.Element => {
+ const status = useDeleteBookmarkFolderModalStatus();
+
+ const DeleteBookmarkFolderModal = useLazyLoader(
+ 'delete-bookmark-folder-modal',
+ () => import('./DeleteBookmarkFolderModal').then(mod => ({ default: mod.DeleteBookmarkFolderModal })),
+ status?.isOpened ?? false,
+ );
+
+ return DeleteBookmarkFolderModal ? (() => import('./DescendantsPageList').then(mod => mod.DescendantsPageList), { ssr: false });
-
-const PageTimeline = dynamic(() => import('./PageTimeline').then(mod => mod.PageTimeline), { ssr: false });
-
-export const DescendantsPageListModal = (): JSX.Element => {
- const { t } = useTranslation();
-
- const [activeTab, setActiveTab] = useState('pagelist');
- const [isWindowExpanded, setIsWindowExpanded] = useState(false);
-
- const { data: isSharedUser } = useIsSharedUser();
-
- const { data: status, close } = useDescendantsPageListModal();
-
- const { events } = useRouter();
-
- const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
-
- useEffect(() => {
- events.on('routeChangeStart', close);
- return () => {
- events.off('routeChangeStart', close);
- };
- }, [close, events]);
-
- const navTabMapping = useMemo(() => {
- return {
- pagelist: {
- Icon: () => subject ,
- Content: () => {
- if (status == null || status.path == null || !status.isOpened) {
- return <>;
- }
- return timeline ,
- Content: () => {
- if (status == null || !status.isOpened) {
- return <>;
- }
- return
- setIsWindowExpanded(true)}
- contractWindow={() => setIsWindowExpanded(false)}
- />
-
- ), [close, isWindowExpanded]);
-
- if (status == null) {
- return <>;
- }
-
- const { isOpened } = status;
-
- return (
-
-
- {isDeviceLargerThanLg && (
- setActiveTab(v)}
- hideBorderBottom
- />
- )}
-
-
- {!isDeviceLargerThanLg && (
- setActiveTab(v)}
- />
- )}
-
-
- );
-
-};
diff --git a/apps/app/src/client/components/DescendantsPageListModal.module.scss b/apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.module.scss
similarity index 100%
rename from apps/app/src/client/components/DescendantsPageListModal.module.scss
rename to apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.module.scss
diff --git a/apps/app/src/client/components/DescendantsPageListModal.spec.tsx b/apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.spec.tsx
similarity index 68%
rename from apps/app/src/client/components/DescendantsPageListModal.spec.tsx
rename to apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.spec.tsx
index a81da6ee461..ef1904a59a8 100644
--- a/apps/app/src/client/components/DescendantsPageListModal.spec.tsx
+++ b/apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.spec.tsx
@@ -3,7 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
import { DescendantsPageListModal } from './DescendantsPageListModal';
const mockClose = vi.hoisted(() => vi.fn());
-const useIsDeviceLargerThanLg = vi.hoisted(() => vi.fn().mockReturnValue({ data: true }));
+const useDeviceLargerThanLg = vi.hoisted(() => vi.fn().mockReturnValue([true]));
vi.mock('next/router', () => ({
useRouter: () => ({
@@ -14,15 +14,30 @@ vi.mock('next/router', () => ({
}),
}));
-vi.mock('~/stores/modal', () => ({
- useDescendantsPageListModal: vi.fn().mockReturnValue({
- data: { isOpened: true },
+vi.mock('~/states/ui/modal/descendants-page-list', () => ({
+ useDescendantsPageListModalStatus: vi.fn().mockReturnValue({
+ isOpened: true,
+ path: '/test/path',
+ }),
+ useDescendantsPageListModalActions: vi.fn().mockReturnValue({
close: mockClose,
}),
}));
-vi.mock('~/stores/ui', () => ({
- useIsDeviceLargerThanLg,
+vi.mock('~/states/ui/device', () => ({
+ useDeviceLargerThanLg,
+}));
+
+vi.mock('~/states/context', () => ({
+ useIsSharedUser: vi.fn().mockReturnValue(false),
+}));
+
+vi.mock('../DescendantsPageList', () => ({
+ DescendantsPageList: () => DescendantsPageList
,
+}));
+
+vi.mock('../PageTimeline', () => ({
+ PageTimeline: () => PageTimeline
,
}));
describe('DescendantsPageListModal.tsx', () => {
@@ -54,7 +69,7 @@ describe('DescendantsPageListModal.tsx', () => {
describe('when device is smaller than lg', () => {
beforeEach(() => {
- useIsDeviceLargerThanLg.mockReturnValue({ data: false });
+ useDeviceLargerThanLg.mockReturnValue([false]);
});
it('should render CustomNavDropdown on devices smaller than lg', () => {
diff --git a/apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.tsx b/apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.tsx
new file mode 100644
index 00000000000..9bc482705ba
--- /dev/null
+++ b/apps/app/src/client/components/DescendantsPageListModal/DescendantsPageListModal.tsx
@@ -0,0 +1,164 @@
+
+import React, {
+ useState, useMemo, useEffect, useCallback,
+} from 'react';
+
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import {
+ Modal, ModalHeader, ModalBody,
+} from 'reactstrap';
+
+import { useIsSharedUser } from '~/states/context';
+import { useDeviceLargerThanLg } from '~/states/ui/device';
+import { useDescendantsPageListModalActions, useDescendantsPageListModalStatus } from '~/states/ui/modal/descendants-page-list';
+
+import { CustomNavDropdown, CustomNavTab } from '../CustomNavigation/CustomNav';
+import CustomTabContent from '../CustomNavigation/CustomTabContent';
+import type { DescendantsPageListProps } from '../DescendantsPageList';
+import ExpandOrContractButton from '../ExpandOrContractButton';
+
+import styles from './DescendantsPageListModal.module.scss';
+
+const DescendantsPageList = dynamic(() => import('../DescendantsPageList').then(mod => mod.DescendantsPageList), { ssr: false });
+
+const PageTimeline = dynamic(() => import('../PageTimeline').then(mod => mod.PageTimeline), { ssr: false });
+
+/**
+ * DescendantsPageListModalSubstance - Presentation component (all logic here)
+ */
+type DescendantsPageListModalSubstanceProps = {
+ path: string | undefined;
+ closeModal: () => void;
+ onExpandedChange?: (isExpanded: boolean) => void;
+};
+
+const DescendantsPageListModalSubstance = ({
+ path,
+ closeModal,
+ onExpandedChange,
+}: DescendantsPageListModalSubstanceProps): React.JSX.Element => {
+ const { t } = useTranslation();
+
+ const [activeTab, setActiveTab] = useState('pagelist');
+ const [isWindowExpanded, setIsWindowExpanded] = useState(false);
+
+ const isSharedUser = useIsSharedUser();
+ const { events } = useRouter();
+ const [isDeviceLargerThanLg] = useDeviceLargerThanLg();
+
+ useEffect(() => {
+ events.on('routeChangeStart', closeModal);
+ return () => {
+ events.off('routeChangeStart', closeModal);
+ };
+ }, [closeModal, events]);
+
+ const navTabMapping = useMemo(() => {
+ return {
+ pagelist: {
+ Icon: () => subject ,
+ Content: () => {
+ if (path == null) {
+ return <>;
+ }
+ return timeline ,
+ Content: () => {
+ return
+
+ ), [closeModal, isWindowExpanded, expandWindow, contractWindow]);
+
+ return (
+
+
+ {isDeviceLargerThanLg && (
+
+
+ {!isDeviceLargerThanLg && (
+
+
+ );
+};
+
+/**
+ * DescendantsPageListModal - Container component (lightweight, always rendered)
+ */
+export const DescendantsPageListModal = (): React.JSX.Element => {
+ const [isWindowExpanded, setIsWindowExpanded] = useState(false);
+ const status = useDescendantsPageListModalStatus();
+ const { close } = useDescendantsPageListModalActions();
+
+ const handleExpandedChange = useCallback((isExpanded: boolean) => {
+ setIsWindowExpanded(isExpanded);
+ }, []);
+
+ return (
+
+ {status.isOpened && (
+
+ );
+};
diff --git a/apps/app/src/client/components/DescendantsPageListModal/dynamic.tsx b/apps/app/src/client/components/DescendantsPageListModal/dynamic.tsx
new file mode 100644
index 00000000000..4e587cfe286
--- /dev/null
+++ b/apps/app/src/client/components/DescendantsPageListModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useDescendantsPageListModalStatus } from '~/states/ui/modal/descendants-page-list';
+
+type DescendantsPageListModalProps = Record;
+
+export const DescendantsPageListModalLazyLoaded = (): JSX.Element => {
+ const status = useDescendantsPageListModalStatus();
+
+ const DescendantsPageListModal = useLazyLoader(
+ 'descendants-page-list-modal',
+ () => import('./DescendantsPageListModal').then(mod => ({ default: mod.DescendantsPageListModal })),
+ status?.isOpened ?? false,
+ );
+
+ return DescendantsPageListModal ? (null);
-
- async function emptyTrash() {
- if (emptyTrashModalData == null || emptyTrashModalData.pages == null) {
- return;
- }
-
- try {
- await apiv3Delete('/pages/empty-trash');
- const onEmptiedTrash = emptyTrashModalData.opts?.onEmptiedTrash;
- if (onEmptiedTrash != null) {
- onEmptiedTrash();
- }
- closeEmptyTrashModal();
- }
- catch (err) {
- setErrs([err]);
- }
- }
-
- async function emptyTrashButtonHandler() {
- await emptyTrash();
- }
-
- const renderPagePaths = () => {
- const pages = emptyTrashModalData?.pages;
-
- if (pages != null) {
- return pages.map(page => (
-
- { page.data.path }
-
- ));
- }
- return <>;
- };
-
- return (
-
-
- delete_forever
- {t('modal_empty.empty_the_trash')}
-
-
-
- { t('modal_delete.deleting_page') }:
- {!canDeleteAllpages && t('modal_empty.not_deletable_notice')}
-
-
- delete_forever
- {t('modal_empty.empty_the_trash_button')}
-
-
-
-
- );
-};
-
-export default EmptyTrashModal;
diff --git a/apps/app/src/client/components/EmptyTrashModal/EmptyTrashModal.tsx b/apps/app/src/client/components/EmptyTrashModal/EmptyTrashModal.tsx
new file mode 100644
index 00000000000..70c18eda5e7
--- /dev/null
+++ b/apps/app/src/client/components/EmptyTrashModal/EmptyTrashModal.tsx
@@ -0,0 +1,117 @@
+import type { FC } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
+
+import type { IPageToDeleteWithMeta } from '@growi/core';
+import { useTranslation } from 'next-i18next';
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+import { apiv3Delete } from '~/client/util/apiv3-client';
+import { useEmptyTrashModalStatus, useEmptyTrashModalActions } from '~/states/ui/modal/empty-trash';
+
+import ApiErrorMessageList from '../PageManagement/ApiErrorMessageList';
+
+/**
+ * EmptyTrashModalSubstance - Presentation component (all logic here)
+ */
+type EmptyTrashModalSubstanceProps = {
+ pages: IPageToDeleteWithMeta[] | undefined;
+ canDeleteAllPages: boolean;
+ onEmptiedTrash?: () => void;
+ closeModal: () => void;
+};
+
+const EmptyTrashModalSubstance = ({
+ pages,
+ canDeleteAllPages,
+ onEmptiedTrash,
+ closeModal,
+}: EmptyTrashModalSubstanceProps): React.JSX.Element => {
+ const { t } = useTranslation();
+
+ const [errs, setErrs] = useState(null);
+
+ const emptyTrash = useCallback(async() => {
+ if (pages == null) {
+ return;
+ }
+
+ try {
+ await apiv3Delete('/pages/empty-trash');
+ if (onEmptiedTrash != null) {
+ onEmptiedTrash();
+ }
+ closeModal();
+ }
+ catch (err) {
+ setErrs([err]);
+ }
+ }, [pages, onEmptiedTrash, closeModal]);
+
+ const emptyTrashButtonHandler = useCallback(async() => {
+ await emptyTrash();
+ }, [emptyTrash]);
+
+ // Memoize page paths rendering
+ const renderPagePaths = useMemo(() => {
+ if (pages != null) {
+ return pages.map(page => (
+
+ { page.data.path }
+
+ ));
+ }
+ return <>;
+ }, [pages]);
+
+ return (
+
+
+ delete_forever
+ {t('modal_empty.empty_the_trash')}
+
+
+
+ { t('modal_delete.deleting_page') }:
+ {!canDeleteAllPages && t('modal_empty.not_deletable_notice')}
+
+
+ delete_forever
+ {t('modal_empty.empty_the_trash_button')}
+
+
+
+ {isOpened && (
+
+ );
+};
diff --git a/apps/app/src/client/components/EmptyTrashModal/dynamic.tsx b/apps/app/src/client/components/EmptyTrashModal/dynamic.tsx
new file mode 100644
index 00000000000..8f594c5d2d2
--- /dev/null
+++ b/apps/app/src/client/components/EmptyTrashModal/dynamic.tsx
@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useEmptyTrashModalStatus } from '~/states/ui/modal/empty-trash';
+
+import { useLazyLoader } from '../../../components/utils/use-lazy-loader';
+
+type EmptyTrashModalProps = Record;
+
+export const EmptyTrashModalLazyLoaded = (): JSX.Element => {
+ const status = useEmptyTrashModalStatus();
+
+ const EmptyTrashModal = useLazyLoader(
+ 'empty-trash-modal',
+ () => import('./EmptyTrashModal').then(mod => ({ default: mod.EmptyTrashModal })),
+ status?.isOpened ?? false,
+ );
+
+ return EmptyTrashModal != null ? ) | undefined;
+ closeModal: () => void;
+};
-const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
+const GrantedGroupsInheritanceSelectModalSubstance = (props: GrantedGroupsInheritanceSelectModalSubstanceProps): React.JSX.Element => {
+ const { onCreateBtnClick: _onCreateBtnClick, closeModal } = props;
const { t } = useTranslation();
- const { data: modalData, close: closeModal } = useGrantedGroupsInheritanceSelectModal();
+
const [onlyInheritUserRelatedGrantedGroups, setOnlyInheritUserRelatedGrantedGroups] = useState(false);
- const onCreateBtnClick = async() => {
- await modalData?.onCreateBtnClick?.(onlyInheritUserRelatedGrantedGroups);
+ const onCreateBtnClick = useCallback(async() => {
+ await _onCreateBtnClick?.(onlyInheritUserRelatedGrantedGroups);
setOnlyInheritUserRelatedGrantedGroups(false); // reset to false after create request
- };
- const isOpened = modalData?.isOpened ?? false;
+ }, [_onCreateBtnClick, onlyInheritUserRelatedGrantedGroups]);
+
+ const setInheritAll = useCallback(() => setOnlyInheritUserRelatedGrantedGroups(false), []);
+ const setInheritRelatedOnly = useCallback(() => setOnlyInheritUserRelatedGrantedGroups(true), []);
return (
- closeModal()}
- >
+ <>
closeModal()}>
{t('modal_granted_groups_inheritance_select.select_granted_groups')}
@@ -35,7 +45,7 @@ const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
className="form-check-input"
form="formImageType"
checked={!onlyInheritUserRelatedGrantedGroups}
- onChange={() => { setOnlyInheritUserRelatedGrantedGroups(false) }}
+ onChange={setInheritAll}
/>
{t('modal_granted_groups_inheritance_select.inherit_all_granted_groups_from_parent')}
@@ -48,7 +58,7 @@ const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
className="form-check-input"
form="formImageType"
checked={onlyInheritUserRelatedGrantedGroups}
- onChange={() => { setOnlyInheritUserRelatedGrantedGroups(true) }}
+ onChange={setInheritRelatedOnly}
/>
{t('modal_granted_groups_inheritance_select.only_inherit_related_groups')}
@@ -62,8 +72,28 @@ const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
{t('modal_granted_groups_inheritance_select.create_page')}
-
+
);
};
-export default GrantedGroupsInheritanceSelectModal;
+/**
+ * GrantedGroupsInheritanceSelectModal - Container component (lightweight, always rendered)
+ */
+export const GrantedGroupsInheritanceSelectModal = (): React.JSX.Element => {
+ const { isOpened, onCreateBtnClick } = useGrantedGroupsInheritanceSelectModalStatus();
+ const { close: closeModal } = useGrantedGroupsInheritanceSelectModalActions();
+
+ return (
+ closeModal()}
+ >
+ {isOpened && (
+
+ );
+};
diff --git a/apps/app/src/client/components/GrantedGroupsInheritanceSelectModal/dynamic.tsx b/apps/app/src/client/components/GrantedGroupsInheritanceSelectModal/dynamic.tsx
new file mode 100644
index 00000000000..4c789a31449
--- /dev/null
+++ b/apps/app/src/client/components/GrantedGroupsInheritanceSelectModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useGrantedGroupsInheritanceSelectModalStatus } from '~/states/ui/modal/granted-groups-inheritance-select';
+
+type GrantedGroupsInheritanceSelectModalProps = Record;
+
+export const GrantedGroupsInheritanceSelectModalLazyLoaded = (): JSX.Element => {
+ const status = useGrantedGroupsInheritanceSelectModalStatus();
+
+ const GrantedGroupsInheritanceSelectModal = useLazyLoader(
+ 'granted-groups-inheritance-select-modal',
+ () => import('./GrantedGroupsInheritanceSelectModal').then(mod => ({ default: mod.GrantedGroupsInheritanceSelectModal })),
+ status?.isOpened ?? false,
+ );
+
+ return GrantedGroupsInheritanceSelectModal ? = (props: IdenticalPathAl
export const IdenticalPathPage = (): JSX.Element => {
- const { data: currentPath } = useCurrentPathname();
+ const currentPath = useCurrentPathname();
const { data: pages } = useSWRxPagesByPath(currentPath);
const { injectTo } = useSWRxPageInfoForList(null, currentPath, true, true);
diff --git a/apps/app/src/client/components/InAppNotification/InAppNotificationDropdown.tsx b/apps/app/src/client/components/InAppNotification/InAppNotificationDropdown.tsx
index c8249268302..8ef3d66ccf0 100644
--- a/apps/app/src/client/components/InAppNotification/InAppNotificationDropdown.tsx
+++ b/apps/app/src/client/components/InAppNotification/InAppNotificationDropdown.tsx
@@ -8,8 +8,8 @@ import {
Dropdown, DropdownToggle, DropdownMenu, DropdownItem,
} from 'reactstrap';
+import { useGlobalSocket } from '~/states/socket-io';
import { useSWRxInAppNotifications, useSWRxInAppNotificationStatus } from '~/stores/in-app-notification';
-import { useDefaultSocket } from '~/stores/socket-io';
import InAppNotificationList from './InAppNotificationList';
@@ -19,7 +19,7 @@ export const InAppNotificationDropdown = (): JSX.Element => {
const [isOpen, setIsOpen] = useState(false);
const limit = 6;
- const { data: socket } = useDefaultSocket();
+ const socket = useGlobalSocket();
const { data: inAppNotificationData, mutate: mutateInAppNotificationData } = useSWRxInAppNotifications(
limit, undefined, undefined,
{ revalidateOnFocus: isOpen },
diff --git a/apps/app/src/client/components/InAppNotification/InAppNotificationPage.tsx b/apps/app/src/client/components/InAppNotification/InAppNotificationPage.tsx
index 0fd63f38d9a..9f1d64e1841 100644
--- a/apps/app/src/client/components/InAppNotification/InAppNotificationPage.tsx
+++ b/apps/app/src/client/components/InAppNotification/InAppNotificationPage.tsx
@@ -2,11 +2,12 @@ import type { FC } from 'react';
import React, { useState } from 'react';
import { LoadingSpinner } from '@growi/ui/dist/components';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import { apiv3Put } from '~/client/util/apiv3-client';
import { InAppNotificationStatuses } from '~/interfaces/in-app-notification';
-import { useShowPageLimitationXL } from '~/stores-universal/context';
+import { showPageLimitationXLAtom } from '~/states/server-configurations';
import { useSWRxInAppNotifications, useSWRxInAppNotificationStatus } from '~/stores/in-app-notification';
import CustomNavAndContents from '../CustomNavigation/CustomNavAndContents';
@@ -17,7 +18,7 @@ import InAppNotificationList from './InAppNotificationList';
export const InAppNotificationPage: FC = () => {
const { t } = useTranslation('commons');
- const { data: showPageLimitationXL } = useShowPageLimitationXL();
+ const showPageLimitationXL = useAtomValue(showPageLimitationXLAtom);
const limit = showPageLimitationXL != null ? showPageLimitationXL : 20;
diff --git a/apps/app/src/client/components/InvitedForm.tsx b/apps/app/src/client/components/InvitedForm.tsx
index cc19d6588f3..a9be1d2e649 100644
--- a/apps/app/src/client/components/InvitedForm.tsx
+++ b/apps/app/src/client/components/InvitedForm.tsx
@@ -3,42 +3,49 @@ import React, { useCallback, useState, type JSX } from 'react';
import { LoadingSpinner } from '@growi/ui/dist/components';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
+import { useForm } from 'react-hook-form';
import { apiv3Post } from '~/client/util/apiv3-client';
-import { useCurrentUser } from '~/stores-universal/context';
-
+import { useCurrentUser } from '~/states/global';
type InvitedFormProps = {
invitedFormUsername: string,
invitedFormName: string,
}
-export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
+type InvitedFormValues = {
+ name: string,
+ username: string,
+ password: string,
+};
+export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
const { t } = useTranslation();
const router = useRouter();
- const { data: user } = useCurrentUser();
+ const user = useCurrentUser();
const [loginErrors, setLoginErrors] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const { invitedFormUsername, invitedFormName } = props;
- const submitHandler = useCallback(async(e) => {
- e.preventDefault();
+ const {
+ register,
+ handleSubmit,
+ formState: { isSubmitting },
+ } = useForm({
+ defaultValues: {
+ name: invitedFormName,
+ username: invitedFormUsername,
+ },
+ });
+
+ const submitHandler = useCallback(async(values: InvitedFormValues) => {
setIsLoading(true);
- const formData = e.target.elements;
-
- const {
- 'invitedForm[name]': { value: name },
- 'invitedForm[password]': { value: password },
- 'invitedForm[username]': { value: username },
- } = formData;
-
const invitedForm = {
- name,
- password,
- username,
+ name: values.name,
+ username: values.username,
+ password: values.password,
};
try {
@@ -79,7 +86,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
return (
{/* Password Form */}
@@ -132,14 +137,14 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
type="password"
className="form-control"
placeholder={t('Password')}
- name="invitedForm[password]"
required
minLength={6}
+ {...register('password', { required: true, minLength: 6 })}
/>
-
+
{isLoading ? (
- onClickTreeItem?: (page: IPageForItem) => void;
-}
-
-/*
- * ItemsTree
- */
-export const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
- const {
- targetPath, targetPathOrId, isEnableActions, isReadOnlyUser, isWipPageShown, CustomTreeItem, onClickTreeItem,
- } = props;
-
- const { t } = useTranslation();
- const router = useRouter();
-
- const { data: rootPageResult, error } = useSWRxRootPage({ suspense: true });
- const { data: currentPagePath } = useCurrentPagePath();
- const { open: openDuplicateModal } = usePageDuplicateModal();
- const { open: openDeleteModal } = usePageDeleteModal();
-
- const { data: socket } = useGlobalSocket();
- const { data: ptDescCountMap, update: updatePtDescCountMap } = usePageTreeDescCountMap();
-
- // for mutation
- const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
-
- useEffect(() => {
- if (socket == null) {
- return;
- }
-
- socket.on(SocketEventName.UpdateDescCount, (data: UpdateDescCountRawData) => {
- // save to global state
- const newData: UpdateDescCountData = new Map(Object.entries(data));
-
- updatePtDescCountMap(newData);
- });
-
- return () => { socket.off(SocketEventName.UpdateDescCount) };
-
- }, [socket, ptDescCountMap, updatePtDescCountMap]);
-
- const onRenamed = useCallback((fromPath: string | undefined, toPath: string) => {
- mutatePageTree();
- mutateSearching();
- mutatePageList();
-
- if (currentPagePath === fromPath || currentPagePath === toPath) {
- mutateCurrentPage();
- }
- }, [currentPagePath, mutateCurrentPage]);
-
- const onClickDuplicateMenuItem = useCallback((pageToDuplicate: IPageForPageDuplicateModal) => {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const duplicatedHandler: OnDuplicatedFunction = (fromPath, toPath) => {
- toastSuccess(t('duplicated_pages', { fromPath }));
-
- mutatePageTree();
- mutateSearching();
- mutatePageList();
- };
-
- openDuplicateModal(pageToDuplicate, { onDuplicated: duplicatedHandler });
- }, [openDuplicateModal, t]);
-
- const onClickDeleteMenuItem = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
- const onDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, isRecursively, isCompletely) => {
- if (typeof pathOrPathsToDelete !== 'string') {
- return;
- }
-
- if (isCompletely) {
- toastSuccess(t('deleted_pages_completely', { path: pathOrPathsToDelete }));
- }
- else {
- toastSuccess(t('deleted_pages', { path: pathOrPathsToDelete }));
- }
-
- mutatePageTree();
- mutateSearching();
- mutatePageList();
- mutateAllPageInfo();
-
- if (currentPagePath === pathOrPathsToDelete) {
- mutateCurrentPage();
- router.push(isCompletely ? path.dirname(pathOrPathsToDelete) : `/trash${pathOrPathsToDelete}`);
- }
- };
-
- openDeleteModal([pageToDelete], { onDeleted: onDeletedHandler });
- }, [currentPagePath, mutateCurrentPage, openDeleteModal, router, t]);
-
-
- if (error != null) {
- toastError(t('pagetree.error_retrieving_the_pagetree'));
- return <>;
- }
-
- const initialItemNode = rootPageResult ? new ItemNode(rootPageResult.rootPage) : null;
- if (initialItemNode != null) {
- return (
-
- );
- }
-
- return { t('maintenance_mode.growi_is_under_maintenance') }
- {props.currentUser?.admin
+ {currentUser?.admin
&& (
arrow_circle_right
{ t('maintenance_mode.admin_page') }
)}
- {props.currentUser != null
+ {currentUser != null
? (
arrow_circle_right
diff --git a/apps/app/src/client/components/Me/AccessTokenScopeList.tsx b/apps/app/src/client/components/Me/AccessTokenScopeList.tsx
index 6a6dad86666..fc1b552bc19 100644
--- a/apps/app/src/client/components/Me/AccessTokenScopeList.tsx
+++ b/apps/app/src/client/components/Me/AccessTokenScopeList.tsx
@@ -4,7 +4,7 @@ import type { Scope } from '@growi/core/dist/interfaces';
import { useTranslation } from 'next-i18next';
import type { UseFormRegisterReturn } from 'react-hook-form';
-import { useIsDeviceLargerThanMd } from '~/stores/ui';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
import styles from './AccessTokenScopeList.module.scss';
@@ -32,7 +32,7 @@ export const AccessTokenScopeList: React.FC = ({
level = 1,
}) => {
- const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+ const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
// Convert object into an array to determine "first vs. non-first" elements
const entries = Object.entries(scopeObject);
diff --git a/apps/app/src/client/components/Me/AccessTokenScopeSelect.tsx b/apps/app/src/client/components/Me/AccessTokenScopeSelect.tsx
index 421ff485bdd..7dacf837fb6 100644
--- a/apps/app/src/client/components/Me/AccessTokenScopeSelect.tsx
+++ b/apps/app/src/client/components/Me/AccessTokenScopeSelect.tsx
@@ -5,7 +5,7 @@ import { SCOPE } from '@growi/core/dist/interfaces';
import type { UseFormRegisterReturn } from 'react-hook-form';
import { extractScopes, getDisabledScopes, parseScopes } from '~/client/util/scope-util';
-import { useIsAdmin } from '~/stores-universal/context';
+import { useIsAdmin } from '~/states/context';
import { AccessTokenScopeList } from './AccessTokenScopeList';
@@ -23,7 +23,7 @@ type AccessTokenScopeSelectProps = {
*/
export const AccessTokenScopeSelect: React.FC = ({ register, selectedScopes }) => {
const [disabledScopes, setDisabledScopes] = useState>(new Set());
- const { data: isAdmin } = useIsAdmin();
+ const isAdmin = useIsAdmin();
const ScopesMap = useMemo(() => parseScopes({ scopes: SCOPE, isAdmin }), [isAdmin]);
const extractedScopes = useMemo(() => extractScopes(ScopesMap), [ScopesMap]);
diff --git a/apps/app/src/client/components/Me/ApiSettings.tsx b/apps/app/src/client/components/Me/ApiSettings.tsx
index daedea2c497..d77956bf212 100644
--- a/apps/app/src/client/components/Me/ApiSettings.tsx
+++ b/apps/app/src/client/components/Me/ApiSettings.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'next-i18next';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { AccessTokenSettings } from './AccessTokenSettings';
import { ApiTokenSettings } from './ApiTokenSettings';
@@ -11,9 +11,9 @@ import { ApiTokenSettings } from './ApiTokenSettings';
const ApiSettings = React.memo((): JSX.Element => {
const { t } = useTranslation();
- const { data: currentUser, isLoading: isLoadingCurrentUserData } = useCurrentUser();
+ const currentUser = useCurrentUser();
- const shouldHideAccessTokenSettings = isLoadingCurrentUserData || !currentUser?.readOnly;
+ const shouldHideAccessTokenSettings = currentUser == null || !currentUser?.readOnly;
return (
<>
diff --git a/apps/app/src/client/components/Me/ApiTokenSettings.tsx b/apps/app/src/client/components/Me/ApiTokenSettings.tsx
index 4026e48b739..226c5276a8d 100644
--- a/apps/app/src/client/components/Me/ApiTokenSettings.tsx
+++ b/apps/app/src/client/components/Me/ApiTokenSettings.tsx
@@ -6,14 +6,13 @@ import {
apiv3Put,
} from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { usePersonalSettings, useSWRxPersonalSettings } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings } from '~/stores/personal-settings';
export const ApiTokenSettings = React.memo((): JSX.Element => {
const { t } = useTranslation();
- const { mutate: mutateDatabaseData } = useSWRxPersonalSettings();
- const { data: personalSettingsData } = usePersonalSettings();
+ const { data: personalSettingsData, mutate: mutateDatabaseData } = useSWRxPersonalSettings();
const submitHandler = useCallback(async() => {
diff --git a/apps/app/src/client/components/Me/AssociateModal.tsx b/apps/app/src/client/components/Me/AssociateModal.tsx
index fc16942e850..7cb10554370 100644
--- a/apps/app/src/client/components/Me/AssociateModal.tsx
+++ b/apps/app/src/client/components/Me/AssociateModal.tsx
@@ -13,7 +13,7 @@ import {
} from 'reactstrap';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { usePersonalSettings, useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
+import { useAssociateLdapAccount, useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
import { LdapAuthTest } from '../Admin/Security/LdapAuthTest';
@@ -22,13 +22,20 @@ type Props = {
onClose: () => void,
}
-const AssociateModal = (props: Props): JSX.Element => {
+/**
+ * AssociateModalSubstance - Presentation component (heavy logic, rendered only when isOpen)
+ */
+type AssociateModalSubstanceProps = {
+ onClose: () => void;
+};
+
+const AssociateModalSubstance = (props: AssociateModalSubstanceProps): JSX.Element => {
+ const { onClose } = props;
const { t } = useTranslation();
const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
- const { associateLdapAccount } = usePersonalSettings();
- const [activeTab, setActiveTab] = useState(1);
- const { isOpen, onClose } = props;
+ const { trigger: associateLdapAccount } = useAssociateLdapAccount();
+ const [activeTab, setActiveTab] = useState(1);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
@@ -38,7 +45,6 @@ const AssociateModal = (props: Props): JSX.Element => {
setPassword('');
}, [onClose]);
-
const clickAddLdapAccountHandler = useCallback(async() => {
try {
await associateLdapAccount({ username, password });
@@ -50,12 +56,16 @@ const AssociateModal = (props: Props): JSX.Element => {
catch (err) {
toastError(err);
}
-
}, [associateLdapAccount, closeModalHandler, mutatePersonalExternalAccounts, password, t, username]);
+ const setTabToLdap = useCallback(() => setActiveTab(1), []);
+ const setTabToGithub = useCallback(() => setActiveTab(2), []);
+ const setTabToGoogle = useCallback(() => setActiveTab(3), []);
+ const handleUsernameChange = useCallback((username: string) => setUsername(username), []);
+ const handlePasswordChange = useCallback((password: string) => setPassword(password), []);
return (
-
+ <>
{ t('admin:user_management.create_external_account') }
@@ -64,19 +74,19 @@ const AssociateModal = (props: Props): JSX.Element => {
setActiveTab(1)}
+ onClick={setTabToLdap}
>
network_node LDAP
setActiveTab(2)}
+ onClick={setTabToGithub}
>
github (TBD) GitHub
setActiveTab(3)}
+ onClick={setTabToGoogle}
>
google (TBD) Google OAuth
@@ -86,8 +96,8 @@ const AssociateModal = (props: Props): JSX.Element => {
setUsername(username)}
- onChangePassword={password => setPassword(password)}
+ onChangeUsername={handleUsernameChange}
+ onChangePassword={handlePasswordChange}
/>
@@ -111,6 +121,19 @@ const AssociateModal = (props: Props): JSX.Element => {
{t('add')}
+
+ );
+};
+
+/**
+ * AssociateModal - Container component (lightweight, always rendered)
+ */
+const AssociateModal = (props: Props): JSX.Element => {
+ const { isOpen, onClose } = props;
+
+ return (
+
+ {isOpen &&
);
};
diff --git a/apps/app/src/client/components/Me/BasicInfoSettings.tsx b/apps/app/src/client/components/Me/BasicInfoSettings.tsx
index 0fbaac5580c..83ef356607e 100644
--- a/apps/app/src/client/components/Me/BasicInfoSettings.tsx
+++ b/apps/app/src/client/components/Me/BasicInfoSettings.tsx
@@ -1,27 +1,41 @@
-import React, { type JSX } from 'react';
+import React, { useState, useEffect, type JSX } from 'react';
+import type { IUser } from '@growi/core/dist/interfaces';
+import { useAtomValue } from 'jotai';
import { useTranslation, i18n } from 'next-i18next';
import { i18n as i18nConfig } from '^/config/next-i18next.config';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useRegistrationWhitelist } from '~/stores-universal/context';
-import { usePersonalSettings } from '~/stores/personal-settings';
+import { registrationWhitelistAtom } from '~/states/server-configurations';
+import { useSWRxPersonalSettings, useUpdateBasicInfo } from '~/stores/personal-settings';
export const BasicInfoSettings = (): JSX.Element => {
const { t } = useTranslation();
- const { data: registrationWhitelist } = useRegistrationWhitelist();
+ const registrationWhitelist = useAtomValue(registrationWhitelistAtom);
const {
- data: personalSettingsInfo, mutate: mutatePersonalSettings, sync, updateBasicInfo, error,
- } = usePersonalSettings();
+ data: personalSettingsInfo, error,
+ } = useSWRxPersonalSettings();
+ // Form state management
+ const [formData, setFormData] = useState(null);
- const submitHandler = async() => {
+ // Sync form data with server data
+ useEffect(() => {
+ if (personalSettingsInfo != null) {
+ setFormData(personalSettingsInfo);
+ }
+ }, [personalSettingsInfo]);
+
+ const { trigger: updateBasicInfo, isMutating } = useUpdateBasicInfo();
+ const submitHandler = async() => {
try {
- await updateBasicInfo();
- sync();
+ if (formData == null) {
+ throw new Error('personalSettingsInfo is not loaded');
+ }
+ await updateBasicInfo(formData);
toastSuccess(t('toaster.update_successed', { target: t('Basic Info'), ns: 'commons' }));
}
catch (errs) {
@@ -38,11 +52,11 @@ export const BasicInfoSettings = (): JSX.Element => {
}
};
- const changePersonalSettingsHandler = (updateData) => {
- if (personalSettingsInfo == null) {
+ const changePersonalSettingsHandler = (updateData: Partial) => {
+ if (formData == null) {
return;
}
- mutatePersonalSettings({ ...personalSettingsInfo, ...updateData });
+ setFormData({ ...formData, ...updateData });
};
@@ -56,7 +70,7 @@ export const BasicInfoSettings = (): JSX.Element => {
className="form-control"
type="text"
name="userForm[name]"
- defaultValue={personalSettingsInfo?.name || ''}
+ value={formData?.name || ''}
onChange={e => changePersonalSettingsHandler({ name: e.target.value })}
/>
{t('Show')}
@@ -103,7 +117,7 @@ export const BasicInfoSettings = (): JSX.Element => {
id="radioEmailHide"
className="form-check-input"
name="userForm[isEmailPublished]"
- checked={personalSettingsInfo?.isEmailPublished === false}
+ checked={formData?.isEmailPublished === false}
onChange={() => changePersonalSettingsHandler({ isEmailPublished: false })}
/>
{t('Hide')}
@@ -126,8 +140,8 @@ export const BasicInfoSettings = (): JSX.Element => {
id={`radioLang${locale}`}
className="form-check-input"
name="userForm[lang]"
- checked={personalSettingsInfo?.lang === locale}
- onChange={() => changePersonalSettingsHandler({ lang: locale })}
+ checked={formData?.lang === locale}
+ onChange={() => changePersonalSettingsHandler({ lang: locale as IUser['lang'] })}
/>
{fixedT('meta.display_name') as string}
@@ -157,7 +171,7 @@ export const BasicInfoSettings = (): JSX.Element => {
type="button"
className="btn btn-primary"
onClick={submitHandler}
- disabled={error != null}
+ disabled={error != null || isMutating || formData == null}
>
{t('Update')}
diff --git a/apps/app/src/client/components/Me/DisassociateModal.tsx b/apps/app/src/client/components/Me/DisassociateModal.tsx
index f8e6748f7ef..bfc1ef2764f 100644
--- a/apps/app/src/client/components/Me/DisassociateModal.tsx
+++ b/apps/app/src/client/components/Me/DisassociateModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, type JSX } from 'react';
+import React, { useCallback } from 'react';
import type { HasObjectId, IExternalAccount } from '@growi/core';
import { useTranslation } from 'next-i18next';
@@ -11,7 +11,7 @@ import {
import { toastSuccess, toastError } from '~/client/util/toastr';
import type { IExternalAuthProviderType } from '~/interfaces/external-auth-provider';
-import { usePersonalSettings, useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
+import { useDisassociateLdapAccount, useSWRxPersonalExternalAccounts } from '~/stores/personal-settings';
type Props = {
isOpen: boolean,
@@ -19,20 +19,26 @@ type Props = {
accountForDisassociate: IExternalAccount & HasObjectId,
}
+/**
+ * DisassociateModalSubstance - Presentation component (heavy logic, rendered only when isOpen)
+ */
+type DisassociateModalSubstanceProps = {
+ onClose: () => void;
+ accountForDisassociate: IExternalAccount & HasObjectId;
+};
-const DisassociateModal = (props: Props): JSX.Element => {
-
+const DisassociateModalSubstance = (props: DisassociateModalSubstanceProps): React.JSX.Element => {
+ const { onClose, accountForDisassociate } = props;
const { t } = useTranslation();
const { mutate: mutatePersonalExternalAccounts } = useSWRxPersonalExternalAccounts();
- const { disassociateLdapAccount } = usePersonalSettings();
+ const { trigger: disassociateLdapAccount } = useDisassociateLdapAccount();
- const { providerType, accountId } = props.accountForDisassociate;
+ const { providerType, accountId } = accountForDisassociate;
const disassociateAccountHandler = useCallback(async() => {
-
try {
await disassociateLdapAccount({ providerType, accountId });
- props.onClose();
+ onClose();
toastSuccess(t('security_settings.updated_general_security_setting'));
}
catch (err) {
@@ -42,11 +48,11 @@ const DisassociateModal = (props: Props): JSX.Element => {
if (mutatePersonalExternalAccounts != null) {
mutatePersonalExternalAccounts();
}
- }, [accountId, disassociateLdapAccount, mutatePersonalExternalAccounts, props, providerType, t]);
+ }, [accountId, disassociateLdapAccount, mutatePersonalExternalAccounts, onClose, providerType, t]);
return (
-
-
+ <>
+
{t('personal_settings.disassociate_external_account')}
@@ -54,7 +60,7 @@ const DisassociateModal = (props: Props): JSX.Element => {
-
+
{ t('Cancel') }
@@ -62,6 +68,24 @@ const DisassociateModal = (props: Props): JSX.Element => {
{ t('Disassociate') }
+
+ );
+};
+
+/**
+ * DisassociateModal - Container component (lightweight, always rendered)
+ */
+const DisassociateModal = (props: Props): React.JSX.Element => {
+ const { isOpen, onClose, accountForDisassociate } = props;
+
+ return (
+
+ {isOpen && (
+
);
};
diff --git a/apps/app/src/client/components/Me/PasswordSettings.jsx b/apps/app/src/client/components/Me/PasswordSettings.jsx
index c4305bd978a..3c0f09dc149 100644
--- a/apps/app/src/client/components/Me/PasswordSettings.jsx
+++ b/apps/app/src/client/components/Me/PasswordSettings.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import { apiv3Get, apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { usePersonalSettings } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings } from '~/stores/personal-settings';
class PasswordSettings extends React.Component {
@@ -160,7 +160,7 @@ PasswordSettings.propTypes = {
const PasswordSettingsWrapperFC = (props) => {
const { t } = useTranslation();
- const { mutate: mutatePersonalSettings } = usePersonalSettings();
+ const { mutate: mutatePersonalSettings } = useSWRxPersonalSettings();
const submitHandler = useCallback(() => {
mutatePersonalSettings();
diff --git a/apps/app/src/client/components/Me/ProfileImageSettings.tsx b/apps/app/src/client/components/Me/ProfileImageSettings.tsx
index cd759bda18e..831a9500cca 100644
--- a/apps/app/src/client/components/Me/ProfileImageSettings.tsx
+++ b/apps/app/src/client/components/Me/ProfileImageSettings.tsx
@@ -8,7 +8,7 @@ import ImageCropModal from '~/client/components/Common/ImageCropModal';
import { apiPost, apiPostForm } from '~/client/util/apiv1-client';
import { apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { generateGravatarSrc, GRAVATAR_DEFAULT } from '~/utils/gravatar';
const DEFAULT_IMAGE = '/images/icons/user.svg';
@@ -17,7 +17,7 @@ const DEFAULT_IMAGE = '/images/icons/user.svg';
const ProfileImageSettings = (): JSX.Element => {
const { t } = useTranslation();
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const [isGravatarEnabled, setGravatarEnabled] = useState(currentUser?.isGravatarEnabled);
const [uploadedPictureSrc, setUploadedPictureSrc] = useState(() => {
diff --git a/apps/app/src/client/components/Me/UISettings.tsx b/apps/app/src/client/components/Me/UISettings.tsx
index 24c71541819..d1bb60b42ab 100644
--- a/apps/app/src/client/components/Me/UISettings.tsx
+++ b/apps/app/src/client/components/Me/UISettings.tsx
@@ -5,7 +5,7 @@ import { UncontrolledTooltip } from 'reactstrap';
import { updateUserUISettings } from '~/client/services/user-ui-settings';
import { toastError, toastSuccess } from '~/client/util/toastr';
-import { useCollapsedContentsOpened, usePreferCollapsedMode, useSidebarMode } from '~/stores/ui';
+import { useSetPreferCollapsedMode, useSidebarMode, useCollapsedContentsOpened } from '~/states/ui/sidebar';
import styles from './UISettings.module.scss';
@@ -28,13 +28,13 @@ export const UISettings = (): JSX.Element => {
const {
isDockMode, isCollapsedMode,
} = useSidebarMode();
- const { mutate: mutatePreferCollapsedMode } = usePreferCollapsedMode();
- const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+ const setPreferCollapsedMode = useSetPreferCollapsedMode();
+ const [, setCollapsedContentsOpened] = useCollapsedContentsOpened();
const toggleCollapsed = useCallback(() => {
- mutatePreferCollapsedMode(!isCollapsedMode());
- mutateCollapsedContentsOpened(false);
- }, [mutatePreferCollapsedMode, isCollapsedMode, mutateCollapsedContentsOpened]);
+ setPreferCollapsedMode(!isCollapsedMode());
+ setCollapsedContentsOpened(false);
+ }, [setPreferCollapsedMode, isCollapsedMode, setCollapsedContentsOpened]);
const updateButtonHandler = useCallback(async() => {
try {
diff --git a/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.module.scss b/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.module.scss
index a8e5ed40a66..889fda5488b 100644
--- a/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.module.scss
+++ b/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.module.scss
@@ -2,9 +2,9 @@
@use '@growi/core-styles/scss/bootstrap/init' as bs;
.grw-contextual-sub-navigation {
- @include bs.media-breakpoint-down(md) {
- // set min-height to keep the height
- // even if the item is empty on the share link page
+ min-height: 46px;
+
+ @include bs.media-breakpoint-up(lg) {
min-height: 46px;
}
}
diff --git a/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx b/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx
index d810643a356..302a2afb506 100644
--- a/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx
+++ b/apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx
@@ -11,6 +11,7 @@ import type {
import { pagePathUtils } from '@growi/core/dist/utils';
import { GlobalCodeMirrorEditorKey } from '@growi/editor';
import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import dynamic from 'next/dynamic';
import Link from 'next/link';
@@ -19,31 +20,39 @@ import Sticky from 'react-stickynode';
import { DropdownItem, UncontrolledTooltip, Tooltip } from 'reactstrap';
import { exportAsMarkdown, updateContentWidth, syncLatestRevisionBody } from '~/client/services/page-operation';
+import { usePrintMode } from '~/client/services/use-print-mode';
import { toastSuccess, toastError, toastWarning } from '~/client/util/toastr';
import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
-import { usePageBulkExportSelectModal } from '~/features/page-bulk-export/client/stores/modal';
+import { usePageBulkExportSelectModalActions } from '~/features/page-bulk-export/client/states/modal';
import type { OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction } from '~/interfaces/ui';
import { useShouldExpandContent } from '~/services/layout/use-should-expand-content';
+import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
+import { useCurrentPathname, useCurrentUser } from '~/states/global';
+import { useCurrentPageId, useFetchCurrentPage } from '~/states/page';
+import { useShareLinkId } from '~/states/page/hooks';
import {
- useCurrentPathname,
- useCurrentUser, useIsGuestUser, useIsReadOnlyUser, useIsBulkExportPagesEnabled,
- useIsLocalAccountRegistrationEnabled, useIsSharedUser, useShareLinkId, useIsUploadEnabled,
-} from '~/stores-universal/context';
-import { useEditorMode } from '~/stores-universal/ui';
+ disableLinkSharingAtom,
+ isBulkExportPagesEnabledAtom,
+ isLocalAccountRegistrationEnabledAtom,
+ isUploadEnabledAtom,
+} from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
+import { useEditorMode } from '~/states/ui/editor';
+import { PageAccessoriesModalContents, usePageAccessoriesModalActions } from '~/states/ui/modal/page-accessories';
+import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
+import { usePageDuplicateModalActions, type IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
+import { usePresentationModalActions } from '~/states/ui/modal/page-presentation';
+import { usePageRenameModalActions } from '~/states/ui/modal/page-rename';
import {
- usePageAccessoriesModal, PageAccessoriesModalContents, type IPageForPageDuplicateModal,
- usePageDuplicateModal, usePageRenameModal, usePageDeleteModal, usePagePresentationModal,
-} from '~/stores/modal';
+ useIsAbleToShowPageManagement,
+ useIsAbleToChangeEditorMode,
+} from '~/states/ui/page-abilities';
import {
- useSWRMUTxCurrentPage, useCurrentPageId, useSWRxPageInfo,
+ useSWRxPageInfo,
} from '~/stores/page';
import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
-import {
- useIsAbleToShowPageManagement,
- useIsAbleToChangeEditorMode,
- useIsDeviceLargerThanMd,
-} from '~/stores/ui';
+import { CreateTemplateModalLazyLoaded } from '../CreateTemplateModal';
import { NotAvailable } from '../NotAvailable';
import { Skeleton } from '../Skeleton';
@@ -51,8 +60,6 @@ import styles from './GrowiContextualSubNavigation.module.scss';
import PageEditorModeManagerStyles from './PageEditorModeManager.module.scss';
-const CreateTemplateModal = dynamic(() => import('../CreateTemplateModal').then(mod => mod.CreateTemplateModal), { ssr: false });
-
const PageEditorModeManager = dynamic(
() => import('./PageEditorModeManager').then(mod => mod.PageEditorModeManager),
{ ssr: false, loading: () => ) => {
+ const renameItemClickedHandler = useCallback(async (page: IPageToRenameWithMeta) => {
const renamedHandler: OnRenamedFunction = () => {
- mutateCurrentPage();
+ fetchCurrentPage({ force: true });
mutatePageInfo();
mutatePageTree();
mutateRecentlyUpdated();
};
openRenameModal(page, { onRenamed: renamedHandler });
- }, [mutateCurrentPage, mutatePageInfo, openRenameModal]);
+ }, [fetchCurrentPage, mutatePageInfo, openRenameModal]);
const deleteItemClickedHandler = useCallback((pageWithMeta: IPageWithMeta) => {
const deletedHandler: OnDeletedFunction = (pathOrPathsToDelete, isRecursively, isCompletely) => {
@@ -325,20 +331,20 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
router.push(currentPathname);
}
- mutateCurrentPage();
+ fetchCurrentPage({ force: true });
mutatePageInfo();
mutatePageTree();
mutateRecentlyUpdated();
};
openDeleteModal([pageWithMeta], { onDeleted: deletedHandler });
- }, [currentPathname, mutateCurrentPage, openDeleteModal, router, mutatePageInfo]);
+ }, [currentPathname, fetchCurrentPage, openDeleteModal, router, mutatePageInfo]);
- const switchContentWidthHandler = useCallback(async(pageId: string, value: boolean) => {
+ const switchContentWidthHandler = useCallback(async (pageId: string, value: boolean) => {
if (!isSharedPage) {
await updateContentWidth(pageId, value);
- mutateCurrentPage();
+ fetchCurrentPage({ force: true });
}
- }, [isSharedPage, mutateCurrentPage]);
+ }, [isSharedPage, fetchCurrentPage]);
const additionalMenuItemsRenderer = useCallback(() => {
if (revisionId == null || pageId == null) {
@@ -372,7 +378,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
}
);
- }, [isLinkSharingDisabled, isReadOnlyUser, pageId, revisionId]);
+ }, [isLinkSharingDisabled, pageId, revisionId, isReadOnlyUser]);
// hide sub controls when sticky on mobile device
const hideSubControls = useMemo(() => {
@@ -385,6 +391,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
setStickyActive(status.status === Sticky.STATUS_FIXED)}
innerActiveClass="w-100 end-0"
>
@@ -421,12 +428,12 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
editorMode={editorMode}
isBtnDisabled={!!isGuestUser || !!isReadOnlyUser}
path={path}
- // grant={grant}
- // grantUserGroupId={grantUserGroupId}
+ // grant={grant}
+ // grantUserGroupId={grantUserGroupId}
/>
)}
- { isGuestUser && (
+ {isGuestUser && (
@@ -449,14 +456,14 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
login {t('Sign in')}
- ) }
+ )}
{path != null && currentUser != null && !isReadOnlyUser && (
- setIsPageTempleteModalShown(false)}
diff --git a/apps/app/src/client/components/Navbar/GrowiNavbarBottom.tsx b/apps/app/src/client/components/Navbar/GrowiNavbarBottom.tsx
index 66f9046f6c2..181fb635dd2 100644
--- a/apps/app/src/client/components/Navbar/GrowiNavbarBottom.tsx
+++ b/apps/app/src/client/components/Navbar/GrowiNavbarBottom.tsx
@@ -1,22 +1,22 @@
import React, { useCallback, type JSX } from 'react';
import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
-import { useSearchModal } from '~/features/search/client/stores/search';
-import { useIsSearchPage } from '~/stores-universal/context';
-import { usePageCreateModal } from '~/stores/modal';
-import { useCurrentPagePath } from '~/stores/page';
-import { useDrawerOpened } from '~/stores/ui';
+import { useSearchModalActions } from '~/features/search/client/states/modal/search';
+import { useIsSearchPage } from '~/states/context';
+import { useCurrentPagePath } from '~/states/page';
+import { usePageCreateModalActions } from '~/states/ui/modal/page-create';
+import { useDrawerOpened } from '~/states/ui/sidebar';
import styles from './GrowiNavbarBottom.module.scss';
export const GrowiNavbarBottom = (): JSX.Element => {
- const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
- const { open: openCreateModal } = usePageCreateModal();
- const { data: currentPagePath } = useCurrentPagePath();
- const { data: isSearchPage } = useIsSearchPage();
- const { open: openSearchModal } = useSearchModal();
+ const [isDrawerOpened, setIsDrawerOpened] = useDrawerOpened();
+ const { open: openCreateModal } = usePageCreateModalActions();
+ const currentPagePath = useCurrentPagePath();
+ const isSearchPage = useIsSearchPage();
+ const { open: openSearchModal } = useSearchModalActions();
const searchButtonClickHandler = useCallback(() => {
openSearchModal();
@@ -35,7 +35,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
mutateDrawerOpened(true)}
+ onClick={() => setIsDrawerOpened(true)}
>
reorder
diff --git a/apps/app/src/client/components/Navbar/PageEditorModeManager.tsx b/apps/app/src/client/components/Navbar/PageEditorModeManager.tsx
index 671ef3b0965..d527a48c817 100644
--- a/apps/app/src/client/components/Navbar/PageEditorModeManager.tsx
+++ b/apps/app/src/client/components/Navbar/PageEditorModeManager.tsx
@@ -8,10 +8,10 @@ import { useTranslation } from 'next-i18next';
import { useCreatePage } from '~/client/services/create-page';
import { toastError } from '~/client/util/toastr';
-import { EditorMode, useEditorMode } from '~/stores-universal/ui';
-import { useIsNotFound } from '~/stores/page';
-import { useIsDeviceLargerThanMd } from '~/stores/ui';
-import { useCurrentPageYjsData } from '~/stores/yjs';
+import { useCurrentPageYjsData } from '~/features/collaborative-editor/states';
+import { usePageNotFound } from '~/states/page';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
+import { useEditorMode, EditorMode } from '~/states/ui/editor';
import { shouldCreateWipPage } from '../../../utils/should-create-wip-page';
@@ -66,19 +66,20 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
const { t } = useTranslation('commons');
- const { data: isNotFound } = useIsNotFound();
- const { mutate: mutateEditorMode } = useEditorMode();
- const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
- const { data: currentPageYjsData } = useCurrentPageYjsData();
+ const isNotFound = usePageNotFound();
+ const { setEditorMode } = useEditorMode();
+ const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
+ const currentPageYjsData = useCurrentPageYjsData();
const { isCreating, create } = useCreatePage();
- const editButtonClickedHandler = useCallback(async() => {
- if (isNotFound == null || isNotFound === false) {
- mutateEditorMode(EditorMode.Editor);
+ const editButtonClickedHandler = useCallback(async () => {
+ if (!isNotFound) {
+ setEditorMode(EditorMode.Editor);
return;
}
+ // Create a new page if it does not exist and transit to the editor mode
try {
const parentPath = path != null ? getParentPath(path) : undefined; // does not have to exist
await create(
@@ -86,11 +87,13 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
path, parentPath, wip: shouldCreateWipPage(path), origin: Origin.View,
},
);
+
+ setEditorMode(EditorMode.Editor);
}
catch (err) {
toastError(t('toaster.create_failed', { target: path }));
}
- }, [create, isNotFound, mutateEditorMode, path, t]);
+ }, [create, isNotFound, setEditorMode, path, t]);
const _isBtnDisabled = isCreating || isBtnDisabled;
@@ -118,7 +121,7 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
currentEditorMode={editorMode}
editorMode={EditorMode.View}
isBtnDisabled={_isBtnDisabled}
- onClick={() => mutateEditorMode(EditorMode.View)}
+ onClick={() => setEditorMode(EditorMode.View)}
>
play_arrow {t('View')}
@@ -131,7 +134,7 @@ export const PageEditorModeManager = (props: Props): JSX.Element => {
onClick={editButtonClickedHandler}
>
edit_square {t('Edit')}
- { circleColor != null &&
+ {children}
+
+ ),
+}));
+
+const HydrateAtoms = ({ children, initialValues }: { children: ReactNode; initialValues: Array<[typeof isRomUserAllowedToCommentAtom, boolean]> }) => {
+ useHydrateAtoms(initialValues);
+ return <>{children};
+};
+
describe('NotAvailableForReadOnlyUser.tsx', () => {
it('renders NotAvailable component as enable when user is read-only and comments by rom users is allowed', async() => {
- useIsReadOnlyUser.mockReturnValue({ data: true });
- useIsRomUserAllowedToComment.mockReturnValue({ data: true });
+ useIsReadOnlyUser.mockReturnValue(true);
render(
-
- Test Child
- ,
+
+
+
+ Test Child
+
+
+ ,
);
// when
@@ -34,13 +54,16 @@ describe('NotAvailableForReadOnlyUser.tsx', () => {
});
it('renders NotAvailable component as disable when user is read-only and comments by rom users is not allowed', async() => {
- useIsReadOnlyUser.mockReturnValue({ data: true });
- useIsRomUserAllowedToComment.mockReturnValue({ data: false });
+ useIsReadOnlyUser.mockReturnValue(true);
render(
-
- Test Child
- ,
+
+
+
+ Test Child
+
+
+ ,
);
// when
@@ -52,13 +75,16 @@ describe('NotAvailableForReadOnlyUser.tsx', () => {
});
it('renders NotAvailable component as enable when user is not read-only and comments by rom users is allowed', async() => {
- useIsReadOnlyUser.mockReturnValue({ data: false });
- useIsRomUserAllowedToComment.mockReturnValue({ data: true });
+ useIsReadOnlyUser.mockReturnValue(false);
render(
-
- Test Child
- ,
+
+
+
+ Test Child
+
+
+ ,
);
// when
@@ -70,13 +96,16 @@ describe('NotAvailableForReadOnlyUser.tsx', () => {
});
it('renders NotAvailable component as enable when user is not read-only and comments by rom users is not allowed', async() => {
- useIsReadOnlyUser.mockReturnValue({ data: false });
- useIsRomUserAllowedToComment.mockReturnValue({ data: false });
+ useIsReadOnlyUser.mockReturnValue(false);
render(
-
- Test Child
- ,
+
+
+
+ Test Child
+
+
+ ,
);
// when
diff --git a/apps/app/src/client/components/NotAvailableForReadOnlyUser.tsx b/apps/app/src/client/components/NotAvailableForReadOnlyUser.tsx
index 1ee5799ce58..21c2932a770 100644
--- a/apps/app/src/client/components/NotAvailableForReadOnlyUser.tsx
+++ b/apps/app/src/client/components/NotAvailableForReadOnlyUser.tsx
@@ -1,51 +1,38 @@
import React, { type JSX } from 'react';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
-import { useIsReadOnlyUser, useIsRomUserAllowedToComment } from '~/stores-universal/context';
+import { useIsReadOnlyUser } from '~/states/context';
+import { isRomUserAllowedToCommentAtom } from '~/states/server-configurations';
import { NotAvailable } from './NotAvailable';
-export const NotAvailableForReadOnlyUser: React.FC<{
- children: JSX.Element
-}> = React.memo(({ children }) => {
+// eslint-disable-next-line react/prop-types
+export const NotAvailableForReadOnlyUser: React.FC<{ children: JSX.Element }> = ({ children }) => {
const { t } = useTranslation();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
-
+ const isReadOnlyUser = useIsReadOnlyUser();
const isDisabled = !!isReadOnlyUser;
const title = t('Not available for read only user');
-
return (
-
+
{children}
);
-});
+};
NotAvailableForReadOnlyUser.displayName = 'NotAvailableForReadOnlyUser';
-export const NotAvailableIfReadOnlyUserNotAllowedToComment: React.FC<{
- children: JSX.Element
-}> = React.memo(({ children }) => {
+// eslint-disable-next-line react/prop-types
+export const NotAvailableIfReadOnlyUserNotAllowedToComment: React.FC<{ children: JSX.Element }> = ({ children }) => {
const { t } = useTranslation();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
-
- const { data: isRomUserAllowedToComment } = useIsRomUserAllowedToComment();
-
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const isRomUserAllowedToComment = useAtomValue(isRomUserAllowedToCommentAtom);
const isDisabled = !!isReadOnlyUser && !isRomUserAllowedToComment;
const title = t('page_comment.comment_management_is_not_allowed');
-
return (
-
+
{children}
);
-});
+};
NotAvailableIfReadOnlyUserNotAllowedToComment.displayName = 'NotAvailableIfReadOnlyUserNotAllowedToComment';
diff --git a/apps/app/src/client/components/Page/DisplaySwitcher.tsx b/apps/app/src/client/components/Page/DisplaySwitcher.tsx
index 9000806c035..fa3d49edaa0 100644
--- a/apps/app/src/client/components/Page/DisplaySwitcher.tsx
+++ b/apps/app/src/client/components/Page/DisplaySwitcher.tsx
@@ -3,10 +3,8 @@ import type { JSX } from 'react';
import dynamic from 'next/dynamic';
import { useHashChangedEffect } from '~/client/services/side-effects/hash-changed';
-import { useIsEditable } from '~/stores-universal/context';
-import { EditorMode, useEditorMode } from '~/stores-universal/ui';
-import { useReservedNextCaretLine } from '~/stores/editor';
-import { useIsLatestRevision } from '~/stores/page';
+import { useIsEditable, useRevisionIdFromUrl } from '~/states/page';
+import { EditorMode, useEditorMode, useReservedNextCaretLine } from '~/states/ui/editor';
import { LazyRenderer } from '../Common/LazyRenderer';
@@ -17,16 +15,17 @@ const PageEditorReadOnly = dynamic(() => import('../PageEditor/PageEditorReadOnl
export const DisplaySwitcher = (): JSX.Element => {
- const { data: editorMode = EditorMode.View } = useEditorMode();
- const { data: isEditable } = useIsEditable();
- const { data: isLatestRevision } = useIsLatestRevision();
+ const { editorMode } = useEditorMode();
+ const isEditable = useIsEditable();
+ const revisionIdFromUrl = useRevisionIdFromUrl();
useHashChangedEffect();
useReservedNextCaretLine();
return (
- { isLatestRevision
+ {/* Display
setIsWindowExpanded(true)}
- contractWindow={() => setIsWindowExpanded(false)}
+ expandWindow={expandWindow}
+ contractWindow={contractWindow}
/>
- ), [close, isWindowExpanded]);
+ ), [close, isWindowExpanded, expandWindow, contractWindow]);
if (status == null || status.activatedContents == null) {
return <>;
}
- const { isOpened } = status;
-
return (
-
+ <>
{isDeviceLargerThanLg && (
{
additionalClassNames={!isDeviceLargerThanLg ? ['grw-tab-content-style-md-down'] : undefined}
/>
+
+ );
+};
+
+export const PageAccessoriesModal = (): JSX.Element => {
+ const status = usePageAccessoriesModalStatus();
+ const { close } = usePageAccessoriesModalActions();
+ const [isWindowExpanded, setIsWindowExpanded] = useState(false);
+
+ if (status == null) {
+ return <>;
+ }
+
+ return (
+
+ {status.isOpened &&
);
};
diff --git a/apps/app/src/client/components/PageAccessoriesModal/PageAttachment.tsx b/apps/app/src/client/components/PageAccessoriesModal/PageAttachment.tsx
index 82af1b228e7..6387739eb36 100644
--- a/apps/app/src/client/components/PageAccessoriesModal/PageAttachment.tsx
+++ b/apps/app/src/client/components/PageAccessoriesModal/PageAttachment.tsx
@@ -5,10 +5,10 @@ import React, {
import type { IAttachmentHasId } from '@growi/core';
import { LoadingSpinner } from '@growi/ui/dist/components';
-import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
+import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
+import { useCurrentPageData, useCurrentPageId } from '~/states/page';
+import { useDeleteAttachmentModalActions } from '~/states/ui/modal/delete-attachment';
import { useSWRxAttachments } from '~/stores/attachment';
-import { useDeleteAttachmentModal } from '~/stores/modal';
-import { useSWRxCurrentPage, useCurrentPageId } from '~/stores/page';
import { PageAttachmentList } from '../PageAttachment/PageAttachmentList';
import PaginationWrapper from '../PaginationWrapper';
@@ -20,10 +20,11 @@ const checkIfFileInUse = (markdown: string, attachment): boolean => {
const PageAttachment = (): JSX.Element => {
- // Static SWRs
- const { data: pageId } = useCurrentPageId();
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
+ const pageId = useCurrentPageId();
+ const currentPage = useCurrentPageData();
+
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
const isPageAttachmentDisabled = !!isGuestUser || !!isReadOnlyUser;
@@ -32,8 +33,7 @@ const PageAttachment = (): JSX.Element => {
// SWRs
const { data: dataAttachments, remove } = useSWRxAttachments(pageId, pageNumber);
- const { open: openDeleteAttachmentModal } = useDeleteAttachmentModal();
- const { data: currentPage } = useSWRxCurrentPage();
+ const { open: openDeleteAttachmentModal } = useDeleteAttachmentModalActions();
const markdown = currentPage?.revision?.body;
// Custom hooks
diff --git a/apps/app/src/client/components/PageAccessoriesModal/PageHistory.tsx b/apps/app/src/client/components/PageAccessoriesModal/PageHistory.tsx
index 995a12e1013..9d6cf4dde91 100644
--- a/apps/app/src/client/components/PageAccessoriesModal/PageHistory.tsx
+++ b/apps/app/src/client/components/PageAccessoriesModal/PageHistory.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { useCurrentPagePath, useCurrentPageId } from '~/stores/page';
+import { useCurrentPagePath, useCurrentPageId } from '~/states/page';
import loggerFactory from '~/utils/logger';
import { PageRevisionTable } from '../PageHistory/PageRevisionTable';
@@ -16,8 +16,8 @@ type PageHistoryProps = {
export const PageHistory: React.FC = (props: PageHistoryProps) => {
const { onClose } = props;
- const { data: currentPageId } = useCurrentPageId();
- const { data: currentPagePath } = useCurrentPagePath();
+ const currentPageId = useCurrentPageId();
+ const currentPagePath = useCurrentPagePath();
const comparingRevisions = useAutoComparingRevisionsByQueryParam();
diff --git a/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLink.tsx b/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLink.tsx
index 0e89dacd453..12e3d4054e2 100644
--- a/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLink.tsx
+++ b/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLink.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { apiv3Delete } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCurrentPageId } from '~/stores/page';
+import { useCurrentPageId } from '~/states/page';
import { useSWRxSharelink } from '~/stores/share-link';
import { ShareLinkForm } from './ShareLinkForm';
@@ -14,7 +14,7 @@ export const ShareLink = (): JSX.Element => {
const { t } = useTranslation();
const [isOpenShareLinkForm, setIsOpenShareLinkForm] = useState(false);
- const { data: currentPageId } = useCurrentPageId();
+ const currentPageId = useCurrentPageId();
const { data: currentShareLinks, mutate } = useSWRxSharelink(currentPageId);
diff --git a/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx b/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx
index 4116e434d4b..4948c37ec5a 100644
--- a/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx
+++ b/apps/app/src/client/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx
@@ -8,7 +8,7 @@ import { useTranslation } from 'next-i18next';
import { apiv3Post } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useCurrentPageId } from '~/stores/page';
+import { useCurrentPageId } from '~/states/page';
const ExpirationType = {
@@ -33,7 +33,7 @@ export const ShareLinkForm: FC = (props: Props) => {
const [customExpirationDate, setCustomExpirationDate] = useState(new Date());
const [customExpirationTime, setCustomExpirationTime] = useState(new Date());
- const { data: currentPageId } = useCurrentPageId();
+ const currentPageId = useCurrentPageId();
const handleChangeExpirationType = useCallback((expirationType: ExpirationType) => {
setExpirationType(expirationType);
diff --git a/apps/app/src/client/components/PageAccessoriesModal/dynamic.tsx b/apps/app/src/client/components/PageAccessoriesModal/dynamic.tsx
new file mode 100644
index 00000000000..4668191f577
--- /dev/null
+++ b/apps/app/src/client/components/PageAccessoriesModal/dynamic.tsx
@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { usePageAccessoriesModalStatus } from '~/states/ui/modal/page-accessories';
+
+type PageAccessoriesModalProps = Record;
+
+export const PageAccessoriesModalLazyLoaded = (): JSX.Element => {
+ const status = usePageAccessoriesModalStatus();
+
+ const PageAccessoriesModal = useLazyLoader(
+ 'page-accessories-modal',
+ () => import('./PageAccessoriesModal').then(mod => ({ default: mod.PageAccessoriesModal })),
+ status?.isOpened ?? false,
+ );
+
+ // PageAccessoriesModal handles early return and fadeout transition internally
+ return PageAccessoriesModal ? ) | undefined;
+ closeModal: () => void;
+};
+
+const DeleteAttachmentModalSubstance = ({
+ attachment,
+ remove,
+ closeModal,
+}: DeleteAttachmentModalSubstanceProps): React.JSX.Element => {
const [deleting, setDeleting] = useState(false);
const [deleteError, setDeleteError] = useState('');
const { t } = useTranslation();
- const { data: deleteAttachmentModal, close: closeDeleteAttachmentModal } = useDeleteAttachmentModal();
- const isOpen = deleteAttachmentModal?.isOpened;
- const attachment = deleteAttachmentModal?.attachment;
- const remove = deleteAttachmentModal?.remove;
const toggleHandler = useCallback(() => {
- closeDeleteAttachmentModal();
+ closeModal();
setDeleting(false);
setDeleteError('');
- }, [closeDeleteAttachmentModal]);
+ }, [closeModal]);
const onClickDeleteButtonHandler = useCallback(async() => {
if (remove == null || attachment == null) {
@@ -48,7 +58,7 @@ export const DeleteAttachmentModal: React.FC = () => {
try {
await remove({ attachment_id: attachment._id });
setDeleting(false);
- closeDeleteAttachmentModal();
+ closeModal();
toastSuccess(`Delete ${attachment.originalName}`);
}
catch (err) {
@@ -57,7 +67,7 @@ export const DeleteAttachmentModal: React.FC = () => {
toastError(err);
logger.error(err);
}
- }, [attachment, closeDeleteAttachmentModal, remove]);
+ }, [attachment, closeModal, remove]);
const attachmentFileFormat = useMemo(() => {
if (attachment == null) {
@@ -93,13 +103,7 @@ export const DeleteAttachmentModal: React.FC = () => {
}, [deleting, deleteError]);
return (
-
+
{t('delete_attachment_modal.confirm_delete_attachment')}
@@ -110,6 +114,12 @@ export const DeleteAttachmentModal: React.FC = () => {
{deletingIndicator}
+
+ {t('commons:Cancel')}
+
{
>{t('commons:Delete')}
+
+ );
+};
+
+/**
+ * DeleteAttachmentModal - Container component (lightweight, always rendered)
+ */
+export const DeleteAttachmentModal: React.FC = () => {
+ const deleteAttachmentModal = useDeleteAttachmentModalStatus();
+ const { close: closeModal } = useDeleteAttachmentModalActions();
+ const isOpen = deleteAttachmentModal?.isOpened;
+
+ return (
+
+ {isOpen && (
+
);
};
diff --git a/apps/app/src/client/components/PageAttachment/dynamic.tsx b/apps/app/src/client/components/PageAttachment/dynamic.tsx
new file mode 100644
index 00000000000..2212bab8e2e
--- /dev/null
+++ b/apps/app/src/client/components/PageAttachment/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useDeleteAttachmentModalStatus } from '~/states/ui/modal/delete-attachment';
+
+type DeleteAttachmentModalProps = Record;
+
+export const DeleteAttachmentModalLazyLoaded = (): JSX.Element => {
+ const status = useDeleteAttachmentModalStatus();
+
+ const DeleteAttachmentModal = useLazyLoader(
+ 'delete-attachment-modal',
+ () => import('./DeleteAttachmentModal').then(mod => ({ default: mod.DeleteAttachmentModal })),
+ status?.isOpened ?? false,
+ );
+
+ return DeleteAttachmentModal ? = memo((props: PageCommentProps):
{!isReadOnly && (
-
{
currentCommentId, commentBody, onCanceled, onCommented,
} = props;
- const { data: currentUser } = useCurrentUser();
- const { data: currentPagePath } = useCurrentPagePath();
+ const currentUser = useCurrentUser();
+ const currentPagePath = useCurrentPagePath();
const { update: updateComment, post: postComment } = useSWRxPageComment(pageId);
- const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
- const { data: acceptedUploadFileType } = useAcceptedUploadFileType();
+ const [isSlackEnabled, setIsSlackEnabled] = useIsSlackEnabled();
+ const acceptedUploadFileType = useAcceptedUploadFileType();
const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
- const { data: isSlackConfigured } = useIsSlackConfigured();
+ const isSlackConfigured = useAtomValue(isSlackConfiguredAtom);
const { data: editorSettings } = useEditorSettings();
- const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
- const {
- evaluate: evaluateEditorDirtyMap,
- clean: cleanEditorDirtyMap,
- } = useCommentEditorDirtyMap();
- const { mutate: mutateResolvedTheme } = useResolvedThemeForEditor();
+ const { markDirty, markClean } = useCommentEditorsDirtyMap();
+
+ const setResolvedTheme = useSetResolvedTheme();
const { resolvedTheme } = useNextThemes();
- mutateResolvedTheme({ themeData: resolvedTheme });
+ useEffect(() => {
+ setResolvedTheme(resolvedTheme);
+ }, [resolvedTheme, setResolvedTheme]);
const editorKey = useMemo(() => {
if (replyTo != null) {
@@ -120,38 +117,37 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
const slackChannelsDataString = slackChannelsData?.toString();
const initializeSlackEnabled = useCallback(() => {
setSlackChannels(slackChannelsDataString ?? '');
- mutateIsSlackEnabled(false);
- }, [mutateIsSlackEnabled, slackChannelsDataString]);
+ setIsSlackEnabled(false);
+ }, [setIsSlackEnabled, slackChannelsDataString]);
useEffect(() => {
initializeSlackEnabled();
}, [initializeSlackEnabled]);
const isSlackEnabledToggleHandler = (isSlackEnabled: boolean) => {
- mutateIsSlackEnabled(isSlackEnabled, false);
+ setIsSlackEnabled(isSlackEnabled);
};
const slackChannelsChangedHandler = useCallback((slackChannels: string) => {
setSlackChannels(slackChannels);
}, []);
- const initializeEditor = useCallback(async() => {
- const dirtyNum = await cleanEditorDirtyMap(editorKey);
- mutateIsEnabledUnsavedWarning(dirtyNum > 0);
+ const initializeEditor = useCallback(() => {
+ markClean(editorKey);
setShowPreview(false);
setError(undefined);
initializeSlackEnabled();
- }, [editorKey, cleanEditorDirtyMap, mutateIsEnabledUnsavedWarning, initializeSlackEnabled]);
+ }, [editorKey, markClean, initializeSlackEnabled]);
const cancelButtonClickedHandler = useCallback(() => {
initializeEditor();
onCanceled?.();
}, [onCanceled, initializeEditor]);
- const postCommentHandler = useCallback(async() => {
+ const postCommentHandler = useCallback(async () => {
const commentBodyToPost = codeMirrorEditor?.getDocString() ?? '';
try {
@@ -209,11 +205,10 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
}, [codeMirrorEditor, pageId]);
const cmProps = useMemo(() => ({
- onChange: async(value: string) => {
- const dirtyNum = await evaluateEditorDirtyMap(editorKey, value);
- mutateIsEnabledUnsavedWarning(dirtyNum > 0);
+ onChange: (value: string) => {
+ markDirty(editorKey, value);
},
- }), [editorKey, evaluateEditorDirtyMap, mutateIsEnabledUnsavedWarning]);
+ }), [editorKey, markDirty]);
// initialize CodeMirrorEditor
@@ -321,10 +316,12 @@ export const CommentEditorPre = (props: CommentEditorProps): JSX.Element => {
const { onCommented, onCanceled, ...rest } = props;
- const { data: currentUser } = useCurrentUser();
- const { mutate: mutateResolvedTheme } = useResolvedThemeForEditor();
+ const currentUser = useCurrentUser();
+ const setResolvedTheme = useSetResolvedTheme();
const { resolvedTheme } = useNextThemes();
- mutateResolvedTheme({ themeData: resolvedTheme });
+ useEffect(() => {
+ setResolvedTheme(resolvedTheme);
+ }, [resolvedTheme, setResolvedTheme]);
const [isReadyToUse, setIsReadyToUse] = useState(false);
diff --git a/apps/app/src/client/components/PageComment/DeleteCommentModal.tsx b/apps/app/src/client/components/PageComment/DeleteCommentModal.tsx
deleted file mode 100644
index ae90516156a..00000000000
--- a/apps/app/src/client/components/PageComment/DeleteCommentModal.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { type JSX } from 'react';
-
-import { isPopulated } from '@growi/core';
-import { UserPicture } from '@growi/ui/dist/components';
-import { format } from 'date-fns/format';
-import { useTranslation } from 'next-i18next';
-import {
- Button, Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
-
-import { Username } from '../../../components/User/Username';
-import type { ICommentHasId } from '../../../interfaces/comment';
-
-import styles from './DeleteCommentModal.module.scss';
-
-
-export type DeleteCommentModalProps = {
- isShown: boolean,
- comment: ICommentHasId | null,
- errorMessage: string,
- cancelToDelete: () => void,
- confirmToDelete: () => void,
-}
-
-export const DeleteCommentModal = (props: DeleteCommentModalProps): JSX.Element => {
- const {
- isShown, comment, errorMessage, cancelToDelete, confirmToDelete,
- } = props;
-
- const { t } = useTranslation();
-
- const headerContent = () => {
- if (comment == null || isShown === false) {
- return <>;
- }
- return (
-
- delete_forever
- {t('page_comment.delete_comment')}
-
- );
- };
-
- const bodyContent = () => {
- if (comment == null || isShown === false) {
- return <>;
- }
-
- // the threshold for omitting body
- const OMIT_BODY_THRES = 400;
-
- const commentDate = format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
-
- const creator = isPopulated(comment.creator) ? comment.creator : undefined;
-
- let commentBody = comment.comment;
- if (commentBody.length > OMIT_BODY_THRES) { // omit
- commentBody = `${commentBody.substr(0, OMIT_BODY_THRES)}...`;
- }
- const commentBodyElement = {commentBody} ;
-
- return (
- <>
- {errorMessage}
- {t('Cancel')}
-
- delete_forever
- {t('Delete')}
-
-
- );
- };
-
- return (
-
-
- {headerContent()}
-
-
- {bodyContent()}
-
-
- {footerContent()}
-
-
- );
-};
diff --git a/apps/app/src/client/components/PageComment/DeleteCommentModal.module.scss b/apps/app/src/client/components/PageComment/DeleteCommentModal/DeleteCommentModal.module.scss
similarity index 100%
rename from apps/app/src/client/components/PageComment/DeleteCommentModal.module.scss
rename to apps/app/src/client/components/PageComment/DeleteCommentModal/DeleteCommentModal.module.scss
diff --git a/apps/app/src/client/components/PageComment/DeleteCommentModal/DeleteCommentModal.tsx b/apps/app/src/client/components/PageComment/DeleteCommentModal/DeleteCommentModal.tsx
new file mode 100644
index 00000000000..e290f3226d9
--- /dev/null
+++ b/apps/app/src/client/components/PageComment/DeleteCommentModal/DeleteCommentModal.tsx
@@ -0,0 +1,130 @@
+import React, { useMemo } from 'react';
+
+import { isPopulated } from '@growi/core';
+import { UserPicture } from '@growi/ui/dist/components';
+import { format } from 'date-fns/format';
+import { useTranslation } from 'next-i18next';
+import {
+ Button, Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+import { Username } from '~/components/User/Username';
+import type { ICommentHasId } from '~/interfaces/comment';
+
+import styles from './DeleteCommentModal.module.scss';
+
+
+export type DeleteCommentModalProps = {
+ isShown: boolean,
+ comment: ICommentHasId | null,
+ errorMessage: string,
+ cancelToDelete: () => void,
+ confirmToDelete: () => void,
+}
+
+/**
+ * DeleteCommentModalSubstance - Presentation component (heavy logic, rendered only when isOpen)
+ */
+type DeleteCommentModalSubstanceProps = {
+ comment: ICommentHasId,
+ errorMessage: string,
+ cancelToDelete: () => void,
+ confirmToDelete: () => void,
+}
+
+const DeleteCommentModalSubstance = (props: DeleteCommentModalSubstanceProps): React.JSX.Element => {
+ const {
+ comment, errorMessage, cancelToDelete, confirmToDelete,
+ } = props;
+
+ const { t } = useTranslation();
+
+ // Memoize formatted date
+ const commentDate = useMemo(() => {
+ if (comment == null) return '';
+ return format(new Date(comment.createdAt), 'yyyy/MM/dd HH:mm');
+ }, [comment]);
+
+ // Memoize creator
+ const creator = useMemo(() => {
+ if (comment == null) return undefined;
+ return isPopulated(comment.creator) ? comment.creator : undefined;
+ }, [comment]);
+
+ // Memoize processed comment body
+ const commentBodyElement = useMemo(() => {
+ if (comment == null) return null;
+ const OMIT_BODY_THRES = 400;
+ let commentBody = comment.comment;
+ if (commentBody.length > OMIT_BODY_THRES) {
+ commentBody = `${commentBody.substr(0, OMIT_BODY_THRES)}...`;
+ }
+ return {commentBody} ;
+ }, [comment]);
+
+ // Memoize header content
+ const headerContent = useMemo(() => (
+
+ delete_forever
+ {t('page_comment.delete_comment')}
+
+ ), [t]);
+
+ // Memoize body content
+ const bodyContent = useMemo(() => (
+ <>
+ {errorMessage}
+ {t('Cancel')}
+
+ delete_forever
+ {t('Delete')}
+
+
+ ), [errorMessage, cancelToDelete, confirmToDelete, t]);
+
+ return (
+ <>
+
+ {headerContent}
+
+
+ {bodyContent}
+
+
+ {footerContent}
+
+
+ );
+};
+
+/**
+ * DeleteCommentModal - Container component (lightweight, always rendered)
+ */
+export const DeleteCommentModal = (props: DeleteCommentModalProps): React.JSX.Element => {
+ const {
+ isShown, comment, errorMessage, cancelToDelete, confirmToDelete,
+ } = props;
+
+ return (
+
+ {isShown && comment != null && (
+
+ );
+};
diff --git a/apps/app/src/client/components/PageComment/DeleteCommentModal/dynamic.tsx b/apps/app/src/client/components/PageComment/DeleteCommentModal/dynamic.tsx
new file mode 100644
index 00000000000..59eb44f02a7
--- /dev/null
+++ b/apps/app/src/client/components/PageComment/DeleteCommentModal/dynamic.tsx
@@ -0,0 +1,15 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '../../../../components/utils/use-lazy-loader';
+
+import type { DeleteCommentModalProps } from './DeleteCommentModal';
+
+export const DeleteCommentModalLazyLoaded = (props: DeleteCommentModalProps): JSX.Element => {
+ const DeleteCommentModal = useLazyLoader(
+ 'delete-comment-modal',
+ () => import('./DeleteCommentModal').then(mod => ({ default: mod.DeleteCommentModal })),
+ props.isShown,
+ );
+
+ return DeleteCommentModal != null ? = (props: Props) => {
const [isBookmarkFolderMenuOpen, setBookmarkFolderMenuOpen] = useState(false);
const [isBookmarkUsersPopoverOpen, setBookmarkUsersPopoverOpen] = useState(false);
- const { data: isGuestUser } = useIsGuestUser();
+ const isGuestUser = useIsGuestUser();
const { data: bookmarkedUsers, isLoading: isLoadingBookmarkedUsers } = useSWRxBookmarkedUsers(isBookmarkUsersPopoverOpen ? pageId : null);
diff --git a/apps/app/src/client/components/PageControls/PageControls.tsx b/apps/app/src/client/components/PageControls/PageControls.tsx
index b6f27e1d290..c3d8cc06163 100644
--- a/apps/app/src/client/components/PageControls/PageControls.tsx
+++ b/apps/app/src/client/components/PageControls/PageControls.tsx
@@ -10,6 +10,7 @@ import {
} from '@growi/core';
import { pagePathUtils } from '@growi/core/dist/utils';
import { useRect } from '@growi/ui/dist/utils';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import { DropdownItem } from 'reactstrap';
@@ -18,19 +19,19 @@ import {
} from '~/client/services/page-operation';
import { toastError } from '~/client/util/toastr';
import OpenDefaultAiAssistantButton from '~/features/openai/client/components/AiAssistant/OpenDefaultAiAssistantButton';
-import {
- useIsGuestUser, useIsReadOnlyUser, useIsSearchPage, useIsUsersHomepageDeletionEnabled,
-} from '~/stores-universal/context';
+import { useIsGuestUser, useIsReadOnlyUser, useIsSearchPage } from '~/states/context';
+import { useCurrentPagePath } from '~/states/page';
+import { isUsersHomepageDeletionEnabledAtom } from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
import {
EditorMode, useEditorMode,
-} from '~/stores-universal/ui';
-import { useTagEditModal, type IPageForPageDuplicateModal } from '~/stores/modal';
-import {
- useIsDeviceLargerThanMd, usePageControlsX,
-} from '~/stores/ui';
+} from '~/states/ui/editor';
+import { type IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
+import { useTagEditModalActions } from '~/states/ui/modal/tag-edit';
+import { useSetPageControlsX } from '~/states/ui/page';
import loggerFactory from '~/utils/logger';
-import { useSWRxPageInfo, useSWRxTagsInfo, useCurrentPagePath } from '../../../stores/page';
+import { useSWRxPageInfo, useSWRxTagsInfo } from '../../../stores/page';
import { useSWRxUsersList } from '../../../stores/user';
import type { AdditionalMenuItemsRendererProps, ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
import {
@@ -91,10 +92,10 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
className="form-check-input pe-none"
type="checkbox"
checked={expandContentWidth}
- onChange={() => {}}
+ onChange={() => { }}
/>
- { t('wide_view') }
+ {t('wide_view')}
@@ -132,13 +133,13 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
onClickEditTagsButton, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
} = props;
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: editorMode } = useEditorMode();
- const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
- const { data: isSearchPage } = useIsSearchPage();
- const { data: isUsersHomepageDeletionEnabled } = useIsUsersHomepageDeletionEnabled();
- const { data: currentPagePath } = useCurrentPagePath();
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const { editorMode } = useEditorMode();
+ const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
+ const isSearchPage = useIsSearchPage();
+ const isUsersHomepageDeletionEnabled = useAtomValue(isUsersHomepageDeletionEnabledAtom);
+ const currentPagePath = useCurrentPagePath();
const isUsersHomepage = currentPagePath == null ? false : pagePathUtils.isUsersHomepage(currentPagePath);
@@ -147,7 +148,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
const likerIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.likerIds ?? []).slice(0, 15) : [];
const seenUserIds = isIPageInfoForEntity(pageInfo) ? (pageInfo.seenUserIds ?? []).slice(0, 15) : [];
- const { mutate: mutatePageControlsX } = usePageControlsX();
+ const setPageControlsX = useSetPageControlsX();
const pageControlsRef = useRef(null);
const [pageControlsRect] = useRect(pageControlsRef);
@@ -156,8 +157,8 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
if (pageControlsRect?.x == null) {
return;
}
- mutatePageControlsX(pageControlsRect.x);
- }, [pageControlsRect?.x, mutatePageControlsX]);
+ setPageControlsX(pageControlsRect.x);
+ }, [pageControlsRect?.x, setPageControlsX]);
// Put in a mixture of seenUserIds and likerIds data to make the cache work
@@ -165,7 +166,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
const likers = usersList != null ? usersList.filter(({ _id }) => likerIds.includes(_id)).slice(0, 15) : [];
const seenUsers = usersList != null ? usersList.filter(({ _id }) => seenUserIds.includes(_id)).slice(0, 15) : [];
- const subscribeClickhandler = useCallback(async() => {
+ const subscribeClickhandler = useCallback(async () => {
if (isGuestUser ?? true) {
return;
}
@@ -177,7 +178,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
mutatePageInfo();
}, [isGuestUser, mutatePageInfo, pageId, pageInfo]);
- const likeClickhandler = useCallback(async() => {
+ const likeClickhandler = useCallback(async () => {
if (isGuestUser ?? true) {
return;
}
@@ -189,7 +190,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
mutatePageInfo();
}, [isGuestUser, mutatePageInfo, pageId, pageInfo]);
- const duplicateMenuItemClickHandler = useCallback(async(_pageId: string): Promise => {
+ const duplicateMenuItemClickHandler = useCallback(async (): Promise => {
if (onClickDuplicateMenuItem == null || path == null) {
return;
}
@@ -198,7 +199,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
onClickDuplicateMenuItem(page);
}, [onClickDuplicateMenuItem, pageId, path]);
- const renameMenuItemClickHandler = useCallback(async(_pageId: string): Promise => {
+ const renameMenuItemClickHandler = useCallback(async (): Promise => {
if (onClickRenameMenuItem == null || path == null) {
return;
}
@@ -215,7 +216,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
onClickRenameMenuItem(page);
}, [onClickRenameMenuItem, pageId, pageInfo, path, revisionId]);
- const deleteMenuItemClickHandler = useCallback(async(_pageId: string): Promise => {
+ const deleteMenuItemClickHandler = useCallback(async (): Promise => {
if (onClickDeleteMenuItem == null || path == null) {
return;
}
@@ -270,7 +271,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
}
return true;
- }, [isGuestUser, isUsersHomepage, isUsersHomepageDeletionEnabled]);
+ }, [currentPagePath, isGuestUser, isUsersHomepage, isUsersHomepageDeletionEnabled]);
const additionalMenuItemOnTopRenderer = useMemo(() => {
if (!isIPageInfoForEntity(pageInfo)) {
@@ -305,7 +306,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
return (
- { isViewMode && isDeviceLargerThanMd && !isSearchPage && !isSearchPage && (
+ {isViewMode && isDeviceLargerThanMd && !isSearchPage && !isSearchPage && (
<>
@@ -318,7 +319,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
/>
)}
- { !hideSubControls && (
+ {!hideSubControls && (
{revisionId != null && _isIPageInfoForOperation && (
- ) }
+ )}
- { showPageControlDropdown && _isIPageInfoForOperation && (
+ {showPageControlDropdown && _isIPageInfoForOperation && (
{
const { data: pageInfo, error } = useSWRxPageInfo(pageId ?? null, shareLinkId);
const { data: tagsInfoData } = useSWRxTagsInfo(pageId);
- const { open: openTagEditModal } = useTagEditModal();
+ const { open: openTagEditModal } = useTagEditModalActions();
const onClickEditTagsButton = useCallback(() => {
if (tagsInfoData == null || revisionId == null) {
diff --git a/apps/app/src/client/components/PageControls/SearchButton.tsx b/apps/app/src/client/components/PageControls/SearchButton.tsx
index f42630340b4..a6ac9246431 100644
--- a/apps/app/src/client/components/PageControls/SearchButton.tsx
+++ b/apps/app/src/client/components/PageControls/SearchButton.tsx
@@ -1,13 +1,13 @@
import React, { useCallback, type JSX } from 'react';
-import { useSearchModal } from '../../../features/search/client/stores/search';
+import { useSearchModalActions } from '~/features/search/client/states/modal/search';
import styles from './SearchButton.module.scss';
const SearchButton = (): JSX.Element => {
- const { open: openSearchModal } = useSearchModal();
+ const { open: openSearchModal } = useSearchModalActions();
const searchButtonClickHandler = useCallback(() => {
openSearchModal();
diff --git a/apps/app/src/client/components/PageCreateModal.tsx b/apps/app/src/client/components/PageCreateModal.tsx
index 5806f5b0fbd..9d7c815f415 100644
--- a/apps/app/src/client/components/PageCreateModal.tsx
+++ b/apps/app/src/client/components/PageCreateModal.tsx
@@ -9,6 +9,7 @@ import { Origin } from '@growi/core';
import { pagePathUtils, pathUtils } from '@growi/core/dist/utils';
import { normalizePath } from '@growi/core/dist/utils/path-utils';
import { format } from 'date-fns/format';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import {
Modal, ModalHeader, ModalBody, UncontrolledButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem,
@@ -18,9 +19,9 @@ import { debounce } from 'throttle-debounce';
import { useCreateTemplatePage } from '~/client/services/create-page';
import { useCreatePage } from '~/client/services/create-page/use-create-page';
import { useToastrOnError } from '~/client/services/use-toastr-on-error';
-import { useCurrentUser, useIsSearchServiceReachable } from '~/stores-universal/context';
-import { usePageCreateModal } from '~/stores/modal';
-
+import { useCurrentUser } from '~/states/global';
+import { isSearchServiceReachableAtom } from '~/states/server-configurations';
+import { usePageCreateModalStatus, usePageCreateModalActions } from '~/states/ui/modal/page-create';
import PagePathAutoComplete from './PagePathAutoComplete';
@@ -33,22 +34,25 @@ const {
const PageCreateModal: React.FC = () => {
const { t } = useTranslation();
- const { data: currentUser } = useCurrentUser();
-
- const { data: pageCreateModalData, close: closeCreateModal } = usePageCreateModal();
+ const currentUser = useCurrentUser();
- const isOpened = pageCreateModalData?.isOpened ?? false;
+ const { isOpened, path: pathname = '' } = usePageCreateModalStatus();
+ const { close: closeCreateModal } = usePageCreateModalActions();
const { create } = useCreatePage();
const { createTemplate } = useCreateTemplatePage();
- const { data: isReachable } = useIsSearchServiceReachable();
- const pathname = pageCreateModalData?.path ?? '';
- const userHomepagePath = pagePathUtils.userHomepagePath(currentUser);
- const isCreatable = isCreatablePage(pathname) || isUsersHomepage(pathname);
- const pageNameInputInitialValue = isCreatable ? pathUtils.addTrailingSlash(pathname) : '/';
- const now = format(new Date(), 'yyyy/MM/dd');
- const todaysParentPath = [userHomepagePath, t('create_page_dropdown.todays.memo', { ns: 'commons' }), now].join('/');
+ const isReachable = useAtomValue(isSearchServiceReachableAtom);
+
+ // Memoize computed values
+ const userHomepagePath = useMemo(() => pagePathUtils.userHomepagePath(currentUser), [currentUser]);
+ const isCreatable = useMemo(() => isCreatablePage(pathname) || isUsersHomepage(pathname), [pathname]);
+ const pageNameInputInitialValue = useMemo(() => (isCreatable ? pathUtils.addTrailingSlash(pathname) : '/'), [isCreatable, pathname]);
+ const now = useMemo(() => format(new Date(), 'yyyy/MM/dd'), []);
+ const todaysParentPath = useMemo(
+ () => [userHomepagePath, t('create_page_dropdown.todays.memo', { ns: 'commons' }), now].join('/'),
+ [userHomepagePath, t, now],
+ );
const [todayInput, setTodayInput] = useState('');
const [pageNameInput, setPageNameInput] = useState(pageNameInputInitialValue);
@@ -56,41 +60,38 @@ const PageCreateModal: React.FC = () => {
const [isMatchedWithUserHomepagePath, setIsMatchedWithUserHomepagePath] = useState(false);
const checkIsUsersHomepageDebounce = useMemo(() => {
- const checkIsUsersHomepage = () => {
- setIsMatchedWithUserHomepagePath(isUsersHomepage(pageNameInput));
- };
-
- return debounce(1000, checkIsUsersHomepage);
- }, [pageNameInput]);
+ return debounce(1000, (input: string) => {
+ setIsMatchedWithUserHomepagePath(isUsersHomepage(input));
+ });
+ }, []);
useEffect(() => {
if (isOpened) {
- checkIsUsersHomepageDebounce();
+ checkIsUsersHomepageDebounce(pageNameInput);
}
}, [isOpened, checkIsUsersHomepageDebounce, pageNameInput]);
-
- function transitBySubmitEvent(e, transitHandler) {
+ const transitBySubmitEvent = useCallback((e, transitHandler) => {
// prevent page transition by submit
e.preventDefault();
transitHandler();
- }
+ }, []);
/**
* change todayInput
* @param {string} value
*/
- function onChangeTodayInputHandler(value) {
+ const onChangeTodayInputHandler = useCallback((value) => {
setTodayInput(value);
- }
+ }, []);
/**
* change template
* @param {string} value
*/
- function onChangeTemplateHandler(value) {
+ const onChangeTemplateHandler = useCallback((value) => {
setTemplate(value);
- }
+ }, []);
/**
* access today page
@@ -138,7 +139,7 @@ const PageCreateModal: React.FC = () => {
const createInputPageWithToastr = useToastrOnError(createInputPage);
const createTemplateWithToastr = useToastrOnError(createTemplatePage);
- function renderCreateTodayForm() {
+ const renderCreateTodayForm = useMemo(() => {
if (!isOpened) {
return <>;
}
@@ -181,9 +182,9 @@ const PageCreateModal: React.FC = () => {
);
- }
+ }, [isOpened, isReachable, pageNameInputInitialValue, createInputPageWithToastr, pageNameInput, isMatchedWithUserHomepagePath, t, transitBySubmitEvent]);
- function renderTemplatePageForm() {
+ const renderTemplatePageForm = useMemo(() => {
if (!isOpened) {
return <>;
}
@@ -290,7 +291,7 @@ const PageCreateModal: React.FC = () => {
);
- }
+ }, [isOpened, pathname, template, onChangeTemplateHandler, createTemplateWithToastr, t]);
return (
{
{t('New Page')}
- {renderCreateTodayForm()}
- {renderInputPageForm()}
- {renderTemplatePageForm()}
+ {renderCreateTodayForm}
+ {renderInputPageForm}
+ {renderTemplatePageForm}
diff --git a/apps/app/src/client/components/PageDeleteModal.tsx b/apps/app/src/client/components/PageDeleteModal/PageDeleteModal.tsx
similarity index 63%
rename from apps/app/src/client/components/PageDeleteModal.tsx
rename to apps/app/src/client/components/PageDeleteModal/PageDeleteModal.tsx
index d8c9a168931..e79adb9ed7e 100644
--- a/apps/app/src/client/components/PageDeleteModal.tsx
+++ b/apps/app/src/client/components/PageDeleteModal/PageDeleteModal.tsx
@@ -1,12 +1,10 @@
import type { FC } from 'react';
import React, {
- useState, useMemo, useEffect,
+ useState, useMemo, useEffect, useCallback,
} from 'react';
-import type {
- HasObjectId,
- IPageInfoForEntity, IPageToDeleteWithMeta, IDataWithMeta,
-} from '@growi/core';
+import type { IPageInfoForEntity, IPageToDeleteWithMeta } from '@growi/core';
+import { isIPageInfoForEntity } from '@growi/core';
import { pagePathUtils } from '@growi/core/dist/utils';
import { useTranslation } from 'next-i18next';
import {
@@ -16,12 +14,12 @@ import {
import { apiPost } from '~/client/util/apiv1-client';
import { apiv3Post } from '~/client/util/apiv3-client';
import type { IDeleteSinglePageApiv1Result, IDeleteManyPageApiv3Result } from '~/interfaces/page';
-import { usePageDeleteModal } from '~/stores/modal';
+import { usePageDeleteModalStatus, usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
import { useSWRxPageInfoForList } from '~/stores/page-listing';
import loggerFactory from '~/utils/logger';
-import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
+import ApiErrorMessageList from '../PageManagement/ApiErrorMessageList';
const { isTrashPage } = pagePathUtils;
@@ -47,24 +45,34 @@ const isIPageInfoForEntityForDeleteModal = (pageInfo: any | undefined): pageInfo
return pageInfo != null && 'isDeletable' in pageInfo && 'isAbleToDeleteCompletely' in pageInfo;
};
-const PageDeleteModal: FC = () => {
+export const PageDeleteModal: FC = () => {
const { t } = useTranslation();
+ const { isOpened, pages, opts } = usePageDeleteModalStatus() ?? {};
+ const { close: closeDeleteModal } = usePageDeleteModalActions();
- const { data: deleteModalData, close: closeDeleteModal } = usePageDeleteModal();
+ // Optimize deps: use page IDs and length instead of pages array reference
+ const pageIds = useMemo(() => pages?.map(p => p.data._id) ?? [], [pages]);
+ const pagesLength = pages?.length ?? 0;
- const isOpened = deleteModalData?.isOpened ?? false;
+ const notOperatablePages: IPageToDeleteWithMeta[] = useMemo(() => (pages ?? []).filter(p => !isIPageInfoForEntityForDeleteModal(p.meta)),
+ // Optimization: Use pageIds and pagesLength instead of pages array reference to avoid unnecessary re-computation
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [pageIds, pagesLength]);
- const notOperatablePages: IPageToDeleteWithMeta[] = (deleteModalData?.pages ?? [])
- .filter(p => !isIPageInfoForEntityForDeleteModal(p.meta));
- const notOperatablePageIds = notOperatablePages.map(p => p.data._id);
+ const notOperatablePageIds = useMemo(() => notOperatablePages.map(p => p.data._id), [notOperatablePages]);
const { injectTo } = useSWRxPageInfoForList(notOperatablePageIds);
// inject IPageInfo to operate
- let injectedPages: IDataWithMeta
[] | null = null;
- if (deleteModalData?.pages != null) {
- injectedPages = injectTo(deleteModalData?.pages);
- }
+ const injectedPages = useMemo(() => {
+ if (pages != null) {
+ return injectTo(pages);
+ }
+ return null;
+ },
+ // Optimization: Use pageIds and pagesLength instead of pages array reference to avoid unnecessary re-computation
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [pageIds, pagesLength, injectTo]);
// calculate conditions to delete
const [isDeletable, isAbleToDeleteCompletely] = useMemo(() => {
@@ -76,13 +84,19 @@ const PageDeleteModal: FC = () => {
return [true, true];
}, [injectedPages]);
+ // Optimize deps: use page paths for trash detection
+ const pagePaths = useMemo(() => pages?.map(p => p.data?.path ?? '') ?? [],
+ // Optimization: Use pageIds and pagesLength instead of pages array reference to avoid unnecessary re-computation
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [pageIds, pagesLength]);
+
// calculate condition to determine modal status
const forceDeleteCompletelyMode = useMemo(() => {
- if (deleteModalData != null && deleteModalData.pages != null && deleteModalData.pages.length > 0) {
- return deleteModalData.pages.every(pageWithMeta => isTrashPage(pageWithMeta.data?.path ?? ''));
+ if (pagesLength > 0) {
+ return pagePaths.every(path => isTrashPage(path));
}
return false;
- }, [deleteModalData]);
+ }, [pagePaths, pagesLength]);
const [isDeleteRecursively, setIsDeleteRecursively] = useState(true);
const [isDeleteCompletely, setIsDeleteCompletely] = useState(forceDeleteCompletelyMode);
@@ -103,19 +117,19 @@ const PageDeleteModal: FC = () => {
setIsDeleteCompletely(forceDeleteCompletelyMode);
}, [forceDeleteCompletelyMode]);
- function changeIsDeleteRecursivelyHandler() {
+ const changeIsDeleteRecursivelyHandler = useCallback(() => {
setIsDeleteRecursively(!isDeleteRecursively);
- }
+ }, [isDeleteRecursively]);
- function changeIsDeleteCompletelyHandler() {
+ const changeIsDeleteCompletelyHandler = useCallback(() => {
if (forceDeleteCompletelyMode) {
return;
}
setIsDeleteCompletely(!isDeleteCompletely);
- }
+ }, [forceDeleteCompletelyMode, isDeleteCompletely]);
- async function deletePage() {
- if (deleteModalData == null || deleteModalData.pages == null) {
+ const deletePage = useCallback(async() => {
+ if (pages == null) {
return;
}
@@ -127,13 +141,13 @@ const PageDeleteModal: FC = () => {
/*
* When multiple pages
*/
- if (deleteModalData.pages.length > 1) {
+ if (pages.length > 1) {
try {
const isRecursively = isDeleteRecursively === true ? true : undefined;
const isCompletely = isDeleteCompletely === true ? true : undefined;
const pageIdToRevisionIdMap = {};
- deleteModalData.pages.forEach((p) => { pageIdToRevisionIdMap[p.data._id] = p.data.revision as string });
+ pages.forEach((p) => { pageIdToRevisionIdMap[p.data._id] = p.data.revision as string });
const { data } = await apiv3Post('/pages/delete', {
pageIdToRevisionIdMap,
@@ -141,7 +155,7 @@ const PageDeleteModal: FC = () => {
isCompletely,
});
- const onDeleted = deleteModalData.opts?.onDeleted;
+ const onDeleted = opts?.onDeleted;
if (onDeleted != null) {
onDeleted(data.paths, data.isRecursively, data.isCompletely);
}
@@ -159,7 +173,7 @@ const PageDeleteModal: FC = () => {
const recursively = isDeleteRecursively === true ? true : undefined;
const completely = forceDeleteCompletelyMode || isDeleteCompletely ? true : undefined;
- const page = deleteModalData.pages[0].data;
+ const page = pages[0].data;
const { path, isRecursively, isCompletely } = await apiPost('/pages.remove', {
page_id: page._id,
@@ -168,7 +182,7 @@ const PageDeleteModal: FC = () => {
completely,
}) as IDeleteSinglePageApiv1Result;
- const onDeleted = deleteModalData.opts?.onDeleted;
+ const onDeleted = opts?.onDeleted;
if (onDeleted != null) {
onDeleted(path, isRecursively, isCompletely);
}
@@ -179,13 +193,16 @@ const PageDeleteModal: FC = () => {
setErrs([err]);
}
}
- }
+ },
+ // Optimization: Use pageIds and pagesLength instead of pages array reference to avoid unnecessary re-computation
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [pageIds, pagesLength, isDeletable, isDeleteRecursively, isDeleteCompletely, forceDeleteCompletelyMode, opts?.onDeleted, closeDeleteModal]);
- async function deleteButtonHandler() {
+ const deleteButtonHandler = useCallback(async() => {
await deletePage();
- }
+ }, [deletePage]);
- function renderDeleteRecursivelyForm() {
+ const renderDeleteRecursivelyForm = useCallback(() => {
return (
);
- }
+ }, [isDeleteRecursively, changeIsDeleteRecursivelyHandler, t]);
- function renderDeleteCompletelyForm() {
+ const renderDeleteCompletelyForm = useCallback(() => {
return (
);
- }
-
- const renderPagePathsToDelete = () => {
- const pages = injectedPages != null && injectedPages.length > 0 ? injectedPages : deleteModalData?.pages;
+ }, [isAbleToDeleteCompletely, isDeleteCompletely, changeIsDeleteCompletelyHandler, t]);
- if (pages != null) {
- return pages.map(page => (
-
- { page.data.path }
- { page.meta?.isDeletable != null && !page.meta.isDeletable && (CAN NOT TO DELETE)
- ));
- }
- return <>;
- };
-
- const headerContent = () => {
+ const headerContent = useMemo(() => {
if (!isOpened) {
return <>;
}
@@ -255,27 +258,40 @@ const PageDeleteModal: FC = () => {
{ t(`modal_delete.delete_${deleteIconAndKey[deleteMode].translationKey}`) }
);
- };
+ }, [isOpened, deleteMode, t]);
- const bodyContent = () => {
+ const bodyContent = useMemo(() => {
if (!isOpened) {
return <>;
}
+ // Render page paths to delete inline for better performance
+ const renderingPages = injectedPages != null && injectedPages.length > 0 ? injectedPages : pages;
+ const pagePathsElements = renderingPages != null ? renderingPages.map(page => (
+
+ { page.data.path }
+ { isIPageInfoForEntity(page.meta)
+ && !page.meta.isDeletable
+ && (CAN NOT TO DELETE)
+ )) : <>;
+
return (
<>
{ t('modal_delete.deleting_page') }:
{ isDeletable && renderDeleteRecursivelyForm()}
{ isDeletable && !forceDeleteCompletelyMode && renderDeleteCompletelyForm() }
);
- };
+ // Optimization: Use direct dependencies instead of JSX.Element reference for better performance
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isOpened, t, pageIds, pagesLength, injectedPages, isDeletable, renderDeleteRecursivelyForm, forceDeleteCompletelyMode, renderDeleteCompletelyForm]);
- const footerContent = () => {
+ const footerContent = useMemo(() => {
if (!isOpened) {
return <>;
}
@@ -295,22 +311,20 @@ const PageDeleteModal: FC = () => {
);
- };
+ }, [isOpened, errs, deleteMode, isDeletable, deleteButtonHandler, t]);
return (
- {headerContent()}
+ {headerContent}
- {bodyContent()}
+ {bodyContent}
- {footerContent()}
+ {footerContent}
);
};
-
-export default PageDeleteModal;
diff --git a/apps/app/src/client/components/PageDeleteModal/dynamic.tsx b/apps/app/src/client/components/PageDeleteModal/dynamic.tsx
new file mode 100644
index 00000000000..5d963bdecdb
--- /dev/null
+++ b/apps/app/src/client/components/PageDeleteModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { usePageDeleteModalStatus } from '~/states/ui/modal/page-delete';
+
+type PageDeleteModalProps = Record;
+
+export const PageDeleteModalLazyLoaded = (): JSX.Element => {
+ const status = usePageDeleteModalStatus();
+
+ const PageDeleteModal = useLazyLoader(
+ 'page-delete-modal',
+ () => import('./PageDeleteModal').then(mod => ({ default: mod.PageDeleteModal })),
+ status?.isOpened ?? false,
+ );
+
+ return PageDeleteModal ?
+ <>
{ t('modal_duplicate.label.Duplicate page') }
@@ -288,9 +292,20 @@ const PageDuplicateModal = (): JSX.Element => {
{renderFooterContent()}
-
+
);
};
+/**
+ * PageDuplicateModal - Container component (lightweight, always rendered)
+ */
+export const PageDuplicateModal = (): React.JSX.Element => {
+ const { isOpened } = usePageDuplicateModalStatus();
+ const { close: closeDuplicateModal } = usePageDuplicateModalActions();
-export default PageDuplicateModal;
+ return (
+
+ {isOpened &&
+ );
+};
diff --git a/apps/app/src/client/components/PageDuplicateModal/dynamic.tsx b/apps/app/src/client/components/PageDuplicateModal/dynamic.tsx
new file mode 100644
index 00000000000..3bb51581b02
--- /dev/null
+++ b/apps/app/src/client/components/PageDuplicateModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { usePageDuplicateModalStatus } from '~/states/ui/modal/page-duplicate';
+
+type PageDuplicateModalProps = Record;
+
+export const PageDuplicateModalLazyLoaded = (): JSX.Element => {
+ const status = usePageDuplicateModalStatus();
+
+ const PageDuplicateModal = useLazyLoader(
+ 'page-duplicate-modal',
+ () => import('./PageDuplicateModal').then(mod => ({ default: mod.PageDuplicateModal })),
+ status?.isOpened ?? false,
+ );
+
+ return PageDuplicateModal ? >
};
const formatedDate = (date: Date): string => {
return format(date, 'yyyy/MM/dd HH:mm:ss');
};
-const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element => {
- const { request, latest } = props;
+const ConflictDiffModalSubstance = (props: ConflictDiffModalSubstanceProps): React.JSX.Element => {
+ const {
+ request, latest, isModalExpanded, setIsModalExpanded,
+ } = props;
const [resolvedRevision, setResolvedRevision] = useState('');
const [isRevisionselected, setIsRevisionSelected] = useState(false);
const [revisionSelectedToggler, setRevisionSelectedToggler] = useState(false);
- const [isModalExpanded, setIsModalExpanded] = useState(false);
const { t } = useTranslation();
- const { data: conflictDiffModalStatus, close: closeConflictDiffModal } = useConflictDiffModal();
+ const conflictDiffModalStatus = useConflictDiffModalStatus();
+ const { close: closeConflictDiffModal } = useConflictDiffModalActions();
const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.DIFF);
+ // Memoize formatted dates
+ const requestFormattedDate = useMemo(() => formatedDate(request.createdAt), [request.createdAt]);
+ const latestFormattedDate = useMemo(() => formatedDate(latest.createdAt), [latest.createdAt]);
+
const selectRevisionHandler = useCallback((selectedRevision: string) => {
setResolvedRevision(selectedRevision);
setRevisionSelectedToggler(prev => !prev);
@@ -82,11 +96,10 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
close
- ), [closeConflictDiffModal, isModalExpanded]);
+ ), [closeConflictDiffModal, isModalExpanded, setIsModalExpanded]);
return (
-
-
+ <>
error {t('modal_resolve_conflict.resolve_conflict')}
@@ -105,7 +118,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
updated by {request.user.username}
-
{ formatedDate(request.createdAt) }
+
{ requestFormattedDate }
updated by {latest.user.username}
-
{ formatedDate(latest.createdAt) }
+
{ latestFormattedDate }
@@ -180,41 +193,61 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
{t('modal_resolve_conflict.resolve_and_save')}
-
+
);
};
-
-export const ConflictDiffModal = (): JSX.Element => {
- const { data: currentUser } = useCurrentUser();
- const { data: currentPage } = useSWRxCurrentPage();
- const { data: conflictDiffModalStatus } = useConflictDiffModal();
+/**
+ * ConflictDiffModal - Container component (lightweight, always rendered)
+ */
+export const ConflictDiffModal = (): React.JSX.Element => {
+ const currentUser = useCurrentUser();
+ const currentPage = useCurrentPageData();
+ const conflictDiffModalStatus = useConflictDiffModalStatus();
// state for latest page
- const { data: remoteRevisionId } = useRemoteRevisionId();
- const { data: remoteRevisionBody } = useRemoteRevisionBody();
- const { data: remoteRevisionLastUpdateUser } = useRemoteRevisionLastUpdateUser();
- const { data: remoteRevisionLastUpdatedAt } = useRemoteRevisionLastUpdatedAt();
+ const remoteRevisionBody = useRemoteRevisionBody();
+ const remoteRevisionLastUpdateUser = useRemoteRevisionLastUpdateUser();
+ const remoteRevisionLastUpdatedAt = useRemoteRevisionLastUpdatedAt();
- const isRemotePageDataInappropriate = remoteRevisionId == null || remoteRevisionBody == null || remoteRevisionLastUpdateUser == null;
+ const isRemotePageDataInappropriate = remoteRevisionBody == null || remoteRevisionLastUpdateUser == null;
- if (!conflictDiffModalStatus?.isOpened || currentUser == null || currentPage == null || isRemotePageDataInappropriate) {
- return <>;
- }
+ const [isModalExpanded, setIsModalExpanded] = useState(false);
- const currentTime: Date = new Date();
+ // Check if all required data is available
+ const isDataReady = conflictDiffModalStatus?.isOpened
+ && currentUser != null
+ && currentPage != null
+ && !isRemotePageDataInappropriate;
- const request: IRevisionOnConflict = {
+ // Prepare data for Substance
+ const currentTime: Date = new Date();
+ const request: IRevisionOnConflict | null = isDataReady ? {
revisionBody: conflictDiffModalStatus.requestRevisionBody ?? '',
createdAt: currentTime,
user: currentUser,
- };
+ } : null;
- const latest: IRevisionOnConflict = {
+ const latest: IRevisionOnConflict | null = isDataReady ? {
revisionBody: remoteRevisionBody,
createdAt: new Date(remoteRevisionLastUpdatedAt ?? currentTime.toString()),
user: remoteRevisionLastUpdateUser,
- };
+ } : null;
- return
+ {isDataReady && request != null && latest != null && (
+
+ );
};
diff --git a/apps/app/src/client/components/PageEditor/ConflictDiffModal/dynamic.tsx b/apps/app/src/client/components/PageEditor/ConflictDiffModal/dynamic.tsx
new file mode 100644
index 00000000000..e46ec753e26
--- /dev/null
+++ b/apps/app/src/client/components/PageEditor/ConflictDiffModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useConflictDiffModalStatus } from '~/states/ui/modal/conflict-diff';
+
+type ConflictDiffModalProps = Record;
+
+export const ConflictDiffModalLazyLoaded = (): JSX.Element => {
+ const status = useConflictDiffModalStatus();
+
+ const ConflictDiffModal = useLazyLoader(
+ 'conflict-diff-modal',
+ () => import('./ConflictDiffModal').then(mod => ({ default: mod.ConflictDiffModal })),
+ status?.isOpened ?? false,
+ );
+
+ return ConflictDiffModal ? (isOpened ? closeDrawioModal() : closeDrawioModalInEditor())}
+ toggle={toggleHandler}
backdrop="static"
className="drawio-modal grw-body-only-modal-expanded"
size="xl"
@@ -166,3 +182,7 @@ export const DrawioModal = (): JSX.Element => {
);
};
+
+export const DrawioModal = (): JSX.Element => {
+ return ;
+
+export const DrawioModalLazyLoaded = (): JSX.Element => {
+ const status = useDrawioModalStatus();
+ const statusForEditor = useDrawioModalForEditorStatus();
+
+ const isOpened = status?.isOpened ?? false;
+ const isOpenedInEditor = statusForEditor?.isOpened ?? false;
+
+ const DrawioModal = useLazyLoader(
+ 'drawio-modal',
+ () => import('./DrawioModal').then(mod => ({ default: mod.DrawioModal })),
+ isOpened || isOpenedInEditor,
+ );
+
+ return DrawioModal ?
@@ -25,7 +26,7 @@ export const EditorNavbarBottom = (): JSX.Element => {
mutateDrawerOpened(true)}
+ onClick={() => setIsDrawerOpened(true)}
>
reorder
diff --git a/apps/app/src/client/components/PageEditor/EditorNavbarBottom/GrantSelector.tsx b/apps/app/src/client/components/PageEditor/EditorNavbarBottom/GrantSelector.tsx
index 9f803ec4870..09734344399 100644
--- a/apps/app/src/client/components/PageEditor/EditorNavbarBottom/GrantSelector.tsx
+++ b/apps/app/src/client/components/PageEditor/EditorNavbarBottom/GrantSelector.tsx
@@ -16,9 +16,10 @@ import {
import type { UserRelatedGroupsData } from '~/interfaces/page';
import { UserGroupPageGrantStatus } from '~/interfaces/page';
-import { useCurrentUser } from '~/stores-universal/context';
-import { useCurrentPageId, useSWRxCurrentGrantData } from '~/stores/page';
-import { useSelectedGrant } from '~/stores/ui';
+import { useCurrentUser } from '~/states/global';
+import { useCurrentPageId } from '~/states/page';
+import { useSelectedGrant } from '~/states/ui/editor';
+import { useSWRxCurrentGrantData } from '~/stores/page';
const AVAILABLE_GRANTS = [
@@ -61,11 +62,11 @@ export const GrantSelector = (props: Props): JSX.Element => {
const [isSelectGroupModalShown, setIsSelectGroupModalShown] = useState(false);
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const shouldFetch = isSelectGroupModalShown;
- const { data: selectedGrant, mutate: mutateSelectedGrant } = useSelectedGrant();
- const { data: currentPageId } = useCurrentPageId();
+ const [selectedGrant, setSelectedGrant] = useSelectedGrant();
+ const currentPageId = useCurrentPageId();
const { data: grantData } = useSWRxCurrentGrantData(currentPageId);
const currentPageGrantData = grantData?.grantData.currentPageGrant;
@@ -79,11 +80,11 @@ export const GrantSelector = (props: Props): JSX.Element => {
?.userRelatedGroups.filter(group => group.status === UserGroupPageGrantStatus.isGranted)?.map((group) => {
return { item: group.id, type: group.type };
}) ?? [];
- mutateSelectedGrant({
+ setSelectedGrant({
grant: currentPageGrant.grant,
userRelatedGrantedGroups,
});
- }, [grantData?.grantData.currentPageGrant, mutateSelectedGrant]);
+ }, [grantData?.grantData.currentPageGrant, setSelectedGrant]);
// sync grant data
useEffect(() => {
@@ -105,8 +106,8 @@ export const GrantSelector = (props: Props): JSX.Element => {
return;
}
- mutateSelectedGrant({ grant, userRelatedGrantedGroups: undefined });
- }, [mutateSelectedGrant, showSelectGroupModal, applyCurrentPageGrantToSelectedGrant, selectedGrant?.grant]);
+ setSelectedGrant({ grant, userRelatedGrantedGroups: undefined });
+ }, [setSelectedGrant, showSelectGroupModal, applyCurrentPageGrantToSelectedGrant, selectedGrant?.grant]);
const groupListItemClickHandler = useCallback((clickedGroup: UserRelatedGroupsData) => {
const userRelatedGrantedGroups = selectedGrant?.userRelatedGrantedGroups ?? [];
@@ -119,8 +120,8 @@ export const GrantSelector = (props: Props): JSX.Element => {
else {
userRelatedGrantedGroupsCopy = userRelatedGrantedGroupsCopy.filter(group => getIdForRef(group.item) !== clickedGroup.id);
}
- mutateSelectedGrant({ grant: 5, userRelatedGrantedGroups: userRelatedGrantedGroupsCopy });
- }, [mutateSelectedGrant, selectedGrant?.userRelatedGrantedGroups]);
+ setSelectedGrant({ grant: 5, userRelatedGrantedGroups: userRelatedGrantedGroupsCopy });
+ }, [setSelectedGrant, selectedGrant?.userRelatedGrantedGroups]);
/**
* Render grant selector DOM.
diff --git a/apps/app/src/client/components/PageEditor/EditorNavbarBottom/OptionsSelector.tsx b/apps/app/src/client/components/PageEditor/EditorNavbarBottom/OptionsSelector.tsx
index 28da8495575..2139724f132 100644
--- a/apps/app/src/client/components/PageEditor/EditorNavbarBottom/OptionsSelector.tsx
+++ b/apps/app/src/client/components/PageEditor/EditorNavbarBottom/OptionsSelector.tsx
@@ -5,17 +5,17 @@ import React, {
import {
type EditorTheme, type KeyMapMode, PasteMode, AllPasteMode, DEFAULT_KEYMAP, DEFAULT_PASTE_MODE, DEFAULT_THEME,
} from '@growi/editor';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import {
Dropdown, DropdownToggle, DropdownMenu, Input, FormGroup,
} from 'reactstrap';
-import { useIsIndentSizeForced } from '~/stores-universal/context';
-import { useEditorSettings, useCurrentIndentSize } from '~/stores/editor';
-import {
- useIsDeviceLargerThanMd,
-} from '~/stores/ui';
+import { isIndentSizeForcedAtom } from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
+import { useCurrentIndentSize, useCurrentIndentSizeActions } from '~/states/ui/editor';
+import { useEditorSettings } from '~/stores/editor';
type RadioListItemProps = {
onClick: () => void,
@@ -62,7 +62,7 @@ const Selector = (props: SelectorProps): JSX.Element => {
update({ theme })} text={themeLabel} checked={theme === selectedTheme} />
);
- }) }
+ })}
), [update, selectedTheme]);
@@ -122,7 +122,7 @@ const KEYMAP_LABEL_MAP: KeyMapModeToLabel = {
vscode: 'Visual Studio Code',
};
-const KeymapSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const KeymapSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
const { t } = useTranslation();
const { data: editorSettings, update } = useEditorSettings();
@@ -130,7 +130,7 @@ const KeymapSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JS
const listItems = useMemo(() => (
<>
- { (Object.keys(KEYMAP_LABEL_MAP) as KeyMapMode[]).map((keymapMode) => {
+ {(Object.keys(KEYMAP_LABEL_MAP) as KeyMapMode[]).map((keymapMode) => {
const keymapLabel = KEYMAP_LABEL_MAP[keymapMode];
const icon = (keymapMode !== 'default')
? update({ keymapMode })} icon={icon} text={keymapLabel} checked={keymapMode === selectedKeymapMode} />
);
- }) }
+ })}
), [update, selectedKeymapMode]);
@@ -152,18 +152,19 @@ KeymapSelector.displayName = 'KeymapSelector';
const TYPICAL_INDENT_SIZE = [2, 4];
-const IndentSizeSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const IndentSizeSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
const { t } = useTranslation();
- const { data: currentIndentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
+ const currentIndentSize = useCurrentIndentSize();
+ const { mutate: mutateCurrentIndentSize } = useCurrentIndentSizeActions();
const listItems = useMemo(() => (
<>
- { TYPICAL_INDENT_SIZE.map((indent) => {
+ {TYPICAL_INDENT_SIZE.map((indent) => {
return (
mutateCurrentIndentSize(indent)} text={indent.toString()} checked={indent === currentIndentSize} />
);
- }) }
+ })}
), [currentIndentSize, mutateCurrentIndentSize]);
@@ -174,7 +175,7 @@ const IndentSizeSelector = memo(({ onClickBefore }: {onClickBefore: () => void})
IndentSizeSelector.displayName = 'IndentSizeSelector';
-const PasteSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX.Element => {
+const PasteSelector = memo(({ onClickBefore }: { onClickBefore: () => void }): JSX.Element => {
const { t } = useTranslation();
const { data: editorSettings, update } = useEditorSettings();
@@ -182,11 +183,11 @@ const PasteSelector = memo(({ onClickBefore }: {onClickBefore: () => void}): JSX
const listItems = useMemo(() => (
<>
- { (AllPasteMode).map((pasteMode) => {
+ {(AllPasteMode).map((pasteMode) => {
return (
update({ pasteMode })} text={t(`page_edit.paste.${pasteMode}`) ?? ''} checked={pasteMode === selectedPasteMode} />
);
- }) }
+ })}
), [update, t, selectedPasteMode]);
@@ -304,9 +305,9 @@ export const OptionsSelector = (): JSX.Element => {
const [status, setStatus] = useState(OptionsStatus.Home);
const { data: editorSettings } = useEditorSettings();
- const { data: currentIndentSize } = useCurrentIndentSize();
- const { data: isIndentSizeForced } = useIsIndentSizeForced();
- const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+ const currentIndentSize = useCurrentIndentSize();
+ const isIndentSizeForced = useAtomValue(isIndentSizeForcedAtom);
+ const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
if (editorSettings == null || currentIndentSize == null || isIndentSizeForced == null) {
return <>;
@@ -364,19 +365,19 @@ export const OptionsSelector = (): JSX.Element => {
)
}
- { status === OptionsStatus.Theme && (
+ {status === OptionsStatus.Theme && (
setStatus(OptionsStatus.Home)} />
)
}
- { status === OptionsStatus.Keymap && (
+ {status === OptionsStatus.Keymap && (
setStatus(OptionsStatus.Home)} />
)
}
- { status === OptionsStatus.Indent && (
+ {status === OptionsStatus.Indent && (
setStatus(OptionsStatus.Home)} />
)
}
- { status === OptionsStatus.Paste && (
+ {status === OptionsStatus.Paste && (
setStatus(OptionsStatus.Home)} />
)}
diff --git a/apps/app/src/client/components/PageEditor/EditorNavbarBottom/SavePageControls.tsx b/apps/app/src/client/components/PageEditor/EditorNavbarBottom/SavePageControls.tsx
index 0c5a6e8da7d..c66e6886280 100644
--- a/apps/app/src/client/components/PageEditor/EditorNavbarBottom/SavePageControls.tsx
+++ b/apps/app/src/client/components/PageEditor/EditorNavbarBottom/SavePageControls.tsx
@@ -2,68 +2,75 @@ import React, {
useCallback, useState, useEffect, type JSX,
} from 'react';
-import type EventEmitter from 'events';
-
import { PageGrant } from '@growi/core';
+import { globalEventTarget } from '@growi/core/dist/utils';
import { isTopPage, isUsersProtectedPages } from '@growi/core/dist/utils/page-path-utils';
import { LoadingSpinner } from '@growi/ui/dist/components';
+import { useAtomValue } from 'jotai';
import { useTranslation } from 'next-i18next';
import {
UncontrolledButtonDropdown, Button,
DropdownToggle, DropdownMenu, DropdownItem, Modal,
} from 'reactstrap';
+import { useIsEditable, useCurrentPageData, useCurrentPagePath } from '~/states/page';
+import {
+ isAclEnabledAtom,
+ isSlackConfiguredAtom,
+} from '~/states/server-configurations';
+import { useDeviceLargerThanMd } from '~/states/ui/device';
import {
- useIsEditable, useIsAclEnabled,
- useIsSlackConfigured,
-} from '~/stores-universal/context';
-import { useEditorMode } from '~/stores-universal/ui';
-import { useWaitingSaveProcessing, useSWRxSlackChannels, useIsSlackEnabled } from '~/stores/editor';
-import { useSWRxCurrentPage, useCurrentPagePath } from '~/stores/page';
-import { useIsDeviceLargerThanMd, useSelectedGrant } from '~/stores/ui';
+ useEditorMode, useSelectedGrant, useWaitingSaveProcessing, useIsSlackEnabled, EditorMode,
+} from '~/states/ui/editor';
+import { useSWRxSlackChannels } from '~/stores/editor';
import loggerFactory from '~/utils/logger';
import { NotAvailable } from '../../NotAvailable';
import { SlackNotification } from '../../SlackNotification';
+import type { SaveOptions } from '../PageEditor';
import { GrantSelector } from './GrantSelector';
-declare global {
- // eslint-disable-next-line vars-on-top, no-var
- var globalEmitter: EventEmitter;
-}
-
-
const logger = loggerFactory('growi:SavePageControls');
const SavePageButton = (props: { slackChannels: string, isSlackEnabled?: boolean, isDeviceLargerThanMd?: boolean }) => {
const { t } = useTranslation();
- const { data: _isWaitingSaveProcessing } = useWaitingSaveProcessing();
+ const _isWaitingSaveProcessing = useWaitingSaveProcessing();
const [isSavePageModalShown, setIsSavePageModalShown] = useState(false);
- const { data: selectedGrant } = useSelectedGrant();
+ const [selectedGrant] = useSelectedGrant();
- const { slackChannels, isSlackEnabled, isDeviceLargerThanMd } = props;
+ const { slackChannels, isSlackEnabled = false, isDeviceLargerThanMd } = props;
const isWaitingSaveProcessing = _isWaitingSaveProcessing === true; // ignore undefined
- const save = useCallback(async(): Promise => {
+ const save = useCallback(async (): Promise => {
// save
- globalEmitter.emit('saveAndReturnToView', { wip: false, slackChannels, isSlackEnabled });
+ globalEventTarget.dispatchEvent(new CustomEvent('saveAndReturnToView', {
+ detail: {
+ wip: false, slackChannels, isSlackEnabled,
+ },
+ }));
}, [isSlackEnabled, slackChannels]);
const saveAndOverwriteScopesOfDescendants = useCallback(() => {
// save
- globalEmitter.emit('saveAndReturnToView', {
- wip: false, overwriteScopesOfDescendants: true, slackChannels, isSlackEnabled,
- });
+ globalEventTarget.dispatchEvent(new CustomEvent('saveAndReturnToView', {
+ detail: {
+ wip: false, overwriteScopesOfDescendants: true, slackChannels, isSlackEnabled,
+ },
+ }));
}, [isSlackEnabled, slackChannels]);
const saveAndMakeWip = useCallback(() => {
// save
- globalEmitter.emit('saveAndReturnToView', { wip: true, slackChannels, isSlackEnabled });
+ globalEventTarget.dispatchEvent(new CustomEvent('saveAndReturnToView', {
+ detail: {
+ wip: true, slackChannels, isSlackEnabled,
+ },
+ }));
}, [isSlackEnabled, slackChannels]);
const labelSubmitButton = t('Update');
@@ -145,16 +152,16 @@ const SavePageButton = (props: { slackChannels: string, isSlackEnabled?: boolean
export const SavePageControls = (): JSX.Element | null => {
const { t } = useTranslation('commons');
- const { data: currentPage } = useSWRxCurrentPage();
- const { data: isEditable } = useIsEditable();
- const { data: isAclEnabled } = useIsAclEnabled();
-
- const { data: editorMode } = useEditorMode();
- const { data: currentPagePath } = useCurrentPagePath();
- const { data: isSlackConfigured } = useIsSlackConfigured();
- const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
+ const currentPage = useCurrentPageData();
+ const isEditable = useIsEditable();
+ const isAclEnabled = useAtomValue(isAclEnabledAtom);
+
+ const { editorMode } = useEditorMode();
+ const currentPagePath = useCurrentPagePath();
+ const isSlackConfigured = useAtomValue(isSlackConfiguredAtom);
+ const [isSlackEnabled, setIsSlackEnabled] = useIsSlackEnabled();
const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
- const { data: isDeviceLargerThanMd } = useIsDeviceLargerThanMd();
+ const [isDeviceLargerThanMd] = useDeviceLargerThanMd();
const [slackChannels, setSlackChannels] = useState('');
const [isSavePageControlsModalShown, setIsSavePageControlsModalShown] = useState(false);
@@ -162,16 +169,12 @@ export const SavePageControls = (): JSX.Element | null => {
// DO NOT dependent on slackChannelsData directly: https://github.com/growilabs/growi/pull/7332
const slackChannelsDataString = slackChannelsData?.toString();
useEffect(() => {
- if (editorMode === 'editor') {
+ if (editorMode === EditorMode.Editor) {
setSlackChannels(slackChannelsDataString ?? '');
- mutateIsSlackEnabled(false);
+ setIsSlackEnabled(false);
}
- }, [editorMode, mutateIsSlackEnabled, slackChannelsDataString]);
-
+ }, [editorMode, setIsSlackEnabled, slackChannelsDataString]);
- const isSlackEnabledToggleHandler = (bool: boolean) => {
- mutateIsSlackEnabled(bool, false);
- };
const slackChannelsChangedHandler = useCallback((slackChannels: string) => {
setSlackChannels(slackChannels);
@@ -199,7 +202,7 @@ export const SavePageControls = (): JSX.Element | null => {
();
const [hotTableContainer, setHotTableContainer] = useState();
const [isDataImportAreaExpanded, setIsDataImportAreaExpanded] = useState(false);
- const [isWindowExpanded, setIsWindowExpanded] = useState(false);
const [markdownTable, setMarkdownTable] = useState(defaultMarkdownTable);
const [markdownTableOnInit, setMarkdownTableOnInit] = useState(defaultMarkdownTable);
const [handsontableHeight, setHandsontableHeight] = useState(DEFAULT_HOT_HEIGHT);
const [handsontableWidth, setHandsontableWidth] = useState(0);
- const handleWindowExpandedChange = () => {
+ // Memoize window resize handler
+ const handleWindowExpandedChange = useCallback(() => {
if (hotTableContainer != null) {
// Get the width and height of hotTableContainer
const { width, height } = hotTableContainer.getBoundingClientRect();
setHandsontableWidth(width);
setHandsontableHeight(height);
}
- };
+ }, [hotTableContainer]);
- const debouncedHandleWindowExpandedChange = debounce(100, handleWindowExpandedChange);
+ // Memoize debounced handler
+ const debouncedHandleWindowExpandedChange = useMemo(() => (
+ debounce(100, handleWindowExpandedChange)
+ ), [handleWindowExpandedChange]);
- const handleModalOpen = () => {
- const markdownTableState = table == null && editor != null ? getMarkdownTable(editor) : table;
- const initTableInstance = markdownTableState == null ? defaultMarkdownTable : markdownTableState.clone();
- setMarkdownTable(markdownTableState ?? defaultMarkdownTable);
+ // Initialize table data when component mounts (modal opens)
+ useEffect(() => {
+ const initTableInstance = initialTable == null ? defaultMarkdownTable : initialTable.clone();
+ setMarkdownTable(initialTable ?? defaultMarkdownTable);
setMarkdownTableOnInit(initTableInstance);
debouncedHandleWindowExpandedChange();
- };
+ }, [debouncedHandleWindowExpandedChange, defaultMarkdownTable, initialTable]); // Run only on mount
- const expandWindow = () => {
- setIsWindowExpanded(true);
+ // Update handsontable size when window expansion changes
+ useEffect(() => {
+ if (!isWindowExpanded) {
+ // Reset height to default when contracted
+ setHandsontableHeight(DEFAULT_HOT_HEIGHT);
+ }
debouncedHandleWindowExpandedChange();
- };
-
- const contractWindow = () => {
- setIsWindowExpanded(false);
- // Set the height to the default value
- setHandsontableHeight(DEFAULT_HOT_HEIGHT);
- debouncedHandleWindowExpandedChange();
- };
-
- const markdownTableOption = {
- get latest() {
- return {
- align: [].concat(markdownTable.options.align),
- pad: autoFormatMarkdownTable !== false,
- };
- },
- };
+ }, [isWindowExpanded, debouncedHandleWindowExpandedChange]);
/**
* Reset table data to initial value
@@ -145,35 +149,30 @@ export const HandsontableModal = (): JSX.Element => {
setMarkdownTable(markdownTableOnInit.clone());
};
- const cancel = () => {
- closeHandsontableModal();
+ const cancel = useCallback(() => {
setIsDataImportAreaExpanded(false);
- setIsWindowExpanded(false);
- };
+ contractWindow();
+ onCancel();
+ }, [contractWindow, onCancel]);
- const save = () => {
+ const save = useCallback(() => {
if (hotTable == null) {
return;
}
+ const markdownTableOption = {
+ align: [].concat(markdownTable.options.align),
+ pad: autoFormatMarkdownTable !== false,
+ };
+
const newMarkdownTable = new MarkdownTable(
hotTable.hotInstance.getData(),
- markdownTableOption.latest,
+ markdownTableOption,
).normalizeCells();
- // onSave is passed only when editing table directly from the page.
- if (onSave != null) {
- onSave(newMarkdownTable);
- cancel();
- return;
- }
-
- if (editor == null) {
- return;
- }
- replaceFocusedMarkdownTableWithEditor(editor, newMarkdownTable);
+ onSave(newMarkdownTable);
cancel();
- };
+ }, [hotTable, markdownTable.options.align, autoFormatMarkdownTable, onSave, cancel]);
const beforeColumnResizeHandler = (currentColumn) => {
/*
@@ -448,16 +447,7 @@ export const HandsontableModal = (): JSX.Element => {
);
return (
-
+ <>
{t('handsontable_modal.title')}
@@ -521,6 +511,89 @@ export const HandsontableModal = (): JSX.Element => {
{t('handsontable_modal.done')}
+
+ );
+};
+
+/**
+ * HandsontableModal - Container component (lightweight, always rendered)
+ * Handles both View and Editor modes
+ */
+export const HandsontableModal = (): JSX.Element => {
+ // for View
+ const handsontableModalData = useHandsontableModalStatus();
+ const { close: closeHandsontableModal } = useHandsontableModalActions();
+
+ // for Editor
+ const handsontableModalForEditorData = useHandsontableModalForEditorStatus();
+ const { close: closeHandsontableModalForEditor } = useHandsontableModalForEditorActions();
+
+ const isOpenedForView = handsontableModalData.isOpened;
+ const isOpenedForEditor = handsontableModalForEditorData.isOpened;
+ const isOpened = isOpenedForView || isOpenedForEditor;
+
+ const [isWindowExpanded, setIsWindowExpanded] = useState(false);
+
+ // Determine initial table based on mode
+ const initialTable = useMemo(() => {
+ if (isOpenedForEditor) {
+ const editor = handsontableModalForEditorData.editor;
+ return editor != null ? getMarkdownTable(editor) : undefined;
+ }
+ return handsontableModalData.table;
+ }, [isOpenedForEditor, handsontableModalForEditorData.editor, handsontableModalData.table]);
+
+ // Determine autoFormatMarkdownTable based on mode
+ const autoFormatMarkdownTable = handsontableModalData.autoFormatMarkdownTable ?? false;
+
+ const toggle = useCallback(() => {
+ closeHandsontableModal();
+ closeHandsontableModalForEditor();
+ setIsWindowExpanded(false);
+ }, [closeHandsontableModal, closeHandsontableModalForEditor]);
+
+ const expandWindow = useCallback(() => {
+ setIsWindowExpanded(true);
+ }, []);
+
+ const contractWindow = useCallback(() => {
+ setIsWindowExpanded(false);
+ }, []);
+
+ // Create save handler based on mode
+ const handleSave = useCallback((newMarkdownTable: MarkdownTable) => {
+ if (isOpenedForEditor) {
+ const editor = handsontableModalForEditorData.editor;
+ if (editor != null) {
+ replaceFocusedMarkdownTableWithEditor(editor, newMarkdownTable);
+ }
+ }
+ else {
+ handsontableModalData.onSave?.(newMarkdownTable);
+ }
+ }, [isOpenedForEditor, handsontableModalForEditorData.editor, handsontableModalData]);
+
+ return (
+
+ {isOpened && (
+
);
};
diff --git a/apps/app/src/client/components/PageEditor/HandsontableModal/dynamic.tsx b/apps/app/src/client/components/PageEditor/HandsontableModal/dynamic.tsx
new file mode 100644
index 00000000000..671f80c116e
--- /dev/null
+++ b/apps/app/src/client/components/PageEditor/HandsontableModal/dynamic.tsx
@@ -0,0 +1,21 @@
+import type { JSX } from 'react';
+
+import { useHandsontableModalForEditorStatus } from '@growi/editor';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useHandsontableModalStatus } from '~/states/ui/modal/handsontable';
+
+type HandsontableModalProps = Record;
+
+export const HandsontableModalLazyLoaded = (): JSX.Element => {
+ const status = useHandsontableModalStatus();
+ const statusForEditor = useHandsontableModalForEditorStatus();
+
+ const HandsontableModal = useLazyLoader(
+ 'handsontable-modal',
+ () => import('./HandsontableModal').then(mod => ({ default: mod.HandsontableModal })),
+ status?.isOpened || statusForEditor?.isOpened || false,
+ );
+
+ return HandsontableModal ? (false);
const [isUsePermanentLink, setIsUsePermanentLink] = useState(false);
@@ -105,7 +108,7 @@ export const LinkEditModal = (): JSX.Element => {
}, [linkEditModalStatus, parseLinkAndSetState]);
- const toggleIsUseRelativePath = () => {
+ const toggleIsUseRelativePath = useCallback(() => {
if (!linkInputValue.startsWith('/') || linkerType === Linker.types.growiLink) {
return;
}
@@ -113,9 +116,9 @@ export const LinkEditModal = (): JSX.Element => {
// User can't use both relativePath and permalink at the same time
setIsUseRelativePath(!isUseRelativePath);
setIsUsePermanentLink(false);
- };
+ }, [linkInputValue, linkerType, isUseRelativePath]);
- const toggleIsUsePamanentLink = () => {
+ const toggleIsUsePamanentLink = useCallback(() => {
if (permalink === '' || linkerType === Linker.types.growiLink) {
return;
}
@@ -123,9 +126,9 @@ export const LinkEditModal = (): JSX.Element => {
// User can't use both relativePath and permalink at the same time
setIsUsePermanentLink(!isUsePermanentLink);
setIsUseRelativePath(false);
- };
+ }, [permalink, linkerType, isUsePermanentLink]);
- const setMarkdownHandler = async() => {
+ const setMarkdownHandler = useCallback(async() => {
const path = linkInputValue;
let markdown = '';
let pagePath = '';
@@ -154,9 +157,9 @@ export const LinkEditModal = (): JSX.Element => {
setMarkdown(markdown);
setPagePath(pagePath);
setPermalink(permalink);
- };
+ }, [linkInputValue, t]);
- const generateLink = () => {
+ const generateLink = useCallback(() => {
let reshapedLink = linkInputValue;
if (isUseRelativePath) {
@@ -169,9 +172,9 @@ export const LinkEditModal = (): JSX.Element => {
}
return new Linker(linkerType, labelInputValue, reshapedLink);
- };
+ }, [linkInputValue, isUseRelativePath, getRootPath, linkerType, isUsePermanentLink, permalink, labelInputValue]);
- const renderLinkPreview = (): JSX.Element => {
+ const renderLinkPreview = (): React.JSX.Element => {
const linker = generateLink();
return (
@@ -195,7 +198,7 @@ export const LinkEditModal = (): JSX.Element => {
);
};
- const handleChangeTypeahead = (selected) => {
+ const handleChangeTypeahead = useCallback((selected) => {
const pageWithMeta = selected[0];
if (pageWithMeta != null) {
const page = pageWithMeta.data;
@@ -203,13 +206,13 @@ export const LinkEditModal = (): JSX.Element => {
setLinkInputValue(page.path);
setPermalink(permalink);
}
- };
+ }, []);
- const handleChangeLabelInput = (label: string) => {
+ const handleChangeLabelInput = useCallback((label: string) => {
setLabelInputValue(label);
- };
+ }, []);
- const handleChangeLinkInput = (link) => {
+ const handleChangeLinkInput = useCallback((link) => {
let useRelativePath = isUseRelativePath;
if (!linkInputValue.startsWith('/') || linkerType === Linker.types.growiLink) {
useRelativePath = false;
@@ -218,9 +221,9 @@ export const LinkEditModal = (): JSX.Element => {
setIsUseRelativePath(useRelativePath);
setIsUsePermanentLink(false);
setPermalink('');
- };
+ }, [linkInputValue, isUseRelativePath, linkerType]);
- const save = () => {
+ const save = useCallback(() => {
const linker = generateLink();
if (linkEditModalStatus?.onSave != null) {
@@ -228,17 +231,17 @@ export const LinkEditModal = (): JSX.Element => {
}
close();
- };
+ }, [generateLink, linkEditModalStatus, close]);
- const toggleIsPreviewOpen = async() => {
+ const toggleIsPreviewOpen = useCallback(async() => {
// open popover
if (!isPreviewOpen) {
setMarkdownHandler();
}
setIsPreviewOpen(!isPreviewOpen);
- };
+ }, [isPreviewOpen, setMarkdownHandler]);
- const renderLinkAndLabelForm = (): JSX.Element => {
+ const renderLinkAndLabelForm = (): React.JSX.Element => {
return (
<>
{t('link_edit.set_link_and_label')}
@@ -294,7 +297,7 @@ export const LinkEditModal = (): JSX.Element => {
);
};
- const renderPathFormatForm = (): JSX.Element => {
+ const renderPathFormatForm = (): React.JSX.Element => {
return (
diff --git a/apps/app/src/client/components/PageEditor/PageEditorReadOnly.tsx b/apps/app/src/client/components/PageEditor/PageEditorReadOnly.tsx
index 5cf84586268..9a025e15ed7 100644
--- a/apps/app/src/client/components/PageEditor/PageEditorReadOnly.tsx
+++ b/apps/app/src/client/components/PageEditor/PageEditorReadOnly.tsx
@@ -5,7 +5,8 @@ import { CodeMirrorEditorReadOnly } from '@growi/editor/dist/client/components/C
import { throttle } from 'throttle-debounce';
import { useShouldExpandContent } from '~/services/layout/use-should-expand-content';
-import { useSWRxCurrentPage, useIsLatestRevision } from '~/stores/page';
+import { useCurrentPageData } from '~/states/page';
+import { useSWRxIsLatestRevision } from '~/stores/page';
import { usePreviewOptions } from '~/stores/renderer';
import { EditorNavbar } from './EditorNavbar';
@@ -19,9 +20,9 @@ type Props = {
export const PageEditorReadOnly = react.memo(({ visibility }: Props): JSX.Element => {
const previewRef = useRef
(null);
- const { data: currentPage } = useSWRxCurrentPage();
+ const currentPage = useCurrentPageData();
const { data: rendererOptions } = usePreviewOptions();
- const { data: isLatestRevision } = useIsLatestRevision();
+ const { data: isLatestRevision } = useSWRxIsLatestRevision();
const shouldExpandContent = useShouldExpandContent(currentPage);
const { scrollEditorHandler, scrollPreviewHandler } = useScrollSync(GlobalCodeMirrorEditorKey.READONLY, previewRef);
@@ -30,7 +31,8 @@ export const PageEditorReadOnly = react.memo(({ visibility }: Props): JSX.Elemen
const revisionBody = currentPage?.revision?.body;
- if (rendererOptions == null || isLatestRevision) {
+ // Show read-only editor only when viewing an old revision
+ if (rendererOptions == null || isLatestRevision !== false) {
return <>;
}
diff --git a/apps/app/src/client/components/PageEditor/Preview.tsx b/apps/app/src/client/components/PageEditor/Preview.tsx
index 6bbd3be3548..b3079bd0d41 100644
--- a/apps/app/src/client/components/PageEditor/Preview.tsx
+++ b/apps/app/src/client/components/PageEditor/Preview.tsx
@@ -4,7 +4,7 @@ import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
import RevisionRenderer from '~/components/PageView/RevisionRenderer';
import type { RendererOptions } from '~/interfaces/renderer-options';
-import { useIsEnabledMarp } from '~/stores-universal/context';
+import { useRendererConfig } from '~/states/server-configurations';
import { SlideRenderer } from '../Page/SlideRenderer';
@@ -30,7 +30,7 @@ const Preview = (props: Props): JSX.Element => {
expandContentWidth,
} = props;
- const { data: isEnabledMarp } = useIsEnabledMarp();
+ const { isEnabledMarp } = useRendererConfig();
const isSlide = useSlidesByFrontmatter(markdown, isEnabledMarp);
const fluidLayoutClass = expandContentWidth ? 'fluid-layout' : '';
diff --git a/apps/app/src/client/components/PageEditor/conflict.tsx b/apps/app/src/client/components/PageEditor/conflict.tsx
index 4b62af63861..7d6f280813a 100644
--- a/apps/app/src/client/components/PageEditor/conflict.tsx
+++ b/apps/app/src/client/components/PageEditor/conflict.tsx
@@ -1,20 +1,22 @@
import { useCallback, useEffect } from 'react';
import { Origin } from '@growi/core';
-import { useGlobalSocket } from '@growi/core/dist/swr';
import { GlobalCodeMirrorEditorKey } from '@growi/editor';
import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
import { useTranslation } from 'react-i18next';
-import type { Save, SaveOptions } from '~/client/components/PageEditor/PageEditor';
-import { useUpdateStateAfterSave } from '~/client/services/page-operation';
-import { toastSuccess } from '~/client/util/toastr';
import { SocketEventName } from '~/interfaces/websocket';
-import { EditorMode, useEditorMode } from '~/stores-universal/ui';
-import { usePageStatusAlert } from '~/stores/alert';
-import { useConflictDiffModal } from '~/stores/modal';
-import { useCurrentPageId, useSWRxCurrentPage } from '~/stores/page';
-import { type RemoteRevisionData, useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
+import type { RemoteRevisionData } from '~/states/page';
+import { useCurrentPageData, useCurrentPageId, useSetRemoteLatestPageData } from '~/states/page';
+import { useGlobalSocket } from '~/states/socket-io';
+import { EditorMode, useEditorMode } from '~/states/ui/editor';
+import { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
+import { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
+
+import { useUpdateStateAfterSave } from '../../services/page-operation';
+import { toastSuccess } from '../../util/toastr';
+
+import type { Save, SaveOptions } from './PageEditor';
export type ConflictHandler = (
@@ -34,14 +36,14 @@ type GenerateResolveConflicthandler = () => (
const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () => {
const { t } = useTranslation();
- const { data: pageId } = useCurrentPageId();
- const { close: closePageStatusAlert } = usePageStatusAlert();
- const { close: closeConflictDiffModal } = useConflictDiffModal();
+ const pageId = useCurrentPageId();
+ const { close: closePageStatusAlert } = usePageStatusAlertActions();
+ const { close: closeConflictDiffModal } = useConflictDiffModalActions();
const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
const updateStateAfterSave = useUpdateStateAfterSave(pageId, { supressEditingMarkdownMutation: true });
return useCallback((revisionId, save, saveOptions, onConflict) => {
- return async(newMarkdown) => {
+ return async (newMarkdown) => {
const page = await save(revisionId, newMarkdown, saveOptions, onConflict);
if (page == null) {
return;
@@ -63,9 +65,9 @@ const useGenerateResolveConflictHandler: GenerateResolveConflicthandler = () =>
type ConflictResolver = () => ConflictHandler;
export const useConflictResolver: ConflictResolver = () => {
- const { open: openPageStatusAlert } = usePageStatusAlert();
- const { open: openConflictDiffModal } = useConflictDiffModal();
- const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
+ const { open: openPageStatusAlert } = usePageStatusAlertActions();
+ const { open: openConflictDiffModal } = useConflictDiffModalActions();
+ const setRemoteLatestPageData = useSetRemoteLatestPageData();
const generateResolveConflictHandler = useGenerateResolveConflictHandler();
return useCallback((remoteRevidsionData, requestMarkdown, save, saveOptions) => {
@@ -80,14 +82,12 @@ export const useConflictResolver: ConflictResolver = () => {
};
export const useConflictEffect = (): void => {
- const { data: currentPage } = useSWRxCurrentPage();
- const { close: closePageStatusAlert } = usePageStatusAlert();
- const { close: closeConflictDiffModal } = useConflictDiffModal();
+ const currentPage = useCurrentPageData();
+ const { close: closePageStatusAlert, open: openPageStatusAlert } = usePageStatusAlertActions();
+ const { close: closeConflictDiffModal, open: openConflictDiffModal } = useConflictDiffModalActions();
const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
- const { open: openPageStatusAlert } = usePageStatusAlert();
- const { open: openConflictDiffModal } = useConflictDiffModal();
- const { data: socket } = useGlobalSocket();
- const { data: editorMode } = useEditorMode();
+ const socket = useGlobalSocket();
+ const { editorMode } = useEditorMode();
const conflictHandler = useCallback(() => {
const onResolveConflict = () => {
diff --git a/apps/app/src/client/components/PageEditor/page-path-rename-utils.ts b/apps/app/src/client/components/PageEditor/page-path-rename-utils.ts
index 8cf2dd30e8b..e92d7d2e2d7 100644
--- a/apps/app/src/client/components/PageEditor/page-path-rename-utils.ts
+++ b/apps/app/src/client/components/PageEditor/page-path-rename-utils.ts
@@ -5,9 +5,8 @@ import { useTranslation } from 'next-i18next';
import { apiv3Put } from '~/client/util/apiv3-client';
import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useSWRMUTxCurrentPage } from '~/stores/page';
+import { useFetchCurrentPage, useSetIsUntitledPage } from '~/states/page';
import { mutatePageTree, mutatePageList, mutateRecentlyUpdated } from '~/stores/page-listing';
-import { useIsUntitledPage } from '~/stores/ui';
type PagePathRenameHandler = (newPagePath: string, onRenameFinish?: () => void, onRenameFailure?: () => void, onRenamedSkipped?: () => void) => Promise
@@ -17,8 +16,8 @@ export const usePagePathRenameHandler = (
): PagePathRenameHandler => {
const { t } = useTranslation();
- const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
- const { mutate: mutateIsUntitledPage } = useIsUntitledPage();
+ const { fetchCurrentPage } = useFetchCurrentPage();
+ const setIsUntitledPage = useSetIsUntitledPage();
const pagePathRenameHandler = useCallback(async(newPagePath, onRenameFinish, onRenameFailure) => {
@@ -35,10 +34,10 @@ export const usePagePathRenameHandler = (
mutatePageTree();
mutateRecentlyUpdated();
mutatePageList();
- mutateIsUntitledPage(false);
+ setIsUntitledPage(false);
if (currentPage.path === fromPath || currentPage.path === toPath) {
- mutateCurrentPage();
+ fetchCurrentPage({ force: true });
}
};
@@ -58,7 +57,7 @@ export const usePagePathRenameHandler = (
onRenameFailure?.();
toastError(err);
}
- }, [currentPage, mutateCurrentPage, mutateIsUntitledPage, t]);
+ }, [currentPage, fetchCurrentPage, setIsUntitledPage, t]);
return pagePathRenameHandler;
};
diff --git a/apps/app/src/client/components/PageHeader/PageHeader.tsx b/apps/app/src/client/components/PageHeader/PageHeader.tsx
index 276cc9be133..25999efdc7f 100644
--- a/apps/app/src/client/components/PageHeader/PageHeader.tsx
+++ b/apps/app/src/client/components/PageHeader/PageHeader.tsx
@@ -2,8 +2,8 @@ import {
useCallback, useEffect, useRef, useState, type JSX,
} from 'react';
-import { useSWRxCurrentPage } from '~/stores/page';
-import { usePageControlsX } from '~/stores/ui';
+import { useCurrentPageData } from '~/states/page';
+import { usePageControlsX } from '~/states/ui/page';
import { PagePathHeader } from './PagePathHeader';
import { PageTitleHeader } from './PageTitleHeader';
@@ -14,8 +14,8 @@ const moduleClass = styles['page-header'] ?? '';
export const PageHeader = (): JSX.Element => {
- const { data: currentPage } = useSWRxCurrentPage();
- const { data: pageControlsX } = usePageControlsX();
+ const currentPage = useCurrentPageData();
+ const pageControlsX = usePageControlsX();
const pageHeaderRef = useRef(null);
const [maxWidth, setMaxWidth] = useState();
diff --git a/apps/app/src/client/components/PageHeader/PagePathHeader.tsx b/apps/app/src/client/components/PageHeader/PagePathHeader.tsx
index b8e1ad6d273..a5add1c0b1d 100644
--- a/apps/app/src/client/components/PageHeader/PagePathHeader.tsx
+++ b/apps/app/src/client/components/PageHeader/PagePathHeader.tsx
@@ -15,7 +15,7 @@ import type { InputValidationResult } from '~/client/util/use-input-validator';
import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
import type { IPageForItem } from '~/interfaces/page';
import LinkedPagePath from '~/models/linked-page-path';
-import { usePageSelectModal } from '~/stores/modal';
+import { usePageSelectModalActions } from '~/states/ui/modal/page-select';
import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
@@ -47,7 +47,7 @@ export const PagePathHeader = memo((props: Props): JSX.Element => {
const [isRenameInputShown, setRenameInputShown] = useState(false);
const [isHover, setHover] = useState(false);
- const { open: openPageSelectModal } = usePageSelectModal();
+ const { open: openPageSelectModal } = usePageSelectModalActions();
const [validationResult, setValidationResult] = useState();
diff --git a/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx b/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx
index 414e686499a..e02a7ef1c2c 100644
--- a/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx
+++ b/apps/app/src/client/components/PageHeader/PageTitleHeader.spec.tsx
@@ -6,19 +6,22 @@ import {
import { mock } from 'vitest-mock-extended';
-import { EditorMode } from '~/stores-universal/ui';
+import { EditorMode } from '~/states/ui/editor';
import { PageTitleHeader } from './PageTitleHeader';
const mocks = vi.hoisted(() => ({
useIsUntitledPageMock: vi.fn(),
- useEditorModeMock: vi.fn(() => ({ data: EditorMode.Editor })),
+ useEditorModeMock: vi.fn(() => ({ editorMode: EditorMode.Editor })),
}));
-vi.mock('~/stores/ui', () => ({
- useIsUntitledPage: mocks.useIsUntitledPageMock,
-}));
-vi.mock('~/stores-universal/ui', async importOriginal => ({
+vi.mock('~/states/page', async (importOriginal) => {
+ return {
+ ...(await importOriginal()),
+ useIsUntitledPage: mocks.useIsUntitledPageMock,
+ };
+});
+vi.mock('~/states/ui/editor', async importOriginal => ({
...await importOriginal(),
useEditorMode: mocks.useEditorModeMock,
}));
@@ -26,10 +29,10 @@ vi.mock('~/stores-universal/ui', async importOriginal => ({
describe('PageTitleHeader Component with untitled page', () => {
beforeAll(() => {
- mocks.useIsUntitledPageMock.mockImplementation(() => ({ data: true }));
+ mocks.useIsUntitledPageMock.mockImplementation(() => true);
});
- it('should render the textbox correctly', async() => {
+ it('should render the textbox correctly', async () => {
// arrange
const currentPage = mock({
_id: faker.database.mongodbObjectId(),
@@ -58,10 +61,10 @@ describe('PageTitleHeader Component with untitled page', () => {
describe('PageTitleHeader Component', () => {
beforeAll(() => {
- mocks.useIsUntitledPageMock.mockImplementation(() => ({ data: false }));
+ mocks.useIsUntitledPageMock.mockImplementation(() => false);
});
- it('should render the title correctly', async() => {
+ it('should render the title correctly', async () => {
// arrange
const pageTitle = faker.lorem.slug();
const currentPage = mock({
@@ -84,7 +87,7 @@ describe('PageTitleHeader Component', () => {
expect(inputElement).not.toBeInTheDocument();
});
- it('should render text input after clicking', async() => {
+ it('should render text input after clicking', async () => {
// arrange
const pageTitle = faker.lorem.slug();
const currentPage = mock({
diff --git a/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx b/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx
index 0294659bb46..78a2240cfb9 100644
--- a/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx
+++ b/apps/app/src/client/components/PageHeader/PageTitleHeader.tsx
@@ -13,8 +13,8 @@ import { useTranslation } from 'next-i18next';
import type { InputValidationResult } from '~/client/util/use-input-validator';
import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
-import { EditorMode, useEditorMode } from '~/stores-universal/ui';
-import { useIsUntitledPage } from '~/stores/ui';
+import { useIsUntitledPage } from '~/states/page';
+import { EditorMode, useEditorMode } from '~/states/ui/editor';
import { CopyDropdown } from '../Common/CopyDropdown';
import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
@@ -52,10 +52,10 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
const editedPageTitle = nodePath.basename(editedPagePath);
- const { data: editorMode } = useEditorMode();
- const { data: isUntitledPage } = useIsUntitledPage();
+ const { editorMode } = useEditorMode();
+ const isUntitledPage = useIsUntitledPage();
- const changeHandler = useCallback(async(e: ChangeEvent) => {
+ const changeHandler = useCallback(async (e: ChangeEvent) => {
const newPageTitle = pathUtils.removeHeadingSlash(e.target.value);
const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage.path));
const newPagePath = nodePath.resolve(parentPagePath, newPageTitle);
@@ -128,7 +128,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
return (
- { isRenameInputShown && (
+ {isRenameInputShown && (
- ) }
+ )}
{
- { currentPage.wip && (
+ {currentPage.wip && (
WIP
)}
diff --git a/apps/app/src/client/components/PageList/PageListItemL.tsx b/apps/app/src/client/components/PageList/PageListItemL.tsx
index b219565c509..2ace6e2bad9 100644
--- a/apps/app/src/client/components/PageList/PageListItemL.tsx
+++ b/apps/app/src/client/components/PageList/PageListItemL.tsx
@@ -4,7 +4,7 @@ import React, {
} from 'react';
import type {
- IPageInfoAll, IPageWithMeta, IPageInfoForListing,
+ IPageInfoExt, IPageWithMeta, IPageInfoForListing,
} from '@growi/core';
import { isIPageInfoForListing, isIPageInfoForEntity } from '@growi/core';
import { DevidedPagePath } from '@growi/core/dist/models';
@@ -25,11 +25,12 @@ import type {
OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction, OnPutBackedFunction,
} from '~/interfaces/ui';
import LinkedPagePath from '~/models/linked-page-path';
+import { useDeviceLargerThanLg } from '~/states/ui/device';
+import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
+import { usePageDuplicateModalActions } from '~/states/ui/modal/page-duplicate';
+import { usePageRenameModalActions } from '~/states/ui/modal/page-rename';
+import { usePutBackPageModalActions } from '~/states/ui/modal/put-back-page';
import { useSWRMUTxCurrentUserBookmarks } from '~/stores/bookmark';
-import {
- usePageRenameModal, usePageDuplicateModal, usePageDeleteModal, usePutBackPageModal,
-} from '~/stores/modal';
-import { useIsDeviceLargerThanLg } from '~/stores/ui';
import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
import { useSWRMUTxPageInfo, useSWRxPageInfo } from '../../../stores/page';
@@ -84,11 +85,11 @@ const PageListItemLSubstance: ForwardRefRenderFunction
= (pr
},
}));
- const { data: isDeviceLargerThanLg } = useIsDeviceLargerThanLg();
- const { open: openDuplicateModal } = usePageDuplicateModal();
- const { open: openRenameModal } = usePageRenameModal();
- const { open: openDeleteModal } = usePageDeleteModal();
- const { open: openPutBackPageModal } = usePutBackPageModal();
+ const [isDeviceLargerThanLg] = useDeviceLargerThanLg();
+ const { open: openDuplicateModal } = usePageDuplicateModalActions();
+ const { open: openRenameModal } = usePageRenameModalActions();
+ const { open: openDeleteModal } = usePageDeleteModalActions();
+ const { open: openPutBackPageModal } = usePutBackPageModalActions();
const shouldFetch = isSelected && (pageData != null || pageMeta != null);
const { data: pageInfo } = useSWRxPageInfo(shouldFetch ? pageData?._id : null);
@@ -127,7 +128,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction = (pr
}
}, [isDeviceLargerThanLg, onClickItem, pageData._id]);
- const bookmarkMenuItemClickHandler = async(_pageId: string, _newValue: boolean): Promise => {
+ const bookmarkMenuItemClickHandler = async (_pageId: string, _newValue: boolean): Promise => {
const bookmarkOperation = _newValue ? bookmark : unbookmark;
await bookmarkOperation(_pageId);
mutateCurrentUserBookmarks();
@@ -142,23 +143,23 @@ const PageListItemLSubstance: ForwardRefRenderFunction = (pr
openDuplicateModal(page, { onDuplicated: onPageDuplicated });
}, [onPageDuplicated, openDuplicateModal, pageData._id, pageData.path]);
- const renameMenuItemClickHandler = useCallback((_id: string, pageInfo: IPageInfoAll | undefined) => {
+ const renameMenuItemClickHandler = useCallback((_id: string, pageInfo: IPageInfoExt | undefined) => {
const page = { data: pageData, meta: pageInfo };
openRenameModal(page, { onRenamed: onPageRenamed });
}, [pageData, onPageRenamed, openRenameModal]);
- const deleteMenuItemClickHandler = useCallback((_id: string, pageInfo: IPageInfoAll | undefined) => {
+ const deleteMenuItemClickHandler = useCallback((_id: string, pageInfo: IPageInfoExt | undefined) => {
const pageToDelete = { data: pageData, meta: pageInfo };
// open modal
openDeleteModal([pageToDelete], { onDeleted: onPageDeleted });
}, [pageData, openDeleteModal, onPageDeleted]);
- const revertMenuItemClickHandler = useCallback(async() => {
+ const revertMenuItemClickHandler = useCallback(async () => {
const { _id: pageId, path } = pageData;
- const putBackedHandler = async(path) => {
+ const putBackedHandler = async (path) => {
try {
// pageData path should be `/trash/fuga` (`/trash` should be included to the prefix)
await unlink(pageData.path);
diff --git a/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.module.scss b/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.module.scss
index 5c6745a08e7..2948618afcb 100644
--- a/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.module.scss
+++ b/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.module.scss
@@ -13,11 +13,3 @@
}
}
}
-
-@media print {
- .grw-page-path-nav-sticky :global {
- .sticky-inner-wrapper {
- position: static !important;
- }
- }
-}
diff --git a/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.tsx b/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.tsx
index 4c018f1f453..d6184a2934e 100644
--- a/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.tsx
+++ b/apps/app/src/client/components/PagePathNavSticky/PagePathNavSticky.tsx
@@ -6,10 +6,10 @@ import { DevidedPagePath } from '@growi/core/dist/models';
import { pagePathUtils } from '@growi/core/dist/utils';
import Sticky from 'react-stickynode';
+import { usePrintMode } from '~/client/services/use-print-mode';
import LinkedPagePath from '~/models/linked-page-path';
-import {
- usePageControlsX, useCurrentProductNavWidth, useSidebarMode,
-} from '~/stores/ui';
+import { usePageControlsX } from '~/states/ui/page';
+import { useSidebarMode, useCurrentProductNavWidth } from '~/states/ui/sidebar';
import { PagePathHierarchicalLink } from '../../../components/Common/PagePathHierarchicalLink';
import type { PagePathNavLayoutProps } from '../../../components/Common/PagePathNav';
@@ -27,9 +27,11 @@ const { isTrashPage } = pagePathUtils;
export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element => {
const { pagePath } = props;
- const { data: pageControlsX } = usePageControlsX();
- const { data: sidebarWidth } = useCurrentProductNavWidth();
- const { data: sidebarMode } = useSidebarMode();
+ const isPrinting = usePrintMode();
+
+ const pageControlsX = usePageControlsX();
+ const [sidebarWidth] = useCurrentProductNavWidth();
+ const { sidebarMode } = useSidebarMode();
const pagePathNavRef = useRef(null);
const [navMaxWidth, setNavMaxWidth] = useState();
@@ -82,7 +84,7 @@ export const PagePathNavSticky = (props: PagePathNavLayoutProps): JSX.Element =>
// Controlling pointer-events
// 1. disable pointer-events with 'pe-none'
-
+
{({ status }) => {
const isParentsCollapsed = status === Sticky.STATUS_FIXED;
diff --git a/apps/app/src/client/components/PagePresentationModal.module.scss b/apps/app/src/client/components/PagePresentationModal/PagePresentationModal.module.scss
similarity index 100%
rename from apps/app/src/client/components/PagePresentationModal.module.scss
rename to apps/app/src/client/components/PagePresentationModal/PagePresentationModal.module.scss
diff --git a/apps/app/src/client/components/PagePresentationModal.tsx b/apps/app/src/client/components/PagePresentationModal/PagePresentationModal.tsx
similarity index 66%
rename from apps/app/src/client/components/PagePresentationModal.tsx
rename to apps/app/src/client/components/PagePresentationModal/PagePresentationModal.tsx
index 29a912b4fdc..2a9a57bbcea 100644
--- a/apps/app/src/client/components/PagePresentationModal.tsx
+++ b/apps/app/src/client/components/PagePresentationModal/PagePresentationModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, type JSX } from 'react';
+import React, { useCallback } from 'react';
import type { PresentationProps } from '@growi/presentation/dist/client';
import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
@@ -10,38 +10,40 @@ import {
Modal, ModalBody,
} from 'reactstrap';
-import { useIsEnabledMarp } from '~/stores-universal/context';
+import { useCurrentPageData } from '~/states/page';
+import { useRendererConfig } from '~/states/server-configurations';
+import { usePresentationModalActions, usePresentationModalStatus } from '~/states/ui/modal/page-presentation';
import { useNextThemes } from '~/stores-universal/use-next-themes';
-import { usePagePresentationModal } from '~/stores/modal';
-import { useSWRxCurrentPage } from '~/stores/page';
import { usePresentationViewOptions } from '~/stores/renderer';
-import { RendererErrorMessage } from './Common/RendererErrorMessage';
+import { RendererErrorMessage } from '../Common/RendererErrorMessage';
import styles from './PagePresentationModal.module.scss';
const moduleClass = styles['grw-presentation-modal'] ?? '';
-const Presentation = dynamic(() => import('./Presentation/Presentation').then(mod => mod.Presentation), {
+const Presentation = dynamic(() => import('../Presentation/Presentation').then(mod => mod.Presentation), {
ssr: false,
loading: () => (
+ <>
{
) }
-
+
);
};
-export default PagePresentationModal;
+/**
+ * PagePresentationModal - Container component (lightweight, always rendered)
+ */
+export const PagePresentationModal = (): React.JSX.Element => {
+ const presentationModalData = usePresentationModalStatus();
+ const { close: closePresentationModal } = usePresentationModalActions();
+
+ const fullscreen = useFullScreen();
+
+ const closeHandler = useCallback(() => {
+ if (fullscreen.active) {
+ fullscreen.exit();
+ }
+ closePresentationModal();
+ }, [fullscreen, closePresentationModal]);
+
+ const isOpen = presentationModalData?.isOpened ?? false;
+
+ return (
+
+ {isOpen &&
+ );
+};
diff --git a/apps/app/src/client/components/PagePresentationModal/dynamic.tsx b/apps/app/src/client/components/PagePresentationModal/dynamic.tsx
new file mode 100644
index 00000000000..a6d657853de
--- /dev/null
+++ b/apps/app/src/client/components/PagePresentationModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { usePresentationModalStatus } from '~/states/ui/modal/page-presentation';
+
+type PagePresentationModalProps = Record;
+
+export const PagePresentationModalLazyLoaded = (): JSX.Element => {
+ const status = usePresentationModalStatus();
+
+ const PagePresentationModal = useLazyLoader(
+ 'page-presentation-modal',
+ () => import('./PagePresentationModal').then(mod => ({ default: mod.PagePresentationModal })),
+ status?.isOpened ?? false,
+ );
+
+ return PagePresentationModal ?
+ <>
{ t('modal_rename.label.Move/Rename page') }
@@ -360,8 +364,20 @@ const PageRenameModal = (): JSX.Element => {
{footerContent()}
-
+
);
};
-export default PageRenameModal;
+/**
+ * PageRenameModal - Container component (lightweight, always rendered)
+ */
+export const PageRenameModal = (): React.JSX.Element => {
+ const { isOpened } = usePageRenameModalStatus();
+ const { close: closeRenameModal } = usePageRenameModalActions();
+
+ return (
+
+ {isOpened &&
+ );
+};
diff --git a/apps/app/src/client/components/PageRenameModal/dynamic.tsx b/apps/app/src/client/components/PageRenameModal/dynamic.tsx
new file mode 100644
index 00000000000..99a66b7f1d9
--- /dev/null
+++ b/apps/app/src/client/components/PageRenameModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { usePageRenameModalStatus } from '~/states/ui/modal/page-rename';
+
+type PageRenameModalProps = Record;
+
+export const PageRenameModalLazyLoaded = (): JSX.Element => {
+ const status = usePageRenameModalStatus();
+
+ const PageRenameModal = useLazyLoader(
+ 'page-rename-modal',
+ () => import('./PageRenameModal').then(mod => ({ default: mod.PageRenameModal })),
+ status?.isOpened ?? false,
+ );
+
+ return PageRenameModal ? (null);
const [isIncludeSubPage, setIsIncludeSubPage] = useState(true);
+ const [scrollerElem, setScrollerElem] = useState(null);
- const { t } = useTranslation();
-
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: currentPage } = useSWRxCurrentPage();
- const { data: pageSelectModalData } = usePageSelectModal();
+ // Callback ref to capture the scroller element and trigger re-render
+ const scrollerRefCallback = useCallback((node: HTMLDivElement | null) => {
+ setScrollerElem(node);
+ }, []);
- const isHierarchicalSelectionMode = pageSelectModalData?.opts?.isHierarchicalSelectionMode ?? false;
+ const { t } = useTranslation();
- const onClickTreeItem = useCallback((page: IPageForItem) => {
- const parentPagePath = page.path;
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const currentPage = useCurrentPageData();
+ const { opts } = usePageSelectModalStatus();
- if (parentPagePath == null) {
- return;
- }
+ // Get selected page from atom
+ const selectedPage = useSelectedPageInModal();
- setClickedParentPage(page);
- }, []);
+ const isHierarchicalSelectionMode = opts?.isHierarchicalSelectionMode ?? false;
const onClickCancel = useCallback(() => {
- setClickedParentPage(null);
closeModal();
}, [closeModal]);
+ const { onSelected } = opts ?? {};
const onClickDone = useCallback(() => {
- if (clickedParentPage != null) {
- PageSelectModalData?.opts?.onSelected?.(clickedParentPage, isIncludeSubPage);
+ if (selectedPage != null) {
+ onSelected?.(selectedPage, isIncludeSubPage);
}
closeModal();
- }, [PageSelectModalData?.opts, clickedParentPage, closeModal, isIncludeSubPage]);
+ }, [selectedPage, closeModal, isIncludeSubPage, onSelected]);
- const parentPagePath = pathUtils.addTrailingSlash(nodePath.dirname(currentPage?.path ?? ''));
+ // Memoize heavy calculation - parent page path without trailing slash for matching
+ const parentPagePath = useMemo(() => {
+ const dn = dirname(currentPage?.path ?? '');
+ // Ensure root path is '/' not ''
+ return dn === '' ? '/' : dn;
+ }, [currentPage?.path]);
- const targetPathOrId = clickedParentPage?.path || parentPagePath;
+ // Memoize target path calculation
+ const targetPath = useMemo(() => (
+ selectedPage?.path || parentPagePath
+ ), [selectedPage?.path, parentPagePath]);
- const targetPath = clickedParentPage?.path || parentPagePath;
+ // Memoize checkbox handler
+ const handleIncludeSubPageChange = useCallback(() => {
+ setIsIncludeSubPage(!isIncludeSubPage);
+ }, [isIncludeSubPage]);
if (isGuestUser == null) {
return <>;
@@ -78,18 +84,24 @@ const PageSelectModalSubstance: FC = () => {
{t('page_select_modal.select_page_location')}
{/* 133px = 63px(ModalHeader) + 70px(ModalFooter) */}
-
+ {/* 133px = 63px(ModalHeader) + 70px(ModalFooter) */}
+
+ {scrollerElem && (
treeItemForModalSize}
+ scrollerElem={scrollerElem}
/>
-
-
+ )}
+
@@ -101,7 +113,7 @@ const PageSelectModalSubstance: FC = () => {
className="form-check-input"
name="fileUpload"
checked={isIncludeSubPage}
- onChange={() => setIsIncludeSubPage(!isIncludeSubPage)}
+ onChange={handleIncludeSubPageChange}
/>
{
};
export const PageSelectModal = (): JSX.Element => {
- const { data: pageSelectModalData, close: closePageSelectModal } = usePageSelectModal();
+ const pageSelectModalData = usePageSelectModalStatus();
+ const { close: closePageSelectModal } = usePageSelectModalActions();
const isOpen = pageSelectModalData?.isOpened ?? false;
if (!isOpen) {
diff --git a/apps/app/src/client/components/PageSelectModal/TreeItemForModal.tsx b/apps/app/src/client/components/PageSelectModal/TreeItemForModal.tsx
index 536236fb163..d882231eda6 100644
--- a/apps/app/src/client/components/PageSelectModal/TreeItemForModal.tsx
+++ b/apps/app/src/client/components/PageSelectModal/TreeItemForModal.tsx
@@ -1,27 +1,40 @@
import type { FC } from 'react';
+import { useCallback, useMemo } from 'react';
-import {
- TreeItemLayout, useNewPageInput, type TreeItemProps,
-} from '../TreeItem';
-
+import type { TreeItemProps } from '~/features/page-tree';
+import { TreeItemLayout } from '~/features/page-tree/components';
+import type { IPageForItem } from '~/interfaces/page';
+import { useSelectPageInModal } from '~/states/ui/modal/page-select';
import styles from './TreeItemForModal.module.scss';
-const moduleClass = styles['tree-item-for-modal'];
+const moduleClass = styles['tree-item-for-modal'] ?? '';
+export const treeItemForModalSize = 36; // in px
type TreeItemForModalProps = TreeItemProps & {
- key?: React.Key | null,
+ key?: React.Key | null;
};
export const TreeItemForModal: FC = (props) => {
+ const {
+ item,
+ targetPathOrId,
+ onToggle,
+ } = props;
- const { itemNode, targetPathOrId } = props;
- const { page } = itemNode;
+ const page = item.getItemData();
+ const selectPage = useSelectPageInModal();
- const { Input: NewPageInput, CreateButton: NewPageCreateButton } = useNewPageInput();
+ // Determine if this item is selected
+ const isSelected = useMemo(() => {
+ return page._id === targetPathOrId || page.path === targetPathOrId;
+ }, [page._id, page.path, targetPathOrId]);
- const isSelected = page._id === targetPathOrId || page.path === targetPathOrId;
+ // Handle click to select this page
+ const handleClick = useCallback((selectedPage: IPageForItem) => {
+ selectPage(selectedPage);
+ }, [selectPage]);
const itemClassNames = [
isSelected ? 'active' : '',
@@ -31,10 +44,9 @@ export const TreeItemForModal: FC = (props) => {
;
+
+export const PageSelectModalLazyLoaded = (): JSX.Element => {
+ const status = usePageSelectModalStatus();
+
+ const PageSelectModal = useLazyLoader(
+ 'page-select-modal',
+ () => import('./PageSelectModal').then(mod => ({ default: mod.PageSelectModal })),
+ status?.isOpened ?? false,
+ );
+
+ return PageSelectModal ? (null);
const { data: pageInfo } = useSWRxPageInfo(page._id);
- const { data: showPageSideAuthors } = useShowPageSideAuthors();
+ const showPageSideAuthors = useAtomValue(showPageSideAuthorsAtom);
const {
creator, lastUpdateUser, createdAt, updatedAt,
@@ -117,7 +122,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
)}
-
+
{/* Page list */}
{!isSharedUser && (
@@ -125,7 +130,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
icon={
subject }
label={t('page_list')}
// Do not display CountBadge if '/trash/*': https://github.com/growilabs/growi/pull/7600
- count={!isTrash && pageInfo != null ? (pageInfo as IPageInfoForOperation).descendantCount : undefined}
+ count={!isTrash && isIPageInfoForOperation(pageInfo) ? pageInfo.descendantCount : undefined}
offset={1}
onClick={() => openDescendantPageListModal(pagePath)}
/>
@@ -138,7 +143,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
chat}
label={t('comments')}
- count={pageInfo != null ? (pageInfo as IPageInfoForOperation).commentCount : undefined}
+ count={isIPageInfoForOperation(pageInfo) ? pageInfo.commentCount : undefined}
onClick={() => scroller.scrollTo('comments-container', { smooth: false, offset: -120 })}
/>
diff --git a/apps/app/src/client/components/PageStatusAlert.tsx b/apps/app/src/client/components/PageStatusAlert.tsx
index 188b59df2b2..56c14740c47 100644
--- a/apps/app/src/client/components/PageStatusAlert.tsx
+++ b/apps/app/src/client/components/PageStatusAlert.tsx
@@ -2,11 +2,11 @@ import React, { useCallback, type JSX } from 'react';
import { useTranslation } from 'next-i18next';
-import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
-import { useEditorMode } from '~/stores-universal/ui';
-import { usePageStatusAlert } from '~/stores/alert';
-import { useSWRxCurrentPage } from '~/stores/page';
-import { useRemoteRevisionId, useRemoteRevisionLastUpdateUser } from '~/stores/remote-latest-page';
+import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
+import { useRemoteRevisionLastUpdateUser } from '~/states/page';
+import { useEditorMode } from '~/states/ui/editor';
+import { usePageStatusAlertStatus } from '~/states/ui/modal/page-status-alert';
+import { useIsRevisionOutdated } from '~/stores/page';
import { Username } from '../../components/User/Username';
@@ -15,13 +15,12 @@ import styles from './PageStatusAlert.module.scss';
export const PageStatusAlert = (): JSX.Element => {
const { t } = useTranslation();
- const { data: editorMode } = useEditorMode();
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: pageStatusAlertData } = usePageStatusAlert();
- const { data: remoteRevisionId } = useRemoteRevisionId();
- const { data: remoteRevisionLastUpdateUser } = useRemoteRevisionLastUpdateUser();
- const { data: pageData } = useSWRxCurrentPage();
+ const { editorMode } = useEditorMode();
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const pageStatusAlertData = usePageStatusAlertStatus();
+ const isRevisionOutdated = useIsRevisionOutdated();
+ const remoteRevisionLastUpdateUser = useRemoteRevisionLastUpdateUser();
const onClickRefreshPage = useCallback(() => {
pageStatusAlertData?.onRefleshPage?.();
@@ -34,9 +33,6 @@ export const PageStatusAlert = (): JSX.Element => {
const hasResolveConflictHandler = pageStatusAlertData?.onResolveConflict != null;
const hasRefreshPageHandler = pageStatusAlertData?.onRefleshPage != null;
- const currentRevisionId = pageData?.revision?._id;
- const isRevisionOutdated = (currentRevisionId != null || remoteRevisionId != null) && currentRevisionId !== remoteRevisionId;
-
if (!pageStatusAlertData?.isOpen || !!isGuestUser || !!isReadOnlyUser || !isRevisionOutdated) {
return <>;
}
@@ -49,7 +45,7 @@ export const PageStatusAlert = (): JSX.Element => {
- { hasResolveConflictHandler
+ {hasResolveConflictHandler
? <>{t('modal_resolve_conflict.file_conflicting_with_newer_remote')}
: <> = (props: TagE
const pageId = tagEditModalData.pageId;
const revisionId = tagEditModalData.revisionId;
const updateStateAfterSave = useUpdateStateAfterSave(pageId);
-
- const [tags, setTags] = useState([]);
+ const { mutate: mutateTags } = useSWRxTagsInfo(pageId);
+ const [tags, setTags] = useState(initTags ?? []);
// use to take initTags when redirect to other page
useEffect(() => {
setTags(initTags);
}, [initTags]);
- const handleSubmit = useCallback(async() => {
+ // Memoized API request data
+ const updateTagsData = useMemo(() => ({
+ pageId,
+ revisionId,
+ tags,
+ }), [pageId, revisionId, tags]);
+ const handleSubmit = useCallback(async() => {
try {
- await apiPost('/tags.update', { pageId, revisionId, tags });
+ await apiPost('/tags.update', updateTagsData);
+ mutateTags();
updateStateAfterSave?.();
toastSuccess('updated tags successfully');
@@ -48,7 +56,12 @@ const TagEditModalSubstance: React.FC = (props: TagE
catch (err) {
toastError(err);
}
- }, [closeTagEditModal, tags, pageId, revisionId, updateStateAfterSave]);
+ }, [updateTagsData, mutateTags, updateStateAfterSave, closeTagEditModal]);
+
+ // Memoized tags update handler
+ const handleTagsUpdate = useCallback((newTags: string[]) => {
+ setTags(newTags);
+ }, []);
return (
@@ -56,7 +69,7 @@ const TagEditModalSubstance: React.FC = (props: TagE
{t('tag_edit_modal.edit_tags')}
- setTags(tags)} autoFocus />
+
@@ -69,7 +82,8 @@ const TagEditModalSubstance: React.FC = (props: TagE
};
export const TagEditModal: React.FC = () => {
- const { data: tagEditModalData, close: closeTagEditModal } = useTagEditModal();
+ const tagEditModalData = useTagEditModalStatus();
+ const { close: closeTagEditModal } = useTagEditModalActions();
if (!tagEditModalData?.isOpen) {
return <>;
diff --git a/apps/app/src/client/components/PageTags/TagsInput.module.scss b/apps/app/src/client/components/PageTags/TagEditModal/TagsInput.module.scss
similarity index 100%
rename from apps/app/src/client/components/PageTags/TagsInput.module.scss
rename to apps/app/src/client/components/PageTags/TagEditModal/TagsInput.module.scss
diff --git a/apps/app/src/client/components/PageTags/TagsInput.tsx b/apps/app/src/client/components/PageTags/TagEditModal/TagsInput.tsx
similarity index 100%
rename from apps/app/src/client/components/PageTags/TagsInput.tsx
rename to apps/app/src/client/components/PageTags/TagEditModal/TagsInput.tsx
diff --git a/apps/app/src/client/components/PageTags/TagEditModal/dynamic.tsx b/apps/app/src/client/components/PageTags/TagEditModal/dynamic.tsx
new file mode 100644
index 00000000000..10357d7d7d2
--- /dev/null
+++ b/apps/app/src/client/components/PageTags/TagEditModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useTagEditModalStatus } from '~/states/ui/modal/tag-edit';
+
+type TagEditModalProps = Record;
+
+export const TagEditModalLazyLoaded = (): JSX.Element => {
+ const status = useTagEditModalStatus();
+
+ const TagEditModal = useLazyLoader(
+ 'tag-edit-modal',
+ () => import('./TagEditModal').then(mod => ({ default: mod.TagEditModal })),
+ status?.isOpen ?? false,
+ );
+
+ return TagEditModal ?
-
- );
- }
-
- const { took, total, hitsCount } = searchResult.meta;
- const leftNum = offset + 1;
- const rightNum = offset + hitsCount;
-
- const isSuccess = migrationStatus.migratablePagesCount === 0;
-
- if (isSuccess) {
- return (
-
-
-
{t('private_legacy_pages.nopages_title')}
-
- {t('private_legacy_pages.nopages_desc1')}
-
-
-
- {t('search_result.result_meta')}
- {`${leftNum}-${rightNum}`} / {total}
- { took != null && (
- ({took}ms)
- ) }
-
-
-
- {t('search_result.number_of_list_to_display')}
-
-
onPagingSizeChanged(Number(e.target.value))}
- >
- {[20, 50, 100, 200].map((limit) => {
- return {limit} {t('search_result.page_number_unit')} ;
- })}
-
-
-
-
-
{t('private_legacy_pages.alert_title')}
-
- {t('private_legacy_pages.alert_desc1', { delete_all_selected_page: t('search_result.delete_all_selected_page') })}
-
-
| void,
-}
-const ConvertByPathModal = React.memo((props: ConvertByPathModalProps): JSX.Element => {
- const { t } = useTranslation();
-
- const [currentInput, setInput] = useState('');
- const [checked, setChecked] = useState(false);
-
- useEffect(() => {
- setChecked(false);
- }, [props.isOpen]);
-
- return (
-
-
- { t('private_legacy_pages.by_path_modal.title') }
-
-
- {t('private_legacy_pages.by_path_modal.description')}
-
- { t('private_legacy_pages.by_path_modal.alert') }
-
-
-
-
- { t('private_legacy_pages.by_path_modal.checkbox_label') }
-
- props.onSubmit?.(currentInput)}
- >
- refresh
- { t('private_legacy_pages.by_path_modal.button_label') }
-
-
-
- );
-});
-
-ConvertByPathModal.displayName = 'ConvertByPathModal';
-
-/**
- * LegacyPage
- */
-
-const PrivateLegacyPages = (): JSX.Element => {
- const { t } = useTranslation();
-
- const { data: isAdmin } = useIsAdmin();
-
- const [keyword, setKeyword] = useState(initQ);
- const [offset, setOffset] = useState(0);
- const [limit, setLimit] = useState(INITIAL_PAGING_SIZE);
- const [isOpenConvertModal, setOpenConvertModal] = useState(false);
-
- const [isControlEnabled, setControlEnabled] = useState(false);
-
- const selectAllControlRef = useRef(null);
- const searchPageBaseRef = useRef(null);
-
- const { data, conditions, mutate } = useSWRxSearch(keyword, 'PrivateLegacyPages', {
- offset,
- limit,
- includeUserPages: true,
- includeTrashPages: false,
- });
-
- const { data: migrationStatus, mutate: mutateMigrationStatus } = useSWRxV5MigrationStatus();
-
- const searchInvokedHandler = useCallback((_keyword: string) => {
- mutateMigrationStatus();
- setKeyword(_keyword);
- setOffset(0);
- }, [mutateMigrationStatus]);
-
- const { open: openModal, close: closeModal } = usePrivateLegacyPagesMigrationModal();
- const { data: socket } = useGlobalSocket();
-
- useEffect(() => {
- socket?.on(SocketEventName.PageMigrationSuccess, () => {
- toastSuccess(t('private_legacy_pages.toaster.page_migration_succeeded'));
- });
-
- socket?.on(SocketEventName.PageMigrationError, (data?: PageMigrationErrorData) => {
- if (data == null || data.paths.length === 0) {
- toastError(t('private_legacy_pages.toaster.page_migration_failed'));
- }
- else {
- const errorPaths = data.paths.length > 3
- ? `${data.paths.slice(0, 3).join(', ')}...`
- : data.paths.join(', ');
- toastError(t('private_legacy_pages.toaster.page_migration_failed_with_paths', { paths: errorPaths }));
- }
- });
-
- return () => {
- socket?.off(SocketEventName.PageMigrationSuccess);
- socket?.off(SocketEventName.PageMigrationError);
- };
- }, [socket, t]);
-
- const selectAllCheckboxChangedHandler = useCallback((isChecked: boolean) => {
- const instance = searchPageBaseRef.current;
-
- if (instance == null) {
- return;
- }
-
- if (isChecked) {
- instance.selectAll();
- setControlEnabled(true);
- }
- else {
- instance.deselectAll();
- setControlEnabled(false);
- }
- }, []);
-
- const selectedPagesByCheckboxesChangedHandler = useCallback((selectedCount: number, totalCount: number) => {
- const instance = selectAllControlRef.current;
-
- if (instance == null) {
- return;
- }
-
- if (selectedCount === 0) {
- instance.deselect();
- setControlEnabled(false);
- }
- else if (selectedCount === totalCount) {
- instance.select();
- setControlEnabled(true);
- }
- else {
- instance.setIndeterminate();
- setControlEnabled(true);
- }
- }, []);
-
- // for bulk deletion
- const deleteAllButtonClickedHandler = usePageDeleteModalForBulkDeletion(data, searchPageBaseRef, () => mutate());
-
- const convertMenuItemClickedHandler = useCallback(() => {
- if (data == null) {
- return;
- }
-
- const instance = searchPageBaseRef.current;
- if (instance == null || instance.getSelectedPageIds == null) {
- return;
- }
-
- const selectedPageIds = instance.getSelectedPageIds();
-
- if (selectedPageIds.size === 0) {
- return;
- }
-
- const selectedPages = data.data
- .filter(pageWithMeta => selectedPageIds.has(pageWithMeta.data._id))
- .map(pageWithMeta => ({ pageId: pageWithMeta.data._id, path: pageWithMeta.data.path } as ILegacyPrivatePage));
-
- openModal(
- selectedPages,
- () => {
- toastSuccess(t('Successfully requested'));
- closeModal();
- mutateMigrationStatus();
- mutate();
- mutatePageTree();
- },
- );
- }, [data, openModal, t, closeModal, mutateMigrationStatus, mutate]);
-
- const pagingSizeChangedHandler = useCallback((pagingSize: number) => {
- setOffset(0);
- setLimit(pagingSize);
- mutate();
- }, [mutate]);
-
- const pagingNumberChangedHandler = useCallback((activePage: number) => {
- setOffset((activePage - 1) * limit);
- mutate();
- }, [limit, mutate]);
-
- const openConvertModalHandler = useCallback(() => {
- if (!isAdmin) { return }
- setOpenConvertModal(true);
- }, [isAdmin]);
-
- const hitsCount = data?.meta.hitsCount;
-
- const renderOpenModalButton = useCallback(() => {
- return (
-
- openConvertModalHandler()}>
- {t('private_legacy_pages.input_path_to_convert')}
-
-
- );
- }, [t, openConvertModalHandler]);
-
- const extraControls = useMemo(() => {
- const isCheckboxDisabled = hitsCount === 0;
-
- return (
-
-
-
-
-
- {t('private_legacy_pages.bulk_operation')}
-
-
-
- refresh
- {t('private_legacy_pages.convert_all_selected_pages')}
-
-
-
- delete
- {t('search_result.delete_all_selected_page')}
-
-
-
-
-
-
- {isAdmin && renderOpenModalButton()}
-
setOpenConvertModal(false)}
- onSubmit={async(convertPath: string) => {
- try {
- await apiv3Post('/pages/convert-pages-by-path', {
- convertPath,
- });
- toastSuccess(t('private_legacy_pages.by_path_modal.success'));
- setOpenConvertModal(false);
- mutate();
- mutatePageTree();
- }
- catch (errs) {
- if (errs.length === 1) {
- switch (errs[0].code) {
- case V5ConversionErrCode.GRANT_INVALID:
- toastError(t('private_legacy_pages.by_path_modal.error_grant_invalid'));
- break;
- case V5ConversionErrCode.PAGE_NOT_FOUND:
- toastError(t('private_legacy_pages.by_path_modal.error_page_not_found'));
- break;
- case V5ConversionErrCode.DUPLICATE_PAGES_FOUND:
- toastError(t('private_legacy_pages.by_path_modal.error_duplicate_pages_found'));
- break;
- default:
- toastError(t('private_legacy_pages.by_path_modal.error'));
- }
- }
- else {
- toastError(t('private_legacy_pages.by_path_modal.error'));
- }
- }
- }}
- />
-
- );
-};
-
-export default PrivateLegacyPages;
diff --git a/apps/app/src/client/components/PrivateLegacyPagesMigrationModal.tsx b/apps/app/src/client/components/PrivateLegacyPagesMigrationModal.tsx
index 7ed72015192..ac6f61be6ad 100644
--- a/apps/app/src/client/components/PrivateLegacyPagesMigrationModal.tsx
+++ b/apps/app/src/client/components/PrivateLegacyPagesMigrationModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, type JSX } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
import { useTranslation } from 'next-i18next';
import {
@@ -6,29 +6,39 @@ import {
} from 'reactstrap';
import { apiv3Post } from '~/client/util/apiv3-client';
-import { usePrivateLegacyPagesMigrationModal } from '~/stores/modal';
+import type { ILegacyPrivatePage, PrivateLegacyPagesMigrationModalSubmitedHandler } from '~/states/ui/modal/private-legacy-pages-migration';
+import { usePrivateLegacyPagesMigrationModalActions, usePrivateLegacyPagesMigrationModalStatus } from '~/states/ui/modal/private-legacy-pages-migration';
import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
-export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
- const { t } = useTranslation();
-
- const { data: status, close } = usePrivateLegacyPagesMigrationModal();
+/**
+ * PrivateLegacyPagesMigrationModalSubstance - Presentation component (all logic here)
+ */
+type PrivateLegacyPagesMigrationModalSubstanceProps = {
+ status: {
+ isOpened: boolean;
+ pages?: ILegacyPrivatePage[];
+ onSubmit?: PrivateLegacyPagesMigrationModalSubmitedHandler;
+ } | null;
+ close: () => void;
+};
- const isOpened = status?.isOpened ?? false;
+const PrivateLegacyPagesMigrationModalSubstance = ({ status, close }: PrivateLegacyPagesMigrationModalSubstanceProps): React.JSX.Element => {
+ const { t } = useTranslation();
const [isRecursively, setIsRecursively] = useState(true);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [errs, setErrs] = useState(null);
- async function submit() {
+ // Memoize submit handler
+ const submit = useCallback(async() => {
if (status == null || status.pages == null || status.pages.length === 0) {
return;
}
- const { pages, onSubmited } = status;
+ const { pages, onSubmit } = status;
const pageIds = pages.map(page => page.pageId);
try {
await apiv3Post('/pages/legacy-pages-migration', {
@@ -36,16 +46,22 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
isRecursively: isRecursively ? true : undefined,
});
- if (onSubmited != null) {
- onSubmited(pages, isRecursively);
+ if (onSubmit != null) {
+ onSubmit(pages, isRecursively);
}
}
catch (err) {
setErrs([err]);
}
- }
+ }, [status, isRecursively]);
+
+ // Memoize checkbox handler
+ const handleRecursivelyChange = useCallback((e: React.ChangeEvent) => {
+ setIsRecursively(e.target.checked);
+ }, []);
- function renderForm() {
+ // Memoize form rendering
+ const renderForm = useMemo(() => {
return (
{ t('private_legacy_pages.modal.convert_recursively_label') }
@@ -63,17 +77,18 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
);
- }
+ }, [isRecursively, handleRecursivelyChange, t]);
- const renderPageIds = () => {
+ // Memoize page IDs rendering
+ const renderPageIds = useMemo(() => {
if (status != null && status.pages != null) {
return status.pages.map(page => { page.path }
);
}
return <>;
- };
+ }, [status]);
return (
-
+
{ t('private_legacy_pages.modal.title') }
@@ -82,9 +97,9 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
{ t('private_legacy_pages.modal.converting_pages') }:
- {renderForm()}
+ {renderForm}
-
+
+ );
+};
+
+/**
+ * PrivateLegacyPagesMigrationModal - Container component (lightweight, always rendered)
+ */
+export const PrivateLegacyPagesMigrationModal = (): React.JSX.Element => {
+ const status = usePrivateLegacyPagesMigrationModalStatus();
+ const { close } = usePrivateLegacyPagesMigrationModalActions();
+ const isOpened = status?.isOpened ?? false;
+ return (
+
+ {isOpened && (
+
);
};
diff --git a/apps/app/src/client/components/PutbackPageModal.jsx b/apps/app/src/client/components/PutbackPageModal.jsx
deleted file mode 100644
index c34dfadd733..00000000000
--- a/apps/app/src/client/components/PutbackPageModal.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-
-import { useTranslation } from 'next-i18next';
-import {
- Modal, ModalHeader, ModalBody, ModalFooter,
-} from 'reactstrap';
-
-import { apiPost } from '~/client/util/apiv1-client';
-import { usePutBackPageModal } from '~/stores/modal';
-import { mutateAllPageInfo } from '~/stores/page';
-
-import ApiErrorMessageList from './PageManagement/ApiErrorMessageList';
-
-const PutBackPageModal = () => {
- const { t } = useTranslation();
-
- const { data: pageDataToRevert, close: closePutBackPageModal } = usePutBackPageModal();
- const { isOpened, page } = pageDataToRevert;
- const { pageId, path } = page;
- const onPutBacked = pageDataToRevert.opts?.onPutBacked;
-
- const [errs, setErrs] = useState(null);
- const [targetPath, setTargetPath] = useState(null);
-
- const [isPutbackRecursively, setIsPutbackRecursively] = useState(true);
-
- function changeIsPutbackRecursivelyHandler() {
- setIsPutbackRecursively(!isPutbackRecursively);
- }
-
- async function putbackPageButtonHandler() {
- setErrs(null);
-
- try {
- // control flag
- // If is it not true, Request value must be `null`.
- const recursively = isPutbackRecursively ? true : null;
-
- const response = await apiPost('/pages.revertRemove', {
- page_id: pageId,
- recursively,
- });
- mutateAllPageInfo();
-
- if (onPutBacked != null) {
- onPutBacked(response.page.path);
- }
- closePutBackPageModal();
- }
- catch (err) {
- setTargetPath(err.data);
- setErrs([err]);
- }
- }
-
- const HeaderContent = () => {
- if (!isOpened) {
- return <>;
- }
- return (
- <>
-
undo { t('modal_putback.label.Put Back Page') }
-
- );
- };
-
- const BodyContent = () => {
- if (!isOpened) {
- return <>;
- }
- return (
- <>
-
- {t('modal_putback.label.Put Back Page')}: {path}
-
-
-
-
- { t('modal_putback.label.recursively') }
-
-
- { path }{ t('modal_putback.help.recursively') }
-
-
-
- );
-
- };
- const FooterContent = () => {
- if (!isOpened) {
- return <>;
- }
- return (
- <>
-
-
- undo { t('Put Back') }
-
-
- );
- };
-
- const closeModalHandler = useCallback(() => {
- closePutBackPageModal();
- setErrs(null);
- }, [closePutBackPageModal]);
-
- return (
-
-
-
-
-
-
-
-
- );
-
-};
-
-export default PutBackPageModal;
diff --git a/apps/app/src/client/components/PutbackPageModal/PutbackPageModal.tsx b/apps/app/src/client/components/PutbackPageModal/PutbackPageModal.tsx
new file mode 100644
index 00000000000..c2f602b99e3
--- /dev/null
+++ b/apps/app/src/client/components/PutbackPageModal/PutbackPageModal.tsx
@@ -0,0 +1,156 @@
+import type { FC } from 'react';
+import { useState, useCallback, useMemo } from 'react';
+
+import { useTranslation } from 'next-i18next';
+import {
+ Modal, ModalHeader, ModalBody, ModalFooter,
+} from 'reactstrap';
+
+import { apiPost } from '~/client/util/apiv1-client';
+import type { PutBackPageModalStatus } from '~/states/ui/modal/put-back-page';
+import { usePutBackPageModalActions, usePutBackPageModalStatus } from '~/states/ui/modal/put-back-page';
+import { mutateAllPageInfo } from '~/stores/page';
+
+import ApiErrorMessageList from '../PageManagement/ApiErrorMessageList';
+
+type ApiError = {
+ data?: string;
+};
+
+type ApiResponse = {
+ page: {
+ path: string;
+ };
+};
+
+type PutBackPageModalSubstanceProps = {
+ pageDataToRevert: PutBackPageModalStatus & { page: NonNullable
};
+ closePutBackPageModal: () => void;
+};
+
+const PutBackPageModalSubstance: FC = ({ pageDataToRevert, closePutBackPageModal }) => {
+ const { t } = useTranslation();
+
+ const { page } = pageDataToRevert;
+ const { pageId, path } = page;
+ const onPutBacked = pageDataToRevert.opts?.onPutBacked;
+
+ const [errs, setErrs] = useState(null);
+ const [targetPath, setTargetPath] = useState(null);
+
+ const [isPutbackRecursively, setIsPutbackRecursively] = useState(true);
+
+ const changeIsPutbackRecursivelyHandler = useCallback(() => {
+ setIsPutbackRecursively(!isPutbackRecursively);
+ }, [isPutbackRecursively]);
+
+ const putbackPageButtonHandler = useCallback(async() => {
+ setErrs(null);
+
+ try {
+ // control flag
+ // If is it not true, Request value must be `null`.
+ const recursively = isPutbackRecursively ? true : null;
+
+ const response = await apiPost('/pages.revertRemove', {
+ page_id: pageId,
+ recursively,
+ });
+ mutateAllPageInfo();
+
+ if (onPutBacked != null) {
+ onPutBacked(response.page.path);
+ }
+ closePutBackPageModal();
+ }
+ catch (err) {
+ setTargetPath((err as ApiError).data ?? null);
+ setErrs([err as ApiError]);
+ }
+ }, [pageId, isPutbackRecursively, onPutBacked, closePutBackPageModal]);
+
+ const closeModalHandler = useCallback(() => {
+ closePutBackPageModal();
+ setErrs(null);
+ }, [closePutBackPageModal]);
+
+ const headerContent = useMemo(() => (
+ <>
+ undo { t('modal_putback.label.Put Back Page') }
+
+ ), [t]);
+
+ const bodyContent = useMemo(() => (
+ <>
+
+ {t('modal_putback.label.Put Back Page')}: {path}
+
+
+
+
+ { t('modal_putback.label.recursively') }
+
+
+ { path }{ t('modal_putback.help.recursively') }
+
+
+ undo { t('Put Back') }
+
+
+ ), [errs, targetPath, putbackPageButtonHandler, t]);
+
+ return (
+ <>
+
+ {headerContent}
+
+
+ {bodyContent}
+
+
+ {footerContent}
+
+
+ );
+};
+
+const PutBackPageModal: FC = () => {
+ const pageDataToRevert = usePutBackPageModalStatus();
+ const { close: closePutBackPageModal } = usePutBackPageModalActions();
+ const { isOpened, page } = pageDataToRevert;
+
+ const closeModalHandler = useCallback(() => {
+ closePutBackPageModal();
+ }, [closePutBackPageModal]);
+
+ if (page == null) {
+ return <>;
+ }
+
+ return (
+
+ {isOpened && (
+
+ );
+};
+
+export { PutBackPageModal };
diff --git a/apps/app/src/client/components/PutbackPageModal/dynamic.tsx b/apps/app/src/client/components/PutbackPageModal/dynamic.tsx
new file mode 100644
index 00000000000..fe24202974a
--- /dev/null
+++ b/apps/app/src/client/components/PutbackPageModal/dynamic.tsx
@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { usePutBackPageModalStatus } from '~/states/ui/modal/put-back-page';
+
+type PutBackPageModalProps = Record;
+
+export const PutBackPageModalLazyLoaded = (): JSX.Element => {
+ const status = usePutBackPageModalStatus();
+
+ const PutBackPageModal = useLazyLoader(
+ 'put-back-page-modal',
+ () => import('./PutbackPageModal').then(mod => ({ default: mod.PutBackPageModal })),
+ status?.isOpened ?? false,
+ );
+
+ return PutBackPageModal ? ('launchDrawioModal', {
+ detail: {
+ bol, eol, drawioMxFile: mxfile,
+ },
+ }));
}, [bol, eol, mxfile]);
const renderingStartHandler = useCallback(() => {
diff --git a/apps/app/src/client/components/ReactMarkdownComponents/Header.tsx b/apps/app/src/client/components/ReactMarkdownComponents/Header.tsx
index fcb44442185..a1d6b0ef075 100644
--- a/apps/app/src/client/components/ReactMarkdownComponents/Header.tsx
+++ b/apps/app/src/client/components/ReactMarkdownComponents/Header.tsx
@@ -2,16 +2,15 @@ import {
useCallback, useEffect, useState, type JSX,
} from 'react';
-import type EventEmitter from 'events';
-
+import { globalEventTarget } from '@growi/core/dist/utils';
import type { Element } from 'hast';
import { useRouter } from 'next/router';
import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
-import {
- useIsGuestUser, useIsReadOnlyUser, useIsSharedUser, useShareLinkId,
-} from '~/stores-universal/context';
-import { useCurrentPageYjsData } from '~/stores/yjs';
+import { useCurrentPageYjsData, useCurrentPageYjsDataLoading } from '~/features/collaborative-editor/states';
+import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
+import { useShareLinkId } from '~/states/page/hooks';
+import type { ReservedNextCaretLineEventDetail } from '~/states/ui/editor/reserved-next-caret-line';
import loggerFactory from '~/utils/logger';
@@ -21,15 +20,14 @@ import styles from './Header.module.scss';
const logger = loggerFactory('growi:components:Header');
const moduleClass = styles['revision-head'] ?? '';
-declare global {
- // eslint-disable-next-line vars-on-top, no-var
- var globalEmitter: EventEmitter;
-}
-
-function setCaretLine(line?: number): void {
- if (line != null) {
- globalEmitter.emit('reservedNextCaretLine', line);
+function setCaretLine(lineNumber?: number): void {
+ if (lineNumber != null) {
+ globalEventTarget.dispatchEvent(new CustomEvent('reservedNextCaretLine', {
+ detail: {
+ lineNumber,
+ },
+ }));
}
}
@@ -64,11 +62,12 @@ export const Header = (props: HeaderProps): JSX.Element => {
node, id, children,
} = props;
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: isSharedUser } = useIsSharedUser();
- const { data: shareLinkId } = useShareLinkId();
- const { data: currentPageYjsData, isLoading: isLoadingCurrentPageYjsData } = useCurrentPageYjsData();
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const isSharedUser = useIsSharedUser();
+ const shareLinkId = useShareLinkId();
+ const currentPageYjsData = useCurrentPageYjsData();
+ const isLoadingCurrentPageYjsData = useCurrentPageYjsDataLoading();
const router = useRouter();
diff --git a/apps/app/src/client/components/ReactMarkdownComponents/RichAttachment.tsx b/apps/app/src/client/components/ReactMarkdownComponents/RichAttachment.tsx
index 2d43d69903e..0b1068a3bcd 100644
--- a/apps/app/src/client/components/ReactMarkdownComponents/RichAttachment.tsx
+++ b/apps/app/src/client/components/ReactMarkdownComponents/RichAttachment.tsx
@@ -5,9 +5,9 @@ import { useTranslation } from 'next-i18next';
import Image from 'next/image';
import prettyBytes from 'pretty-bytes';
-import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/stores-universal/context';
+import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
+import { useDeleteAttachmentModalActions } from '~/states/ui/modal/delete-attachment';
import { useSWRxAttachment } from '~/stores/attachment';
-import { useDeleteAttachmentModal } from '~/stores/modal';
import styles from './RichAttachment.module.scss';
@@ -21,11 +21,11 @@ export const RichAttachment = React.memo((props: RichAttachmentProps) => {
const { attachmentId, attachmentName } = props;
const { t } = useTranslation();
const { data: attachment, remove } = useSWRxAttachment(attachmentId);
- const { open: openDeleteAttachmentModal } = useDeleteAttachmentModal();
+ const { open: openDeleteAttachmentModal } = useDeleteAttachmentModalActions();
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isSharedUser } = useIsSharedUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
+ const isGuestUser = useIsGuestUser();
+ const isSharedUser = useIsSharedUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
const showTrashButton = isGuestUser === false && isSharedUser === false && isReadOnlyUser === false;
diff --git a/apps/app/src/client/components/ReactMarkdownComponents/TableWithEditButton.tsx b/apps/app/src/client/components/ReactMarkdownComponents/TableWithEditButton.tsx
index dc14746683c..ea044eeea65 100644
--- a/apps/app/src/client/components/ReactMarkdownComponents/TableWithEditButton.tsx
+++ b/apps/app/src/client/components/ReactMarkdownComponents/TableWithEditButton.tsx
@@ -1,21 +1,16 @@
import React, { useCallback, type JSX } from 'react';
-import type EventEmitter from 'events';
-
+import { globalEventTarget } from '@growi/core/dist/utils';
import type { Element } from 'hast';
-import {
- useIsGuestUser, useIsReadOnlyUser, useIsSharedUser, useShareLinkId,
-} from '~/stores-universal/context';
+import type { LaunchHandsonTableModalEventDetail } from '~/client/interfaces/handsontable-modal';
+import { useCurrentPageYjsData } from '~/features/collaborative-editor/states';
+import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
+import { useShareLinkId } from '~/states/page/hooks';
import { useIsRevisionOutdated } from '~/stores/page';
-import { useCurrentPageYjsData } from '~/stores/yjs';
import styles from './TableWithEditButton.module.scss';
-declare global {
- // eslint-disable-next-line vars-on-top, no-var
- var globalEmitter: EventEmitter;
-}
type TableWithEditButtonProps = {
children: React.ReactNode,
@@ -26,18 +21,23 @@ type TableWithEditButtonProps = {
const TableWithEditButtonNoMemorized = (props: TableWithEditButtonProps): JSX.Element => {
const { children, node, className } = props;
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: isSharedUser } = useIsSharedUser();
- const { data: shareLinkId } = useShareLinkId();
- const { data: isRevisionOutdated } = useIsRevisionOutdated();
- const { data: currentPageYjsData } = useCurrentPageYjsData();
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const isSharedUser = useIsSharedUser();
+ const shareLinkId = useShareLinkId();
+ const isRevisionOutdated = useIsRevisionOutdated();
+ const currentPageYjsData = useCurrentPageYjsData();
- const bol = node.position?.start.line;
- const eol = node.position?.end.line;
+ const bol = node.position?.start.line ?? 0;
+ const eol = node.position?.end.line ?? 0;
const editButtonClickHandler = useCallback(() => {
- globalEmitter.emit('launchHandsonTableModal', bol, eol);
+ globalEventTarget.dispatchEvent(new CustomEvent('launchHandsonTableModal', {
+ detail: {
+ bol,
+ eol,
+ },
+ }));
}, [bol, eol]);
const isNoEditingUsers = currentPageYjsData?.awarenessStateSize == null || currentPageYjsData?.awarenessStateSize === 0;
diff --git a/apps/app/src/client/components/RecentActivity/ActivityListItem.tsx b/apps/app/src/client/components/RecentActivity/ActivityListItem.tsx
new file mode 100644
index 00000000000..abb49289922
--- /dev/null
+++ b/apps/app/src/client/components/RecentActivity/ActivityListItem.tsx
@@ -0,0 +1,81 @@
+import { formatDistanceToNow } from 'date-fns';
+import { useTranslation } from 'next-i18next';
+import { type Locale } from 'date-fns/locale';
+import { getLocale } from '~/server/util/locale-utils';
+import type { ActivityHasUserId, SupportedActivityActionType } from '~/interfaces/activity';
+import { ActivityLogActions } from '~/interfaces/activity';
+
+
+export const ActivityActionTranslationMap: Record<
+ SupportedActivityActionType,
+ string
+> = {
+ [ActivityLogActions.ACTION_PAGE_CREATE]: 'page_create',
+ [ActivityLogActions.ACTION_PAGE_UPDATE]: 'page_update',
+ [ActivityLogActions.ACTION_PAGE_DELETE]: 'page_delete',
+ [ActivityLogActions.ACTION_PAGE_DELETE_COMPLETELY]: 'page_delete_completely',
+ [ActivityLogActions.ACTION_PAGE_RENAME]: 'page_rename',
+ [ActivityLogActions.ACTION_PAGE_REVERT]: 'page_revert',
+ [ActivityLogActions.ACTION_PAGE_DUPLICATE]: 'page_duplicate',
+ [ActivityLogActions.ACTION_PAGE_LIKE]: 'page_like',
+ [ActivityLogActions.ACTION_COMMENT_CREATE]: 'comment_create',
+};
+
+export const IconActivityTranslationMap: Record<
+ SupportedActivityActionType,
+ string
+> = {
+ [ActivityLogActions.ACTION_PAGE_CREATE]: 'add_box',
+ [ActivityLogActions.ACTION_PAGE_UPDATE]: 'edit',
+ [ActivityLogActions.ACTION_PAGE_DELETE]: 'delete',
+ [ActivityLogActions.ACTION_PAGE_DELETE_COMPLETELY]: 'delete_forever',
+ [ActivityLogActions.ACTION_PAGE_RENAME]: 'label',
+ [ActivityLogActions.ACTION_PAGE_REVERT]: 'undo',
+ [ActivityLogActions.ACTION_PAGE_DUPLICATE]: 'content_copy',
+ [ActivityLogActions.ACTION_PAGE_LIKE]: 'favorite',
+ [ActivityLogActions.ACTION_COMMENT_CREATE]: 'comment',
+};
+
+const translateAction = (action: SupportedActivityActionType): string => {
+ return ActivityActionTranslationMap[action] || 'unknown_action';
+};
+
+const setIcon = (action: SupportedActivityActionType): string => {
+ return IconActivityTranslationMap[action] || 'question_mark';
+};
+
+const calculateTimePassed = (date: Date, locale: Locale): string => {
+ const timePassed = formatDistanceToNow(date, {
+ addSuffix: true,
+ locale,
+ });
+
+ return timePassed;
+};
+
+
+export const ActivityListItem = ({ activity }: { activity: ActivityHasUserId }): JSX.Element => {
+ const { t, i18n } = useTranslation();
+ const currentLangCode = i18n.language;
+ const dateFnsLocale = getLocale(currentLangCode);
+
+ const action = activity.action as SupportedActivityActionType;
+ const keyToTranslate = translateAction(action);
+ const fullKeyPath = `user_home_page.${keyToTranslate}`;
+
+ return (
+
+
+ {setIcon(action)}
+
+
+ {' '}{t(fullKeyPath)}
+
+
+
+ {calculateTimePassed(activity.createdAt, dateFnsLocale)}
+
+
+
([]);
+ const [activePage, setActivePage] = useState(1);
+ const [limit] = useState(10);
+ const [offset, setOffset] = useState(0);
+
+ const { data: paginatedData, error } = useSWRxRecentActivity(limit, offset, userId);
+
+ const handlePage = useCallback(async(selectedPage: number) => {
+ const newOffset = (selectedPage - 1) * limit;
+
+ setOffset(newOffset);
+ setActivePage(selectedPage);
+ }, [limit]);
+
+ useEffect(() => {
+ if (error) {
+ logger.error('Failed to fetch recent activity data', error);
+ toastError(error);
+ return;
+ }
+
+ if (paginatedData) {
+ const activitiesWithPages = paginatedData.docs
+ .filter(hasUser);
+
+ setActivities(activitiesWithPages);
+ }
+ }, [paginatedData, error]);
+
+ const totalItemsCount = paginatedData?.totalDocs || 0;
+ const needsPagination = totalItemsCount > limit;
+
+ return (
+
+
+ {activities.map(activity => (
+
+
+ ))}
+
+
+ {needsPagination && (
+
+ )}
+
= (props: Props) => {
-
- const { t } = useTranslation('');
-
- const {
- isOpen, includeUserPages, includeTrashPages,
- onClose,
- onIncludeUserPagesSwitched,
- onIncludeTrashPagesSwitched,
- } = props;
-
- const onCloseModal = () => {
- if (onClose != null) {
- onClose();
- }
- };
-
- const includeUserPagesChangeHandler = (isChecked: boolean) => {
- if (onIncludeUserPagesSwitched != null) {
- onIncludeUserPagesSwitched(isChecked);
- }
- };
-
- const includeTrashPagesChangeHandler = (isChecked: boolean) => {
- if (onIncludeTrashPagesSwitched != null) {
- onIncludeTrashPagesSwitched(isChecked);
- }
- };
-
- return (
-
-
- Search Option
-
-
-
-
-
- );
-};
-
-export default SearchOptionModal;
diff --git a/apps/app/src/client/components/SearchPage/SearchResultList.tsx b/apps/app/src/client/components/SearchPage/SearchResultList.tsx
deleted file mode 100644
index 3298e36aa49..00000000000
--- a/apps/app/src/client/components/SearchPage/SearchResultList.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import type { ForwardRefRenderFunction } from 'react';
-import React, {
- forwardRef, useCallback, useImperativeHandle, useRef,
-} from 'react';
-
-import {
- type IPageInfoForListing, type IPageWithMeta, isIPageInfoForListing,
-} from '@growi/core/dist/interfaces';
-import { useTranslation } from 'next-i18next';
-
-import type { ISelectable, ISelectableAll } from '~/client/interfaces/selectable-all';
-import { toastSuccess } from '~/client/util/toastr';
-import type { IPageSearchMeta, IPageWithSearchMeta } from '~/interfaces/search';
-import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
-import { mutatePageTree, useSWRxPageInfoForList, mutateRecentlyUpdated } from '~/stores/page-listing';
-import { mutateSearching } from '~/stores/search';
-
-import type { ForceHideMenuItems } from '../Common/Dropdown/PageItemControl';
-import { PageListItemL } from '../PageList/PageListItemL';
-
-type Props = {
- pages: IPageWithSearchMeta[],
- selectedPageId?: string,
- forceHideMenuItems?: ForceHideMenuItems,
- onPageSelected?: (page?: IPageWithSearchMeta) => void,
- onCheckboxChanged?: (isChecked: boolean, pageId: string) => void,
-}
-
-const SearchResultListSubstance: ForwardRefRenderFunction = (props:Props, ref) => {
- const {
- pages, selectedPageId,
- forceHideMenuItems,
- onPageSelected,
- } = props;
-
- const { t } = useTranslation();
-
- const pageIdsWithNoSnippet = pages
- .filter(page => (page.meta?.elasticSearchResult?.snippet?.length ?? 0) === 0)
- .map(page => page.data._id);
-
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: idToPageInfo } = useSWRxPageInfoForList(pageIdsWithNoSnippet, null, true, true);
-
- const itemsRef = useRef<(ISelectable|null)[]>([]);
-
- // publish selectAll()
- useImperativeHandle(ref, () => ({
- selectAll: () => {
- const items = itemsRef.current;
- if (items != null) {
- items.forEach(item => item != null && item.select());
- }
- },
- deselectAll: () => {
- const items = itemsRef.current;
- if (items != null) {
- items.forEach(item => item != null && item.deselect());
- }
- },
- }));
-
- const clickItemHandler = useCallback((pageId: string) => {
- if (onPageSelected != null) {
- const selectedPage = pages.find(page => page.data._id === pageId);
- onPageSelected(selectedPage);
- }
- }, [onPageSelected, pages]);
-
- let injectedPages: (IPageWithSearchMeta | IPageWithMeta)[] | undefined;
- // inject data to list
- if (idToPageInfo != null) {
- injectedPages = pages.map((page) => {
- const pageInfo = idToPageInfo[page.data._id];
-
- if (!isIPageInfoForListing(pageInfo)) {
- // return as is
- return page;
- }
-
- return {
- data: page.data,
- meta: {
- ...page.meta,
- ...pageInfo,
- },
- } as IPageWithMeta;
- });
- }
-
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- const duplicatedHandler = useCallback((fromPath, toPath) => {
- toastSuccess(t('duplicated_pages', { fromPath }));
-
- mutatePageTree();
- mutateRecentlyUpdated();
- mutateSearching();
- }, [t]);
-
- const renamedHandler = useCallback((path) => {
- toastSuccess(t('renamed_pages', { path }));
-
- mutatePageTree();
- mutateRecentlyUpdated();
- mutateSearching();
- }, [t]);
-
- const deletedHandler = useCallback((pathOrPathsToDelete, isRecursively, isCompletely) => {
- if (typeof pathOrPathsToDelete !== 'string') {
- return;
- }
-
- const path = pathOrPathsToDelete;
-
- if (isCompletely) {
- toastSuccess(t('deleted_pages_completely', { path }));
- }
- else {
- toastSuccess(t('deleted_pages', { path }));
- }
- mutatePageTree();
- mutateRecentlyUpdated();
- mutateSearching();
- }, [t]);
-
- return (
-
- { (injectedPages ?? pages).map((page, i) => {
- return (
- { itemsRef.current[i] = c }}
- page={page}
- isEnableActions={!isGuestUser}
- isReadOnlyUser={!!isReadOnlyUser}
- isSelected={page.data._id === selectedPageId}
- forceHideMenuItems={forceHideMenuItems}
- onClickItem={clickItemHandler}
- onCheckboxChanged={props.onCheckboxChanged}
- onPageDuplicated={duplicatedHandler}
- onPageRenamed={renamedHandler}
- onPageDeleted={deletedHandler}
- />
- );
- })}
-
- );
-
-};
-
-export const SearchResultList = forwardRef(SearchResultListSubstance);
diff --git a/apps/app/src/client/components/ShortcutsModal.module.scss b/apps/app/src/client/components/ShortcutsModal/ShortcutsModal.module.scss
similarity index 100%
rename from apps/app/src/client/components/ShortcutsModal.module.scss
rename to apps/app/src/client/components/ShortcutsModal/ShortcutsModal.module.scss
diff --git a/apps/app/src/client/components/ShortcutsModal.tsx b/apps/app/src/client/components/ShortcutsModal/ShortcutsModal.tsx
similarity index 93%
rename from apps/app/src/client/components/ShortcutsModal.tsx
rename to apps/app/src/client/components/ShortcutsModal/ShortcutsModal.tsx
index 69f27f4e998..f30f1094f5e 100644
--- a/apps/app/src/client/components/ShortcutsModal.tsx
+++ b/apps/app/src/client/components/ShortcutsModal/ShortcutsModal.tsx
@@ -1,28 +1,29 @@
-import React, { type JSX } from 'react';
+import React, { useMemo } from 'react';
import { useTranslation } from 'next-i18next';
import { Modal, ModalHeader, ModalBody } from 'reactstrap';
-import { useShortcutsModal } from '~/stores/modal';
+import { useShortcutsModalStatus, useShortcutsModalActions } from '~/states/ui/modal/shortcuts';
import styles from './ShortcutsModal.module.scss';
-const ShortcutsModal = (): JSX.Element => {
+/**
+ * ShortcutsModalSubstance - Presentation component (heavy logic, rendered only when isOpen)
+ */
+const ShortcutsModalSubstance = (): React.JSX.Element => {
const { t } = useTranslation();
+ const { close } = useShortcutsModalActions();
- const { data: status, close } = useShortcutsModal();
-
- const bodyContent = () => {
- if (status == null || !status.isOpened) {
- return <>;
- }
-
- // add classes to cmd-key by OS
+ // Memoize OS-specific class
+ const additionalClassByOs = useMemo(() => {
const platform = window.navigator.platform.toLowerCase();
const isMac = (platform.indexOf('mac') > -1);
- const additionalClassByOs = isMac ? 'mac' : 'win';
+ return isMac ? 'mac' : 'win';
+ }, []);
+ // Memoize body content (large static JSX)
+ const bodyContent = useMemo(() => {
return (
@@ -192,7 +193,7 @@ const ShortcutsModal = (): JSX.Element => {
);
- };
+ }, [additionalClassByOs, t]);
return (
<>
- { status != null && (
-
-
- {t('Shortcuts')}
-
-
- {bodyContent()}
-
-
- ) }
+
+ {t('Shortcuts')}
+
+
+ {bodyContent}
+
);
};
-export default ShortcutsModal;
+/**
+ * ShortcutsModal - Container component (lightweight, always rendered)
+ */
+export const ShortcutsModal = (): React.JSX.Element => {
+ const status = useShortcutsModalStatus();
+ const { close } = useShortcutsModalActions();
+
+ return (
+
+ {status?.isOpened &&
+ );
+};
diff --git a/apps/app/src/client/components/ShortcutsModal/dynamic.tsx b/apps/app/src/client/components/ShortcutsModal/dynamic.tsx
new file mode 100644
index 00000000000..1cd7bc2d22c
--- /dev/null
+++ b/apps/app/src/client/components/ShortcutsModal/dynamic.tsx
@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useShortcutsModalStatus } from '~/states/ui/modal/shortcuts';
+
+type ShortcutsModalProps = Record
;
+
+export const ShortcutsModalLazyLoaded = (): JSX.Element => {
+ const status = useShortcutsModalStatus();
+
+ const ShortcutsModal = useLazyLoader(
+ 'shortcuts-modal',
+ () => import('./ShortcutsModal').then(mod => ({ default: mod.ShortcutsModal })),
+ status?.isOpened ?? false,
+ );
+
+ // ShortcutsModal handles early return and fadeout transition internally
+ return ShortcutsModal ?
diff --git a/apps/app/src/client/components/Sidebar/Bookmarks.tsx b/apps/app/src/client/components/Sidebar/Bookmarks.tsx
index 1b948a646ef..6706f2eb6cd 100644
--- a/apps/app/src/client/components/Sidebar/Bookmarks.tsx
+++ b/apps/app/src/client/components/Sidebar/Bookmarks.tsx
@@ -3,13 +3,13 @@ import React, { type JSX } from 'react';
import { useTranslation } from 'react-i18next';
-import { useIsGuestUser } from '~/stores-universal/context';
+import { useIsGuestUser } from '~/states/context';
import { BookmarkContents } from './Bookmarks/BookmarkContents';
export const Bookmarks = () : JSX.Element => {
const { t } = useTranslation();
- const { data: isGuestUser } = useIsGuestUser();
+ const isGuestUser = useIsGuestUser();
return (
diff --git a/apps/app/src/client/components/Sidebar/Bookmarks/BookmarkContents.tsx b/apps/app/src/client/components/Sidebar/Bookmarks/BookmarkContents.tsx
index 141dce8090f..044ebad218c 100644
--- a/apps/app/src/client/components/Sidebar/Bookmarks/BookmarkContents.tsx
+++ b/apps/app/src/client/components/Sidebar/Bookmarks/BookmarkContents.tsx
@@ -6,7 +6,7 @@ import { BookmarkFolderNameInput } from '~/client/components/Bookmarks/BookmarkF
import { BookmarkFolderTree } from '~/client/components/Bookmarks/BookmarkFolderTree';
import { addNewFolder } from '~/client/util/bookmark-utils';
import { toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
export const BookmarkContents = (): JSX.Element => {
@@ -14,7 +14,7 @@ export const BookmarkContents = (): JSX.Element => {
const { t } = useTranslation();
const [isCreateAction, setIsCreateAction] = useState
(false);
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const { mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
const onClickNewBookmarkFolder = useCallback(() => {
diff --git a/apps/app/src/client/components/Sidebar/InAppNotification/PrimaryItemForNotification.tsx b/apps/app/src/client/components/Sidebar/InAppNotification/PrimaryItemForNotification.tsx
index fecaa7771c1..2c2d0118095 100644
--- a/apps/app/src/client/components/Sidebar/InAppNotification/PrimaryItemForNotification.tsx
+++ b/apps/app/src/client/components/Sidebar/InAppNotification/PrimaryItemForNotification.tsx
@@ -1,8 +1,8 @@
import { memo, useCallback, useEffect } from 'react';
import { SidebarContentsType } from '~/interfaces/ui';
+import { useGlobalSocket } from '~/states/socket-io';
import { useSWRxInAppNotificationStatus } from '~/stores/in-app-notification';
-import { useDefaultSocket } from '~/stores/socket-io';
import { PrimaryItem, type PrimaryItemProps } from '../SidebarNav/PrimaryItem';
@@ -11,7 +11,7 @@ type PrimaryItemForNotificationProps = Omit {
const { sidebarMode, onHover } = props;
- const { data: socket } = useDefaultSocket();
+ const socket = useGlobalSocket();
const { data: notificationCount, mutate: mutateNotificationCount } = useSWRxInAppNotificationStatus();
diff --git a/apps/app/src/client/components/Sidebar/PageCreateButton/PageCreateButton.tsx b/apps/app/src/client/components/Sidebar/PageCreateButton/PageCreateButton.tsx
index 0e5350efc50..7342c8830d5 100644
--- a/apps/app/src/client/components/Sidebar/PageCreateButton/PageCreateButton.tsx
+++ b/apps/app/src/client/components/Sidebar/PageCreateButton/PageCreateButton.tsx
@@ -4,8 +4,8 @@ import { Dropdown } from 'reactstrap';
import { useCreateTemplatePage } from '~/client/services/create-page';
import { useToastrOnError } from '~/client/services/use-toastr-on-error';
-import { usePageCreateModal } from '~/stores/modal';
-import { useCurrentPagePath } from '~/stores/page';
+import { useCurrentPagePath } from '~/states/page';
+import { usePageCreateModalActions } from '~/states/ui/modal/page-create';
import { CreateButton } from './CreateButton';
import { DropendMenu } from './DropendMenu';
@@ -18,8 +18,8 @@ export const PageCreateButton = React.memo((): JSX.Element => {
const [dropdownOpen, setDropdownOpen] = useState(false);
- const { open: openPageCreateModal } = usePageCreateModal();
- const { data: currentPagePath } = useCurrentPagePath();
+ const { open: openPageCreateModal } = usePageCreateModalActions();
+ const currentPagePath = useCurrentPagePath();
const { createNewPage, isCreating: isNewPageCreating } = useCreateNewPage();
// TODO: https://redmine.weseek.co.jp/issues/138806
diff --git a/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-new-page.ts b/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-new-page.ts
index 5b7357c86b6..1e78fa4143a 100644
--- a/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-new-page.ts
+++ b/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-new-page.ts
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
import { Origin } from '@growi/core';
import { useCreatePage } from '~/client/services/create-page';
-import { useCurrentPagePath } from '~/stores/page';
+import { useCurrentPagePath } from '~/states/page';
type UseCreateNewPage = () => {
@@ -12,12 +12,12 @@ type UseCreateNewPage = () => {
}
export const useCreateNewPage: UseCreateNewPage = () => {
- const { data: currentPagePath, isLoading: isLoadingPagePath } = useCurrentPagePath();
+ const currentPagePath = useCurrentPagePath();
const { isCreating, create } = useCreatePage();
const createNewPage = useCallback(async() => {
- if (isLoadingPagePath) return;
+ if (currentPagePath == null) return;
return create(
{
@@ -30,7 +30,7 @@ export const useCreateNewPage: UseCreateNewPage = () => {
skipPageExistenceCheck: true,
},
);
- }, [create, currentPagePath, isLoadingPagePath]);
+ }, [create, currentPagePath]);
return {
isCreating,
diff --git a/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-todays-memo.tsx b/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-todays-memo.tsx
index f37a306a156..0c0463e1ebc 100644
--- a/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-todays-memo.tsx
+++ b/apps/app/src/client/components/Sidebar/PageCreateButton/hooks/use-create-todays-memo.tsx
@@ -6,7 +6,7 @@ import { format } from 'date-fns/format';
import { useTranslation } from 'react-i18next';
import { useCreatePage } from '~/client/services/create-page';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
type UseCreateTodaysMemo = () => {
@@ -18,7 +18,7 @@ type UseCreateTodaysMemo = () => {
export const useCreateTodaysMemo: UseCreateTodaysMemo = () => {
const { t } = useTranslation('commons');
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const { isCreating, create } = useCreatePage();
const isCreatable = currentUser != null;
diff --git a/apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx b/apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx
index ef57f95093c..9c70ab1342c 100644
--- a/apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx
+++ b/apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx
@@ -1,20 +1,20 @@
import React, {
- memo, useCallback, useEffect, useMemo, useRef, useState,
+ memo, useCallback,
} from 'react';
import { useTranslation } from 'next-i18next';
-import { debounce } from 'throttle-debounce';
-import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
-import { useCurrentPagePath, useCurrentPageId } from '~/stores/page';
+import { ItemsTree } from '~/features/page-tree/components';
+import { usePageTreeInformationUpdate } from '~/features/page-tree/states/page-tree-update';
+import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
+import { useCurrentPageId, useCurrentPagePath } from '~/states/page';
+import { useSidebarScrollerElem } from '~/states/ui/sidebar';
import {
mutatePageTree, mutateRecentlyUpdated, useSWRxRootPage, useSWRxV5MigrationStatus,
} from '~/stores/page-listing';
-import { useSidebarScrollerRef } from '~/stores/ui';
import loggerFactory from '~/utils/logger';
-import { ItemsTree } from '../../ItemsTree/ItemsTree';
-import { PageTreeItem } from '../PageTreeItem';
+import { PageTreeItem, pageTreeItemSize } from '../PageTreeItem';
import { SidebarHeaderReloadButton } from '../SidebarHeaderReloadButton';
import { PrivateLegacyPagesLink } from './PrivateLegacyPagesLink';
@@ -31,12 +31,15 @@ export const PageTreeHeader = memo(({ isWipPageShown, onWipPageShownChange }: He
const { mutate: mutateRootPage } = useSWRxRootPage({ suspense: true });
useSWRxV5MigrationStatus({ suspense: true });
+ const { notifyUpdateAllTrees } = usePageTreeInformationUpdate();
const mutate = useCallback(() => {
mutateRootPage();
mutatePageTree();
mutateRecentlyUpdated();
- }, [mutateRootPage]);
+ // Notify headless-tree to rebuild with fresh data
+ notifyUpdateAllTrees();
+ }, [mutateRootPage, notifyUpdateAllTrees]);
return (
<>
@@ -61,7 +64,7 @@ export const PageTreeHeader = memo(({ isWipPageShown, onWipPageShownChange }: He
className="form-check-input pe-none"
type="checkbox"
checked={isWipPageShown}
- onChange={() => {}}
+ onChange={() => { }}
/>
{t('sidebar_header.show_wip_page')}
@@ -79,8 +82,6 @@ PageTreeHeader.displayName = 'PageTreeHeader';
const PageTreeUnavailable = () => {
const { t } = useTranslation();
- // TODO : improve design
- // Story : https://redmine.weseek.co.jp/issues/83755
return (
{t('v5_page_migration.page_tree_not_avaliable')}
@@ -95,78 +96,19 @@ type PageTreeContentProps = {
export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) => {
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
- const { data: currentPath } = useCurrentPagePath();
- const { data: targetId } = useCurrentPageId();
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
+ const currentPath = useCurrentPagePath();
+ const targetId = useCurrentPageId();
const { data: migrationStatus } = useSWRxV5MigrationStatus({ suspense: true });
const targetPathOrId = targetId || currentPath;
const path = currentPath || '/';
- const { data: rootPageResult } = useSWRxRootPage({ suspense: true });
- const { data: sidebarScrollerRef } = useSidebarScrollerRef();
- const [isInitialScrollCompleted, setIsInitialScrollCompleted] = useState(false);
-
- const rootElemRef = useRef
(null);
-
- // *************************** Scroll on init ***************************
- const scrollOnInit = useCallback(() => {
- const rootElement = rootElemRef.current;
- const scrollElement = sidebarScrollerRef?.current;
-
- if (rootElement == null || scrollElement == null) {
- return;
- }
-
- const scrollTargetElement = rootElement.querySelector('[aria-current]');
-
- if (scrollTargetElement == null) {
- return;
- }
-
- logger.debug('scrollOnInit has invoked');
-
-
- // NOTE: could not use scrollIntoView
- // https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move
-
- // calculate the center point
- const scrollTop = scrollTargetElement.offsetTop - scrollElement.getBoundingClientRect().height / 2;
- scrollElement.scrollTo({ top: scrollTop });
-
- setIsInitialScrollCompleted(true);
- }, [sidebarScrollerRef]);
-
- const scrollOnInitDebounced = useMemo(() => debounce(500, scrollOnInit), [scrollOnInit]);
-
- useEffect(() => {
- if (isInitialScrollCompleted || rootPageResult == null) {
- return;
- }
-
- const rootElement = rootElemRef.current as HTMLElement | null;
- if (rootElement == null) {
- return;
- }
-
- const observerCallback = (mutationRecords: MutationRecord[]) => {
- mutationRecords.forEach(() => scrollOnInitDebounced());
- };
-
- const observer = new MutationObserver(observerCallback);
- observer.observe(rootElement, { childList: true, subtree: true });
-
- // first call for the situation that all rendering is complete at this point
- scrollOnInitDebounced();
-
- return () => {
- observer.disconnect();
- };
- }, [isInitialScrollCompleted, scrollOnInitDebounced, rootPageResult]);
- // ******************************* end *******************************
+ const sidebarScrollerElem = useSidebarScrollerElem();
+ const estimateTreeItemSize = useCallback(() => pageTreeItemSize, []);
if (!migrationStatus?.isV5Compatible) {
return
+
{!isGuestUser && !isReadOnlyUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (
diff --git a/apps/app/src/client/components/Sidebar/PageTreeItem/CountBadgeForPageTreeItem.tsx b/apps/app/src/client/components/Sidebar/PageTreeItem/CountBadgeForPageTreeItem.tsx
index 0900e26b270..621d7dd80db 100644
--- a/apps/app/src/client/components/Sidebar/PageTreeItem/CountBadgeForPageTreeItem.tsx
+++ b/apps/app/src/client/components/Sidebar/PageTreeItem/CountBadgeForPageTreeItem.tsx
@@ -1,14 +1,15 @@
import type { JSX } from 'react';
import CountBadge from '~/client/components/Common/CountBadge';
-import type { TreeItemToolProps } from '~/client/components/TreeItem';
-import { usePageTreeDescCountMap } from '~/stores/ui';
+import type { TreeItemToolProps } from '~/features/page-tree/interfaces';
+import { usePageTreeDescCountMap } from '~/features/page-tree/states';
export const CountBadgeForPageTreeItem = (props: TreeItemToolProps): JSX.Element => {
const { getDescCount } = usePageTreeDescCountMap();
- const { page } = props.itemNode;
+ const { item } = props;
+ const page = item.getItemData();
const descendantCount = getDescCount(page._id) || page.descendantCount || 0;
diff --git a/apps/app/src/client/components/Sidebar/PageTreeItem/PageTreeItem.tsx b/apps/app/src/client/components/Sidebar/PageTreeItem/PageTreeItem.tsx
index 635a11b4b42..633b9dff608 100644
--- a/apps/app/src/client/components/Sidebar/PageTreeItem/PageTreeItem.tsx
+++ b/apps/app/src/client/components/Sidebar/PageTreeItem/PageTreeItem.tsx
@@ -1,211 +1,157 @@
-import React, {
- useCallback, useState, type JSX,
-} from 'react';
+import type { FC } from 'react';
+import { useCallback } from 'react';
-import nodePath from 'path';
+import path from 'path';
-import type { IPageHasId } from '@growi/core';
-import { pagePathUtils, pathUtils } from '@growi/core/dist/utils';
+import type { IPageToDeleteWithMeta } from '@growi/core/dist/interfaces';
+import { getIdStringForRef } from '@growi/core/dist/interfaces';
+import { pathUtils } from '@growi/core/dist/utils';
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
-import { useDrag, useDrop } from 'react-dnd';
-import { apiv3Put } from '~/client/util/apiv3-client';
-import { toastWarning, toastError } from '~/client/util/toastr';
+import { toastSuccess } from '~/client/util/toastr';
+import type { TreeItemProps } from '~/features/page-tree';
+import {
+ usePageTreeInformationUpdate, usePageRename, usePageCreate,
+ usePlaceholderRenameEffect,
+} from '~/features/page-tree';
+import { TreeNameInput, TreeItemLayout } from '~/features/page-tree/components';
import type { IPageForItem } from '~/interfaces/page';
-import { mutatePageTree, useSWRxPageChildren } from '~/stores/page-listing';
-import loggerFactory from '~/utils/logger';
+import type { OnDeletedFunction, OnDuplicatedFunction } from '~/interfaces/ui';
+import { useCurrentPagePath, useFetchCurrentPage } from '~/states/page';
+import { usePageDeleteModalActions } from '~/states/ui/modal/page-delete';
+import type { IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicate';
+import { usePageDuplicateModalActions } from '~/states/ui/modal/page-duplicate';
+import { mutateAllPageInfo } from '~/stores/page';
+import { mutatePageTree, mutatePageList } from '~/stores/page-listing';
+import { mutateSearching } from '~/stores/search';
-import type { ItemNode } from '../../TreeItem';
-import {
- TreeItemLayout, useNewPageInput, type TreeItemProps,
-} from '../../TreeItem';
import { CountBadgeForPageTreeItem } from './CountBadgeForPageTreeItem';
-import { CreatingNewPageSpinner } from './CreatingNewPageSpinner';
import { usePageItemControl } from './use-page-item-control';
-
import styles from './PageTreeItem.module.scss';
const moduleClass = styles['page-tree-item'] ?? '';
-const logger = loggerFactory('growi:cli:Item');
+export const pageTreeItemSize = 40; // in px
-export const PageTreeItem = (props:TreeItemProps): JSX.Element => {
+
+export const PageTreeItem: FC
= ({
+ item,
+ targetPath,
+ targetPathOrId,
+ isWipPageShown,
+ isEnableActions = false,
+ isReadOnlyUser = false,
+ onToggle,
+}) => {
+ const { t } = useTranslation();
const router = useRouter();
- const getNewPathAfterMoved = (droppedPagePath: string, newParentPagePath: string): string => {
- const pageTitle = nodePath.basename(droppedPagePath);
- return nodePath.join(newParentPagePath, pageTitle);
- };
+ const itemData = item.getItemData();
+
+ const currentPagePath = useCurrentPagePath();
+ const { fetchCurrentPage } = useFetchCurrentPage();
+
+ const { open: openDuplicateModal } = usePageDuplicateModalActions();
+ const { open: openDeleteModal } = usePageDeleteModalActions();
+ const { notifyUpdateItems } = usePageTreeInformationUpdate();
+
+ const onClickDuplicateMenuItem = useCallback((page: IPageForPageDuplicateModal) => {
+ const duplicatedHandler: OnDuplicatedFunction = (fromPath) => {
+ toastSuccess(t('duplicated_pages', { fromPath }));
+
+ mutatePageTree();
+ mutateSearching();
+ mutatePageList();
- const isDroppable = (fromPage?: Partial, newParentPage?: Partial, printLog = false): boolean => {
- if (fromPage == null || newParentPage == null || fromPage.path == null || newParentPage.path == null) {
- if (printLog) {
- logger.warn('Any of page, page.path or droppedPage.path is null');
+ // Notify headless-tree update
+ const parentIds = itemData.parent != null ? [getIdStringForRef(itemData.parent)] : undefined;
+ notifyUpdateItems(parentIds);
+ };
+
+ openDuplicateModal(page, { onDuplicated: duplicatedHandler });
+ }, [openDuplicateModal, t, notifyUpdateItems, itemData.parent]);
+
+ const onClickDeleteMenuItem = useCallback((page: IPageToDeleteWithMeta) => {
+ const onDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, isRecursively, isCompletely) => {
+ if (typeof pathOrPathsToDelete !== 'string') {
+ return;
+ }
+
+ if (isCompletely) {
+ toastSuccess(t('deleted_pages_completely', { path: pathOrPathsToDelete }));
+ }
+ else {
+ toastSuccess(t('deleted_pages', { path: pathOrPathsToDelete }));
}
- return false;
- }
- const newPathAfterMoved = getNewPathAfterMoved(fromPage.path, newParentPage.path);
- return pagePathUtils.canMoveByPath(fromPage.path, newPathAfterMoved) && !pagePathUtils.isUsersTopPage(newParentPage.path);
- };
+ mutatePageTree();
+ mutateSearching();
+ mutatePageList();
+ mutateAllPageInfo();
- const { t } = useTranslation();
+ if (currentPagePath === pathOrPathsToDelete) {
+ fetchCurrentPage({ force: true });
+ router.push(isCompletely ? path.dirname(pathOrPathsToDelete) : `/trash${pathOrPathsToDelete}`);
+ }
- const {
- itemNode, targetPathOrId, isOpen: _isOpen = false, onRenamed,
- } = props;
+ // Notify headless-tree update
+ const parentIds = itemData.parent != null ? [getIdStringForRef(itemData.parent)] : undefined;
+ notifyUpdateItems(parentIds);
+ };
- const { page } = itemNode;
- const [isOpen, setIsOpen] = useState(_isOpen);
+ openDeleteModal([page], { onDeleted: onDeletedHandler });
+ }, [openDeleteModal, t, currentPagePath, fetchCurrentPage, router, itemData.parent, notifyUpdateItems]);
- const { mutate: mutateChildren } = useSWRxPageChildren(isOpen ? page._id : null);
+ const { Control } = usePageItemControl();
- const {
- showRenameInput, Control, RenameInput,
- } = usePageItemControl();
- const { isProcessingSubmission, Input: NewPageInput, CreateButton: NewPageCreateButton } = useNewPageInput();
+ // Rename feature from usePageRename hook
+ const { isRenaming } = usePageRename();
+
+ // Page create feature
+ const { cancelCreating, CreateButton, isCreatingPlaceholder } = usePageCreate();
+
+ // Manage placeholder renaming mode (auto-start, track, and cancel on Esc)
+ usePlaceholderRenameEffect({
+ item,
+ onCancelCreate: cancelCreating,
+ });
const itemSelectedHandler = useCallback((page: IPageForItem) => {
- if (page.path == null || page._id == null) {
- return;
- }
+ if (page.path == null || page._id == null) return;
const link = pathUtils.returnPathForURL(page.path, page._id);
-
router.push(link);
}, [router]);
const itemSelectedByWheelClickHandler = useCallback((page: IPageForItem) => {
- if (page.path == null || page._id == null) {
- return;
- }
+ if (page.path == null || page._id == null) return;
const url = pathUtils.returnPathForURL(page.path, page._id);
-
window.open(url, '_blank');
}, []);
- const [, drag] = useDrag({
- type: 'PAGE_TREE',
- item: { page },
- canDrag: () => {
- if (page.path == null) {
- return false;
- }
- return !pagePathUtils.isUsersProtectedPages(page.path);
- },
- end: (item, monitor) => {
- // in order to set d-none to dropped Item
- const dropResult = monitor.getDropResult();
- },
- collect: monitor => ({
- isDragging: monitor.isDragging(),
- canDrag: monitor.canDrag(),
- }),
- });
-
- const pageItemDropHandler = async(item: ItemNode) => {
- const { page: droppedPage } = item;
- if (!isDroppable(droppedPage, page, true)) {
- return;
- }
- if (droppedPage.path == null || page.path == null) {
- return;
- }
- const newPagePath = getNewPathAfterMoved(droppedPage.path, page.path);
- try {
- await apiv3Put('/pages/rename', {
- pageId: droppedPage._id,
- revisionId: droppedPage.revision,
- newPagePath,
- isRenameRedirect: false,
- updateMetadata: true,
- });
- await mutatePageTree();
- await mutateChildren();
- if (onRenamed != null) {
- onRenamed(page.path, newPagePath);
- }
- // force open
- setIsOpen(true);
- }
- catch (err) {
- if (err.code === 'operation__blocked') {
- toastWarning(t('pagetree.you_cannot_move_this_page_now'));
- }
- else {
- toastError(t('pagetree.something_went_wrong_with_moving_page'));
- }
- }
- };
-
- const [{ isOver }, drop] = useDrop, { isOver: boolean }>(
- () => ({
- accept: 'PAGE_TREE',
- drop: pageItemDropHandler,
- hover: (item, monitor) => {
- // when a drag item is overlapped more than 1 sec, the drop target item will be opened.
- if (monitor.isOver()) {
- setTimeout(() => {
- if (monitor.isOver()) {
- setIsOpen(true);
- }
- }, 600);
- }
- },
- canDrop: (item) => {
- const { page: droppedPage } = item;
- return isDroppable(droppedPage, page);
- },
- collect: monitor => ({
- isOver: monitor.isOver(),
- }),
- }),
- [page],
- );
-
- const itemRef = (c) => {
- // do not apply when RenameInput is shown
- if (showRenameInput) return;
-
- drag(c);
- drop(c);
- };
-
- const isSelected = page._id === targetPathOrId || page.path === targetPathOrId;
- const itemClassNames = [
- isOver ? 'drag-over' : '',
- page.path !== '/' && isSelected ? 'active' : '', // set 'active' except the root page
- ];
-
return (
,
- RenameInput: FC,
- showRenameInput: boolean,
}
export const usePageItemControl = (): UsePageItemControl => {
const { t } = useTranslation();
- const [showRenameInput, setShowRenameInput] = useState(false);
-
const Control: FC = (props) => {
const {
- itemNode,
+ item,
isEnableActions,
isReadOnlyUser,
onClickDuplicateMenuItem, onClickDeleteMenuItem,
} = props;
- const { page } = itemNode;
+ const page = item.getItemData();
const { trigger: mutateCurrentUserBookmarks } = useSWRMUTxCurrentUserBookmarks();
const { trigger: mutatePageInfo } = useSWRMUTxPageInfo(page._id ?? null);
@@ -73,10 +60,11 @@ export const usePageItemControl = (): UsePageItemControl => {
}, [onClickDuplicateMenuItem, page]);
const renameMenuItemClickHandler = useCallback(() => {
- setShowRenameInput(true);
- }, []);
+ // Use headless-tree's renamingFeature
+ item.startRenaming();
+ }, [item]);
- const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoAll | undefined): Promise => {
+ const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoExt | undefined): Promise => {
if (onClickDeleteMenuItem == null) {
return;
}
@@ -88,7 +76,7 @@ export const usePageItemControl = (): UsePageItemControl => {
const pageToDelete: IPageToDeleteWithMeta = {
data: {
_id: page._id,
- revision: page.revision as string,
+ revision: page.revision != null ? getIdStringForRef(page.revision) : null,
path: page.path,
},
meta: pageInfo,
@@ -134,102 +122,8 @@ export const usePageItemControl = (): UsePageItemControl => {
};
- const RenameInput: FC = (props) => {
- const { itemNode, onRenamed } = props;
- const { page } = itemNode;
-
- const parentRef = useRef(null);
- const [parentRect] = useRect(parentRef);
-
- const [validationResult, setValidationResult] = useState();
-
-
- const inputValidator = useInputValidator(ValidationTarget.PAGE);
-
- const changeHandler = useCallback(async(e: ChangeEvent) => {
- const validationResult = inputValidator(e.target.value);
- setValidationResult(validationResult ?? undefined);
- }, [inputValidator]);
- const changeHandlerDebounced = debounce(300, changeHandler);
-
- const cancel = useCallback(() => {
- setValidationResult(undefined);
- setShowRenameInput(false);
- }, []);
-
- const rename = useCallback(async(inputText) => {
- if (inputText.trim() === '') {
- return cancel();
- }
-
- const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(page.path ?? ''));
- const newPagePath = nodePath.resolve(parentPath, inputText);
-
- if (newPagePath === page.path) {
- setValidationResult(undefined);
- setShowRenameInput(false);
- return;
- }
-
- try {
- await apiv3Put('/pages/rename', {
- pageId: page._id,
- revisionId: page.revision,
- newPagePath,
- });
-
- onRenamed?.(page.path, newPagePath);
- setShowRenameInput(false);
-
- toastSuccess(t('renamed_pages', { path: page.path }));
- }
- catch (err) {
- toastError(err);
- }
- finally {
- setValidationResult(undefined);
- }
-
- }, [cancel, onRenamed, page._id, page.path, page.revision]);
-
-
- if (!showRenameInput) {
- return <>;
- }
-
- const isInvalid = validationResult != null;
-
- const maxWidth = parentRect != null
- ? getAdjustedMaxWidthForAutosizeInput(parentRect.width, 'sm', validationResult != null ? false : undefined)
- : undefined;
-
- return (
-
-
- { isInvalid && (
-
- {validationResult.message}
-
- ) }
-
pushState(`tag:${tagName}`)} />
+ setSearchKeyword(`tag:${tagName}`)} />
))
}
diff --git a/apps/app/src/client/components/Sidebar/Sidebar.tsx b/apps/app/src/client/components/Sidebar/Sidebar.tsx
index 706da9b02bd..96133356413 100644
--- a/apps/app/src/client/components/Sidebar/Sidebar.tsx
+++ b/apps/app/src/client/components/Sidebar/Sidebar.tsx
@@ -8,18 +8,17 @@ import SimpleBar from 'simplebar-react';
import { useIsomorphicLayoutEffect } from 'usehooks-ts';
import { SidebarMode } from '~/interfaces/ui';
-import { useIsSearchPage } from '~/stores-universal/context';
-import { EditorMode, useEditorMode } from '~/stores-universal/ui';
+import { useIsSearchPage } from '~/states/context';
+import { useDeviceLargerThanXl, useDeviceLargerThanMd } from '~/states/ui/device';
+import { EditorMode, useEditorMode } from '~/states/ui/editor';
import {
useDrawerOpened,
+ useSetPreferCollapsedMode,
+ useSidebarMode,
useCollapsedContentsOpened,
useCurrentProductNavWidth,
- usePreferCollapsedMode,
- useSidebarMode,
- useSidebarScrollerRef,
- useIsDeviceLargerThanMd,
- useIsDeviceLargerThanXl,
-} from '~/stores/ui';
+ useSetSidebarScrollerRef,
+} from '~/states/ui/sidebar';
import { DrawerToggler } from '../Common/DrawerToggler';
@@ -70,13 +69,13 @@ const ResizableContainer = memo((props: ResizableContainerProps): JSX.Element =>
const { children } = props;
const { isDrawerMode, isCollapsedMode, isDockMode } = useSidebarMode();
- const { mutate: mutateDrawerOpened } = useDrawerOpened();
- const { data: currentProductNavWidth, mutateAndSave: mutateProductNavWidth } = useCurrentProductNavWidth();
- const { mutateAndSave: mutatePreferCollapsedMode } = usePreferCollapsedMode();
- const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+ const [, setIsDrawerOpened] = useDrawerOpened();
+ const [currentProductNavWidth, setCurrentProductNavWidth] = useCurrentProductNavWidth();
+ const setPreferCollapsedMode = useSetPreferCollapsedMode();
+ const [, setCollapsedContentsOpened] = useCollapsedContentsOpened();
const [isClient, setClient] = useState(false);
- const [resizableAreaWidth, setResizableAreaWidth] = useState(
+ const [resizableAreaWidth, setResizableAreaWidth] = useState(
getWidthByMode(isDrawerMode(), isCollapsedMode(), currentProductNavWidth),
);
@@ -85,13 +84,13 @@ const ResizableContainer = memo((props: ResizableContainerProps): JSX.Element =>
}, []);
const resizeDoneHandler = useCallback((newWidth: number) => {
- mutateProductNavWidth(newWidth, false);
- }, [mutateProductNavWidth]);
+ setCurrentProductNavWidth(newWidth);
+ }, [setCurrentProductNavWidth]);
const collapsedByResizableAreaHandler = useCallback(() => {
- mutatePreferCollapsedMode(true);
- mutateCollapsedContentsOpened(false);
- }, [mutateCollapsedContentsOpened, mutatePreferCollapsedMode]);
+ setPreferCollapsedMode(true);
+ setCollapsedContentsOpened(false);
+ }, [setCollapsedContentsOpened, setPreferCollapsedMode]);
useIsomorphicLayoutEffect(() => {
setClient(true);
@@ -100,8 +99,8 @@ const ResizableContainer = memo((props: ResizableContainerProps): JSX.Element =>
// open/close resizable container when drawer mode
useEffect(() => {
setResizableAreaWidth(getWidthByMode(isDrawerMode(), isCollapsedMode(), currentProductNavWidth));
- mutateDrawerOpened(false);
- }, [currentProductNavWidth, isCollapsedMode, isDrawerMode, mutateDrawerOpened]);
+ setIsDrawerOpened(false);
+ }, [currentProductNavWidth, isCollapsedMode, isDrawerMode, setIsDrawerOpened]);
return !isClient
? (
@@ -140,12 +139,16 @@ const CollapsibleContainer = memo((props: CollapsibleContainerProps): JSX.Elemen
const { Nav, className, children } = props;
const { isCollapsedMode } = useSidebarMode();
- const { data: currentProductNavWidth } = useCurrentProductNavWidth();
- const { data: isCollapsedContentsOpened, mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+ const [currentProductNavWidth] = useCurrentProductNavWidth();
+ const [isCollapsedContentsOpened, setCollapsedContentsOpened] = useCollapsedContentsOpened();
const sidebarScrollerRef = useRef(null);
- const { mutate: mutateSidebarScroller } = useSidebarScrollerRef();
- mutateSidebarScroller(sidebarScrollerRef);
+ const setSidebarScrollerRef = useSetSidebarScrollerRef();
+
+ // Set the ref once on mount
+ useEffect(() => {
+ setSidebarScrollerRef(sidebarScrollerRef);
+ }, [setSidebarScrollerRef]);
// open menu when collapsed mode
@@ -155,8 +158,8 @@ const CollapsibleContainer = memo((props: CollapsibleContainerProps): JSX.Elemen
return;
}
- mutateCollapsedContentsOpened(true);
- }, [isCollapsedMode, mutateCollapsedContentsOpened]);
+ setCollapsedContentsOpened(true);
+ }, [isCollapsedMode, setCollapsedContentsOpened]);
// close menu when collapsed mode
const mouseLeaveHandler = useCallback(() => {
@@ -165,8 +168,8 @@ const CollapsibleContainer = memo((props: CollapsibleContainerProps): JSX.Elemen
return;
}
- mutateCollapsedContentsOpened(false);
- }, [isCollapsedMode, mutateCollapsedContentsOpened]);
+ setCollapsedContentsOpened(false);
+ }, [isCollapsedMode, setCollapsedContentsOpened]);
const closedClass = isCollapsedMode() && !isCollapsedContentsOpened ? 'd-none' : '';
const openedClass = isCollapsedMode() && isCollapsedContentsOpened ? 'open' : '';
@@ -206,7 +209,7 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
const { divProps, className, children } = props;
- const { data: isDrawerOpened, mutate } = useDrawerOpened();
+ const [isDrawerOpened, setIsDrawerOpened] = useDrawerOpened();
const openClass = `${isDrawerOpened ? 'open' : ''}`;
@@ -215,9 +218,9 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
{children}
- { isDrawerOpened && (
- mutate(false)} />
- ) }
+ {isDrawerOpened && (
+
setIsDrawerOpened(false)} />
+ )}
);
});
@@ -226,14 +229,14 @@ const DrawableContainer = memo((props: DrawableContainerProps): JSX.Element => {
export const Sidebar = (): JSX.Element => {
const {
- data: sidebarMode,
+ sidebarMode,
isDrawerMode, isCollapsedMode, isDockMode,
} = useSidebarMode();
- const { data: isSearchPage } = useIsSearchPage();
- const { data: editorMode } = useEditorMode();
- const { data: isMdSize } = useIsDeviceLargerThanMd();
- const { data: isXlSize } = useIsDeviceLargerThanXl();
+ const isSearchPage = useIsSearchPage();
+ const { editorMode } = useEditorMode();
+ const [isMdSize] = useDeviceLargerThanMd();
+ const [isXlSize] = useDeviceLargerThanXl();
const isEditorMode = editorMode === EditorMode.Editor;
const shouldHideSiteName = isEditorMode && isXlSize;
@@ -258,17 +261,17 @@ export const Sidebar = (): JSX.Element => {
return (
<>
- { sidebarMode != null && isDrawerMode() && (
+ {sidebarMode != null && isDrawerMode() && (
reorder
)}
- { sidebarMode != null && !isDockMode() && !isSearchPage && !shouldHideSubnavAppTitle && (
+ {sidebarMode != null && !isDockMode() && !isSearchPage && !shouldHideSubnavAppTitle && (
)}
- { sidebarMode != null && !isCollapsedMode() && (
+ {sidebarMode != null && !isCollapsedMode() && (
) => void
};
-export const SidebarHeaderReloadButton = ({ onClick }: Props) => {
+export const SidebarHeaderReloadButton = ({ onClick }: Props): JSX.Element => {
return (
diff --git a/apps/app/src/client/components/Sidebar/SidebarNav/PersonalDropdown.tsx b/apps/app/src/client/components/Sidebar/SidebarNav/PersonalDropdown.tsx
index 0b7f58bc348..9c1834c158d 100644
--- a/apps/app/src/client/components/Sidebar/SidebarNav/PersonalDropdown.tsx
+++ b/apps/app/src/client/components/Sidebar/SidebarNav/PersonalDropdown.tsx
@@ -10,7 +10,7 @@ import {
import { apiv3Post } from '~/client/util/apiv3-client';
import { toastError } from '~/client/util/toastr';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { SkeletonItem } from './SkeletonItem';
@@ -18,7 +18,7 @@ import styles from './PersonalDropdown.module.scss';
export const PersonalDropdown = (): JSX.Element => {
const { t } = useTranslation('commons');
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
if (currentUser == null) {
return
- { badgeContents != null && (
+ {badgeContents != null && (
{badgeContents}
)}
- { isCustomIcon
+ {isCustomIcon
? (
{iconName} )
: (
{iconName} )
}
diff --git a/apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.tsx b/apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.tsx
index 75b2e0fb408..bebbc6e476b 100644
--- a/apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.tsx
+++ b/apps/app/src/client/components/Sidebar/SidebarNav/PrimaryItems.tsx
@@ -1,15 +1,18 @@
import { memo } from 'react';
+import { useAtomValue } from 'jotai';
import dynamic from 'next/dynamic';
import { SidebarContentsType } from '~/interfaces/ui';
-import { useIsAiEnabled, useIsGuestUser } from '~/stores-universal/context';
-import { useSidebarMode } from '~/stores/ui';
+import { useIsGuestUser } from '~/states/context';
+import { aiEnabledAtom } from '~/states/server-configurations';
+import { useSidebarMode } from '~/states/ui/sidebar';
import { PrimaryItem } from './PrimaryItem';
import styles from './PrimaryItems.module.scss';
+
// Do not SSR Socket.io to make it work
const PrimaryItemForNotification = dynamic(
() => import('../InAppNotification/PrimaryItemForNotification').then(mod => mod.PrimaryItemForNotification), { ssr: false },
@@ -22,9 +25,9 @@ type Props = {
export const PrimaryItems = memo((props: Props) => {
const { onItemHover } = props;
- const { data: sidebarMode } = useSidebarMode();
- const { data: isAiEnabled } = useIsAiEnabled();
- const { data: isGuestUser } = useIsGuestUser();
+ const { sidebarMode } = useSidebarMode();
+ const isAiEnabled = useAtomValue(aiEnabledAtom);
+ const isGuestUser = useIsGuestUser();
if (sidebarMode == null) {
return <>;
diff --git a/apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx b/apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx
index 7ffd1c292de..957002d644b 100644
--- a/apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx
+++ b/apps/app/src/client/components/Sidebar/SidebarNav/SecondaryItems.tsx
@@ -4,7 +4,8 @@ import { memo } from 'react';
import dynamic from 'next/dynamic';
import Link from 'next/link';
-import { useIsGuestUser, useGrowiCloudUri, useIsAdmin } from '~/stores-universal/context';
+import { useIsAdmin, useIsGuestUser } from '~/states/context';
+import { useGrowiCloudUri } from '~/states/global';
import { SkeletonItem } from './SkeletonItem';
@@ -41,9 +42,9 @@ const SecondaryItem: FC
= (props: SecondaryItemProps) => {
export const SecondaryItems: FC = memo(() => {
- const { data: isAdmin } = useIsAdmin();
- const { data: growiCloudUri } = useGrowiCloudUri();
- const { data: isGuestUser } = useIsGuestUser();
+ const isAdmin = useIsAdmin();
+ const growiCloudUri = useGrowiCloudUri();
+ const isGuestUser = useIsGuestUser();
return (
diff --git a/apps/app/src/client/components/Sidebar/SidebarNav/SidebarNav.tsx b/apps/app/src/client/components/Sidebar/SidebarNav/SidebarNav.tsx
index afcf9f2f392..a9b1741d897 100644
--- a/apps/app/src/client/components/Sidebar/SidebarNav/SidebarNav.tsx
+++ b/apps/app/src/client/components/Sidebar/SidebarNav/SidebarNav.tsx
@@ -1,7 +1,7 @@
import React, { memo, useMemo } from 'react';
import type { SidebarContentsType } from '~/interfaces/ui';
-import { useIsGuestUser, useIsReadOnlyUser } from '~/stores-universal/context';
+import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
import { NotAvailableForReadOnlyUser } from '../../NotAvailableForReadOnlyUser';
import { PageCreateButton } from '../PageCreateButton';
@@ -18,8 +18,8 @@ export type SidebarNavProps = {
export const SidebarNav = memo((props: SidebarNavProps) => {
const { onPrimaryItemHover } = props;
- const { data: isGuestUser } = useIsGuestUser();
- const { data: isReadOnlyUser } = useIsReadOnlyUser();
+ const isGuestUser = useIsGuestUser();
+ const isReadOnlyUser = useIsReadOnlyUser();
const renderedPageCreateButton = useMemo(() => {
if (isGuestUser) {
diff --git a/apps/app/src/client/components/SystemVersion.tsx b/apps/app/src/client/components/SystemVersion.tsx
index 4ba9bd678a8..5110d1b98d4 100644
--- a/apps/app/src/client/components/SystemVersion.tsx
+++ b/apps/app/src/client/components/SystemVersion.tsx
@@ -1,7 +1,7 @@
import React, { type JSX } from 'react';
-import { useGrowiVersion } from '~/stores-universal/context';
-import { useShortcutsModal } from '~/stores/modal';
+import { useGrowiVersion } from '~/states/global';
+import { useShortcutsModalActions } from '~/states/ui/modal/shortcuts';
import styles from './SystemVersion.module.scss';
@@ -13,9 +13,9 @@ type Props = {
const SystemVersion = (props: Props): JSX.Element => {
const { showShortcutsButton } = props;
- const { open: openShortcutsModal } = useShortcutsModal();
+ const { open: openShortcutsModal } = useShortcutsModalActions();
- const { data: growiVersion } = useGrowiVersion();
+ const growiVersion = useGrowiVersion();
// add classes to cmd-key by OS
const platform = window.navigator.platform.toLowerCase();
const isMac = (platform.indexOf('mac') > -1);
diff --git a/apps/app/src/client/components/TableOfContents.tsx b/apps/app/src/client/components/TableOfContents.tsx
index e96896ce284..92ee7f63f80 100644
--- a/apps/app/src/client/components/TableOfContents.tsx
+++ b/apps/app/src/client/components/TableOfContents.tsx
@@ -3,8 +3,8 @@ import React, { useCallback, type JSX } from 'react';
import { pagePathUtils } from '@growi/core/dist/utils';
import ReactMarkdown from 'react-markdown';
-import { useCurrentPagePath } from '~/stores/page';
-import { useTocOptions } from '~/stores/renderer';
+import { useCurrentPagePath } from '~/states/page';
+import { useTocOptions } from '~/states/ui/toc';
import loggerFactory from '~/utils/logger';
import { StickyStretchableScroller } from './StickyStretchableScroller';
@@ -21,7 +21,7 @@ type Props = {
}
const TableOfContents = ({ tagsElementHeight }: Props): JSX.Element => {
- const { data: currentPagePath } = useCurrentPagePath();
+ const currentPagePath = useCurrentPagePath();
const isUsersHomePage = currentPagePath != null && _isUsersHomepage(currentPagePath);
diff --git a/apps/app/src/client/components/TagCloudBox.tsx b/apps/app/src/client/components/TagCloudBox.tsx
index 7630eeed532..295bc1cf12d 100644
--- a/apps/app/src/client/components/TagCloudBox.tsx
+++ b/apps/app/src/client/components/TagCloudBox.tsx
@@ -1,8 +1,8 @@
import type { FC } from 'react';
import React, { memo } from 'react';
-import { useKeywordManager } from '~/client/services/search-operation';
import type { IDataTagCount } from '~/interfaces/tag';
+import { useSetSearchKeyword } from '~/states/search';
type Props = {
@@ -23,7 +23,7 @@ const TagCloudBox: FC
= memo((props:(Props & typeof defaultProps)) => {
const { tags } = props;
const maxTagTextLength: number = props.maxTagTextLength ?? MAX_TAG_TEXT_LENGTH;
- const { pushState } = useKeywordManager();
+ const setSearchKeyword = useSetSearchKeyword();
const tagElements = tags.map((tag:IDataTagCount) => {
const tagNameFormat = (tag.name).length > maxTagTextLength ? `${(tag.name).slice(0, maxTagTextLength)}...` : tag.name;
@@ -33,7 +33,7 @@ const TagCloudBox: FC = memo((props:(Props & typeof defaultProps)) => {
key={tag.name}
type="button"
className="grw-tag badge me-2"
- onClick={() => pushState(`tag:${tag.name}`)}
+ onClick={() => setSearchKeyword(`tag:${tag.name}`)}
>
{tagNameFormat}
diff --git a/apps/app/src/client/components/TagList.tsx b/apps/app/src/client/components/TagList.tsx
index aaddbb96628..f0defb0be33 100644
--- a/apps/app/src/client/components/TagList.tsx
+++ b/apps/app/src/client/components/TagList.tsx
@@ -3,8 +3,8 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'next-i18next';
-import { useKeywordManager } from '~/client/services/search-operation';
import type { IDataTagCount } from '~/interfaces/tag';
+import { useSetSearchKeyword } from '~/states/search';
import PaginationWrapper from './PaginationWrapper';
@@ -33,7 +33,7 @@ const TagList: FC = (props:(TagListProps & typeof defaultProps)) =
const isTagExist: boolean = tagData.length > 0;
const { t } = useTranslation('');
- const { pushState } = useKeywordManager();
+ const setSearchKeyword = useSetSearchKeyword();
const generateTagList = useCallback((tagData) => {
return tagData.map((tag:IDataTagCount) => {
@@ -42,14 +42,14 @@ const TagList: FC = (props:(TagListProps & typeof defaultProps)) =
key={tag._id}
type="button"
className="list-group-item list-group-item-action d-flex justify-content-between rounded-1"
- onClick={() => pushState(`tag:${tag.name}`)}
+ onClick={() => setSearchKeyword(`tag:${tag.name}`)}
>
{tag.name}
{tag.count}
);
});
- }, [pushState]);
+ }, [setSearchKeyword]);
if (!isTagExist) {
return { t('You have no tag, You can set tags on pages') } ;
diff --git a/apps/app/src/client/components/TemplateModal/TemplateModal.tsx b/apps/app/src/client/components/TemplateModal/TemplateModal.tsx
index ca4319cccc0..a327386cee2 100644
--- a/apps/app/src/client/components/TemplateModal/TemplateModal.tsx
+++ b/apps/app/src/client/components/TemplateModal/TemplateModal.tsx
@@ -1,11 +1,11 @@
import React, {
- useCallback, useEffect, useState, type JSX,
+ useCallback, useEffect, useState, useMemo, type JSX,
} from 'react';
import assert from 'assert';
import type { Lang } from '@growi/core';
-import { useTemplateModal, type TemplateModalStatus } from '@growi/editor/dist/client/stores/use-template-modal';
+import { useTemplateModalStatus, useTemplateModalActions, type TemplateModalState } from '@growi/editor';
import {
extractSupportedLocales, getLocalizedTemplate, type TemplateSummary,
} from '@growi/pluginkit/dist/v4';
@@ -23,7 +23,7 @@ import {
} from 'reactstrap';
import { useSWRxTemplate, useSWRxTemplates } from '~/features/templates/stores';
-import { usePersonalSettings } from '~/stores/personal-settings';
+import { useSWRxPersonalSettings } from '~/stores/personal-settings';
import { usePreviewOptions } from '~/stores/renderer';
import loggerFactory from '~/utils/logger';
@@ -67,7 +67,6 @@ const TemplateListGroupItem: React.FC = ({
{localizedTemplate.title}
@@ -111,7 +110,7 @@ const TemplateDropdownItem: React.FC = ({
};
type TemplateModalSubstanceProps = {
- templateModalStatus: TemplateModalStatus,
+ templateModalStatus: TemplateModalState,
close: () => void,
}
@@ -120,7 +119,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
const { t } = useTranslation(['translation', 'commons']);
- const { data: personalSettingsInfo } = usePersonalSettings();
+ const { data: personalSettingsInfo } = useSWRxPersonalSettings();
const { data: rendererOptions } = usePreviewOptions();
const { data: templateSummaries, isLoading } = useSWRxTemplates();
@@ -132,8 +131,15 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
const { format } = useFormatter();
const usersDefaultLang = personalSettingsInfo?.lang;
- const selectedLocalizedTemplate = getLocalizedTemplate(selectedTemplateSummary, usersDefaultLang);
- const selectedTemplateLocales = extractSupportedLocales(selectedTemplateSummary);
+
+ // Memoize heavy calculations
+ const selectedLocalizedTemplate = useMemo(() => (
+ getLocalizedTemplate(selectedTemplateSummary, usersDefaultLang)
+ ), [selectedTemplateSummary, usersDefaultLang]);
+
+ const selectedTemplateLocales = useMemo(() => (
+ extractSupportedLocales(selectedTemplateSummary)
+ ), [selectedTemplateSummary]);
const submitHandler = useCallback((markdown?: string) => {
if (markdown == null) {
@@ -168,6 +174,16 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
setSelectedTemplateSummary(templateSummary);
}, [selectedTemplateLocale, usersDefaultLang]);
+ // Memoize handler creator to avoid recreating onClick functions in map
+ const createOnClickHandler = useCallback((templateSummary: TemplateSummary) => () => {
+ onClickHandler(templateSummary);
+ }, [onClickHandler]);
+
+ // Memoize locale handler creator
+ const createLocaleHandler = useCallback((locale: string) => () => {
+ setSelectedTemplateLocale(locale);
+ }, []);
+
useEffect(() => {
if (!templateModalStatus.isOpened) {
setSelectedTemplateSummary(undefined);
@@ -200,7 +216,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
onClickHandler(templateSummary)}
+ onClick={createOnClickHandler(templateSummary)}
isSelected={isSelected}
usersDefaultLang={usersDefaultLang}
/>
@@ -232,7 +248,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
onClickHandler(templateSummary)}
+ onClick={createOnClickHandler(templateSummary)}
usersDefaultLang={usersDefaultLang}
/>
);
@@ -263,7 +279,7 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
setSelectedTemplateLocale(locale)}
+ onClick={createLocaleHandler(locale)}
>
{locale}
@@ -302,7 +318,8 @@ const TemplateModalSubstance = (props: TemplateModalSubstanceProps): JSX.Element
export const TemplateModal = (): JSX.Element => {
- const { data: templateModalStatus, close } = useTemplateModal();
+ const templateModalStatus = useTemplateModalStatus();
+ const { close } = useTemplateModalActions();
if (templateModalStatus == null) {
return <>;
diff --git a/apps/app/src/client/components/TemplateModal/dynamic.tsx b/apps/app/src/client/components/TemplateModal/dynamic.tsx
new file mode 100644
index 00000000000..3f5d12f0e61
--- /dev/null
+++ b/apps/app/src/client/components/TemplateModal/dynamic.tsx
@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+
+import { useTemplateModalStatus } from '@growi/editor';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+
+type TemplateModalProps = Record;
+
+export const TemplateModalLazyLoaded = (): JSX.Element => {
+ const status = useTemplateModalStatus();
+
+ const TemplateModal = useLazyLoader(
+ 'template-modal',
+ () => import('./TemplateModal').then(mod => ({ default: mod.TemplateModal })),
+ status?.isOpened ?? false,
+ );
+
+ return TemplateModal ? new ItemNode(page));
- }
-
-}
diff --git a/apps/app/src/client/components/TreeItem/NewPageInput/NewPageCreateButton.tsx b/apps/app/src/client/components/TreeItem/NewPageInput/NewPageCreateButton.tsx
deleted file mode 100644
index 2010c184b18..00000000000
--- a/apps/app/src/client/components/TreeItem/NewPageInput/NewPageCreateButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { type FC } from 'react';
-
-import { pagePathUtils } from '@growi/core/dist/utils';
-
-import { NotAvailableForGuest } from '~/client/components/NotAvailableForGuest';
-import { NotAvailableForReadOnlyUser } from '~/client/components/NotAvailableForReadOnlyUser';
-import type { IPageForItem } from '~/interfaces/page';
-
-type NewPageCreateButtonProps = {
- page: IPageForItem,
- onClick?: () => void,
-};
-
-export const NewPageCreateButton: FC = (props) => {
- const {
- page, onClick,
- } = props;
-
- return (
- <>
- {!pagePathUtils.isUsersTopPage(page.path ?? '') && (
-
-
-
- add_circle
-
-
-
- )}
-
- );
-};
diff --git a/apps/app/src/client/components/TreeItem/NewPageInput/NewPageInput.module.scss b/apps/app/src/client/components/TreeItem/NewPageInput/NewPageInput.module.scss
deleted file mode 100644
index c8f9e68174d..00000000000
--- a/apps/app/src/client/components/TreeItem/NewPageInput/NewPageInput.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use '../tree-item-variables';
-
-.new-page-input-container {
- width: calc(100% - tree-item-variables.$btn-triangle-min-width);
- padding-left: 24px;
-}
diff --git a/apps/app/src/client/components/TreeItem/NewPageInput/index.ts b/apps/app/src/client/components/TreeItem/NewPageInput/index.ts
deleted file mode 100644
index a9157707e44..00000000000
--- a/apps/app/src/client/components/TreeItem/NewPageInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './use-new-page-input';
diff --git a/apps/app/src/client/components/TreeItem/NewPageInput/use-new-page-input.tsx b/apps/app/src/client/components/TreeItem/NewPageInput/use-new-page-input.tsx
deleted file mode 100644
index e3053fcf19b..00000000000
--- a/apps/app/src/client/components/TreeItem/NewPageInput/use-new-page-input.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import type { ChangeEvent } from 'react';
-import React, {
- useState, type FC, useCallback, useRef,
-} from 'react';
-
-import nodePath from 'path';
-
-import { Origin } from '@growi/core';
-import { pathUtils, pagePathUtils } from '@growi/core/dist/utils';
-import { useRect } from '@growi/ui/dist/utils';
-import { useTranslation } from 'next-i18next';
-import { debounce } from 'throttle-debounce';
-
-import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '~/client/components/Common/SubmittableInput';
-import { useCreatePage } from '~/client/services/create-page';
-import { toastWarning, toastError, toastSuccess } from '~/client/util/toastr';
-import type { InputValidationResult } from '~/client/util/use-input-validator';
-import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
-import { mutatePageTree, mutateRecentlyUpdated } from '~/stores/page-listing';
-import { usePageTreeDescCountMap } from '~/stores/ui';
-
-import { shouldCreateWipPage } from '../../../../utils/should-create-wip-page';
-import type { TreeItemToolProps } from '../interfaces';
-
-import { NewPageCreateButton } from './NewPageCreateButton';
-
-
-import newPageInputStyles from './NewPageInput.module.scss';
-
-
-type UseNewPageInput = {
- Input: FC,
- CreateButton: FC,
- isProcessingSubmission: boolean,
-}
-
-export const useNewPageInput = (): UseNewPageInput => {
-
- const [showInput, setShowInput] = useState(false);
- const [isProcessingSubmission, setProcessingSubmission] = useState(false);
-
- const CreateButton: FC = (props) => {
-
- const { itemNode, stateHandlers } = props;
- const { page } = itemNode;
-
- const onClick = useCallback(() => {
- setShowInput(true);
- stateHandlers?.setIsOpen(true);
- }, [stateHandlers]);
-
- return (
- = (props) => {
-
- const { t } = useTranslation();
- const { create: createPage } = useCreatePage();
-
- const { itemNode, stateHandlers, isEnableActions } = props;
- const { page, children } = itemNode;
-
- const { getDescCount } = usePageTreeDescCountMap();
- const descendantCount = getDescCount(page._id) || page.descendantCount || 0;
-
- const isChildrenLoaded = children?.length > 0;
- const hasDescendants = descendantCount > 0 || isChildrenLoaded;
-
- const parentRef = useRef(null);
- const [parentRect] = useRect(parentRef);
-
- const [validationResult, setValidationResult] = useState();
-
- const inputValidator = useInputValidator(ValidationTarget.PAGE);
-
- const changeHandler = useCallback(async(e: ChangeEvent) => {
- const validationResult = inputValidator(e.target.value);
- setValidationResult(validationResult ?? undefined);
- }, [inputValidator]);
- const changeHandlerDebounced = debounce(300, changeHandler);
-
- const cancel = useCallback(() => {
- setValidationResult(undefined);
- setShowInput(false);
- }, []);
-
- const create = useCallback(async(inputText) => {
- if (inputText.trim() === '') {
- return cancel();
- }
-
- const parentPath = pathUtils.addTrailingSlash(page.path as string);
- const newPagePath = nodePath.resolve(parentPath, inputText);
- const isCreatable = pagePathUtils.isCreatablePage(newPagePath);
-
- if (!isCreatable) {
- toastWarning(t('you_can_not_create_page_with_this_name_or_hierarchy'));
- return;
- }
-
- setProcessingSubmission(true);
-
- setShowInput(false);
-
- try {
- await createPage(
- {
- path: newPagePath,
- parentPath,
- body: undefined,
- // keep grant info undefined to inherit from parent
- grant: undefined,
- grantUserGroupIds: undefined,
- origin: Origin.View,
- wip: shouldCreateWipPage(newPagePath),
- },
- {
- skipTransition: true,
- onCreated: () => {
- mutatePageTree();
- mutateRecentlyUpdated();
-
- if (!hasDescendants) {
- stateHandlers?.setIsOpen(true);
- }
-
- toastSuccess(t('successfully_saved_the_page'));
- },
- },
- );
- }
- catch (err) {
- toastError(err);
- }
- finally {
- setProcessingSubmission(false);
- }
- }, [cancel, hasDescendants, page.path, stateHandlers, t, createPage]);
-
- const inputContainerClass = newPageInputStyles['new-page-input-container'] ?? '';
- const isInvalid = validationResult != null;
-
- const maxWidth = parentRect != null
- ? getAdjustedMaxWidthForAutosizeInput(parentRect.width, 'sm', validationResult != null ? false : undefined)
- : undefined;
-
- return isEnableActions && showInput
- ? (
-
-
- { isInvalid && (
-
- {validationResult.message}
-
- ) }
-
| RefCallback,
- indentSize?: number,
-}
-
-export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
- const {
- className, itemClassName,
- indentSize = 10,
- itemLevel: baseItemLevel = 1,
- itemNode, targetPath, targetPathOrId, isOpen: _isOpen = false,
- onRenamed, onClick, onClickDuplicateMenuItem, onClickDeleteMenuItem, onWheelClick,
- isEnableActions, isReadOnlyUser, isWipPageShown = true,
- itemRef, itemClass,
- showAlternativeContent,
- } = props;
-
- const { page } = itemNode;
-
- const [currentChildren, setCurrentChildren] = useState([]);
- const [isOpen, setIsOpen] = useState(_isOpen);
-
- const { data } = useSWRxPageChildren(isOpen ? page._id : null);
-
-
- const itemClickHandler = useCallback((e: MouseEvent) => {
- // DO NOT handle the event when e.currentTarget and e.target is different
- if (e.target !== e.currentTarget) {
- return;
- }
-
- onClick?.(page);
-
- }, [onClick, page]);
-
- const itemMouseupHandler = useCallback((e: MouseEvent) => {
- // DO NOT handle the event when e.currentTarget and e.target is different
- if (e.target !== e.currentTarget) {
- return;
- }
-
- if (e.button === 1) {
- e.preventDefault();
- onWheelClick?.(page);
- }
-
- }, [onWheelClick, page]);
-
-
- // descendantCount
- const { getDescCount } = usePageTreeDescCountMap();
- const descendantCount = getDescCount(page._id) || page.descendantCount || 0;
-
- // hasDescendants flag
- const isChildrenLoaded = currentChildren?.length > 0;
- const hasDescendants = descendantCount > 0 || isChildrenLoaded;
-
- const hasChildren = useCallback((): boolean => {
- return currentChildren != null && currentChildren.length > 0;
- }, [currentChildren]);
-
- const onClickLoadChildren = useCallback(() => {
- setIsOpen(!isOpen);
- }, [isOpen]);
-
- useEffect(() => {
- const isPathToTarget = page.path != null
- && targetPath.startsWith(addTrailingSlash(page.path))
- && targetPath !== page.path; // Target Page does not need to be opened
- if (isPathToTarget) setIsOpen(true);
- }, [targetPath, page.path]);
-
- /*
- * When swr fetch succeeded
- */
- useEffect(() => {
- if (isOpen && data != null) {
- const newChildren = ItemNode.generateNodesFromPages(data.children);
- setCurrentChildren(newChildren);
- }
- }, [data, isOpen, targetPathOrId]);
-
- const isSelected = useMemo(() => {
- return page._id === targetPathOrId || page.path === targetPathOrId;
- }, [page, targetPathOrId]);
-
- const ItemClassFixed = itemClass ?? TreeItemLayout;
-
- const baseProps: Omit = {
- isEnableActions,
- isReadOnlyUser,
- isOpen: false,
- isWipPageShown,
- targetPath,
- targetPathOrId,
- onRenamed,
- onClickDuplicateMenuItem,
- onClickDeleteMenuItem,
- };
-
- const toolProps: TreeItemToolProps = {
- ...baseProps,
- itemLevel: baseItemLevel,
- itemNode,
- stateHandlers: {
- setIsOpen,
- },
- };
-
- const EndComponents = props.customEndComponents;
- const HoveredEndComponents = props.customHoveredEndComponents;
- const HeadObChildrenComponents = props.customHeadOfChildrenComponents;
- const AlternativeComponents = props.customAlternativeComponents;
-
- if (!isWipPageShown && page.wip) {
- return <>;
- }
-
- return (
- 1 ? indentSize : 0}px` }}
- >
-
-
-
- {hasDescendants && (
-
-
- arrow_right
-
-
- )}
-
- {EndComponents?.map((EndComponent, index) => (
- // eslint-disable-next-line react/no-array-index-key
- (
-
- {HoveredEndComponents?.map((HoveredEndContent, index) => (
- // eslint-disable-next-line react/no-array-index-key
- (
-
- )
- }
-
-
- { isOpen && (
-
-
- {HeadObChildrenComponents?.map((HeadObChildrenContents, index) => (
- // eslint-disable-next-line react/no-array-index-key
- (
- ) }
-
>,
- },
-};
-
-export type TreeItemProps = TreeItemBaseProps & {
- targetPath: string,
- targetPathOrId?:string,
- isOpen?: boolean,
- isWipPageShown?: boolean,
- itemClass?: React.FunctionComponent,
- itemClassName?: string,
- customEndComponents?: Array>,
- customHoveredEndComponents?: Array>,
- customHeadOfChildrenComponents?: Array>,
- showAlternativeContent?: boolean,
- customAlternativeComponents?: Array>,
- onClick?(page: IPageForItem): void,
- onWheelClick?(page: IPageForItem): void,
-};
diff --git a/apps/app/src/client/components/UnsavedAlertDialog.tsx b/apps/app/src/client/components/UnsavedAlertDialog.tsx
index 764f73c6781..9e2f15824e8 100644
--- a/apps/app/src/client/components/UnsavedAlertDialog.tsx
+++ b/apps/app/src/client/components/UnsavedAlertDialog.tsx
@@ -5,12 +5,12 @@ import React, {
import { useTranslation } from 'next-i18next';
import { useRouter } from 'next/router';
-import { useIsEnabledUnsavedWarning } from '~/stores/editor';
+import { useUnsavedWarning } from '~/states/ui/unsaved-warning';
const UnsavedAlertDialog = (): JSX.Element => {
const { t } = useTranslation();
const router = useRouter();
- const { data: isEnabledUnsavedWarning, mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
+ const { isEnabled: isEnabledUnsavedWarning, reset } = useUnsavedWarning();
const alertUnsavedWarningByBrowser = useCallback((e) => {
if (isEnabledUnsavedWarning) {
@@ -29,15 +29,15 @@ const UnsavedAlertDialog = (): JSX.Element => {
// eslint-disable-next-line no-alert
const answer = window.confirm(t('page_edit.changes_not_saved'));
if (!answer) {
- // eslint-disable-next-line no-throw-literal
+ // eslint-disable-next-line no-throw-literal
throw 'Abort route';
}
}
}, [isEnabledUnsavedWarning, t]);
const onRouterChangeComplete = useCallback(() => {
- mutateIsEnabledUnsavedWarning(false);
- }, [mutateIsEnabledUnsavedWarning]);
+ reset();
+ }, [reset]);
/*
* Route changes by Browser
diff --git a/apps/app/src/client/components/UsersHomepageFooter.tsx b/apps/app/src/client/components/UsersHomepageFooter.tsx
index bd137608236..99dc3c78480 100644
--- a/apps/app/src/client/components/UsersHomepageFooter.tsx
+++ b/apps/app/src/client/components/UsersHomepageFooter.tsx
@@ -2,8 +2,9 @@ import React, { useState, type JSX } from 'react';
import { useTranslation } from 'next-i18next';
+import { RecentActivity } from '~/client/components/RecentActivity/RecentActivity';
import { RecentCreated } from '~/client/components/RecentCreated/RecentCreated';
-import { useCurrentUser } from '~/stores-universal/context';
+import { useCurrentUser } from '~/states/global';
import { BookmarkFolderTree } from './Bookmarks/BookmarkFolderTree';
@@ -17,7 +18,7 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
const { t } = useTranslation();
const { creatorId } = props;
const [isExpanded, setIsExpanded] = useState(false);
- const { data: currentUser } = useCurrentUser();
+ const currentUser = useCurrentUser();
const isOperable = currentUser?._id === creatorId;
return (
@@ -45,6 +46,14 @@ export const UsersHomepageFooter = (props: UsersHomepageFooterProps): JSX.Elemen
+
+
+ recently_created
+ {t('user_home_page.recent_activity')}
+
+
+
;
+ end: () => Promise;
+};
+
+export const useMaintenanceModeActions = (): MaintenanceModeActions => {
+ const setIsMaintenanceMode = useSetAtom(isMaintenanceModeAtom);
+
+ const start = useCallback(async () => {
+ await apiv3Post('/app-settings/maintenance-mode', { flag: true });
+ setIsMaintenanceMode(true);
+ }, [setIsMaintenanceMode]);
+
+ const end = useCallback(async () => {
+ await apiv3Post('/app-settings/maintenance-mode', { flag: false });
+ setIsMaintenanceMode(false);
+ }, [setIsMaintenanceMode]);
+
+ return { start, end };
+};
diff --git a/apps/app/src/client/services/page-operation.ts b/apps/app/src/client/services/page-operation.ts
index 901813f21ca..27d15b60fdb 100644
--- a/apps/app/src/client/services/page-operation.ts
+++ b/apps/app/src/client/services/page-operation.ts
@@ -5,13 +5,10 @@ import { SubscriptionStatusType } from '@growi/core';
import urljoin from 'url-join';
import type { SyncLatestRevisionBody } from '~/interfaces/yjs';
-import { useIsGuestUser } from '~/stores-universal/context';
-import { useEditingMarkdown, usePageTagsForEditors } from '~/stores/editor';
-import {
- useCurrentPageId, useSWRMUTxCurrentPage, useSWRxApplicableGrant, useSWRxTagsInfo,
- useSWRxCurrentGrantData,
-} from '~/stores/page';
-import { useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
+import { useIsGuestUser } from '~/states/context';
+import { useFetchCurrentPage, useSetRemoteLatestPageData } from '~/states/page';
+import { useSetEditingMarkdown } from '~/states/ui/editor';
+import { useSWRxApplicableGrant, useSWRxCurrentGrantData } from '~/stores/page';
import loggerFactory from '~/utils/logger';
import { apiPost } from '../util/apiv1-client';
@@ -98,13 +95,11 @@ export type UpdateStateAfterSaveOption = {
}
export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: UpdateStateAfterSaveOption): (() => Promise) | undefined => {
- const { mutate: mutateCurrentPageId } = useCurrentPageId();
- const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
- const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
- const { mutate: mutateTagsInfo } = useSWRxTagsInfo(pageId);
- const { sync: syncTagsInfoForEditor } = usePageTagsForEditors(pageId);
- const { mutate: mutateEditingMarkdown } = useEditingMarkdown();
- const { data: isGuestUser } = useIsGuestUser();
+ const isGuestUser = useIsGuestUser();
+ const { fetchCurrentPage } = useFetchCurrentPage();
+ const setRemoteLatestPageData = useSetRemoteLatestPageData();
+
+ const setEditingMarkdown = useSetEditingMarkdown();
const { mutate: mutateCurrentGrantData } = useSWRxCurrentGrantData(isGuestUser ? null : pageId);
const { mutate: mutateApplicableGrant } = useSWRxApplicableGrant(isGuestUser ? null : pageId);
@@ -112,13 +107,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
return useCallback(async() => {
if (pageId == null) { return }
- // update tag before page: https://github.com/growilabs/growi/pull/7158
- // !! DO NOT CHANGE THE ORDERS OF THE MUTATIONS !! -- 12.26 yuken-t
- await mutateTagsInfo(); // get from DB
- syncTagsInfoForEditor(); // sync global state for client
-
- await mutateCurrentPageId(pageId);
- const updatedPage = await mutateCurrentPage();
+ const updatedPage = await fetchCurrentPage({ pageId, force: true });
if (updatedPage == null || updatedPage.revision == null) { return }
@@ -126,7 +115,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
// and see: https://github.com/growilabs/growi/pull/7118
const supressEditingMarkdownMutation = opts?.supressEditingMarkdownMutation ?? false;
if (!supressEditingMarkdownMutation) {
- mutateEditingMarkdown(updatedPage.revision.body);
+ setEditingMarkdown(updatedPage.revision.body);
}
mutateCurrentGrantData();
@@ -141,8 +130,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
setRemoteLatestPageData(remoterevisionData);
},
- // eslint-disable-next-line max-len
- [pageId, mutateTagsInfo, syncTagsInfoForEditor, mutateCurrentPageId, mutateCurrentPage, opts?.supressEditingMarkdownMutation, mutateCurrentGrantData, mutateApplicableGrant, setRemoteLatestPageData, mutateEditingMarkdown]);
+ [pageId, fetchCurrentPage, opts?.supressEditingMarkdownMutation, mutateCurrentGrantData, mutateApplicableGrant, setRemoteLatestPageData, setEditingMarkdown]);
};
export const unlink = async(path: string): Promise => {
diff --git a/apps/app/src/client/services/search-operation.ts b/apps/app/src/client/services/search-operation.ts
deleted file mode 100644
index fedc6babd6f..00000000000
--- a/apps/app/src/client/services/search-operation.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-import { type SWRResponseWithUtils, withUtils } from '@growi/core/dist/swr';
-import { useRouter } from 'next/router';
-import useSWRImmutable from 'swr/immutable';
-
-
-type UseKeywordManagerUtils = {
- pushState: (newKeyword: string) => void,
-}
-
-export const useKeywordManager = (): SWRResponseWithUtils => {
- // routerRef solve the problem of infinite redrawing that occurs with routers
- const router = useRouter();
- const routerRef = useRef(router);
-
- // parse URL Query
- const queries = router.query.q;
- const initialKeyword = (Array.isArray(queries) ? queries.join(' ') : queries) ?? '';
-
- const swrResponse = useSWRImmutable('searchKeyword', null, {
- fallbackData: initialKeyword,
- });
-
- const { mutate } = swrResponse;
- const pushState = useCallback((newKeyword: string) => {
- mutate((prevKeyword) => {
- if (prevKeyword !== newKeyword) {
- const newUrl = new URL('/_search', 'http://example.com');
- newUrl.searchParams.append('q', newKeyword);
- routerRef.current.push(`${newUrl.pathname}${newUrl.search}`, '');
- }
-
- return newKeyword;
- });
- }, [mutate]);
-
- // detect search keyword from the query of URL
- useEffect(() => {
- mutate(initialKeyword);
- }, [mutate, initialKeyword]);
-
- // browser back and forward
- useEffect(() => {
- routerRef.current.beforePopState(({ url }) => {
- const newUrl = new URL(url, 'https://exmple.com');
- const newKeyword = newUrl.searchParams.get('q');
- if (newKeyword != null) {
- mutate(newKeyword);
- }
- return true;
- });
- }, [mutate]);
-
- return withUtils(swrResponse, {
- pushState,
- });
-};
diff --git a/apps/app/src/client/services/side-effects/drawio-modal-launcher-for-view.ts b/apps/app/src/client/services/side-effects/drawio-modal-launcher-for-view.ts
index 477358701f9..8ee922ba44e 100644
--- a/apps/app/src/client/services/side-effects/drawio-modal-launcher-for-view.ts
+++ b/apps/app/src/client/services/side-effects/drawio-modal-launcher-for-view.ts
@@ -1,44 +1,38 @@
import { useCallback, useEffect } from 'react';
-import type EventEmitter from 'events';
-
import { Origin } from '@growi/core';
+import { globalEventTarget } from '@growi/core/dist/utils';
import type { DrawioEditByViewerProps } from '@growi/remark-drawio';
import { replaceDrawioInMarkdown } from '~/client/components/Page/markdown-drawio-util-for-view';
import { extractRemoteRevisionDataFromErrorObj, useUpdatePage } from '~/client/services/update-page';
-import { useShareLinkId } from '~/stores-universal/context';
-import { useConflictDiffModal, useDrawioModal } from '~/stores/modal';
-import { useSWRxCurrentPage } from '~/stores/page';
-import { type RemoteRevisionData, useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
+import { useCurrentPageData, useSetRemoteLatestPageData } from '~/states/page';
+import type { RemoteRevisionData } from '~/states/page';
+import { useShareLinkId } from '~/states/page/hooks';
+import { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
+import { useDrawioModalActions } from '~/states/ui/modal/drawio';
import loggerFactory from '~/utils/logger';
const logger = loggerFactory('growi:cli:side-effects:useDrawioModalLauncherForView');
-declare global {
- // eslint-disable-next-line vars-on-top, no-var
- var globalEmitter: EventEmitter;
-}
-
-
export const useDrawioModalLauncherForView = (opts?: {
onSaveSuccess?: () => void,
onSaveError?: (error: any) => void,
}): void => {
- const { data: shareLinkId } = useShareLinkId();
+ const shareLinkId = useShareLinkId();
- const { data: currentPage } = useSWRxCurrentPage();
+ const currentPage = useCurrentPageData();
- const { open: openDrawioModal } = useDrawioModal();
+ const { open: openDrawioModal } = useDrawioModalActions();
- const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModal();
+ const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModalActions();
const _updatePage = useUpdatePage();
- const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
+ const setRemoteLatestPageData = useSetRemoteLatestPageData();
// eslint-disable-next-line max-len
const updatePage = useCallback(async(revisionId:string, newMarkdown: string, onConflict: (conflictData: RemoteRevisionData, newMarkdown: string) => void) => {
@@ -68,7 +62,7 @@ export const useDrawioModalLauncherForView = (opts?: {
logger.error('failed to save', error);
opts?.onSaveError?.(error);
}
- }, [closeConflictDiffModal, currentPage, opts, shareLinkId]);
+ }, [_updatePage, closeConflictDiffModal, currentPage, opts, shareLinkId]);
// eslint-disable-next-line max-len
const generateResolveConflictHandler = useCallback((revisionId: string, onConflict: (conflictData: RemoteRevisionData, newMarkdown: string) => void) => {
@@ -107,13 +101,14 @@ export const useDrawioModalLauncherForView = (opts?: {
return;
}
- const handler = (data: DrawioEditByViewerProps) => {
+ const handler = (evt: CustomEvent) => {
+ const data = evt.detail;
openDrawioModal(data.drawioMxFile, drawioMxFile => saveByDrawioModal(drawioMxFile, data.bol, data.eol));
};
- globalEmitter.on('launchDrawioModal', handler);
+ globalEventTarget.addEventListener('launchDrawioModal', handler);
return function cleanup() {
- globalEmitter.removeListener('launchDrawioModal', handler);
+ globalEventTarget.removeEventListener('launchDrawioModal', handler);
};
}, [openDrawioModal, saveByDrawioModal, shareLinkId]);
};
diff --git a/apps/app/src/client/services/side-effects/handsontable-modal-launcher-for-view.ts b/apps/app/src/client/services/side-effects/handsontable-modal-launcher-for-view.ts
index f3449aeb497..6b23bbeec32 100644
--- a/apps/app/src/client/services/side-effects/handsontable-modal-launcher-for-view.ts
+++ b/apps/app/src/client/services/side-effects/handsontable-modal-launcher-for-view.ts
@@ -1,44 +1,39 @@
import { useCallback, useEffect } from 'react';
-import type EventEmitter from 'events';
-
import { Origin } from '@growi/core';
+import { globalEventTarget } from '@growi/core/dist/utils';
import type { MarkdownTable } from '@growi/editor';
import { getMarkdownTableFromLine, replaceMarkdownTableInMarkdown } from '~/client/components/Page/markdown-table-util-for-view';
+import type { LaunchHandsonTableModalEventDetail } from '~/client/interfaces/handsontable-modal';
import { extractRemoteRevisionDataFromErrorObj, useUpdatePage } from '~/client/services/update-page';
-import { useShareLinkId } from '~/stores-universal/context';
-import { useHandsontableModal, useConflictDiffModal } from '~/stores/modal';
-import { useSWRxCurrentPage } from '~/stores/page';
-import { type RemoteRevisionData, useSetRemoteLatestPageData } from '~/stores/remote-latest-page';
+import { useCurrentPageData, useSetRemoteLatestPageData } from '~/states/page';
+import type { RemoteRevisionData } from '~/states/page';
+import { useShareLinkId } from '~/states/page/hooks';
+import { useConflictDiffModalActions } from '~/states/ui/modal/conflict-diff';
+import { useHandsontableModalActions } from '~/states/ui/modal/handsontable';
import loggerFactory from '~/utils/logger';
const logger = loggerFactory('growi:cli:side-effects:useHandsontableModalLauncherForView');
-declare global {
- // eslint-disable-next-line vars-on-top, no-var
- var globalEmitter: EventEmitter;
-}
-
-
export const useHandsontableModalLauncherForView = (opts?: {
onSaveSuccess?: () => void,
onSaveError?: (error: any) => void,
}): void => {
- const { data: shareLinkId } = useShareLinkId();
+ const shareLinkId = useShareLinkId();
- const { data: currentPage } = useSWRxCurrentPage();
+ const currentPage = useCurrentPageData();
- const { open: openHandsontableModal } = useHandsontableModal();
+ const { open: openHandsontableModal } = useHandsontableModalActions();
- const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModal();
+ const { open: openConflictDiffModal, close: closeConflictDiffModal } = useConflictDiffModalActions();
const _updatePage = useUpdatePage();
- const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
+ const setRemoteLatestPageData = useSetRemoteLatestPageData();
// eslint-disable-next-line max-len
const updatePage = useCallback(async(revisionId:string, newMarkdown: string, onConflict: (conflictData: RemoteRevisionData, newMarkdown: string) => void) => {
@@ -68,7 +63,7 @@ export const useHandsontableModalLauncherForView = (opts?: {
logger.error('failed to save', error);
opts?.onSaveError?.(error);
}
- }, [closeConflictDiffModal, currentPage, opts, shareLinkId]);
+ }, [_updatePage, closeConflictDiffModal, currentPage, opts, shareLinkId]);
// eslint-disable-next-line max-len
const generateResolveConflictHandler = useCallback((revisionId: string, onConflict: (conflictData: RemoteRevisionData, newMarkdown: string) => void) => {
@@ -106,17 +101,18 @@ export const useHandsontableModalLauncherForView = (opts?: {
return;
}
- const handler = (bol: number, eol: number) => {
+ const handler = (evt: CustomEvent) => {
if (currentPage.revision == null) return;
const markdown = currentPage.revision.body;
+ const { bol, eol } = evt.detail;
const currentMarkdownTable = getMarkdownTableFromLine(markdown, bol, eol);
openHandsontableModal(currentMarkdownTable, false, table => saveByHandsontableModal(table, bol, eol));
};
- globalEmitter.on('launchHandsonTableModal', handler);
+ globalEventTarget.addEventListener('launchHandsonTableModal', handler);
return function cleanup() {
- globalEmitter.removeListener('launchHandsonTableModal', handler);
+ globalEventTarget.removeEventListener('launchHandsonTableModal', handler);
};
}, [currentPage, openHandsontableModal, saveByHandsontableModal, shareLinkId]);
};
diff --git a/apps/app/src/client/services/side-effects/hash-changed.ts b/apps/app/src/client/services/side-effects/hash-changed.ts
index b149ac17429..f0b4c026811 100644
--- a/apps/app/src/client/services/side-effects/hash-changed.ts
+++ b/apps/app/src/client/services/side-effects/hash-changed.ts
@@ -2,8 +2,8 @@ import { useCallback, useEffect } from 'react';
import { useRouter } from 'next/router';
-import { useIsEditable } from '~/stores-universal/context';
-import { useEditorMode, determineEditorModeByHash } from '~/stores-universal/ui';
+import { useIsEditable } from '~/states/page';
+import { useEditorMode, determineEditorModeByHash } from '~/states/ui/editor';
/**
* Change editorMode by browser forward/back operation
@@ -11,16 +11,16 @@ import { useEditorMode, determineEditorModeByHash } from '~/stores-universal/ui'
export const useHashChangedEffect = (): void => {
const router = useRouter();
- const { data: isEditable } = useIsEditable();
- const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
+ const isEditable = useIsEditable();
+ const { editorMode, setEditorMode } = useEditorMode();
const hashchangeHandler = useCallback(() => {
const newEditorMode = determineEditorModeByHash();
if (editorMode !== newEditorMode) {
- mutateEditorMode(newEditorMode);
+ setEditorMode(newEditorMode);
}
- }, [editorMode, mutateEditorMode]);
+ }, [editorMode, setEditorMode]);
// setup effect
useEffect(() => {
diff --git a/apps/app/src/client/services/side-effects/page-updated.ts b/apps/app/src/client/services/side-effects/page-updated.ts
index 12ea9c637e2..ad09f495d0c 100644
--- a/apps/app/src/client/services/side-effects/page-updated.ts
+++ b/apps/app/src/client/services/side-effects/page-updated.ts
@@ -1,23 +1,25 @@
import { useCallback, useEffect } from 'react';
-import { useGlobalSocket } from '@growi/core/dist/swr';
-
import { SocketEventName } from '~/interfaces/websocket';
-import { useEditorMode, EditorMode } from '~/stores-universal/ui';
-import { usePageStatusAlert } from '~/stores/alert';
-import { useSWRxCurrentPage, useSWRMUTxCurrentPage } from '~/stores/page';
-import { useSetRemoteLatestPageData, type RemoteRevisionData } from '~/stores/remote-latest-page';
+import { useCurrentPageData, useFetchCurrentPage, useSetRemoteLatestPageData } from '~/states/page';
+import type { RemoteRevisionData } from '~/states/page';
+import { useGlobalSocket } from '~/states/socket-io';
+import { useEditorMode, EditorMode } from '~/states/ui/editor';
+import { usePageStatusAlertActions } from '~/states/ui/modal/page-status-alert';
+import { useSWRxPageInfo } from '~/stores/page';
export const usePageUpdatedEffect = (): void => {
- const { setRemoteLatestPageData } = useSetRemoteLatestPageData();
+ const setRemoteLatestPageData = useSetRemoteLatestPageData();
+
+ const socket = useGlobalSocket();
+ const { editorMode } = useEditorMode();
+ const currentPage = useCurrentPageData();
+ const { fetchCurrentPage } = useFetchCurrentPage();
+ const { open: openPageStatusAlert, close: closePageStatusAlert } = usePageStatusAlertActions();
- const { data: socket } = useGlobalSocket();
- const { data: editorMode } = useEditorMode();
- const { data: currentPage } = useSWRxCurrentPage();
- const { trigger: mutateCurrentPage } = useSWRMUTxCurrentPage();
- const { open: openPageStatusAlert, close: closePageStatusAlert } = usePageStatusAlert();
+ const { mutate: mutatePageInfo } = useSWRxPageInfo(currentPage?._id);
const remotePageDataUpdateHandler = useCallback((data) => {
// Set remote page data
@@ -33,6 +35,9 @@ export const usePageUpdatedEffect = (): void => {
if (currentPage?._id != null && currentPage._id === s2cMessagePageUpdated.pageId) {
setRemoteLatestPageData(remoteData);
+ // Update PageInfo cache
+ mutatePageInfo();
+
// Open PageStatusAlert
const currentRevisionId = currentPage?.revision?._id;
const remoteRevisionId = s2cMessagePageUpdated.revisionId;
@@ -40,7 +45,7 @@ export const usePageUpdatedEffect = (): void => {
// !!CAUTION!! Timing of calling openPageStatusAlert may clash with components/PageEditor/conflict.tsx
if (isRevisionOutdated && editorMode === EditorMode.View) {
- openPageStatusAlert({ hideEditorMode: EditorMode.Editor, onRefleshPage: mutateCurrentPage });
+ openPageStatusAlert({ hideEditorMode: EditorMode.Editor, onRefleshPage: () => fetchCurrentPage({ force: true }) });
}
// Clear cache
@@ -48,7 +53,8 @@ export const usePageUpdatedEffect = (): void => {
closePageStatusAlert();
}
}
- }, [currentPage?._id, currentPage?.revision?._id, editorMode, mutateCurrentPage, openPageStatusAlert, closePageStatusAlert, setRemoteLatestPageData]);
+ // eslint-disable-next-line max-len
+ }, [currentPage?._id, currentPage?.revision?._id, setRemoteLatestPageData, mutatePageInfo, editorMode, openPageStatusAlert, fetchCurrentPage, closePageStatusAlert]);
// listen socket for someone updating this page
useEffect(() => {
diff --git a/apps/app/src/client/services/side-effects/yjs.ts b/apps/app/src/client/services/side-effects/yjs.ts
deleted file mode 100644
index 793d46a8602..00000000000
--- a/apps/app/src/client/services/side-effects/yjs.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-
-import { useGlobalSocket } from '@growi/core/dist/swr';
-
-import { SocketEventName } from '~/interfaces/websocket';
-import { useCurrentPageYjsData } from '~/stores/yjs';
-
-export const useCurrentPageYjsDataEffect = (): void => {
- const { data: socket } = useGlobalSocket();
- const { updateHasYdocsNewerThanLatestRevision, updateAwarenessStateSize } = useCurrentPageYjsData();
-
- useEffect(() => {
-
- if (socket == null) { return }
-
- socket.on(SocketEventName.YjsHasYdocsNewerThanLatestRevisionUpdated, updateHasYdocsNewerThanLatestRevision);
- socket.on(SocketEventName.YjsAwarenessStateSizeUpdated, updateAwarenessStateSize);
-
- return () => {
- socket.off(SocketEventName.YjsHasYdocsNewerThanLatestRevisionUpdated, updateHasYdocsNewerThanLatestRevision);
- socket.off(SocketEventName.YjsAwarenessStateSizeUpdated, updateAwarenessStateSize);
- };
-
- }, [socket, updateAwarenessStateSize, updateHasYdocsNewerThanLatestRevision]);
-};
diff --git a/apps/app/src/client/services/update-page/conflict.tsx b/apps/app/src/client/services/update-page/conflict.tsx
index 5827b805382..5f201907666 100644
--- a/apps/app/src/client/services/update-page/conflict.tsx
+++ b/apps/app/src/client/services/update-page/conflict.tsx
@@ -1,7 +1,7 @@
import type { ErrorV3 } from '@growi/core/dist/models';
import { PageUpdateErrorCode } from '~/interfaces/apiv3';
-import { type RemoteRevisionData } from '~/stores/remote-latest-page';
+import type { RemoteRevisionData } from '~/states/page';
export const extractRemoteRevisionDataFromErrorObj = (errors: Array): RemoteRevisionData | undefined => {
for (const error of errors) {
diff --git a/apps/app/src/client/services/update-page/use-update-page.tsx b/apps/app/src/client/services/update-page/use-update-page.tsx
index 7764991c394..49ba455bfb2 100644
--- a/apps/app/src/client/services/update-page/use-update-page.tsx
+++ b/apps/app/src/client/services/update-page/use-update-page.tsx
@@ -1,7 +1,7 @@
import { useCallback } from 'react';
import type { IApiv3PageUpdateParams, IApiv3PageUpdateResponse } from '~/interfaces/apiv3';
-import { useIsUntitledPage } from '~/stores/ui';
+import { useSetIsUntitledPage } from '~/states/page';
import { updatePage } from './update-page';
@@ -10,16 +10,16 @@ type UseUpdatePage = (params: IApiv3PageUpdateParams) => Promise {
- const { mutate: mutateUntitledPage } = useIsUntitledPage();
+ const setIsUntitledPage = useSetIsUntitledPage();
- const updatePageExt: UseUpdatePage = useCallback(async(params) => {
+ const updatePageExt: UseUpdatePage = useCallback(async (params) => {
const result = await updatePage(params);
// set false to isUntitledPage
- mutateUntitledPage(false);
+ setIsUntitledPage(false);
return result;
- }, [mutateUntitledPage]);
+ }, [setIsUntitledPage]);
return updatePageExt;
};
diff --git a/apps/app/src/client/services/use-print-mode.ts b/apps/app/src/client/services/use-print-mode.ts
new file mode 100644
index 00000000000..31c49d7a6f1
--- /dev/null
+++ b/apps/app/src/client/services/use-print-mode.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+import { flushSync } from 'react-dom';
+
+export const usePrintMode = (): boolean => {
+ const [isPrinting, setIsPrinting] = useState(false);
+
+ useEffect(() => {
+ // force re-render on beforeprint
+ const handleBeforePrint = () => flushSync(() => {
+ setIsPrinting(true);
+ });
+
+ const handleAfterPrint = () => {
+ setIsPrinting(false);
+ };
+
+ window.addEventListener('beforeprint', handleBeforePrint);
+ window.addEventListener('afterprint', handleAfterPrint);
+
+ return () => {
+ window.removeEventListener('beforeprint', handleBeforePrint);
+ window.removeEventListener('afterprint', handleAfterPrint);
+ };
+ }, []);
+
+ return isPrinting;
+};
diff --git a/apps/app/src/client/util/apiv3-client.ts b/apps/app/src/client/util/apiv3-client.ts
index 5d4887b6946..db9d5835482 100644
--- a/apps/app/src/client/util/apiv3-client.ts
+++ b/apps/app/src/client/util/apiv3-client.ts
@@ -13,9 +13,9 @@ const logger = loggerFactory('growi:apiv3');
const apiv3ErrorHandler = (_err: any): any[] => {
// extract api errors from general 400 err
- const err = _err.response ? _err.response.data.errors : _err;
+ const err = axios.isAxiosError(_err) ? _err.response?.data.errors : _err;
const errs = toArrayIfNot(err);
- const errorInfo = _err.response ? _err.response.data.info : undefined;
+ const errorInfo = axios.isAxiosError(_err) ? _err.response?.data.info : undefined;
for (const err of errs) {
logger.error(err.message);
diff --git a/apps/app/src/components/Admin/Common/AdminNavigation.tsx b/apps/app/src/components/Admin/Common/AdminNavigation.tsx
index bc8eb2d085e..932cf1721ec 100644
--- a/apps/app/src/components/Admin/Common/AdminNavigation.tsx
+++ b/apps/app/src/components/Admin/Common/AdminNavigation.tsx
@@ -4,10 +4,7 @@ import { pathUtils } from '@growi/core/dist/utils';
import { useTranslation } from 'next-i18next';
import urljoin from 'url-join';
-import {
- useGrowiAppIdForGrowiCloud,
- useGrowiCloudUri,
-} from '~/stores-universal/context';
+import { useGrowiAppIdForGrowiCloud, useGrowiCloudUri } from '~/states/global';
import styles from './AdminNavigation.module.scss';
@@ -188,8 +185,8 @@ const MenuLink = ({
export const AdminNavigation = (): JSX.Element => {
const pathname = window.location.pathname;
- const { data: growiCloudUri } = useGrowiCloudUri();
- const { data: growiAppIdForGrowiCloud } = useGrowiAppIdForGrowiCloud();
+ const growiCloudUri = useGrowiCloudUri();
+ const growiAppIdForGrowiCloud = useGrowiAppIdForGrowiCloud();
const isActiveMenu = useCallback(
(path: string | string[]) => {
diff --git a/apps/app/src/components/Common/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx b/apps/app/src/components/Common/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx
index 6c0c994d962..c89034b6187 100644
--- a/apps/app/src/components/Common/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx
+++ b/apps/app/src/components/Common/PagePathHierarchicalLink/PagePathHierarchicalLink.tsx
@@ -1,4 +1,4 @@
-import React, { type JSX, memo, useCallback } from 'react';
+import { type FC, type JSX, memo, useCallback } from 'react';
import Link from 'next/link';
import urljoin from 'url-join';
@@ -17,7 +17,7 @@ type PagePathHierarchicalLinkProps = {
isInnerElem?: boolean;
};
-export const PagePathHierarchicalLink = memo(
+export const PagePathHierarchicalLink: FC = memo(
(props: PagePathHierarchicalLinkProps): JSX.Element => {
const {
linkedPagePath,
diff --git a/apps/app/src/components/Common/PagePathNav/PagePathNav.tsx b/apps/app/src/components/Common/PagePathNav/PagePathNav.tsx
index 103121976b2..d41ec0033f4 100644
--- a/apps/app/src/components/Common/PagePathNav/PagePathNav.tsx
+++ b/apps/app/src/components/Common/PagePathNav/PagePathNav.tsx
@@ -5,21 +5,12 @@ import { pagePathUtils } from '@growi/core/dist/utils';
import LinkedPagePath from '~/models/linked-page-path';
import { PagePathHierarchicalLink } from '../PagePathHierarchicalLink';
+import { Separator } from '.';
import type { PagePathNavLayoutProps } from './PagePathNavLayout';
import { PagePathNavLayout } from './PagePathNavLayout';
-import styles from './PagePathNav.module.scss';
-
const { isTrashPage } = pagePathUtils;
-const Separator = ({ className }: { className?: string }): JSX.Element => {
- return (
-
- /
-
- );
-};
-
export const PagePathNav = (props: PagePathNavLayoutProps): JSX.Element => {
const { pagePath } = props;
diff --git a/apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss b/apps/app/src/components/Common/PagePathNav/PagePathNavLayout.module.scss
similarity index 100%
rename from apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss
rename to apps/app/src/components/Common/PagePathNav/PagePathNavLayout.module.scss
diff --git a/apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx b/apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx
index 6d6810f68f2..2f6cb390231 100644
--- a/apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx
+++ b/apps/app/src/components/Common/PagePathNav/PagePathNavLayout.tsx
@@ -1,9 +1,9 @@
import type { JSX, ReactNode } from 'react';
import dynamic from 'next/dynamic';
-import { useIsNotFound } from '~/stores/page';
+import { usePageNotFound } from '~/states/page';
-import styles from './PagePathNav.module.scss';
+import styles from './PagePathNavLayout.module.scss';
const moduleClass = styles['grw-page-path-nav-layout'] ?? '';
@@ -25,6 +25,7 @@ type Props = PagePathNavLayoutProps & {
const CopyDropdown = dynamic(
() =>
+ // biome-ignore lint/style/noRestrictedImports: no-problem dynamic import
import('~/client/components/Common/CopyDropdown').then(
(mod) => mod.CopyDropdown,
),
@@ -45,7 +46,7 @@ export const PagePathNavLayout = (props: Props): JSX.Element => {
maxWidth,
} = props;
- const { data: isNotFound } = useIsNotFound();
+ const isNotFound = usePageNotFound();
const copyDropdownId = `copydropdown-in-pagepathnavlayout-${pageId}`;
diff --git a/apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.tsx b/apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.tsx
index b4494c90438..22138996d08 100644
--- a/apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.tsx
+++ b/apps/app/src/components/Common/PagePathNavTitle/PagePathNavTitle.tsx
@@ -14,6 +14,7 @@ const PagePathNavSticky = withLoadingProps(
(useLoadingProps) =>
dynamic(
() =>
+ // biome-ignore lint/style/noRestrictedImports: no-problem dynamic import
import('~/client/components/PagePathNavSticky').then(
(mod) => mod.PagePathNavSticky,
),
@@ -41,17 +42,15 @@ export const PagePathNavTitle = (
setClient(true);
}, []);
+ const className = `${moduleClass} mb-4`;
+
return isClient ? (
-
+
(
+ undefined,
+ );
+
+ useIsomorphicLayoutEffect(() => {
+ if (className !== dynamicClassName) {
+ setDynamicClassName(className);
+ }
+ }, [className, dynamicClassName]);
+
+ if (dynamicClassName != null) {
+ classNames.push(dynamicClassName);
}
+
// get color scheme from next-themes
const { resolvedTheme, resolvedThemeByAttributes } = useNextThemes();
diff --git a/apps/app/src/components/Layout/ShareLinkLayout.tsx b/apps/app/src/components/Layout/ShareLinkLayout.tsx
index 5a6a10e8de8..02bef313065 100644
--- a/apps/app/src/components/Layout/ShareLinkLayout.tsx
+++ b/apps/app/src/components/Layout/ShareLinkLayout.tsx
@@ -1,9 +1,12 @@
import type { JSX, ReactNode } from 'react';
-import React from 'react';
import dynamic from 'next/dynamic';
+// biome-ignore lint/style/noRestrictedImports: no-problem lazy loaded components
+import { ShortcutsModalLazyLoaded } from '~/client/components/ShortcutsModal';
+
import { RawLayout } from './RawLayout';
+// biome-ignore-start lint/style/noRestrictedImports: no-problem dynamic import
const PageCreateModal = dynamic(
() => import('~/client/components/PageCreateModal'),
{ ssr: false },
@@ -15,14 +18,11 @@ const GrowiNavbarBottom = dynamic(
),
{ ssr: false },
);
-const ShortcutsModal = dynamic(
- () => import('~/client/components/ShortcutsModal'),
- { ssr: false },
-);
const SystemVersion = dynamic(
() => import('~/client/components/SystemVersion'),
{ ssr: false },
);
+// biome-ignore-end lint/style/noRestrictedImports: no-problem dynamic import
type Props = {
children?: ReactNode;
@@ -35,7 +35,7 @@ export const ShareLinkLayout = ({ children }: Props): JSX.Element => {
(false);
+
+ if (dataApplicableGrant == null) {
+ // biome-ignore lint/complexity/noUselessFragments: ignore
+ return <>;
+ }
+
+ return (
+ <>
+
+
+
+ error
+
+ {t('fix_page_grant.alert.description')}
+
+
+ setOpen(true)}
+ >
+ {t('fix_page_grant.alert.btn_label')}
+
+
+
setOpen(false)}
+ />
+
+ );
+};
+
+export const FixPageGrantAlert = (): JSX.Element => {
+ const currentUser = useCurrentUser();
+ const pageData = useCurrentPageData();
+
+ const hasParent = pageData?.parent != null ?? false;
+ const pageId = pageData?._id;
+
+ const { data: dataIsGrantNormalized } = useSWRxCurrentGrantData(
+ currentUser != null ? pageId : null,
+ );
+
+ if (
+ pageId == null ||
+ !hasParent ||
+ !dataIsGrantNormalized?.isGrantNormalized
+ ) {
+ // biome-ignore lint/complexity/noUselessFragments: ignore
+ return <>;
+ }
+
+ return (
+
- <>
- {applicableGroups.map((group) => {
- const groupIsGranted =
- selectedGroups?.find((g) => g.item._id === group.item._id) !=
- null;
- const activeClass = groupIsGranted ? 'active' : '';
-
- return (
- groupListItemClickHandler(group)}
- >
-
- groupListItemClickHandler(group)}
+ >
+
+
+ {group.item.name}
+ {group.type === GroupType.externalUserGroup && (
+
+ {group.item.provider}
- {group.item.name}
- {group.type === GroupType.externalUserGroup && (
-
- {group.item.provider}
-
- )}
- {/* TODO: Replace (TBD) List group members
*/}
-
- );
- })}
- setIsGroupSelectModalShown(false)}
- >
- {t('Done')}
-
-
+ )}
+ {/* TODO: Replace (TBD) List group members
*/}
+
+ );
+ })}
+ setIsGroupSelectModalShown(false)}
+ >
+ {t('Done')}
+
)}
);
};
-
-export const FixPageGrantAlert = (): JSX.Element => {
- const { t } = useTranslation();
-
- const { data: currentUser } = useCurrentUser();
- const { data: pageData } = useSWRxCurrentPage();
- const hasParent = pageData != null ? pageData.parent != null : false;
- const pageId = pageData?._id;
-
- const [isOpen, setOpen] = useState(false);
-
- const { data: dataIsGrantNormalized } = useSWRxCurrentGrantData(
- currentUser != null ? pageId : null,
- );
- const { data: dataApplicableGrant } = useSWRxApplicableGrant(
- currentUser != null ? pageId : null,
- );
-
- // Dependencies
- if (pageData == null) {
- return <>;
- }
-
- if (!hasParent) {
- return <>;
- }
- if (
- dataIsGrantNormalized?.isGrantNormalized == null ||
- dataIsGrantNormalized.isGrantNormalized
- ) {
- return <>;
- }
-
- return (
- <>
-
-
-
- error
-
- {t('fix_page_grant.alert.description')}
-
-
- setOpen(true)}
- >
- {t('fix_page_grant.alert.btn_label')}
-
-
-
setOpen(false)}
- />
- )}
-
- );
-};
diff --git a/apps/app/src/components/PageView/PageAlerts/FixPageGrantAlert/dynamic.tsx b/apps/app/src/components/PageView/PageAlerts/FixPageGrantAlert/dynamic.tsx
new file mode 100644
index 00000000000..7c486190ff7
--- /dev/null
+++ b/apps/app/src/components/PageView/PageAlerts/FixPageGrantAlert/dynamic.tsx
@@ -0,0 +1,35 @@
+import type { JSX } from 'react';
+
+import { useLazyLoader } from '~/components/utils/use-lazy-loader';
+import { useCurrentUser } from '~/states/global';
+import { useCurrentPageData, usePageNotFound } from '~/states/page';
+import { useSWRxCurrentGrantData } from '~/stores/page';
+
+export const FixPageGrantAlertLazyLoaded = (): JSX.Element => {
+ const isNotFound = usePageNotFound();
+ const currentUser = useCurrentUser();
+ const pageData = useCurrentPageData();
+ const pageId = pageData?._id;
+
+ const hasParent = pageData != null ? pageData.parent != null : false;
+ const { data: dataIsGrantNormalized } = useSWRxCurrentGrantData(
+ currentUser != null ? pageId : null,
+ );
+
+ const isActive =
+ !isNotFound &&
+ hasParent &&
+ dataIsGrantNormalized?.isGrantNormalized != null &&
+ !dataIsGrantNormalized.isGrantNormalized;
+
+ const FixPageGrantAlert = useLazyLoader>(
+ 'fix-page-grant-alert',
+ () =>
+ import('./FixPageGrantAlert').then((mod) => ({
+ default: mod.FixPageGrantAlert,
+ })),
+ isActive,
+ );
+
+ return FixPageGrantAlert ? (
+ 'full-text-search-not-cover-alert',
+ () =>
+ import('./FullTextSearchNotCoverAlert').then((mod) => ({
+ default: mod.FullTextSearchNotCoverAlert,
+ })),
+ shouldShow,
+ );
+
+ // Pass active state to control visibility
+ return FullTextSearchNotCoverAlert ? (
+
- {/* alerts */}
- {!isNotFound &&
}
-
-
-
+
+
+
+
);
diff --git a/apps/app/src/components/PageView/PageAlerts/PageGrantAlert.tsx b/apps/app/src/components/PageView/PageAlerts/PageGrantAlert.tsx
index b64aca3c867..c12ac4a9d3d 100644
--- a/apps/app/src/components/PageView/PageAlerts/PageGrantAlert.tsx
+++ b/apps/app/src/components/PageView/PageAlerts/PageGrantAlert.tsx
@@ -1,12 +1,12 @@
-import React, { type JSX } from 'react';
+import type { JSX } from 'react';
import { isPopulated } from '@growi/core';
import { useTranslation } from 'react-i18next';
-import { useSWRxCurrentPage } from '~/stores/page';
+import { useCurrentPageData } from '~/states/page';
export const PageGrantAlert = (): JSX.Element => {
const { t } = useTranslation();
- const { data: pageData } = useSWRxCurrentPage();
+ const pageData = useCurrentPageData();
if (pageData == null || pageData.grant == null || pageData.grant === 1) {
return <>;
diff --git a/apps/app/src/components/PageView/PageAlerts/PageRedirectedAlert.tsx b/apps/app/src/components/PageView/PageAlerts/PageRedirectedAlert.tsx
deleted file mode 100644
index 15d5fca4916..00000000000
--- a/apps/app/src/components/PageView/PageAlerts/PageRedirectedAlert.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { type JSX, useCallback, useState } from 'react';
-import { useTranslation } from 'next-i18next';
-
-import { useCurrentPagePath } from '~/stores/page';
-import { useRedirectFrom } from '~/stores/page-redirect';
-
-export const PageRedirectedAlert = React.memo((): JSX.Element => {
- const { t } = useTranslation();
- const { data: currentPagePath } = useCurrentPagePath();
- const { data: redirectFrom } = useRedirectFrom();
-
- const [isUnlinked, setIsUnlinked] = useState(false);
-
- const unlinkButtonClickHandler = useCallback(async () => {
- if (currentPagePath == null) {
- return;
- }
- try {
- const unlink = (await import('~/client/services/page-operation')).unlink;
- await unlink(currentPagePath);
- setIsUnlinked(true);
- } catch (err) {
- const toastError = (await import('~/client/util/toastr')).toastError;
- toastError(err);
- }
- }, [currentPagePath]);
-
- if (redirectFrom == null || redirectFrom === '') {
- return <>;
- }
-
- if (isUnlinked) {
- return (
-
- {t('Unlinked')}: {t('page_page.notice.unlinked')}
-
- );
- }
-
- return (
-
-
- {t('Redirected')}: {t('page_page.notice.redirected')}{' '}
- {redirectFrom} {t('page_page.notice.redirected_period')}
-
-
-
- link_off
-
- {t('unlink_redirection')}
-
-
- );
-});
-PageRedirectedAlert.displayName = 'PageRedirectedAlert';
diff --git a/apps/app/src/components/PageView/PageAlerts/PageRedirectedAlert/PageRedirectedAlert.tsx b/apps/app/src/components/PageView/PageAlerts/PageRedirectedAlert/PageRedirectedAlert.tsx
new file mode 100644
index 00000000000..596468198a5
--- /dev/null
+++ b/apps/app/src/components/PageView/PageAlerts/PageRedirectedAlert/PageRedirectedAlert.tsx
@@ -0,0 +1,79 @@
+import React, { type JSX, useCallback, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+
+import { useCurrentPagePath, useRedirectFrom } from '~/states/page';
+
+type SubstanceProps = {
+ redirectFrom: string;
+};
+
+const PageRedirectedAlertSubstance = React.memo(
+ (props: SubstanceProps): JSX.Element => {
+ const { t } = useTranslation();
+ const { redirectFrom } = props;
+ const currentPagePath = useCurrentPagePath();
+
+ const [isUnlinked, setIsUnlinked] = useState(false);
+
+ const unlinkButtonClickHandler = useCallback(async () => {
+ if (currentPagePath == null) {
+ return;
+ }
+ try {
+ // biome-ignore lint/style/noRestrictedImports: no-problem dynamic import
+ const unlink = (await import('~/client/services/page-operation'))
+ .unlink;
+ await unlink(currentPagePath);
+ setIsUnlinked(true);
+ } catch (err) {
+ // biome-ignore lint/style/noRestrictedImports: no-problem dynamic import
+ const toastError = (await import('~/client/util/toastr')).toastError;
+ toastError(err);
+ }
+ }, [currentPagePath]);
+
+ if (isUnlinked) {
+ return (
+
+ {t('Unlinked')}: {t('page_page.notice.unlinked')}
+
+ );
+ }
+
+ return (
+
+
+ {t('Redirected')}: {t('page_page.notice.redirected')}{' '}
+ {redirectFrom} {t('page_page.notice.redirected_period')}
+
+
+
+ link_off
+
+ {t('unlink_redirection')}
+
+
+ );
+ },
+);
+PageRedirectedAlertSubstance.displayName = 'PageRedirectedAlertSubstance';
+
+export const PageRedirectedAlert = React.memo((): JSX.Element => {
+ const redirectFrom = useRedirectFrom();
+
+ // Lightweight condition check in Container
+ if (redirectFrom == null || redirectFrom === '') {
+ // biome-ignore lint/complexity/noUselessFragments: ignore
+ return <>;
+ }
+
+ // Render Substance only when redirectFrom exists
+ // Dynamic imports will only be executed when the unlink button is clicked
+ return >(
+ 'page-redirected-alert',
+ () =>
+ import('./PageRedirectedAlert').then((mod) => ({
+ default: mod.PageRedirectedAlert,
+ })),
+ isActive,
+ );
+
+ return PageRedirectedAlert ?
+
+ This page is in the trash{' '}
+
+ delete
+
+ .
+
+ Deleted by {deleteUser?.name} at{' '}
+
+ {deletedAt ?? pageData?.updatedAt}
+
+
+
+
+ {isAbleToShowTrashPageManagementButtons &&
+ renderTrashPageManagementButtons()}
+
+
-
- This page is in the trash{' '}
-
- delete
-
- .
-
- Deleted by {deleteUser?.name} at{' '}
-
- {deletedAt ?? pageData?.updatedAt}
-
-
-
-
- {isAbleToShowTrashPageManagementButtons &&
- renderTrashPageManagementButtons()}
-
-
>(
+ 'trash-page-alert',
+ () =>
+ import('./TrashPageAlert').then((mod) => ({
+ default: mod.TrashPageAlert,
+ })),
+ isTrashPage,
+ );
+
+ return TrashPageAlert ?
+
import('~/client/components/NotCreatablePage').then(
@@ -82,28 +78,34 @@ const SlideRenderer = dynamic(
),
{ ssr: false },
);
+// biome-ignore-end lint/style/noRestrictedImports: no-problem dynamic import
type Props = {
pagePath: string;
rendererConfig: RendererConfig;
- initialPage?: IPagePopulatedToShowRevision;
className?: string;
};
-export const PageView = (props: Props): JSX.Element => {
+// Custom comparison function for memo to prevent unnecessary re-renders
+const arePropsEqual = (prevProps: Props, nextProps: Props): boolean =>
+ prevProps.pagePath === nextProps.pagePath &&
+ prevProps.className === nextProps.className &&
+ isDeepEquals(prevProps.rendererConfig, nextProps.rendererConfig);
+
+const PageViewComponent = (props: Props): JSX.Element => {
const commentsContainerRef = useRef(null);
- const { pagePath, initialPage, rendererConfig, className } = props;
+ const { pagePath, rendererConfig, className } = props;
- const { data: isIdenticalPathPage } = useIsIdenticalPath();
- const { data: isForbidden } = useIsForbidden();
- const { data: isNotCreatable } = useIsNotCreatable();
- const { data: isNotFoundMeta } = useIsNotFound();
+ const currentPageId = useCurrentPageId();
+ const isIdenticalPathPage = useIsIdenticalPath();
+ const isForbidden = useIsForbidden();
+ const isNotCreatable = useIsNotCreatable();
+ const isNotFoundMeta = usePageNotFound();
- const { data: pageBySWR } = useSWRxCurrentPage();
+ const page = useCurrentPageData();
const { data: viewOptions } = useViewOptions();
- const page = pageBySWR ?? initialPage;
const isNotFound = isNotFoundMeta || page == null;
const isUsersHomepagePath = isUsersHomepage(pagePath);
@@ -115,16 +117,6 @@ export const PageView = (props: Props): JSX.Element => {
rendererConfig.isEnabledMarp,
);
- const [currentPageId, setCurrentPageId] = useState(
- page?._id,
- );
-
- useEffect(() => {
- if (page?._id !== undefined) {
- setCurrentPageId(page._id);
- }
- }, [page?._id]);
-
// *************************** Auto Scroll ***************************
useEffect(() => {
if (currentPageId == null) {
@@ -241,6 +233,7 @@ export const PageView = (props: Props): JSX.Element => {
viewOptions,
isSlide,
isIdenticalPathPage,
+ page,
]);
return (
@@ -267,3 +260,6 @@ export const PageView = (props: Props): JSX.Element => {
);
};
+
+export const PageView = memo(PageViewComponent, arePropsEqual);
+PageView.displayName = 'PageView';
diff --git a/apps/app/src/components/PageView/PageViewLayout.tsx b/apps/app/src/components/PageView/PageViewLayout.tsx
index 0280c4b7b26..834d81f7b03 100644
--- a/apps/app/src/components/PageView/PageViewLayout.tsx
+++ b/apps/app/src/components/PageView/PageViewLayout.tsx
@@ -1,5 +1,8 @@
import type { JSX, ReactNode } from 'react';
+// biome-ignore lint/style/noRestrictedImports: ignore
+import { usePrintMode } from '~/client/services/use-print-mode';
+
import styles from './PageViewLayout.module.scss';
const pageViewLayoutClass = styles['page-view-layout'] ?? '';
@@ -24,6 +27,8 @@ export const PageViewLayout = (props: Props): JSX.Element => {
expandContentWidth,
} = props;
+ const isPrinting = usePrintMode();
+
const fluidLayoutClass = expandContentWidth ? _fluidLayoutClass : '';
return (
@@ -33,13 +38,13 @@ export const PageViewLayout = (props: Props): JSX.Element => {
>
{headerContents != null && headerContents}
- {sideContents != null ? (
+ {!isPrinting && sideContents != null ? (
{children}
diff --git a/apps/app/src/components/ReactMarkdownComponents/NextLink.tsx b/apps/app/src/components/ReactMarkdownComponents/NextLink.tsx
index 7b11c32400e..ba86481eac7 100644
--- a/apps/app/src/components/ReactMarkdownComponents/NextLink.tsx
+++ b/apps/app/src/components/ReactMarkdownComponents/NextLink.tsx
@@ -1,14 +1,14 @@
-import type { JSX } from 'react';
+import type { AnchorHTMLAttributes, JSX } from 'react';
import type { LinkProps } from 'next/link';
import Link from 'next/link';
import { pagePathUtils } from '@growi/core/dist/utils';
-import { useSiteUrl } from '~/stores-universal/context';
+import { useSiteUrl } from '~/states/global';
import loggerFactory from '~/utils/logger';
const logger = loggerFactory('growi:components:NextLink');
-const isAnchorLink = (href: string): boolean => {
+const hasAnchorLink = (href: string): boolean => {
return href.toString().length > 0 && href[0] === '#';
};
@@ -34,17 +34,18 @@ const isCreatablePage = (href: string) => {
}
};
-type Props = Omit
& {
- children: React.ReactNode;
- id?: string;
- href?: string;
- className?: string;
-};
+type Props = AnchorHTMLAttributes &
+ Omit & {
+ children: React.ReactNode;
+ id?: string;
+ href?: string;
+ className?: string;
+ };
export const NextLink = (props: Props): JSX.Element => {
- const { id, href, children, className, onClick, ...rest } = props;
+ const { id, href, children, className, target, onClick, ...rest } = props;
- const { data: siteUrl } = useSiteUrl();
+ const siteUrl = useSiteUrl();
if (href == null) {
// biome-ignore lint/a11y/useValidAnchor: ignore
@@ -56,7 +57,7 @@ export const NextLink = (props: Props): JSX.Element => {
Object.entries(rest).filter(([key]) => key.startsWith('data-')),
);
- if (isExternalLink(href, siteUrl)) {
+ if (isExternalLink(href, siteUrl) || target === '_blank') {
return (
{
rel="noopener noreferrer"
{...dataAttributes}
>
- {children}
- external_link
+ {children}
+ {target === '_blank' && (
+
+
+ external_link
+
+ )}
);
}
// when href is an anchor link or not-creatable path
- if (isAnchorLink(href) || !isCreatablePage(href)) {
+ if (hasAnchorLink(href) || !isCreatablePage(href) || target != null) {
return (
diff --git a/apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx b/apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx
index da87fe281e0..adc898a5a3f 100644
--- a/apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx
+++ b/apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx
@@ -2,7 +2,7 @@ import { type JSX, useCallback } from 'react';
import Head from 'next/head';
import type { IGraphViewerGlobal } from '@growi/remark-drawio';
-import { useViewerMinJsUrl } from './use-viewer-min-js-url';
+import { generateViewerMinJsUrl } from './use-viewer-min-js-url';
declare global {
// eslint-disable-next-line vars-on-top, no-var
@@ -14,8 +14,6 @@ type Props = {
};
export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
- const viewerMinJsSrc = useViewerMinJsUrl(drawioUri);
-
const loadedHandler = useCallback(() => {
// disable useResizeSensor and checkVisibleState
// for preventing resize event by viewer-static.min.js
@@ -35,6 +33,13 @@ export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
GraphViewer.processElements();
}, []);
+ // Return empty element if drawioUri is not provided to avoid Invalid URL error
+ if (!drawioUri) {
+ return <>;
+ }
+
+ const viewerMinJsSrc = generateViewerMinJsUrl(drawioUri);
+
return (
-
+
+
+ Vite + React + TS
+
+
+
+
+
+
+
+