refactor: Restructured the client codebase for maintainability and re…

…adability

client/src/App.js

@@ -5,8 +5,8 @@ import {
   Routes,
   Navigate,
 } from "react-router-dom";
-import ArticleList from "./components/ArticleList";
-import ArticleDetail from "./components/ArticleDetail";
+import ArticleList from "./components/ArticleList/ArticleList";
+import ArticleDetail from "./components/ArticleDetail/ArticleDetail";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import { ThemeProviderComponent } from "./components/ThemeContext";

client/src/components/ArticleDetail/ArticleApi.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+import { apiUrl } from "../Utils/Config";
+
+export const fetchArticle = async (id) => {
+  try {
+    const response = await axios.get(`${apiUrl}${id}/`);
+    return response.data.data;
+  } catch (err) {
+    console.log("Error fetching article: ", err);
+  }
+};

client/src/components/ArticleDetail.js → client/src/components/ArticleDetail/ArticleDetail.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import axios from "axios";
+
 import {
   Container,
   Typography,
@@ -10,49 +10,21 @@ import {
   CardContent,
   CardMedia,
 } from "@mui/material";
+import "../../styles/styles.css";
 import DOMPurify from "dompurify";
-import formatDate from "./DateTimeFormatter";
-import "../styles/styles.css";
-
-const backendBaseUrl = "http://127.0.0.1:8000"; // Backend URL
+import formatDate from "../Utils/DateTimeFormatter";
+import { fetchArticle } from "./ArticleApi";
+import { formatArticleData } from "./ArticleUtils";
 
 function ArticleDetail() {
   const { id } = useParams();
   const [article, setArticle] = useState(null);
 
   useEffect(() => {
-    const fetchArticle = async () => {
-      try {
-        const response = await axios.get(
-          `${backendBaseUrl}/api/articles/${id}/`
-        );
-        const data = response.data;
-
-        // Clean up unwanted HTML tags
-        const cleanedContent = data.content.replace(/<p>&nbsp;<\/p>/g, '');
-
-        // Replace image URLs in content
-        const updatedContent = cleanedContent.replace(
-          /src="\/media\//g,
-          `src="${backendBaseUrl}/media/`
-        );
-
-        // Ensure thumb URL is correctly formatted
-        const updatedThumb = data.thumb
-          ? `${data.thumb}`
-          : "/static/images/cards/contemplative-reptile.jpg";
-
-        setArticle({
-          ...data,
-          content: updatedContent, // Replace content with updated image URLs and cleaned HTML
-          thumb: updatedThumb, // Ensure thumb path is correct
-        });
-      } catch (err) {
-        console.log("Error fetching article: ", err);
-      }
-    };
-
-    fetchArticle();
+    fetchArticle(id).then((data) => {
+      const formattedArticle = formatArticleData(data);
+      setArticle(formattedArticle);
+    });
   }, [id]);
 
   return (

client/src/components/ArticleDetail/ArticleUtils.js

@@ -0,0 +1,23 @@
+import { backendBaseUrl } from "../Utils/Config";
+
+// clean up unwanted HTML tags
+export const cleanContent = (content) => {
+  return (
+    content
+      ?.replace(/<p>&nbsp;<\/p>/g, "")
+      .replace(/src="\/media\//g, `src="${backendBaseUrl}/media/`) || ""
+  );
+};
+
+// get thumb URL or default image
+export const getThumbUrl = (thumb) => {
+  return thumb ? `${thumb}` : "/static/images/cards/contemplative-reptile.jpg";
+};
+
+// format article data
+export const formatArticleData = (data) => {
+  const updatedContent = cleanContent(data.content);
+  const updatedThumb = getThumbUrl(data.thumb);
+
+  return { ...data, content: updatedContent, thumb: updatedThumb };
+};

client/src/components/ArticleList/ArticleApi.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+import { apiUrl } from "../Utils/Config";
+
+export const fetchArticles = async () => {
+  try {
+    const response = await axios.get(`${apiUrl}`);
+    return response.data;
+  } catch (err) {
+    console.log("Error fetching articles: ", err);
+  }
+};

client/src/components/ArticleList.js → client/src/components/ArticleList/ArticleList.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
-import axios from "axios";
 import {
   Container,
   Typography,
@@ -12,22 +11,16 @@ import {
   CardMedia,
   Box,
 } from "@mui/material";
-import formatDate from "./DateTimeFormatter";
-
-const backendBaseUrl = "http://127.0.0.1:8000"; //backend URL
+import formatDate from "../Utils/DateTimeFormatter";
+import { fetchArticles } from "./ArticleApi";
 
 function ArticleList() {
   const [articles, setArticles] = useState([]);
 
   useEffect(() => {
-    axios
-      .get(`${backendBaseUrl}/api/articles/`)
-      .then((res) => {
-        setArticles(res.data);
-      })
-      .catch((err) => {
-        console.log("Error fetching article: ", err);
-      });
+    fetchArticles().then((data) => {
+      setArticles(data);
+    });
   }, []);
 
   return (

client/src/components/Utils/Config.js

@@ -0,0 +1,2 @@
+export const backendBaseUrl = "http://127.0.0.1:8000";
+export const apiUrl = `${backendBaseUrl}/api/articles/`;

client/src/components/DateTimeFormatter.js → client/src/components/Utils/DateTimeFormatter.js

@@ -3,12 +3,17 @@ import { format } from "date-fns";
 function formatDate(dateString) {
   const date = new Date(dateString);
 
+  // Check if the date is valid
+  if (isNaN(date.getTime())) {
+    return "Invalid date"; // or a default value
+  }
+
   // Format the date and time
-  const formattedDate = format(date, "MMMM dd, yyyy"); // Example: July 20, 2024
-  const formattedTime = format(date, "hh:mm a"); // Example: 01:45 pm
+  const formattedDate = format(date, "MMMM dd, yyyy");
+  const formattedTime = format(date, "hh:mm a");
   const formattedDateTime = `Published: ${formattedDate} at ${formattedTime}`;
 
   return formattedDateTime;
 }
 
-export default formatDate;
+export default formatDate;