Merge pull request #2 from VirtusLab-Open-Source/feat/comments-nextjs-example

Author: cyp3rius

strapi-nextjs-comments/README.md

@@ -0,0 +1,46 @@
+# Strapi Plugin Comments example with NextJS
+
+This example is set up to show how to create a project with our comments plugin installed as well as integrate it with a sample frontend.
+
+## 🔧 Getting Started
+
+To run this project, you need to prepare two shell windows. One window will be used to set up and run strapi server and the second one will be used to run development server for nextjs frontend.
+
+### Strapi Server
+
+Install all packages
+
+```sh
+cd ./strapi-app
+yarn install
+```
+
+Run the server
+
+> Before running the strapi server be sure to create your own `.env` file. Example of this file can be found in strapi app folder. 
+
+```sh
+yarn build
+yarn develop 
+
+# or 
+
+yarn develop --watch-admin
+```
+
+After that open strapi admin panel and create admin user. The strapi project should be ready to use at this point. 
+
+### NextJS development server
+
+Install all packages
+```sh
+cd ./next-app
+yarn install
+```
+
+Run the server
+```sh
+yarn dev
+```
+
+After that the nextJs frontend should be ready to use. You can direct to `localhost:3000` to see it.

strapi-nextjs-comments/next-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

strapi-nextjs-comments/next-app/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

strapi-nextjs-comments/next-app/api/comment.ts

@@ -0,0 +1,35 @@
+import { Author, Report } from "../types/comments";
+
+export async function PostComment(postId: number, author: Author, content: string) {
+  const body = JSON.stringify({ author, content });
+  const res = await fetch(`http://localhost:1337/api/comments/api::post.post:${postId}`,
+    {
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method: "POST",
+      body,
+    }
+  );
+}
+
+export async function ReportComment(postId: number, commentId: number, report: Report) {
+  const body = JSON.stringify(report);
+  const res = await fetch(`http://localhost:1337/api/comments/api::post.post:${postId}/comment/${commentId}/report-abuse`,
+    {
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      },
+      method: "POST",
+      body
+    }
+  );
+ }
+
+export async function GetComments(postId: number) {
+  const res = await fetch(`http://localhost:1337/api/comments/api::post.post:${postId}`);
+  const data = await res.json();
+  return data;
+}

strapi-nextjs-comments/next-app/components/Comments/Comment.tsx

