added CORS to server and built article list component

client/kb-frontend/src/App.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import './App.css'
 import Header from './components/Header'
 import SearchBar from './components/SearchBar'
+import ArticleList from './components/ArticleList'
 
 function App() {
   const [currentView, setCurrentView] = useState('list');
@@ -44,7 +45,7 @@ function App() {
       {currentView === 'list' ? (
         <>
           <SearchBar onSearch={handleSearch} />
-          {/*<ArticleList articles={articles} onArticleClick={handleArticleClick} />*/}
+          <ArticleList articles={articles} onArticleClick={handleArticleClick} />
         </>
       ) : (
         <>

client/kb-frontend/src/components/ArticleList.css

@@ -0,0 +1,20 @@
+.article-list {
+  padding: 1rem;
+}
+
+.article-item {
+  border: 1px solid #ddd;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.article-item:hover {
+  background-color: #f5f5f5;
+}
+
+.article-date {
+  color: #666;
+  font-size: 0.9rem;
+}

client/kb-frontend/src/components/ArticleList.jsx

@@ -0,0 +1,26 @@
+import './ArticleList.css'
+
+function ArticleList({ articles, onArticleClick }) {
+    return (
+        <div className="article-list">
+            {articles.length === 0 ? (
+                <p>No articles found</p>
+            ) : (
+                articles.map((article) => (
+                    <div 
+                        key={article.id} 
+                        className="article-item"
+                        onClick={() => onArticleClick(article)}
+                    >
+                        <h3>{article.ka_number} - {article.title}</h3>
+                        <p className="article-date">
+                            Created: {new Date(article.created_at).toLocaleDateString()}
+                        </p>
+                    </div>
+                ))
+            )}
+        </div>
+    );
+}
+
+export default ArticleList;

server/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
+        "cors": "^2.8.5",
         "express": "^5.1.0",
         "sql.js": "^1.13.0"
       }
@@ -128,6 +129,19 @@
         "node": ">=6.6.0"
       }
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -514,6 +528,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",

server/package.json

@@ -18,6 +18,7 @@
   "author": "Matt Taylor",
   "license": "MIT",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^5.1.0",
     "sql.js": "^1.13.0"
   }

server/server.js

@@ -1,8 +1,10 @@
 const express = require('express');
 const { initDb, getAllArticles, getArticle, createArticle, updateArticle, deleteArticle, searchArticles } = require('./db');
 const app = express();
+const cors = require('cors');
 const PORT = 9000;
 
+app.use(cors())
 app.use(express.json());
 
 initDb().then(() => {