feat: add article revisions feature with restore functionality

.eslintignore

@@ -2,3 +2,6 @@
 /craco.config.js
 /__tests__
 /babel.config.js
+build/
+src/
+*.js

src/components/article/ButtonsWIthAccess.tsx

@@ -34,6 +34,14 @@ const ButtonsWIthAccess = ({ articleInfo }: IButtonsWIthAccessProps) => {
         <i className="ion-edit"></i>&nbsp; Edit Article
       </button>
       &nbsp;&nbsp;
+      <button
+        className="btn btn-sm btn-outline-info"
+        type="button"
+        onClick={() => navigate(`/article/${articleInfo.slug}/revisions/`, { state: articleInfo })}
+      >
+        <i className="ion-refresh"></i>&nbsp; Article Updates History
+      </button>
+      &nbsp;&nbsp;
       <button className="btn btn-sm btn-outline-danger" type="button" onClick={() => onDelete(articleInfo.slug)}>
         <i className="ion-trash-a"></i>&nbsp; Delete Article
       </button>

src/components/article/Revision.tsx

@@ -0,0 +1,84 @@
+import { useRevertArticleUpdateMutation } from '@/queries/articles.query';
+import { useGetUserQuery } from '@/queries/user.query';
+import useInputs from '@/lib/hooks/useInputs';
+import queryClient from '@/queries/queryClient';
+import { QUERY_ARTICLE_REVISIONS_KEY, QUERY_COMMENTS_KEY } from '@/constants/query.constant';
+import convertToDate from '@/lib/utils/convertToDate';
+import { IArticleRevision } from '@/interfaces/main';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+interface IRevisionProps {
+  revisionsInfo: {
+    articlesRevisions: IArticleRevision[];
+    articlesRevisionsCount: number;
+  };
+  slug: string;
+}
+
+const Revision = ({ revisionsInfo, slug }: IRevisionProps) => {
+  const { articlesRevisions } = revisionsInfo;
+  const revertArticleUpdateMutation = useRevertArticleUpdateMutation();
+  const navigate = useNavigate();
+  const onRevert = (slug: string, revision: number, newSlug: string) => {
+    revertArticleUpdateMutation.mutate(
+      { slug, revision },
+      {
+        onSuccess: (_) => {
+          queryClient.invalidateQueries({ queryKey: [QUERY_ARTICLE_REVISIONS_KEY] });
+          alert('Article reverted successfully!');
+          navigate(`/article/${newSlug}`, { state: newSlug });
+        },
+      },
+    );
+  };
+  return (
+    <div className="container py-4">
+      <h2 className="mb-4">Updates History</h2>
+      {articlesRevisions.length === 0 ? (
+        <div>Loading...</div>
+      ) : (
+        articlesRevisions?.map((revision, index) => (
+          <div key={index} className="card mb-3">
+            <div className="card-header">
+              <h5>Update {revision.id}</h5>
+              <p className="card-text">Date: {convertToDate(revision.createdAt)}</p>
+            </div>
+            <div className="card-body text-center">
+              <table className="table">
+                <tbody>
+                  <tr>
+                    <th>Title</th>
+                    <td>{revision.articleData.title}</td>
+                  </tr>
+                  <tr>
+                    <th>Slug</th>
+                    <td>{revision.articleData.slug}</td>
+                  </tr>
+                  <tr>
+                    <th>Body</th>
+                    <td>{revision.articleData.body}</td>
+                  </tr>
+                  <tr>
+                    <th>Description</th>
+                    <td>{revision.articleData.description}</td>
+                  </tr>
+                  <tr>
+                    <th>Created At</th>
+                    <td>{convertToDate(revision.articleData.createdAt)}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className="card-footer">
+              <button className="btn btn-danger" onClick={() => onRevert(slug, revision.id, revision.articleData.slug)}>
+                Revert To This
+              </button>
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+};
+
+export default Revision;

src/constants/query.constant.ts

@@ -4,3 +4,4 @@ export const QUERY_ARTICLE_KEY = 'article';
 export const QUERY_COMMENTS_KEY = 'comments';
 export const QUERY_PROFILE_KEY = 'profile';
 export const QUERY_TAG_KEY = 'tags';
+export const QUERY_ARTICLE_REVISIONS_KEY = 'revisions';

src/interfaces/main.d.ts

@@ -16,6 +16,22 @@ export interface IArticle {
   };
 }
 
+export interface IArticleRevision {
+  id: number;
+  articleId: number;
+  createdAt: string;
+  updatedAt: string;
+  articleData: {
+    id: number;
+    slug: string;
+    title: string;
+    description: string;
+    body: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
 export interface IComment {
   id: number;
   createdAt: string;

src/lib/routerMeta.ts

@@ -42,6 +42,12 @@ const routerMeta: RouterMetaType = {
     path: '/article/:slug',
     isShow: false,
   },
+  ArticleRevisionPage: {
+    name: 'Article Revisions',
+    path: '/article/:slug/revisions',
+    isShow: false,
+    isAuth: true,
+  },
   ProfilePage: {
     name: 'Profile',
     path: '/profile/:username/*',
@@ -59,6 +65,7 @@ const routerMeta: RouterMetaType = {
     isShow: true,
     isAuth: false,
   },
+
   NotFoundPage: {
     path: '/*',
     isShow: false,

src/pages/ArticleRevisionPage.tsx

@@ -0,0 +1,84 @@
+import { useGetArticleRevisionsQueries, useGetArticleQueries } from '@/queries/articles.query';
+import { Link, useLocation } from 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import ButtonSelector from '@/components/article/ButtonSelector';
+import { useContext } from 'react';
+import { UserContext } from '@/contexts/UserContextProvider';
+import Revision from '@/components/article/Revision';
+import routerMeta from '@/lib/routerMeta';
+import convertToDate from '@/lib/utils/convertToDate';
+
+const ArticleRevisionPage = () => {
+  const { state } = useLocation();
+  const [revisionInfo] = useGetArticleRevisionsQueries(state.slug);
+
+  const { isLogin } = useContext(UserContext);
+  console.log(state);
+  console.log(revisionInfo);
+
+  return (
+    <div className="article-page">
+      <div className="banner">
+        <div className="container">
+          <h1>{state.title}</h1>
+
+          <div className="article-meta">
+            <Link to={`/profile/${state.author.username}`} state={state.author.username}>
+              <img src={state.author.image} alt="comment-author" />
+            </Link>
+
+            <div className="info">
+              <Link to={`/profile/${state.author.username}`} state={state.author.username} className="author">
+                {state.author.username}
+              </Link>
+              <span className="date">{convertToDate(state.updatedAt)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container page">
+        <div className="row article-content">
+          <div className="col-md-12">
+            <ReactMarkdown children={state.body} remarkPlugins={[remarkGfm]}></ReactMarkdown>
+          </div>
+        </div>
+
+        <hr />
+
+        <div className="article-actions">
+          <div className="article-meta">
+            <Link to={`/profile/${state.author.username}`} state={state.author.username}>
+              <img src={state.author.image} alt="profile" />
+            </Link>
+            <div className="info">
+              <Link to={`/profile/${state.author.username}`} state={state.author.username} className="author">
+                {state.author.username}
+              </Link>
+              <span className="date">{convertToDate(state.updatedAt)}</span>
+            </div>
+            {/* {isLogin ? <ButtonSelector articleInfo={state} /> : <></>} */}
+          </div>
+        </div>
+
+        <div className="row">
+          <div className="col-xs-12 col-md-8 offset-md-2">
+            {isLogin ? (
+              <Revision revisionsInfo={revisionInfo.data} slug={state.slug} />
+            ) : (
+              <p>
+                <Link to={routerMeta.SignInPage.path}>Sign in</Link>
+                &nbsp;or&nbsp;
+                <Link to={routerMeta.SignUpPage.path}>Sign up</Link>
+                &nbsp;to add comments on this article.
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ArticleRevisionPage;

src/queries/articles.query.ts

@@ -1,14 +1,22 @@
-import { QUERY_ARTICLES_KEY, QUERY_ARTICLE_KEY, QUERY_COMMENTS_KEY, QUERY_TAG_KEY } from '@/constants/query.constant';
+import {
+  QUERY_ARTICLES_KEY,
+  QUERY_ARTICLE_KEY,
+  QUERY_ARTICLE_REVISIONS_KEY,
+  QUERY_COMMENTS_KEY,
+  QUERY_TAG_KEY,
+} from '@/constants/query.constant';
 import {
   getArticle,
   getArticles,
+  getArticleRevisions,
   createArticle,
   updateArticle,
   deleteArticle,
   getComments,
   createComment,
   deleteComment,
   favoriteArticle,
+  restoreArticleRevision,
   unfavoriteArticle,
 } from '@/repositories/articles/articlesRepository';
 import { getTags } from '@/repositories/tags/tagsRepository';
@@ -48,6 +56,18 @@ export const useGetArticleQueries = (slug: string) => {
   });
 };
 
+export const useGetArticleRevisionsQueries = (slug: string) => {
+  return useQueries({
+    queries: [
+      {
+        queryKey: [QUERY_ARTICLE_KEY, slug],
+        queryFn: () => getArticleRevisions({ slug }).then((res) => res.data.revisions),
+        staleTime: 20000,
+      },
+    ],
+  });
+};
+
 export const useCreateArticleMutation = () => useMutation(createArticle);
 
 export const useUpdateArticleMutation = () => useMutation(updateArticle);
@@ -61,3 +81,5 @@ export const useDeleteCommentMutation = () => useMutation(deleteComment);
 export const useFavoriteArticleMutation = () => useMutation(favoriteArticle);
 
 export const useUnfavoriteArticleMutation = () => useMutation(unfavoriteArticle);
+
+export const useRevertArticleUpdateMutation = () => useMutation(restoreArticleRevision);

src/repositories/apiClient.ts

@@ -2,7 +2,7 @@ import { ACCESS_TOKEN_KEY } from '@/constants/token.contant';
 import token from '@/lib/token';
 import axios, { AxiosResponse, InternalAxiosRequestConfig, AxiosError } from 'axios';
 
-const host = 'https://api.realworld.io/api';
+const host = 'http://127.0.0.1:8000/api';
 
 const apiClient = axios.create({
   baseURL: host,
@@ -19,7 +19,7 @@ apiClient.interceptors.request.use((request) => {
   const { method, url } = request;
 
   if (jwtToken) {
-    request.headers['Authorization'] = `Token ${jwtToken}`;
+    request.headers['Authorization'] = `Bearer ${jwtToken}`;
   }
 
   logOnDev(`🚀 [${method?.toUpperCase()}] ${url} | Request`, request);

src/repositories/articles/articlesRepository.param.ts

@@ -46,3 +46,12 @@ export interface deleteCommentParam {
 export interface favoriteParam {
   slug: string;
 }
+
+export interface getArticleRevisionParam {
+  slug: string;
+  revision: number;
+}
+
+export interface getArticleRevisionsParam {
+  slug: string;
+}

src/repositories/articles/articlesRepository.ts

@@ -9,6 +9,8 @@ import {
   createCommentParam,
   deleteCommentParam,
   favoriteParam,
+  getArticleRevisionsParam,
+  getArticleRevisionParam,
 } from './articlesRepository.param';
 import { UNIT_PER_PAGE } from '@/constants/units.constants';
 
@@ -104,3 +106,24 @@ export const unfavoriteArticle = async ({ slug }: favoriteParam) => {
     url: `/articles/${slug}/favorite`,
   });
 };
+
+export const getArticleRevisions = async ({ slug }: getArticleRevisionsParam) => {
+  return await apiClient({
+    method: 'get',
+    url: `/articles/${slug}/revisions`,
+  });
+};
+
+export const getArticleRevision = async ({ slug, revision }: getArticleRevisionParam) => {
+  return await apiClient({
+    method: 'get',
+    url: `/articles/${slug}/revisions/${revision}`,
+  });
+};
+
+export const restoreArticleRevision = async ({ slug, revision }: getArticleRevisionParam) => {
+  return await apiClient({
+    method: 'post',
+    url: `/articles/${slug}/revisions/${revision}/revert`,
+  });
+};