// ユーザー情報の取得のみを担当
const useUser = (userId) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // ユーザー情報を取得する処理（実際のAPIコールなどは省略）
    setUser({ id: userId, name: 'John Doe' });
  }, [userId]);

  return user;
};

// タスク情報の取得のみを担当
const useTasks = (userId) => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    // タスク情報を取得する処理（実際のAPIコールなどは省略）
    setTasks([{ id: 1, title: 'Task 1' }, { id: 2, title: 'Task 2' }]);
  }, [userId]);

  return tasks;
};

const useUserData = (userId, dataType) => {
  const user = useUser(userId);
  const tasks = useTasks(userId);
  // 将来的な拡張の例：
  // const preferences = usePreferences(userId);

  // 新しいデータタイプを追加する場合、ここに新しい条件を追加するだけで済みます
  if (dataType === 'user') return user;
  if (dataType === 'tasks') return tasks;
  // if (dataType === 'preferences') return preferences;

  // デフォルトでは全てのデータを返す
  return { user, tasks /*, preferences */ };
};

const UserContext = createContext();

// useUserContextフックを使用することで、
// コンポーネントはユーザーデータの取得方法を知る必要がなくなります
const useUserContext = () => useContext(UserContext);

// withUser HOCは、どのコンポーネントにも適用可能で、
// ユーザー関連の機能を一貫した方法で提供します
const withUser = (Component) => (props) => {
  const user = useUserContext();
  return <Component {...props} user={user} />;
};

// UserInfoコンポーネントはユーザー情報のみを扱う
const UserInfo = ({ user }) => (
  <div>Name: {user.name}</div>
);

// UserTasksコンポーネントはタスク情報のみを扱う
const UserTasks = ({ tasks }) => (
  <ul>
    {tasks.map(task => <li key={task.id}>{task.title}</li>)}
  </ul>
);

const UserProfile = withUser(({ user }) => (
  <div>
    <h2>User Profile</h2>
    <UserInfo user={user} />
    <h3>Tasks</h3>
    <UserTasks tasks={useTasks(user.id)} />
  </div>
));

// アプリケーション全体
// ここでは、各コンポーネントが適切に組み合わされ、
// SOLIDの原則に従ったアーキテクチャが実現されています
const App = () => {
  const userData = useUserData(1, 'user');

  return (
    <UserContext.Provider value={userData}>
      <UserProfile />
    </UserContext.Provider>
  );
};

export default App;

// データの流れを表す図

/*
┌────────────────┐         ┌─────────────────┐         ┌────────────────┐
│    Model       │         │   ViewModel     │         │     View       │
│  (ArticleData) │ ──────> │  (ArticleItem)  │ ──────> │ (ArticleProps) │
└────────────────┘         └─────────────────┘         └────────────────┘
       ▲                          │                           │
       │                          │                           │
       │                          ▼                           │
       │                ┌─────────────────┐                   │
       └────────────── │   API Calls     │ <─────────────────┘
                       │ (ArticleHookResult)
                       └─────────────────┘

1. Model (ArticleData):
   API からのレスポンスデータ構造

2. ViewModel (ArticleItem, ArticleHookResult):
   - ArticleItem: アプリケーション内部で使用する加工済みデータ
   - ArticleHookResult: カスタムフックが提供する状態とメソッド

3. View (ArticleListProps, ArticleItemProps):
   Reactコンポーネントが受け取るprops

src/
  ├── features/
  │   ├── Article/
  │   │   ├── components/
  │   │   │   ├── ArticleList.tsx
  │   │   │   └── ArticleItem.tsx
  │   │   ├── pages/
  │   │   │   ├── ArticlesPage.tsx
  │   │   │   └── ArticleDetailPage.tsx
  │   │   ├── hooks/
  │   │   │   └── useArticleData.ts
  │   │   ├── services/
  │   │   │   └── articleService.ts
  │   │   └── types.ts
  │   └── User/
  │       ├── components/
  │       │   ├── UserList.tsx
  │       │   └── UserProfile.tsx
  │       ├── pages/
  │       │   ├── UsersPage.tsx
  │       │   └── UserProfilePage.tsx
  │       ├── hooks/
  │       │   └── useUserData.ts
  │       ├── services/
  │       │   └── userService.ts
  │       └── types.ts
  ├── shared/
  │   ├── components/
  │   │   ├── Layout.tsx
  │   │   └── Navbar.tsx
  │   └── hooks/
  │       └── useApi.ts
  └── api/
      └── client.ts

// src/features/Article/types.ts
export interface Article {
  id: number;
  title: string;
  content: string;
}

// src/features/Article/services/articleService.ts
import { Article } from '../types';
import { api } from '../../../api/client';

export const articleService = {
  getArticles: async (): Promise<Article[]> => {
    return await api.get('/articles');
  },
  getArticleById: async (id: number): Promise<Article> => {
    return await api.get(`/articles/${id}`);
  },
};

// src/features/Article/hooks/useArticleData.ts
import { useState, useCallback } from 'react';
import { Article } from '../types';
import { articleService } from '../services/articleService';

export const useArticleData = () => {
  const [articles, setArticles] = useState<Article[]>([]);

  const fetchArticles = useCallback(async () => {
    const fetchedArticles = await articleService.getArticles();
    setArticles(fetchedArticles);
  }, []);

  const getFormattedArticles = useCallback(() => {
    return articles.map(article => ({
      ...article,
      title: article.title.toUpperCase()
    }));
  }, [articles]);

  return { articles: getFormattedArticles(), fetchArticles };
};

// src/features/Article/components/ArticleItem.tsx
import React from 'react';
import { Article } from '../types';

interface ArticleItemProps {
  article: Article;
}

export const ArticleItem: React.FC<ArticleItemProps> = ({ article }) => (
  <div>
    <h3>{article.title}</h3>
    <p>{article.content}</p>
  </div>
);

// src/features/Article/components/ArticleList.tsx
import React from 'react';
import { Article } from '../types';
import { ArticleItem } from './ArticleItem';

interface ArticleListProps {
  articles: Article[];
}

export const ArticleList: React.FC<ArticleListProps> = ({ articles }) => (
  <div>
    {articles.map(article => (
      <ArticleItem key={article.id} article={article} />
    ))}
  </div>
);

// src/features/Article/pages/ArticlesPage.tsx
import React from 'react';
import { ArticleList } from '../components/ArticleList';
import { useArticleData } from '../hooks/useArticleData';

export const ArticlesPage: React.FC = () => {
  const { articles, fetchArticles } = useArticleData();

  React.useEffect(() => {
    fetchArticles();
  }, [fetchArticles]);

  return (
    <div>
      <h1>Articles</h1>
      <ArticleList articles={articles} />
    </div>
  );
};

/**
 * ユーザーへの挨拶を表示するコンポーネント
 *
 * @param {string} name ユーザーの名前
 * @returns {ReactNode} ユーザーへの挨拶を表示するReact要素
 */
function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}