From 2d23f68c69532bf1a7dd1f752ca7b3b96a9d6330 Mon Sep 17 00:00:00 2001 From: Abhi Jain Date: Tue, 4 Oct 2022 14:43:07 +0530 Subject: [PATCH] User Profile added questions and tags --- src/config/index.js | 2 +- .../ProfilePage/ProfilePage.component.jsx | 18 +++-- .../TagsUsedByUser/TagsByUser.component.jsx | 66 ++++++++++++++++ .../TagsUsedByUser/TagsByUser.styles.scss | 36 +++++++++ .../QuestionByUser.component.jsx | 78 +++++++++++++++++++ .../UserQuestions/QuestionByUser.styles.scss | 61 +++++++++++++++ 6 files changed, 254 insertions(+), 7 deletions(-) create mode 100644 src/modules/ProfilePage/TagsUsedByUser/TagsByUser.component.jsx create mode 100644 src/modules/ProfilePage/TagsUsedByUser/TagsByUser.styles.scss create mode 100644 src/modules/ProfilePage/UserQuestions/QuestionByUser.component.jsx create mode 100644 src/modules/ProfilePage/UserQuestions/QuestionByUser.styles.scss diff --git a/src/config/index.js b/src/config/index.js index b3b2ce8..3bce906 100644 --- a/src/config/index.js +++ b/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; \ No newline at end of file diff --git a/src/modules/ProfilePage/ProfilePage.component.jsx b/src/modules/ProfilePage/ProfilePage.component.jsx index e4c6c89..a9987d1 100644 --- a/src/modules/ProfilePage/ProfilePage.component.jsx +++ b/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 - +
- - + + +
+
+ +
@@ -57,4 +63,4 @@ const mapStateToProps = (state) => ({ user: state.user, }); -export default connect(mapStateToProps, {getProfile})(ProfilePage); +export default connect(mapStateToProps, { getProfile })(ProfilePage); diff --git a/src/modules/ProfilePage/TagsUsedByUser/TagsByUser.component.jsx b/src/modules/ProfilePage/TagsUsedByUser/TagsByUser.component.jsx new file mode 100644 index 0000000..180d98b --- /dev/null +++ b/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 ( +
+
+

Tags

+
+
{allTagsByUser.map((tag, index) => ( +
+

{tag.tagname.substring(1, tag.tagname.length-1)}

+
+

0 score

+

{tag.count} post

+
+
+ ))}
+
+ ) +} + +export default TagsByUser; \ No newline at end of file diff --git a/src/modules/ProfilePage/TagsUsedByUser/TagsByUser.styles.scss b/src/modules/ProfilePage/TagsUsedByUser/TagsByUser.styles.scss new file mode 100644 index 0000000..d024070 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/modules/ProfilePage/UserQuestions/QuestionByUser.component.jsx b/src/modules/ProfilePage/UserQuestions/QuestionByUser.component.jsx new file mode 100644 index 0000000..f76e113 --- /dev/null +++ b/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 ( +
+
+

Questions

+
+

handleFilter('s')} >Score

+

handleFilter('a')} >Activity

+

handleFilter('n')} >Newest

+

handleFilter('v')} >Views

+
+
+
+ {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 ( +
+

-2

+

{val.title}

+

{creat_at}

+
+ ) + })} +
+ {question.length > 5 ?
+

Show More

+
: null} +
+ ) +} + +export default QuestionByUser; \ No newline at end of file diff --git a/src/modules/ProfilePage/UserQuestions/QuestionByUser.styles.scss b/src/modules/ProfilePage/UserQuestions/QuestionByUser.styles.scss new file mode 100644 index 0000000..b919a69 --- /dev/null +++ b/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; +} \ No newline at end of file