Let's Coding

// src/stores/snippet/index.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { FolderSlice, createFolderSlice } from './slices/folderSlice';
import { SnippetSlice, createSnippetSlice } from './slices/snippetSlice';
import { UISlice, createUISlice } from './slices/uiSlice';

// 組合所有模組的型別
export type AppStore = FolderSlice & SnippetSlice & UISlice;

export const useSnippetStore = create<AppStore>()(
  persist(
    (set, get, api) => ({
      ...createFolderSlice(set, get, api),
      ...createSnippetSlice(set, get, api),
      ...createUISlice(set, get, api),
    }),
    {
      name: 'my-snippets-storage',
      // partialize 使我們只持久化 folders，UI 狀態不必存入 localStorage
      partialize: (state) => ({ folders: state.folders }),
    }
  )
);

// src/stores/snippet/slices/folderSlice.ts
import { StateCreator } from 'zustand';
import { Folder } from '@/types/snippets';

export interface FolderSlice {
  folders: Folder[];
  setFolders: (folders: Folder[]) => void;
  updateFolder: (id: string, updates: Partial<Folder>) => void;
  addFolder: (folder: Omit<Folder, "id">, index?: number) => Folder;
  deleteFolder: (id: string) => void;
}

export const createFolderSlice: StateCreator<FolderSlice> = (set, get) => ({
  folders: [
    {
      id: 'HplOMyf2mDqvVMdphJbt',
      name: 'My Sample Snippets',
      description: 'This is a sample folder',
      snippets: [
        {
          id: '5mJw031VPo2WxNIQyeXN',
          name: 'Demo - Plain text',
          content: 'be a software engineer',
          shortcut: '/do',
        },
        {
          id: '6mJw031VPo2WxNIQyeYN',
          name: 'Demo - Styled Text',
          content:
            'be a translate expert, I will give you a sentence and help me translate to english',
          shortcut: '/doT',
        },
      ],
    },
    {
      id: 'folder-1741057188488',
      name: 'Test',
      description: 'test',
      snippets: [
        {
          id: 'snippet-1741057206823',
          name: 'test',
          content: '<p>New snippet content Test</p>',
          shortcut: '/test',
        },
      ],
    },
  ],
  setFolders: (folders) => set({ folders }),
  updateFolder: (id, updates) =>
    set({
      folders: get().folders.map((folder) =>
        folder.id === id ? { ...folder, ...updates } : folder
      ),
    }),
    // 新增資料夾，可選擇插入位置
    addFolder: (folder, index) => {
      const newFolder: Folder = { ...folder, id: `folder-${Date.now()}` };
      set((state) => ({
        folders:
          typeof index === "number"
            ? [
                ...state.folders.slice(0, index),
                newFolder,
                ...state.folders.slice(index),
              ]
            : [...state.folders, newFolder],
      }));
      return newFolder;
    },
  deleteFolder: (id) =>
    set({
      folders: get().folders.filter((folder) => folder.id !== id),
    }),
});

// src/stores/snippet/slices/snippetSlice.ts
import { StateCreator } from 'zustand';
import { Snippet } from '@/types/snippets';
import { FolderSlice } from './folderSlice';

export interface SnippetSlice {
  addSnippetToFolder: (folderId: string, snippet: Omit<Snippet, 'id'>) => Snippet;
  deleteSnippetFromFolder: (folderId: string, snippetId: string) => void;
  updateSnippet: (snippetId: string, updatedSnippet: Partial<Snippet>) => void;
}

// 這裡依賴 FolderSlice，因為 snippets 都儲存在 folders 內
// 修改後，addSnippetToFolder 回傳新 snippet
export const createSnippetSlice: StateCreator<
  FolderSlice & SnippetSlice,
  [],
  [],
  SnippetSlice
> = (set, get) => ({
  // 新增一個 snippet 到指定的資料夾，並回傳新增的 snippet（包含自動生成的 id）
  addSnippetToFolder: (folderId, snippet) => {
    const newSnippet: Snippet = { ...snippet, id: `snippet-${Date.now()}` };
    set({
      folders: get().folders.map((folder) =>
        folder.id === folderId
          ? { ...folder, snippets: [...folder.snippets, newSnippet] }
          : folder
      ),
    });
    return newSnippet; // 回傳新增後完整的 snippet 物件
  },
  deleteSnippetFromFolder: (folderId, snippetId) =>
    set({
      folders: get().folders.map((folder) =>
        folder.id === folderId
          ? {
              ...folder,
              snippets: folder.snippets.filter(
                (snippet) => snippet.id !== snippetId
              ),
            }
          : folder
      ),
    }),
  updateSnippet: (snippetId, updatedSnippet) =>
    set({
      folders: get().folders.map((folder) => ({
        ...folder,
        snippets: folder.snippets.map((snippet) =>
          snippet.id === snippetId ? { ...snippet, ...updatedSnippet } : snippet
        ),
      })),
    }),
});

// src/stores/snippet/slices/uiSlice.ts
import { StateCreator } from 'zustand';
import { MatchedSnippet } from '@/types/snippets';

export interface UISlice {
  isDialogOpen: boolean;
  matchedSnippet: MatchedSnippet;
  setIsDialogOpen: (open: boolean) => void;
  setMatchedSnippet: (snippet: MatchedSnippet) => void;
}

export const createUISlice: StateCreator<UISlice> = (set) => ({
  isDialogOpen: false,
  matchedSnippet: {
    content: '',
    targetElement: null,
    insert: false,
    shortcut: '',
  },
  setIsDialogOpen: (open: boolean) => set({ isDialogOpen: open }),
  setMatchedSnippet: (snippet: MatchedSnippet) => set({ matchedSnippet: snippet }),
});

import { useSnippetStore } from '@/stores/snippet';
import { useEffect } from 'react';
import { Snippet } from '@/types/snippets';

function MyComponent() {
  // 從整合後的 store 直接取出需要的方法
  const { addFolder } = useSnippetStore();

  useEffect(() => {
    // 舉例：在元件載入時新增一個 folder
    const newFolder = addFolder({
      name: 'New Folder',
      description: 'Example folder created on load',
      snippets: [],
    });

    console.log('新增了資料夾：', newFolder);
  }, [addFolder]);

  return <div>你的元件內容</div>;
}