diff --git a/client/src/components/PublicArticles.js b/client/src/components/PublicArticles.js new file mode 100644 index 0000000..06abde3 --- /dev/null +++ b/client/src/components/PublicArticles.js @@ -0,0 +1,40 @@ +import { useEffect, useState } from "react"; +import styled from "styled-components"; +import Loading from "./Loading"; +import Article from "../components/cards/Article"; + +const PublicArticles = () => { + + const [articles, setArticles] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + setLoading(true); + fetch(`/api/articles`) + .then((res) => res.json()) + .then((response) => { + // console.log(response.data); + setArticles(response.data); + setLoading(false); + }); + // eslint-disable-next-line + }, []); + + if (loading) return ; + + return ( + + { + articles.map(article => ( +
+ )) + } + + ) +} + +const Wrapper = styled.div` + margin: 48px 0; +`; + +export default PublicArticles; \ No newline at end of file diff --git a/client/src/components/cards/Article.js b/client/src/components/cards/Article.js index 07a5e77..ff36b6a 100644 --- a/client/src/components/cards/Article.js +++ b/client/src/components/cards/Article.js @@ -76,6 +76,7 @@ const Main = styled.button` margin: 0 0 16px 0; cursor: pointer; border-bottom: 1px solid ${COLORS.grey}; + width: 100%; &:last-child { border: none; diff --git a/client/src/helpers.js b/client/src/helpers.js index 51fb754..8eb761d 100644 --- a/client/src/helpers.js +++ b/client/src/helpers.js @@ -45,7 +45,7 @@ export const readingTime = (text) => { }; export const makeTextIntro = (text) => { - const arr = text.split(/\n/).filter(el => !(new RegExp('[#`]').test(el)) && el.length > 0); + const arr = text.split(/\n/).filter(el => !(new RegExp('[#`*-]').test(el)) && el.length > 0); let result = arr[0]; if (result.split(' ').length > 50) result = result.split(' ').slice(0, 50).join(' ') + '...'; // console.log(result); diff --git a/client/src/pages/Homepage.js b/client/src/pages/Homepage.js index 80b56ff..6e8bc6a 100644 --- a/client/src/pages/Homepage.js +++ b/client/src/pages/Homepage.js @@ -1,6 +1,7 @@ import { useContext } from "react"; import Banner from "../components/Banner"; import Trending from "../components/Trending"; +import PublicArticles from "../components/PublicArticles"; import { UserContext } from "../contexts/UserContext"; const Homepage = () => { @@ -12,6 +13,7 @@ const Homepage = () => { <> { !user._id && } + ) } diff --git a/server/handlers.js b/server/handlers.js index 1bb3bdb..d8009ed 100644 --- a/server/handlers.js +++ b/server/handlers.js @@ -296,6 +296,7 @@ const updateStory = async (req, res) => { if (req.query.delete === 'true') { updatedStory = { ...updatedStory, + visibility: 'unlisted', deleted: true } @@ -401,7 +402,7 @@ const getTagStories = async (req, res) => { try { await client.connect(); const db = client.db(DB_NAME); - const result = await db.collection("stories").find({ tags: { $exists: true, $eq: req.params.tagName } }).toArray(); + const result = await db.collection("stories").find({ visibility: 'public', tags: { $exists: true, $eq: req.params.tagName } }).toArray(); // console.log(result); console.log(req.params.tagName); let data = {}; @@ -497,7 +498,29 @@ const getStory = async (req, res) => { } }; -const getStories = async (req, res) => { +const getArticles = async (req, res) => { + console.log(req.params); + console.log(req.query); + + const client = new MongoClient(MONGO_URI, option); + try { + await client.connect(); + const db = client.db(DB_NAME); + let data = await db.collection("stories").find({ visibility: 'public' }).toArray(); + data = data.filter(el => !el.deleted).sort((a,b) => b.createdAt - a.createdAt); + console.log(data.length + 'items'); + const arr = []; + + res.status(200).json({ status: 200, data, message: "success" }); + } catch (err) { + console.log("Error", err); + res.status(500).json({ status: 500, message: err }); + } finally { + client.close(); + } +}; + +const getUserStories = async (req, res) => { console.log(req.params); console.log(req.query); @@ -508,35 +531,9 @@ const getStories = async (req, res) => { const userId = req.query._id; if (userId) { let data = await db.collection("stories").find({ userId }).toArray(); - data = data.sort((a,b) => b.createdAt - a.createdAt); + data = data.filter(el => !el.deleted).sort((a,b) => b.createdAt - a.createdAt); console.log(data.length + 'items'); const arr = []; - // data.forEach(async (item) => { - // console.log(item.userId); - // const { title, content, imageSrc, createdAt, updatedAt, _id, userId, slug, visibility, username, tags } = item; - // const views = item.views ? item.views : 1; - // const user = await db.collection("users").findOne({ _id: userId }); - // console.log(user.username); - // arr.push({ - // _id, - // content, - // createdAt, - // imageSrc, - // title, - // updatedAt, - // user: { - // _id: userId, - // firstName: user.firstName, - // lastName: user.lastName, - // imageSrc: user.imageSrc, - // username, - // }, - // slug, - // visibility, - // views, - // tags - // }); - // }); res.status(200).json({ status: 200, data, message: "success" }); } @@ -568,7 +565,7 @@ const getTrending = async (req, res) => { views: 1, createdAt: 1, content: 1, - tags: 1 + tags: 1, }).toArray(); console.log('received stories array'); // console.log(stories); @@ -619,11 +616,12 @@ module.exports = { updateUser, createStory, getStory, - getStories, + getUserStories, updateStory, updateStoryViews, getTagStories, getTrending, + getArticles, // updateCart, // updateBookmarks, // updateOrdersHistory, diff --git a/server/index.js b/server/index.js index 54f0ad0..8419851 100644 --- a/server/index.js +++ b/server/index.js @@ -14,11 +14,12 @@ const { updateUser, createStory, getStory, - getStories, + getUserStories, updateStory, updateStoryViews, getTagStories, getTrending, + getArticles, // updateCart, // updateBookmarks, // updateOrdersHistory, @@ -58,8 +59,9 @@ if (process.env.NODE_ENV === 'developement') { 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/stories/:username", getUserStories) app.get("/api/trending", getTrending) +app.get("/api/articles", getArticles) app.get("/api/stories/:username/:slug", getStory) app.put("/api/stories/:username/:slug", updateStory) app.put("/api/views", updateStoryViews)