User Profile added questions and tags

src/config/index.js

@@ -3,7 +3,7 @@ const config = {
 };
 
 if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
-  config.BASE_URL = process.env.REACT_APP_API_URL;
+  config.BASE_URL = 'https://stackoverflow-clone-backend.herokuapp.com';
 }
 
 export default config;

src/modules/ProfilePage/ProfilePage.component.jsx

@@ -1,4 +1,4 @@
-import React, {useEffect, Fragment} from 'react';
+import React, { useEffect, Fragment } from 'react';
 import { connect } from 'react-redux';
 import { Link, useParams } from "react-router-dom";
 import PropTypes from 'prop-types';
@@ -8,10 +8,12 @@ import UserSection from "./UserSection/UserSection.component";
 import Spinner from '../../components/molecules/Spinner/Spinner.component';
 import ExternalUserDetails from "./ExternalUserDetails/ExternalUserDetails.component";
 import UserActivity from "./UserActivity/UserActivity.component";
+import QuestionByUser from './UserQuestions/QuestionByUser.component';
+import TagsByUser from './TagsUsedByUser/TagsByUser.component';
 
 import './ProfilePage.styles.scss';
 
-const ProfilePage = ({getProfile, user: {user, loading}}) => {
+const ProfilePage = ({ getProfile, user: { user, loading } }) => {
   const { id } = useParams();
 
   useEffect(() => {
@@ -37,11 +39,15 @@ const ProfilePage = ({getProfile, user: {user, loading}}) => {
               Activity
             </Link>
           </div>
-          <UserSection user={user}/>
+          <UserSection user={user} />
         </div>
         <div className='row-grid'>
-          <ExternalUserDetails/>
-          <UserActivity/>
+          <ExternalUserDetails />
+          <UserActivity />
+        </div>
+        <div className='User_Questions'>
+          <QuestionByUser user={user} />
+          <TagsByUser user={user} />
         </div>
       </div>
     </Fragment>
@@ -57,4 +63,4 @@ const mapStateToProps = (state) => ({
   user: state.user,
 });
 
-export default connect(mapStateToProps, {getProfile})(ProfilePage);
+export default connect(mapStateToProps, { getProfile })(ProfilePage);

src/modules/ProfilePage/TagsUsedByUser/TagsByUser.component.jsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import './TagsByUser.styles.scss';
+import { allPostsData } from '../../../api/postsApis';
+
+function TagsByUser({ user }) {
+
+    const [allTagsByUser, setallTagsByUser] = useState([]);
+
+    async function getData() {
+        let tagData = [];
+        await allPostsData().then((res) => {
+            let data = res.data.data.filter((val) => {
+                if (val.user_id == user.id) {
+                    return val
+                }
+            })
+
+            data.map((tag) => {
+                tagData.push(...tag.tags)
+            })
+        })
+            .catch((err) => {
+                console.log(err);
+            })
+        return tagData;
+    }
+
+    async function handleTag() {
+        let aa = await getData()
+            .then((res) => { return res })
+            .catch((err) => { return err })
+
+        let counts = aa.reduce((acc, curr) => {
+            const str = JSON.stringify(curr.tagname);
+            acc[str] = (acc[str] || 0) + 1;
+            return acc;
+        }, {});
+
+        const arrayOfObj = Object.entries(counts).map((e) => ({ 'tagname': e[0], 'count': e[1] }));
+        setallTagsByUser(arrayOfObj)
+    }
+
+    useEffect(() => {
+        getData()
+        handleTag()
+    }, [])
+
+    return (
+        <div className='UAT_div'>
+            <div className='UAT_head'>
+                <h2>Tags</h2>
+            </div>
+            <div className='UAT_list'>{allTagsByUser.map((tag, index) => (
+                <div className='UAT' key={index}>
+                    <p className='tagname'>{tag.tagname.substring(1, tag.tagname.length-1)}</p>
+                    <div className='score_tag'>
+                        <p>0 <span>score</span></p>
+                        <p>{tag.count} <span>post</span></p>
+                    </div>
+                </div>
+            ))}</div>
+        </div>
+    )
+}
+
+export default TagsByUser;

src/modules/ProfilePage/TagsUsedByUser/TagsByUser.styles.scss

@@ -0,0 +1,36 @@
+.UAT_div {
+    width: 90%;
+    margin-top: 20px;
+    padding: 0.3rem 0.5rem;
+}
+
+.UAT_head {
+    width: 100%;
+}
+
+.UAT_list {
+    width: 100%;
+    border: 1px solid white;
+    margin-bottom: 3rem;
+}
+
+.UAT {
+    display: flex;
+    width: 90%;
+    margin: 0.5rem auto 0;
+    justify-content: space-between;
+}
+
+.tagname {
+    background-color: #8BBCCC;
+    color: #4C6793;
+    padding: 0.4rem;
+    border-radius: 5px;
+    font-weight: 600;
+}
+
+.score_tag {
+    display: flex;
+    width: 20%;
+    justify-content: space-between;
+}

src/modules/ProfilePage/UserQuestions/QuestionByUser.component.jsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import './QuestionByUser.styles.scss';
+import { allPostsData } from '../../../api/postsApis';
+
+function QuestionByUser({ user }) {
+
+  const [question, setquestion] = useState([]);
+  const [filterSelect, setfilterSelect] = useState([true, 's'])
+
+  async function getData() {
+    let posts = await allPostsData().then((res) => {
+      let data = res.data.data.filter((val) => {
+        if (val.user_id == user.id) {
+          return val
+        }
+      })
+      setquestion(data);
+      return data
+    })
+      .catch((err) => {
+        console.log(err);
+      })
+
+    return posts
+  }
+
+  useEffect(() => {
+    getData()
+  }, [])
+
+  async function handleFilter(e) {
+    setfilterSelect([true, e])
+
+    if (e == 'a') {
+      let dataByActivity = await getData().then((res) => { return res }).catch((err) => { console.log(err); })
+      setquestion(dataByActivity.sort((a, b) => { return b.comment_count - a.comment_count }));
+    } else if (e == 'n') {
+      let dataByActivity = await getData().then((res) => { return res }).catch((err) => { console.log(err); })
+      setquestion(dataByActivity.sort((a, b) => { return new Date(b.created_at) - new Date(a.created_at) }));
+    } else if (e == 'v') {
+      let dataByActivity = await getData().then((res) => { return res }).catch((err) => { console.log(err); })
+      setquestion(dataByActivity.sort((a, b) => { return b.views - a.views }));
+    }
+  }
+
+
+
+  return (
+    <div className='User_Asked_Qdiv'>
+      <div className='UAQ_headdiv'>
+        <h2>Questions</h2>
+        <div className='UAQ_Filterdiv'>
+          <p style={{ backgroundColor: filterSelect[0] == true && filterSelect[1] == 's' ? 'gray' : '' }} onClick={() => handleFilter('s')} >Score</p>
+          <p style={{ backgroundColor: filterSelect[0] == true && filterSelect[1] == 'a' ? 'gray' : '' }} onClick={() => handleFilter('a')} >Activity</p>
+          <p style={{ backgroundColor: filterSelect[0] == true && filterSelect[1] == 'n' ? 'gray' : '' }} onClick={() => handleFilter('n')} >Newest</p>
+          <p style={{ backgroundColor: filterSelect[0] == true && filterSelect[1] == 'v' ? 'gray' : '' }} onClick={() => handleFilter('v')} >Views</p>
+        </div>
+      </div>
+      <div className='UAQ_list'>
+        {question.slice(0, 5).map((val, index) => {
+          let creat_at = new Date(val.created_at).getDate() + "/" + new Date(val.created_at).getMonth() + "/" + new Date(val.created_at).getFullYear()
+          return (
+            <div key={index} className='UAQ'>
+              <p>-2</p>
+              <p>{val.title}</p>
+              <p>{creat_at}</p>
+            </div>
+          )
+        })}
+      </div>
+      {question.length > 5 ? <div className='UAQ_showMore'>
+        <p>Show More</p>
+      </div> : null}
+    </div>
+  )
+}
+
+export default QuestionByUser;

src/modules/ProfilePage/UserQuestions/QuestionByUser.styles.scss

@@ -0,0 +1,61 @@
+.User_Asked_Qdiv {
+    width: 90%;
+}
+
+.UAQ_headdiv {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    width: 100%;
+    justify-content: space-between;
+}
+
+.UAQ_Filterdiv {
+    display: flex;
+    width: 50%;
+    border: 1px solid white;
+    align-items: center;
+    text-align: center;
+    height: 100%;
+}
+
+.UAQ_Filterdiv p {
+    font-size: 10px;
+    text-align: center;
+    height: 100%;
+    width: 25%;
+    justify-content: center;
+    border-right: 1px solid white;
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    margin: 0;
+}
+
+.UAQ_list {
+    width: 100%;
+    border: 1px solid white;
+    margin-top: 10px;
+}
+
+.UAQ {
+    display: flex;
+    justify-content: space-evenly;
+    text-align: center;
+    align-items: center;
+    height: 40px;
+    margin: 10px 0px 0px;
+}
+
+.UAQ p:nth-child(1) {
+    border: 1px solid white;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+}
+
+
+.UAQ_showMore p {
+  color: blue;
+  text-decoration: underline;
+  cursor: pointer;
+}