+
+ );
+}
diff --git a/admin-frontend/src/Components/Article/Section/SectionContent.jsx b/admin-frontend/src/Components/Article/Section/SectionContent.jsx
new file mode 100644
index 0000000..33242a7
--- /dev/null
+++ b/admin-frontend/src/Components/Article/Section/SectionContent.jsx
@@ -0,0 +1,14 @@
+import BlocksParser from "../../BlocksParser/BlocksParser";
+//Component for the body content of an article section's content
+export default function SectionContent({ content }) {
+ return (
+
+
+ );
+}
diff --git a/admin-frontend/src/Components/Article/Section/SectionHeader.jsx b/admin-frontend/src/Components/Article/Section/SectionHeader.jsx
new file mode 100644
index 0000000..062cab1
--- /dev/null
+++ b/admin-frontend/src/Components/Article/Section/SectionHeader.jsx
@@ -0,0 +1,17 @@
+import ArrowMarker from "../../ArrowMarker/ArrowMarker";
+import BlocksParser from "../../BlocksParser/BlocksParser";
+
+//Component for the title of a article section
+export default function SectionHeader({ headerBlock }) {
+ return (
+
+
+
+
+
+ {/* */}
+
+
+
+ );
+}
diff --git a/admin-frontend/src/Components/Article/Section/TableOfContents.jsx b/admin-frontend/src/Components/Article/Section/TableOfContents.jsx
new file mode 100644
index 0000000..c3bfbef
--- /dev/null
+++ b/admin-frontend/src/Components/Article/Section/TableOfContents.jsx
@@ -0,0 +1,30 @@
+import { Stack } from "react-bootstrap";
+import SectionHeader from "./SectionHeader";
+import BlocksParser from "../../BlocksParser/BlocksParser";
+
+/*
+component for table of contents in article page,
+takes in array of objects containing heading block data text and section id
+
+*/
+export default function TableOfContents({ contentSequence }) {
+ return (
+
+
+
+
+
+
+ {contentSequence.map(({ heading, link }, index) => {
+ return (
+
+ {index + 1}.
+
+ );
+}
diff --git a/admin-frontend/src/Components/Article/Topics/RelatedTopicsList.jsx b/admin-frontend/src/Components/Article/Topics/RelatedTopicsList.jsx
new file mode 100644
index 0000000..c5acb5d
--- /dev/null
+++ b/admin-frontend/src/Components/Article/Topics/RelatedTopicsList.jsx
@@ -0,0 +1,30 @@
+//Component for list of related topics, which displays multiple categories of topic lists
+
+import { Stack } from "react-bootstrap";
+import TopicList from "./TopicList";
+
+//accepts an array of objects, which each contain topic category name
+//and an array of topics and their corresponding links
+//these objects have the following format
+/*{
+ topicCategory: string,
+ topicList: Array of {topic: string, link: string}
+}
+*/
+
+export default function RelatedTopicsList({ topicLists }) {
+ return (
+
+
+
+ Related Topics
++ {topicCategory.toUpperCase()} +
+- {listItemElements}
![]({"/cc_logo_white.png"}){kind=logo}
+ No articles found.
+ ) : (
+ Displaying results...
+ )}
+ {articles &&
+ articles.map((article) => (
+
+ {article.header.blocks[0].data.text}
+ | {article.author}
+
+ {article.published_at && (
+
+ {new Date(article.published_at).toLocaleDateString()}
+
+ )}
+
+ {article.id}
+
+ {article.published_at ? "Published" : "Unpublished"}
+
+ No users found.
+ ) : (
+ Displaying results...
+ )}
+ {users &&
+ users.map((user) => (
+
+ {user.username}{" "}
+
+ | {user.first_name} {user.last_name}
+
+
+
+ {user.email}
+
+
+
+ {user?.role === "admin" && "Admin"}
+
+ {user.id}
+
+
+ );
+}
diff --git a/admin-frontend/src/Components/LoadingSpinner/LoadingSpinner.scss b/admin-frontend/src/Components/LoadingSpinner/LoadingSpinner.scss
new file mode 100644
index 0000000..fec0173
--- /dev/null
+++ b/admin-frontend/src/Components/LoadingSpinner/LoadingSpinner.scss
@@ -0,0 +1,17 @@
+.fullscreen-spinner-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(255, 255, 255, 0.7);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 9999;
+}
+
+.fullscreen-spinner{
+ width: 5rem !important;
+ height: 5rem !important;
+}
\ No newline at end of file
diff --git a/admin-frontend/src/Components/SearchBar/ArticleSearchBar.jsx b/admin-frontend/src/Components/SearchBar/ArticleSearchBar.jsx
new file mode 100644
index 0000000..74af5fa
--- /dev/null
+++ b/admin-frontend/src/Components/SearchBar/ArticleSearchBar.jsx
@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { Form, Row, Col, Container, Button } from "react-bootstrap";
+import { useSearchArticles } from "../../hooks/useSearchArticles";
+import "./SearchBar.scss";
+import { useLoadingSpinner } from "../../context/SpinnerContext";
+import { useSearchParams } from "react-router-dom";
+
+export default function ArticleSearchBar({ onSearch }) {
+ const { showSpinner, hideSpinner } = useLoadingSpinner();
+
+ const [urlSearchParams] = useSearchParams();
+ const [searchParams, setSearchParams] = useState({
+ id: urlSearchParams.get("id") || "",
+ author_id: urlSearchParams.get("author_id") || "",
+ title: urlSearchParams.get("title") || "",
+ });
+
+ const { searchArticles } = useSearchArticles();
+
+ const handleChange = (e) => {
+ setSearchParams({ ...searchParams, [e.target.name]: e.target.value });
+ };
+
+ const handleSearch = async (e) => {
+ e.preventDefault();
+
+ const params = {
+ id: searchParams.id ? parseInt(searchParams.id) : null,
+ author_id: searchParams.author_id
+ ? parseInt(searchParams.author_id)
+ : null,
+ title: searchParams.title || null,
+ };
+
+ showSpinner();
+ const results = await searchArticles(params);
+ if (results) onSearch?.(results, params);
+ hideSpinner();
+ };
+
+ const handleShowAll = async () => {
+ const emptyParams = {
+ id: null,
+ author_id: null,
+ title: null,
+ };
+
+ setSearchParams({
+ id: "",
+ author_id: "",
+ title: "",
+ });
+
+ const results = await searchArticles(emptyParams);
+ if (results) onSearch?.(results, emptyParams);
+ };
+
+ return (
+ Comments
+ {comments.length === 0 ? ( +No comments posted yet.
+ ) : ( +
+ {new Date(comment.created_at).toLocaleString()}
+
+ {comment.content}
+
+
+ {user.first_name} {user.last_name}
+
+
+ {user.role && (
+
+ {user.role}
+
+ )}
+
+
+ Username:
+ {user.username}
+
+
+
+ Email:
+ {user.email}
+
+
+
+ User ID:
+ {user.id}
+
+
+ + Welcome to the admin portal of CS Central. +
++ You can use the header to manage users, articles, and more. +
++ Welcome to the admin portal to CS Central. +
+ ++ {comments && ( +
+
+
+ {isBookmarked ? (
+
+ )}
+
+
);
}
diff --git a/frontend/src/Components/Article/ArticleHeader/ArticleHeaderDesc.jsx b/frontend/src/Components/Article/ArticleHeader/ArticleHeaderDesc.jsx
index 56bfd77..4965a95 100644
--- a/frontend/src/Components/Article/ArticleHeader/ArticleHeaderDesc.jsx
+++ b/frontend/src/Components/Article/ArticleHeader/ArticleHeaderDesc.jsx
@@ -1,14 +1,17 @@
import { Stack } from "react-bootstrap";
import ArrowMarker from "../../ArrowMarker/ArrowMarker";
+import BlocksParser from "../../BlocksParser/BlocksParser";
//component for author description
-export default function ArticleHeaderDesc({ desc }) {
+export default function ArticleHeaderDesc({ descriptionBlocks }) {
return (
By {author}
{" "}
Published {date}
- {isBookmarked ? (
-
+ {desc}
+
+
{title}
+
+
Comments
+ +
+
+ )}
+ + Log in or sign up to post your own comment! +
+
+
+ Log In
+
+
+ Sign Up
+
+
+ + No comments found. Be the first and post your own! +
+ ) : ( +
+ {comment.name}{" "}
+
+ @{comment.username} -{" "}
+ {new Date(comment.created_at).toLocaleString()}
+
+
+ {comment.content}
+
+ {user?.username === comment.username && (
+
-
);
}
diff --git a/frontend/src/Components/Article/Section/SectionHeader.jsx b/frontend/src/Components/Article/Section/SectionHeader.jsx
index 9f8d437..062cab1 100644
--- a/frontend/src/Components/Article/Section/SectionHeader.jsx
+++ b/frontend/src/Components/Article/Section/SectionHeader.jsx
@@ -1,14 +1,17 @@
import ArrowMarker from "../../ArrowMarker/ArrowMarker";
+import BlocksParser from "../../BlocksParser/BlocksParser";
//Component for the title of a article section
-export default function SectionHeader({ header }) {
+export default function SectionHeader({ headerBlock }) {
return (
+
);
}
diff --git a/frontend/src/Components/Article/Section/SectionContent.jsx b/frontend/src/Components/Article/Section/SectionContent.jsx
index 4d8e0d0..33242a7 100644
--- a/frontend/src/Components/Article/Section/SectionContent.jsx
+++ b/frontend/src/Components/Article/Section/SectionContent.jsx
@@ -1,3 +1,4 @@
+import BlocksParser from "../../BlocksParser/BlocksParser";
//Component for the body content of an article section's content
export default function SectionContent({ content }) {
return (
@@ -5,7 +6,9 @@ export default function SectionContent({ content }) {
{content}
+ +
{/* */}
+
);
}
diff --git a/frontend/src/Components/Article/Section/TableOfContents.jsx b/frontend/src/Components/Article/Section/TableOfContents.jsx
index 8c1e5ea..c3bfbef 100644
--- a/frontend/src/Components/Article/Section/TableOfContents.jsx
+++ b/frontend/src/Components/Article/Section/TableOfContents.jsx
@@ -1,25 +1,29 @@
import { Stack } from "react-bootstrap";
import SectionHeader from "./SectionHeader";
+import BlocksParser from "../../BlocksParser/BlocksParser";
/*
-component for table of contents in article page, takes in array of strings representing
-table of content headings
+component for table of contents in article page,
+takes in array of objects containing heading block data text and section id
--will display the number corresponding to its position next to it
*/
-export default function TableOfContents({ content_headings }) {
+export default function TableOfContents({ contentSequence }) {
return (
{header}
+
+
-
- {content_headings.map((content_heading, index) => (
-
);
diff --git a/frontend/src/Components/Article/Topics/RelatedTopicsList.jsx b/frontend/src/Components/Article/Topics/RelatedTopicsList.jsx
index a34761a..c5acb5d 100644
--- a/frontend/src/Components/Article/Topics/RelatedTopicsList.jsx
+++ b/frontend/src/Components/Article/Topics/RelatedTopicsList.jsx
@@ -15,7 +15,7 @@ import TopicList from "./TopicList";
export default function RelatedTopicsList({ topicLists }) {
return (
- {index + 1}. {content_heading} -
- ))} + {contentSequence.map(({ heading, link }, index) => { + return ( + + {index + 1}.Related Topics
+Related Topics
+
+ );
+}
diff --git a/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss b/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss
new file mode 100644
index 0000000..48c0cf7
--- /dev/null
+++ b/frontend/src/Components/ArticleResults/ArticleResult/ArticleResult.scss
@@ -0,0 +1,124 @@
+@import "bootstrap/scss/bootstrap-grid.scss";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "../../../scss/variables";
+/*overall article result container*/
+.article-result {
+ display: flex;
+ gap: 10px;
+ height: 100px;
+ @include media-breakpoint-up(sm) {
+ height: 150px;
+ }
+}
+
+/*image*/
+.article-result-image-container {
+ width: fit-content;
+ display: flex;
+ height: inherit;
+ justify-content: center;
+}
+
+.article-result-image {
+ object-fit: contain;
+ object-position: center top;
+ height: 100%;
+ width: 75px;
+ @include media-breakpoint-up(sm) {
+ width: 150px;
+ }
+ @include media-breakpoint-up(md) {
+ width: 200px;
+ }
+}
+.article-result-bookmark {
+ width: fit-content;
+
+ &:hover {
+ cursor: pointer;
+ }
+ &:active {
+ cursor: auto;
+ }
+}
+
+/*Text*/
+.article-result-text,
+.article-result-info {
+ display: flex;
+ flex-direction: column;
+}
+.article-result-text {
+ gap: 5px;
+}
+.article-result-info {
+ gap: 2.5px;
+}
+
+.article-result-title {
+ font-weight: 600;
+ text-transform: uppercase;
+ margin-bottom: 0 !important;
+ font-size: calc(0.8rem + 0.5vw);
+ @include media-breakpoint-up(sm) {
+ font-size: calc(1.2rem + 0.5vw);
+ }
+ /*style for clicking on article title*/
+ &:hover {
+ cursor: pointer;
+ text-decoration: underline;
+ }
+ &:active {
+ cursor: auto;
+ position: relative;
+ top: 1px;
+ opacity: 0.8;
+ }
+}
+.article-result-author,
+.article-result-date {
+ font-weight: 300;
+ font-style: italic;
+ padding: 0 !important;
+ font-size: calc(0.8rem + 0.1vw);
+ @include media-breakpoint-up(sm) {
+ font-size: calc(0.9rem + 0.1vw);
+ }
+}
+
+//COLOR MODES
+@include color-mode(light) {
+ .article-result-text,
+ .article-result-author,
+ .article-result-date {
+ color: $primary-text-light;
+ }
+ .article-result-bookmark {
+ color: $bookmark-bg-light;
+ }
+ .article-result-likes {
+ color: $like-bg-light;
+ }
+ .article-result-comment {
+ color: $comment-bg-light;
+ }
+}
+@include color-mode(dark) {
+ .article-result-text,
+ .article-result-author,
+ .article-result-date {
+ color: $primary-text-dark;
+ }
+ .article-result-bookmark {
+ color: $bookmark-bg-dark;
+ }
+ .article-result-likes {
+ color: $like-bg-dark;
+ }
+ .article-result-comment {
+ color: $comment-bg-dark;
+ }
+}
diff --git a/frontend/src/Components/ArticleResults/ArticleResultsList.jsx b/frontend/src/Components/ArticleResults/ArticleResultsList.jsx
new file mode 100644
index 0000000..b96d6c9
--- /dev/null
+++ b/frontend/src/Components/ArticleResults/ArticleResultsList.jsx
@@ -0,0 +1,22 @@
+import ArticleResult from "./ArticleResult/ArticleResult";
+
+export default function ArticleResultsList({
+ articles,
+ bookmarkTogglerCreator,
+}) {
+ return (
+
+
+
+ {article.isBookmarked ? (
+
+
+
+
+
+
+
+
+ By {article.author}
+
+ Published {article.published_at}
+
+
+
+
+
+
+
+
+
+ {articles && articles.length > 0 ? (
+ articles.map((article) => (
+
+ );
+}
diff --git a/frontend/src/Components/ArticleResults/SideSections/ArticleResultSideSection.scss b/frontend/src/Components/ArticleResults/SideSections/ArticleResultSideSection.scss
new file mode 100644
index 0000000..6b94506
--- /dev/null
+++ b/frontend/src/Components/ArticleResults/SideSections/ArticleResultSideSection.scss
@@ -0,0 +1,32 @@
+@import "bootstrap/scss/bootstrap-grid.scss";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "../../../scss/variables";
+
+.article-results-side-section {
+}
+.article-results-side-section-title {
+ margin-bottom: 1rem;
+ font-size: calc(0.8rem + 0.5vw);
+ font-weight: 600;
+ @include media-breakpoint-up(sm) {
+ font-size: calc(1.2rem + 0.5vw);
+ }
+}
+
+.article-results-section-content {
+ padding-left: 10px;
+}
+
+@include color-mode(light) {
+ .article-results-side-section-title {
+ color: $primary-text-light;
+ }
+}
+@include color-mode(dark) {
+ .article-results-side-section-title {
+ color: $primary-text-dark;
+ }
+}
diff --git a/frontend/src/Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx b/frontend/src/Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx
new file mode 100644
index 0000000..492cc30
--- /dev/null
+++ b/frontend/src/Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.jsx
@@ -0,0 +1,31 @@
+import "./RelatedTopicTags.scss";
+import "../ArticleResultSideSection.scss";
+//tags : array of tag objects
+export default function RelatedTags({ tags }) {
+ return (
+
+ );
+}
diff --git a/frontend/src/Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.scss b/frontend/src/Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.scss
new file mode 100644
index 0000000..3a63667
--- /dev/null
+++ b/frontend/src/Components/ArticleResults/SideSections/RelatedTopicTags/RelatedTopicTags.scss
@@ -0,0 +1,36 @@
+@import "bootstrap/scss/bootstrap-grid.scss";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "../../../../scss/variables";
+.related-topic-tag {
+ background: $related-topic-tag-bg;
+ color: white;
+ border-radius: 20px;
+ padding: 5px 8px;
+ white-space: nowrap;
+ font-weight: 600;
+ font-size: calc(0.5rem + 0.1vw);
+ @include media-breakpoint-up(sm) {
+ font-size: calc(0.7rem + 0.1vw);
+ }
+
+ &:hover {
+ filter: brightness(1.2);
+ cursor: pointer;
+ }
+
+ &:active {
+ filter: brightness(0.8);
+ position: relative;
+ top: 1px;
+ cursor: auto;
+ }
+}
+
+.related-topic-tags-container {
+ display: flex;
+ flex-flow: wrap;
+ gap: 10px 8px;
+}
diff --git a/frontend/src/Components/BlocksParser/BlocksParser.jsx b/frontend/src/Components/BlocksParser/BlocksParser.jsx
new file mode 100644
index 0000000..5c79287
--- /dev/null
+++ b/frontend/src/Components/BlocksParser/BlocksParser.jsx
@@ -0,0 +1,67 @@
+import parse from "html-react-parser";
+import DOMPurify from "dompurify";
+import { Figure } from "react-bootstrap";
+import { useState } from "react";
+import ArticleImagePreview from "../Article/ArticleImagePreview/ArticleImagePreview";
+//returns parsed article
+//separating these into switch cases in case we need to have different logic for each type of block
+export default function BlocksParser({ blocks }) {
+ const [show, setShow] = useState(false);
+ const [previewImage, setPreviewImage] = useState(null);
+ const [imageCaption, setImageCaption] = useState(null);
+
+ return (
+ <>
+ Your query did not match any results
+ )} +- {listItemElements}