Merge pull request Finalgoal231#2 from shinevue/avatar

PR: sync dev with avatar

README.md

@@ -53,7 +53,8 @@
 
 ## Contributor
 
-#### [Truestar](http://192.168.6.2:3000/truestar)
-#### [Shine](http://192.168.6.2:3000/shine)
-#### [Yonex](http://192.168.6.2:3000/Yonex)
-#### [Luckystar](http://192.168.6.2:3000/luckystar)
+#### [Shine](https://github.com/shine)
+#### [Truestar]
+#### [Yonex]
+#### [Luckystar]
+#### [Achilles](https://github.com/oleh1010)

client/package.json

@@ -23,6 +23,7 @@
     "react": "^18.2.0",
     "react-chartjs-2": "^5.0.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.1",
     "react-notifications": "^1.7.4",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.3",

client/src/components/Button.jsx

@@ -4,7 +4,7 @@ export const Button = (prop) => {
     return (
         <button
             type="button"
-            className={`px-3 py-1.5 bg-lime-600 dark:bg-slate-600 hover:bg-gray-700 dark:hover:bg-slate-400 ${prop.class} text-white rounded-[10px] cursor-pointer transition duration-300 ease-out ml-2`}
+            className={`px-2 py-1 bg-lime-600 dark:bg-slate-600 hover:bg-gray-700 dark:hover:bg-slate-400 ${prop.class} text-white rounded-[10px] cursor-pointer transition duration-300 ease-out ml-2`}
             onClick={prop.onClick}
         >
             {prop.subject}

client/src/features/dashboard/components/ArticleCard.js

@@ -8,8 +8,9 @@ import XMarkIcon from "@heroicons/react/24/solid/XMarkIcon";
 import { BiSolidEditAlt } from "react-icons/bi";
 import { Link } from "react-router-dom";
 const ArticleCard = (prop) => {
+  const user = JSON.parse(localStorage.getItem("user"));
   return (
-    <>
+    <div>
       <div
         className={
           "card flex flex-col items-center w-full px-3 bg-base-100 shadow-xl mt-4"
@@ -82,7 +83,7 @@ const ArticleCard = (prop) => {
           )}
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

client/src/features/dashboard/index.js

@@ -43,7 +43,7 @@ function Dashboard() {
 
   return (
     <>
-      <Toolbar onAddClick={setHandleAddArticle} />
+      {/* <Toolbar onAddClick={setHandleAddArticle} /> */}
       {value.articles.map((v, i) => {
         return (
           <div key={i}>

client/src/features/settings/profilesettings/index.js

@@ -80,55 +80,59 @@ function ProfileSettings() {
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-5"></div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-5">
-          <SelectBoxBig
-            label={"Bio"}
-            name={"bio"}
-            class="w-full"
-            value={profile.bio}
-            options={[
-              "FullStack",
-              "Blockchain",
-              "Frontend",
-              "Backend",
-              "Designer",
-            ]}
-            onChange={setHandleProfile}
-          />
-          <SelectBoxBig
-            label={"Category"}
-            class="w-full "
-            options={["", ...cates]}
-            onChange={(e) => setHandleTag(e)}
-          />
-        </div>
-        <div className="flex items-center">
-          <div
-            className={`form-control w-11/12 m-2 flex sm:flex-row flex-col input border-2`}
-          >
-            {tag.map((value, index) => (
+          <div>
+            <SelectBoxBig
+              label={"Bio"}
+              name={"bio"}
+              class="w-full"
+              value={profile.bio}
+              options={[
+                "FullStack",
+                "Blockchain",
+                "Frontend",
+                "Backend",
+                "Designer",
+              ]}
+              onChange={setHandleProfile}
+            />
+          </div>
+          <div>
+            <SelectBoxBig
+              label={"Category"}
+              class="w-full "
+              options={["", ...cates]}
+              onChange={(e) => setHandleTag(e)}
+            />
+            <div className="flex">
               <div
-                key={index}
-                className="flex sm:flex-row flex-col items-center m-1 w-max border-2 mr-2"
+                className={`form-control w-11/12 m-2 flex sm:flex-row flex-col input border-2`}
               >
-                <div className=" text-[15px] mr-1">{value}</div>
+                {tag.map((value, index) => (
+                  <div
+                    key={index}
+                    className="flex sm:flex-row flex-col items-center m-1 w-max border-2 mr-2"
+                  >
+                    <div className=" text-[15px] mr-1">{value}</div>
+                    <button
+                      className="border-1 text-[15px]"
+                      onClick={() => deleteTags(index)}
+                    >
+                      &times;
+                    </button>
+                  </div>
+                ))}
+              </div>
+              <div className="flex items-center">
                 <button
-                  className="border-1 text-[15px]"
-                  onClick={() => deleteTags(index)}
+                  type="button"
+                  onClick={addTags}
+                  className="flex px-4 py-2 bg-green-600 hover:bg-green-700 dark:hover:bg-green-500 text-[15px] text-white rounded-[6px] cursor-pointer transition duration-300 ease-out"
                 >
-                  &times;
+                  <BsPlusLg className="text-[21px] mt-[2px] mr-[3px]" />
+                  <div className="mt-[1px]">Category</div>
                 </button>
               </div>
-            ))}
-          </div>
-          <div className="flex items-center">
-            <button
-              type="button"
-              onClick={addTags}
-              className="flex px-4 py-2 mt-5 bg-green-600 hover:bg-green-700 dark:hover:bg-green-500 text-[15px] text-white rounded-[6px] cursor-pointer transition duration-300 ease-out"
-            >
-              <BsPlusLg className="text-[21px] mt-[2px] mr-[3px]" />
-              <div className="mt-[1px]">Category</div>
-            </button>
+            </div>
           </div>
         </div>
         <div className="divider"></div>

client/src/pages/Article/AllArticle.jsx

@@ -69,7 +69,9 @@ function AllArticle() {
     dispatch(setCategoryIndex(e.target.value));
   };
   useEffect(() => {
-    dispatch(getAllArticles());
+    dispatch(
+      getAllArticles({ sortIndex: value.sortIndex, searchVal: value.searchVal, categoryIndex: value.categoryIndex }),
+    );
   }, [dispatch, value.isLoading, value.message]);
 
   return (

client/src/pages/Article/MyArticle.jsx

@@ -57,6 +57,7 @@ function MyArticle(props) {
           return (
             <div key={i}>
               <ArticleCard
+                type={"myarticle"}
                 title={v.title}
                 avatar={v.from.avatar}
                 favouriteNum={v.favorite.length}

client/src/redux/articleSlice.js

@@ -4,18 +4,15 @@ import axios from "axios";
 import { requestServer } from "../utils/requestServer";
 
 export const getHomeArticles = createAsyncThunk("getHomeArticle", async (data) => {
-  const res = await axios.get(
-    process.env.REACT_APP_BASE_URL + "/api/article/home", {params: data.followers}
-  );
+  const res = await axios.get(process.env.REACT_APP_BASE_URL + "/api/article/home", { params: data.followers });
   return res.data;
 });
 
-export const getAllArticles = createAsyncThunk("getAllArticle", async () => {
-  const res = await axios.get(process.env.REACT_APP_BASE_URL + "/api/article/all");
+export const getAllArticles = createAsyncThunk("getAllArticle", async (data) => {
+  const res = await axios.get(process.env.REACT_APP_BASE_URL + "/api/article/all", { params: data });
   return res.data;
 });
 export const getDraftArticles = createAsyncThunk("getDraftArticles", async (payload) => {
-  console.log(payload);
   const res = await axios.get(process.env.REACT_APP_BASE_URL + "/api/article/draft", { params: payload });
   return res.data;
 });
@@ -24,7 +21,6 @@ export const getMyArticles = createAsyncThunk("getMyArticles", async (payload) =
   return res.data;
 });
 export const getFavoriteArticles = createAsyncThunk("getFavoriteArticles", async (payload) => {
-  console.log(payload);
   const res = await axios.get(process.env.REACT_APP_BASE_URL + "/api/article/favorite", { params: payload });
   return res.data;
 });
@@ -38,7 +34,8 @@ export const createArticle = createAsyncThunk("createArticle", async (data) => {
   else return { msg: "Save to Draft!!!" };
 });
 export const updateArticle = createAsyncThunk("updateArticle", async (payload) => {
-  const res = await requestServer("put", `/api/article/${payload._id}`, payload);
+  console.log(payload);
+  const res = await requestServer("put", `/api/article/${payload.id}`, payload.data);
   return res.data;
 });
 export const deleteArticle = createAsyncThunk("deleteArticle", async (data) => {
@@ -50,8 +47,8 @@ export const addComment = createAsyncThunk("addComment", async (payload) => {
   return res.data;
 });
 export const addFavourite = createAsyncThunk("addFavourite", async (payload) => {
-  const { index, from } = payload;
-  const res = await requestServer("put", `/api/article/favorite/${index}`, {
+  const { id, from } = payload;
+  const res = await requestServer("put", `/api/article/favorite/${id}`, {
     from,
   });
   return res.data;

server/app.js

@@ -17,7 +17,7 @@ env.config();
 
 // initializes express app
 const app = express();
-const server = require('http').createServer(app)
+const server = require("http").createServer(app);
 
 // application database connection establishment
 const connectDatabase = require("./src/db/connect");
@@ -74,5 +74,5 @@ server.listen(process.env.APP_PORT, () => {
   );
 });
 
-const socketApp = require('./socketApp');
-socketApp.socketServer(server)
+// const socketApp = require('./socketApp');
+// socketApp.socketServer(server)