Phase 2: Implement React hooks, context, and routing for Angular to React migration

package.json

@@ -7,7 +7,10 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "react:dev": "vite",
+    "react:build": "vite build",
+    "react:preview": "vite preview"
   },
   "private": true,
   "dependencies": {
@@ -21,6 +24,9 @@
     "@angular/router": "~9.0.1",
     "@angular/service-worker": "~9.0.1",
     "node-fetch": "^2.6.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.9.4",
     "rxjs": "~6.5.4",
     "rxjs-compat": "^6.5.2",
     "tslib": "^1.10.0",
@@ -35,6 +41,9 @@
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
@@ -46,7 +55,8 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.7.5"
+    "typescript": "~3.7.5",
+    "vite": "^7.1.12"
   },
   "prettier": {
     "trailingComma": "es5",

src/react/App.tsx

@@ -0,0 +1,37 @@
+import React, { Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { SettingsProvider } from './contexts/SettingsContext';
+import { FeedPage } from './pages/FeedPage';
+
+const ItemDetailsPage = lazy(() => 
+  import('./pages/ItemDetailsPage').then(module => ({ default: module.ItemDetailsPage }))
+);
+
+const UserPage = lazy(() => 
+  import('./pages/UserPage').then(module => ({ default: module.UserPage }))
+);
+
+const App: React.FC = () => {
+  return (
+    <SettingsProvider>
+      <BrowserRouter>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Routes>
+            <Route path="/" element={<Navigate to="/news/1" replace />} />
+
+            <Route path="/news/:page" element={<FeedPage />} />
+            <Route path="/newest/:page" element={<FeedPage />} />
+            <Route path="/show/:page" element={<FeedPage />} />
+            <Route path="/ask/:page" element={<FeedPage />} />
+            <Route path="/jobs/:page" element={<FeedPage />} />
+
+            <Route path="/item/:id" element={<ItemDetailsPage />} />
+            <Route path="/user/:id" element={<UserPage />} />
+          </Routes>
+        </Suspense>
+      </BrowserRouter>
+    </SettingsProvider>
+  );
+};
+
+export default App;

src/react/contexts/SettingsContext.tsx

@@ -0,0 +1,114 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { Settings } from '../types';
+
+interface SettingsContextType {
+  settings: Settings;
+  toggleSettings: () => void;
+  toggleOpenLinksInNewTab: () => void;
+  setTheme: (theme: string) => void;
+  setFont: (fontSize: string) => void;
+  setSpacing: (listSpace: string) => void;
+}
+
+const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
+
+interface SettingsProviderProps {
+  children: ReactNode;
+}
+
+export const SettingsProvider: React.FC<SettingsProviderProps> = ({ children }) => {
+  const [settings, setSettings] = useState<Settings>(() => {
+    const openLinkInNewTab = localStorage.getItem('openLinkInNewTab');
+    const titleFontSize = localStorage.getItem('titleFontSize');
+    const listSpacing = localStorage.getItem('listSpacing');
+
+    return {
+      showSettings: false,
+      openLinkInNewTab: openLinkInNewTab ? JSON.parse(openLinkInNewTab) : false,
+      theme: 'default',
+      titleFontSize: titleFontSize || '16',
+      listSpacing: listSpacing || '0',
+    };
+  });
+
+  const handleSystemPreferredColorSchemeChange = (event: MediaQueryListEvent) => {
+    const theme = event.matches ? 'night' : 'default';
+    setSettings(prev => ({ ...prev, theme }));
+    localStorage.setItem('theme', theme);
+  };
+
+  useEffect(() => {
+    const darkColorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) {
+      setSettings(prev => ({ ...prev, theme: savedTheme }));
+    } else {
+      const theme = darkColorSchemeMedia.matches ? 'night' : 'default';
+      setSettings(prev => ({ ...prev, theme }));
+      localStorage.setItem('theme', theme);
+    }
+
+    darkColorSchemeMedia.addEventListener('change', handleSystemPreferredColorSchemeChange);
+
+    return () => {
+      darkColorSchemeMedia.removeEventListener('change', handleSystemPreferredColorSchemeChange);
+    };
+  }, []);
+
+  const toggleSettings = () => {
+    setSettings(prev => ({
+      ...prev,
+      showSettings: !prev.showSettings,
+    }));
+  };
+
+  const toggleOpenLinksInNewTab = () => {
+    setSettings(prev => {
+      const newValue = !prev.openLinkInNewTab;
+      localStorage.setItem('openLinkInNewTab', JSON.stringify(newValue));
+      return {
+        ...prev,
+        openLinkInNewTab: newValue,
+      };
+    });
+  };
+
+  const setTheme = (theme: string) => {
+    setSettings(prev => ({ ...prev, theme }));
+    localStorage.setItem('theme', theme);
+  };
+
+  const setFont = (fontSize: string) => {
+    setSettings(prev => ({ ...prev, titleFontSize: fontSize }));
+    localStorage.setItem('titleFontSize', fontSize);
+  };
+
+  const setSpacing = (listSpace: string) => {
+    setSettings(prev => ({ ...prev, listSpacing: listSpace }));
+    localStorage.setItem('listSpacing', listSpace);
+  };
+
+  const value: SettingsContextType = {
+    settings,
+    toggleSettings,
+    toggleOpenLinksInNewTab,
+    setTheme,
+    setFont,
+    setSpacing,
+  };
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export const useSettings = (): SettingsContextType => {
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error('useSettings must be used within a SettingsProvider');
+  }
+  return context;
+};

src/react/hooks/useHackerNewsAPI.ts

@@ -0,0 +1,64 @@
+import { Story, User, PollResult } from '../types';
+
+const BASE_URL = 'https://node-hnapi.herokuapp.com';
+
+export const useHackerNewsAPI = () => {
+  const fetchFeed = async (feedType: string, page: number): Promise<Story[]> => {
+    const response = await fetch(`${BASE_URL}/${feedType}?page=${page}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${feedType} feed`);
+    }
+    return response.json();
+  };
+
+  const fetchItemContent = async (id: number): Promise<Story> => {
+    const response = await fetch(`${BASE_URL}/item/${id}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch item ${id}`);
+    }
+    const story: Story = await response.json();
+
+    if (story.type === 'poll' && story.poll && story.poll.length > 0) {
+      const numberOfPollOptions = story.poll.length;
+
+      const pollItemIds = Array.from(
+        { length: numberOfPollOptions },
+        (_, i) => story.id + i + 1
+      );
+
+      const pollResults = await Promise.all(
+        pollItemIds.map(pollId => fetchPollContent(pollId))
+      );
+
+      story.poll = pollResults;
+      story.poll_votes_count = pollResults.reduce(
+        (total, result) => total + result.points,
+        0
+      );
+    }
+
+    return story;
+  };
+
+  const fetchPollContent = async (id: number): Promise<PollResult> => {
+    const response = await fetch(`${BASE_URL}/item/${id}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch poll item ${id}`);
+    }
+    return response.json();
+  };
+
+  const fetchUser = async (id: string): Promise<User> => {
+    const response = await fetch(`${BASE_URL}/user/${id}`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch user ${id}`);
+    }
+    return response.json();
+  };
+
+  return {
+    fetchFeed,
+    fetchItemContent,
+    fetchUser,
+  };
+};

src/react/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hacker News - React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

src/react/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/react/pages/FeedPage.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useParams, useLocation } from 'react-router-dom';
+
+export const FeedPage: React.FC = () => {
+  const { page } = useParams<{ page: string }>();
+  const location = useLocation();
+
+  const feedType = location.pathname.split('/')[1];
+
+  return (
+    <div>
+      <h1>{feedType.toUpperCase()} Feed</h1>
+      <p>Page: {page}</p>
+      <p>Placeholder for FeedPage component (Phase 3)</p>
+    </div>
+  );
+};

src/react/pages/ItemDetailsPage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export const ItemDetailsPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <div>
+      <h1>Item Details</h1>
+      <p>Item ID: {id}</p>
+      <p>Placeholder for ItemDetailsPage component (Phase 3)</p>
+    </div>
+  );
+};

src/react/pages/UserPage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+export const UserPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+
+  return (
+    <div>
+      <h1>User Profile</h1>
+      <p>User ID: {id}</p>
+      <p>Placeholder for UserPage component (Phase 3)</p>
+    </div>
+  );
+};

src/react/types/index.ts

@@ -0,0 +1,52 @@
+export type FeedType = 'poll' | 'story' | 'job';
+
+export interface Comment {
+  id: number;
+  level: number;
+  user: string;
+  time: number;
+  time_ago: string;
+  content: string;
+  deleted: boolean;
+  comments: Comment[];
+}
+
+export interface PollResult {
+  points: number;
+  content: string;
+}
+
+export interface Story {
+  id: number;
+  title: string;
+  points: number;
+  user: string;
+  time: number;
+  time_ago: number;
+  type: FeedType;
+  url: string;
+  domain: string;
+  comments: Comment[];
+  comments_count: number;
+  poll: PollResult[];
+  poll_votes_count: number;
+  deleted: boolean;
+  dead: boolean;
+}
+
+export interface User {
+  id: string;
+  crated_time: number;
+  created: string;
+  karma: number;
+  avg: number;
+  about: string;
+}
+
+export interface Settings {
+  showSettings: boolean;
+  openLinkInNewTab: boolean;
+  theme: string;
+  titleFontSize: string;
+  listSpacing: string;
+}