add trending articles to homepage

client/src/components/App.js

@@ -31,8 +31,8 @@ function App() {
         <Navbar />
         <Wrapper>
           <Routes>
-            <Route path="*" element={<ErrorPage />} />
             <Route path="/" element={<Homepage />} />
+            <Route path="*" element={<ErrorPage />} />
             <Route path="/tag/:tagName" element={<Tag />} />
             <Route path="/new-story" element={user._id ? <NewStory /> : <Navigate to="/login" replace />} />
             <Route path="/orders-history" element={user._id ? <Orders /> : <Navigate to="/login" replace />} />

client/src/components/Article/Head.js

@@ -75,7 +75,7 @@ const StyledDate = styled.div`
   color: ${COLORS.secondary};
 `;
 const Circle = styled.div`
-  font-size: 4px;
+  font-size: 3px;
 `;
 const EditLink = styled(NavLink)`
   text-decoration: none;

client/src/components/Banner.js

@@ -0,0 +1,7 @@
+const Banner = () => {
+  return (
+    <>Banner</>
+  )
+}
+
+export default Banner;

client/src/components/Navigation.js

@@ -6,7 +6,7 @@ const Navigation = ({ title }) => {
   return (
     <Wrapper>
       <Title>{title}</Title>
-      <StyledDate>{fullWrittenDate(new Date(), 'en-US')}</StyledDate>
+      <StyledDate>{fullWrittenDate(new Date().getTime(), 'en-US')}</StyledDate>
     </Wrapper>
   )
 }

client/src/components/Trending.js

@@ -0,0 +1,123 @@
+import { useEffect, useState } from "react";
+import { NavLink } from "react-router-dom";
+import styled from "styled-components";
+import { COLORS } from "../constants";
+import { fullWrittenDate, shortWrittenDate } from "../helpers";
+import { FaCircle, FaRegPaperPlane } from "react-icons/fa";
+import Loading from "./Loading/Loading";
+
+const Trending = () => {
+  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);
+    fetch(`/api/trending`)
+      .then((res) => res.json())
+      .then((response) => {
+        // console.log(response.data);
+        setData(response.data);
+        setLoading(false);
+      });
+    // eslint-disable-next-line
+  }, []);
+
+  const stopPropagation = (event) => {
+    event.stopPropagation();
+  }
+
+  if (loading) return <Loading size="32" />;
+
+  return (
+    <>
+      <Title>
+        <div><FaRegPaperPlane /></div>
+        <div>Trending on {fullWrittenDate(new Date().getTime(), 'en-US')}</div>
+      </Title>
+      <Wrapper>
+        {
+          data.map((item, index) => (
+            <Container key={item._id}>
+              <Indice>0{index + 1}.</Indice>
+              <SubWrapper>
+                <StyledLink 
+                  to={`/${item.username}/${item.slug}`}
+                  onClick={stopPropagation}
+                >{ item.title }</StyledLink>
+                <StyledInfo>
+                  <div>{shortWrittenDate(item.createdAt)}</div>
+                  <Circle><FaCircle /></Circle>
+                  <div>{item.readingTime} min read</div>
+                </StyledInfo>
+              </SubWrapper>
+            </Container>
+          ))
+        }
+      </Wrapper>
+    </>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  margin: 16px 0 24px 0;
+`;
+const SubWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const Container = styled.button`
+  display: flex;
+  width: 50%;
+  gap: 16px;
+  padding: 16px;
+  align-items: flex-start;
+  background: none;
+  outline: none;
+  border: none;
+  border-radius: 4px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${COLORS.light};
+  }
+`;
+const Indice = styled.div`
+  font-size: 32px;
+  font-weight: bold;
+  color: ${COLORS.grey};
+`;
+const StyledLink = styled(NavLink)`
+  font-size: 16px;
+  color: ${COLORS.dark};
+  text-decoration: none;
+  margin-top: 3px;
+
+  &:hover {
+    color: ${COLORS.black};
+  }
+`;
+const StyledInfo = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  gap: 4px;
+  color: ${COLORS.secondary};
+  margin-top: 8px;
+`;
+const Circle = styled.div`
+  font-size: 3px;
+`;
+const Title = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 24px;
+`;
+
+export default Trending;

client/src/helpers.js

@@ -1,7 +1,7 @@
 // https://stackoverflow.com/questions/30130241/typeerror-date-is-not-a-constructor
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
 export const fullWrittenDate = (date, lang = "en-US") => {
-  return new window.Date(date).toLocaleDateString(lang, {
+  return new window.Date(parseInt(date)).toLocaleDateString(lang, {
     year: "numeric",
     month: "long",
     weekday: "long",
@@ -11,7 +11,7 @@ export const fullWrittenDate = (date, lang = "en-US") => {
 };
 
 export const shortWrittenDate = (date, lang = "en-US") => {
-  return new window.Date(date).toLocaleDateString(lang, {
+  return new window.Date(parseInt(date)).toLocaleDateString(lang, {
     year: "numeric",
     month: "short",
     day: "numeric",

client/src/pages/Homepage.js

@@ -1,12 +1,13 @@
 import Navigation from "../components/Navigation";
+import Trending from "../components/Trending";
 
 const Homepage = () => {
   const title = 'Homepage';
 
   return (
     <>
       <Navigation title={title} />
-      <div>Homepage</div>
+      <Trending />
     </>
   )
 }

server/handlers.js

@@ -3,6 +3,7 @@
 const { v4: uuidv4 } = require("uuid");
 const bcrypt = require("bcrypt");
 const { MongoClient } = require("mongodb");
+const { readingTime } = require("./helpers");
 require("dotenv").config();
 const { MONGO_URI, DB_NAME } = process.env;
 
@@ -487,7 +488,6 @@ const getStory = async (req, res) => {
 };
 
 const getStories = async (req, res) => {
-  const { username } = req.params;
   console.log(req.params);
   console.log(req.query);
 
@@ -512,6 +512,63 @@ const getStories = async (req, res) => {
   }
 };
 
+const getTrending = async (req, res) => {
+  console.log(req.params);
+
+  const client = new MongoClient(MONGO_URI, option);
+  try {
+    console.log('connecting to db');
+    await client.connect();
+    console.log('connected to db');
+    const db = client.db(DB_NAME);
+    console.log('requesting stories array');
+    let stories = await db.collection("stories").find({ visibility: 'public' }).project({
+      title: 1,
+      slug: 1,
+      username: 1,
+      views: 1,
+      createdAt: 1,
+      content: 1
+    }).toArray();
+    console.log('received stories array');
+    // console.log(stories);
+    if (stories) {
+      const data = stories.map(story => {
+        const {
+          _id,
+          title,
+          slug,
+          username,
+          createdAt,
+          content
+        } = story;
+        const tmp = story;
+        const time = readingTime(content);
+        let views = 1;
+        if (story.views) views = story.views;
+        return {
+          _id,
+          title,
+          slug,
+          username,
+          createdAt,
+          readingTime: time,
+          views
+        };
+      }).sort((a,b) => b.views - a.views).slice(0, 6);
+      res.status(200).json({ status: 200, data, message: "success" })
+    }
+    else {
+      res.status(409).json({ status: 404, message: "Items not found" });
+    }
+  } catch (err) {
+    console.log("Error Getting Items", err);
+    res.status(500).json({ status: 500, message: err });
+  } finally {
+    client.close();
+  }
+};
+
 module.exports = {
   getUser,
   getUsers,
@@ -524,6 +581,7 @@ module.exports = {
   updateStory,
   updateStoryViews,
   getTagStories,
+  getTrending,
   // updateCart,
   // updateBookmarks,
   // updateOrdersHistory,

server/helpers.js

@@ -0,0 +1,23 @@
+// https://gist.github.com/codeguy/6684588?permalink_comment_id=3243980#gistcomment-3243980
+const slugify = (text) => {
+  return text
+    .toString() // Cast to string (optional)
+    .normalize("NFKD") // The normalize() using NFKD method returns the Unicode Normalization Form of a given string.
+    .toLowerCase() // Convert the string to lowercase letters
+    .trim() // Remove whitespace from both sides of a string (optional)
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
+    .replace(/\-\-+/g, "-"); // Replace multiple - with single -
+};
+
+const readingTime = (text) => {
+  const contentString = JSON.stringify(text);
+  const words = contentString.split(" ").length;
+  const wordsPerMinute = 200;
+  return Math.ceil(words / wordsPerMinute);
+};
+
+module.exports = {
+  slugify,
+  readingTime,
+}

server/index.js

@@ -17,6 +17,7 @@ const {
   updateStory,
   updateStoryViews,
   getTagStories,
+  getTrending,
   // updateCart,
   // updateBookmarks,
   // updateOrdersHistory,
@@ -57,6 +58,7 @@ app.get("/api/users", getUsers)
 app.get("/api/users/:username", getUser)
 app.get("/api/tag/:tagName", getTagStories)
 app.get("/api/stories/:username", getStories)
+app.get("/api/trending", getTrending)
 app.get("/api/stories/:username/:slug", getStory)
 app.put("/api/stories/:username/:slug", updateStory)
 app.put("/api/views", updateStoryViews)