@@ -0,0 +1,48 @@
+import { Dropdown } from "react-bootstrap"
+import { Comment, Report } from "../../types/comments"
+
+interface IProps {
+  comment: Comment;
+  postId: number;
+  reportComment: (postId: number, commentId: number, report: Report) => Promise<void>;
+}
+
+const reports: Array<Report & { label: string }> = [
+  { reason: "BAD_WORDS", content: "Comment reported for containing bad words", label: "Report for bad words" },
+  { reason: "DISCRIMINATION", content: "Comment reported for being discriminative", label: "Report for discrimination" },
+  { reason: "OTHER", content: "Comment reported for unspecified reason", label: "Report for other" },
+];
+
+const Comment: React.FC<IProps> = ({ comment, postId, reportComment }) => {
+  const blocked = comment.blocked;
+  return (
+    <div className="list-group-item d-flex gap-3 py-3 " key={comment.id} aria-hidden="true">
+      <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" className="rounded-circle flex-shrink-0" />
+      <div className="d-flex gap-2 w-100 justify-content-between">
+        <div>
+          <h6 className="mb-0">{!blocked ? comment.author.name : "Comment Blocked"}</h6>
+          <p className={`mb-0 opacity-75 ${blocked ? "placeholder" : ""}`}>{comment.content}</p>
+        </div>
+        <div className="d-flex align-items-center">
+          {!blocked && <Dropdown>
+            <Dropdown.Toggle variant="success" id="dropdown-basic" size="sm">
+              Report
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {reports.map(report => (
+                <Dropdown.Item
+                  key={report.reason}
+                  onClick={() => reportComment(postId, comment.id, report)}>
+                  {report.label}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>}
+          <small className={`opacity-50 text-nowrap mx-2 ${blocked ? "placeholder" : ""}`}>{comment.createdAt}</small>
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export default Comment;

strapi-nextjs-comments/next-app/components/Comments/NewCommentForm.tsx

@@ -0,0 +1,71 @@
+import { useFormik } from "formik";
+import { Author } from "../../types/comments";
+
+interface IProps {
+  postId: number;
+  postComment: (postId: number, author: Author, content: string, threadOf?: number) => Promise<void>;
+}
+
+const NewCommentForm: React.FC<IProps> = ({ postId, postComment }) => {
+  const formik = useFormik({
+    initialValues: {
+      name: "",
+      email: "",
+      content: "",
+    },
+    onSubmit: async () => {
+      const author = {
+        id: formik.values.email.replace("@", "_"),
+        name: formik.values.name,
+        email: formik.values.email,
+      }
+      await postComment(postId, author, formik.values.content);
+      formik.setValues(formik.initialValues);
+    }
+  });
+  
+  const defaultProps = (field: "name" | "email" | "content") => ({
+    className: "form-control",
+    value: formik.values[field],
+    onChange: formik.handleChange,
+    required: true,
+    disabled: formik.isSubmitting,
+    id: field,
+    name: field,
+  }); 
+
+  return (
+    <form className="mt-5" onSubmit={formik.handleSubmit}>
+      <h4>
+        Add new comment
+      </h4>
+      <div className="gap-2 w-75 row">
+        <div className="col-3">
+          <label className="form-label" htmlFor="name">Name</label>
+          <input {...defaultProps("name")} type="text" placeholder="Your display name" />
+          <div className="invalid-feedback">
+            Valid last name is required.
+          </div>
+        </div>
+        <div className="col-4">
+          <label className="form-label" htmlFor="email">Email</label>
+          <input {...defaultProps("email")} type="email" placeholder="Your email" />
+          <div className="invalid-feedback">
+            Valid last name is required.
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-12">
+            <label className="form-label" htmlFor="content">Content</label>
+            <input {...defaultProps("content")} type="textarea" placeholder="Content of your comment"/>
+          </div>
+        </div>
+        <div className="row m-1">
+          <button className="form-control btn btn-primary btn-md w-25" type="submit">Add new comment</button>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+export default NewCommentForm;

strapi-nextjs-comments/next-app/components/Comments/index.tsx

@@ -0,0 +1,36 @@
+import usePostComments from "../../hooks/useComments";
+import Comment from "./Comment";
+import NewCommentForm from "./NewCommentForm";
+
+interface IProps {
+  postId: number;
+}
+
+const CommentsList: React.FC<IProps> = ({ postId }) => {
+  const { data, isLoading, reportComment, postComment } = usePostComments(postId);
+
+  if (isLoading || !data) {
+    return <div>Loading comments...</div>;
+  }
+
+  return (
+    <>
+      <div className="list-group w-auto">
+        <h2 className="blog-post-title mt-4">Comments</h2>
+        <hr />
+        {
+          data.map(comment =>
+            <Comment
+              key={`comment_${comment.id}`}
+              postId={postId}
+              comment={comment}
+              reportComment={reportComment}
+            />)
+        }
+      </div>
+      <NewCommentForm postId={postId} postComment={postComment} />
+    </>
+  );
+}
+
+export default CommentsList;

strapi-nextjs-comments/next-app/components/Footer/index.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+const footerItems = [{
+  id: 1,
+  title: 'Strapi Documentation',
+  path: 'https://docs.strapi.io/',
+}, {
+  id: 2,
+  title: 'Strapi Plugin Comments',
+  path: 'https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/',
+}, {
+  id: 3,
+  title: 'Strapi Plugin Navigation',
+  path: 'https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/',
+}];
+
+const MainFooter: React.FC = () => {
+  return (
+    <footer className="footer mt-auto py-3 bg-light">
+      <div className="container d-flex flex-wrap justify-content-between align-items-center">
+        <p className="col-md-4 mb-0 text-muted">Created by VirtusLab</p>
+        <ul className="nav col-md-auto justify-content-end">
+          {footerItems.map((navItem) => (
+            <Link key={navItem.id} href={navItem.path} passHref>
+              <li className="nav-item nav-link px-3 text-muted">
+                {navItem.title}
+              </li>
+            </Link>
+          ))}
+        </ul>
+      </div>
+    </footer>
+  );
+}
+
+export default MainFooter;

strapi-nextjs-comments/next-app/components/MainLayout/index.tsx

@@ -0,0 +1,21 @@
+import { Container } from "react-bootstrap";
+import Footer from "../Footer";
+import Navbar from "../Navbar";
+
+interface IProps {
+  children: JSX.Element
+}
+
+const MainLayout: React.FC<IProps> = ({ children }) => {
+  return (
+    <div className="d-flex flex-column" style={{ height: "100vh" }}>
+      <Navbar />
+      <Container className="my-5">
+        {children}
+      </Container>
+      <Footer />
+    </div>
+  );
+}
+
+export default MainLayout;

strapi-nextjs-comments/next-app/components/Navbar/index.tsx

@@ -0,0 +1,18 @@
+import { Container, Navbar } from 'react-bootstrap';
+import Link from "next/link";
+
+const MainNavbar: React.FC<{}> = () => {
+  return (
+    <Navbar bg="light" expand="lg">
+      <Container>
+        <Link href="/">
+          <Navbar.Brand className="cursor-pointer">
+            Strapi Plugin Comments Example
+          </Navbar.Brand>
+        </Link>
+      </Container>
+    </Navbar>
+  );
+}
+
+export default MainNavbar;