From 95a3f100a31cf34400991443621c0ee55468530d Mon Sep 17 00:00:00 2001
From: MattLeo <matt.leo@outlook.com>
Date: Tue, 25 Nov 2025 13:34:02 -0600
Subject: [PATCH] added CORS to server and built article list component

---
 client/kb-frontend/src/App.jsx                |  3 ++-
 .../src/components/ArticleList.css            | 20 ++++++++++++++
 .../src/components/ArticleList.jsx            | 26 +++++++++++++++++++
 server/package-lock.json                      | 23 ++++++++++++++++
 server/package.json                           |  1 +
 server/server.js                              |  2 ++
 6 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 client/kb-frontend/src/components/ArticleList.css

diff --git a/client/kb-frontend/src/App.jsx b/client/kb-frontend/src/App.jsx
index 8c5b9d7..245f9b3 100644
--- a/client/kb-frontend/src/App.jsx
+++ b/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} />
         </>
       ) : (
         <>
diff --git a/client/kb-frontend/src/components/ArticleList.css b/client/kb-frontend/src/components/ArticleList.css
new file mode 100644
index 0000000..f703b4b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/kb-frontend/src/components/ArticleList.jsx b/client/kb-frontend/src/components/ArticleList.jsx
index e69de29..a0e73a7 100644
--- a/client/kb-frontend/src/components/ArticleList.jsx
+++ b/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;
\ No newline at end of file
diff --git a/server/package-lock.json b/server/package-lock.json
index 2ddd7b5..9a3a5f4 100644
--- a/server/package-lock.json
+++ b/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",
diff --git a/server/package.json b/server/package.json
index 869bd15..641c38e 100644
--- a/server/package.json
+++ b/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"
   }
diff --git a/server/server.js b/server/server.js
index e40f34c..a648a94 100644
--- a/server/server.js
+++ b/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(() => {