From f07730efd57e3da0f2d36f11e11a33a7d36e1bde Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 09:49:34 +0800 Subject: [PATCH 01/17] added giscus package --- package.json | 3 ++- yarn.lock | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index d2208d831..b5771fae6 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ }, "dependencies": { "@auth0/auth0-react": "^2.2.4", + "@giscus/react": "^3.0.0", "@microsoft/applicationinsights-web": "^3.3.3", "@raae/gatsby-remark-oembed": "^0.3.3", "algoliasearch": "^4.24.0", @@ -116,4 +117,4 @@ "📦 gatsby-plugin-fontawesome-css": "Added to disable Font Awesomes auto CSS insertion and instead insert it at compile time. This stops the brief flicker of the icons stying being incorrect when the page is refreshed" }, "packageManager": "yarn@4.0.1" -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index e8194a681..e4051c86e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2790,6 +2790,18 @@ __metadata: languageName: node linkType: hard +"@giscus/react@npm:^3.0.0": + version: 3.0.0 + resolution: "@giscus/react@npm:3.0.0" + dependencies: + giscus: "npm:^1.5.0" + peerDependencies: + react: ^16 || ^17 || ^18 + react-dom: ^16 || ^17 || ^18 + checksum: 134de49eb80d124a511fa33b38cbc00da24aa338caa37f32f5b89fe130365e6bc4c5583b0de3916b80ecd01cc2db27f904b3f8d633bb317fe8caad83baa125d0 + languageName: node + linkType: hard + "@graphql-codegen/add@npm:^3.2.3": version: 3.2.3 resolution: "@graphql-codegen/add@npm:3.2.3" @@ -3897,6 +3909,22 @@ __metadata: languageName: node linkType: hard +"@lit-labs/ssr-dom-shim@npm:^1.2.0": + version: 1.2.1 + resolution: "@lit-labs/ssr-dom-shim@npm:1.2.1" + checksum: 75cecf2cc4c1a089c6984d9f45b8264e3b4947b4ebed96aef7eb201bd6b3f26caeaafedf457884ac38d4f2d99cddaf94a4b2414c02c61fbf1f64c0a0dade11f4 + languageName: node + linkType: hard + +"@lit/reactive-element@npm:^2.0.4": + version: 2.0.4 + resolution: "@lit/reactive-element@npm:2.0.4" + dependencies: + "@lit-labs/ssr-dom-shim": "npm:^1.2.0" + checksum: 359cc19ea9ee8b65e1417eb9c12f40dddba8f0a5ab32f0e5facaecee6060629e44eb4ca27d9af945fe6eda8c033aa636abaa5f0c4e6a529b224d78674acf47ba + languageName: node + linkType: hard + "@lmdb/lmdb-darwin-arm64@npm:2.5.2": version: 2.5.2 resolution: "@lmdb/lmdb-darwin-arm64@npm:2.5.2" @@ -6365,6 +6393,13 @@ __metadata: languageName: node linkType: hard +"@types/trusted-types@npm:^2.0.2": + version: 2.0.7 + resolution: "@types/trusted-types@npm:2.0.7" + checksum: 4c4855f10de7c6c135e0d32ce462419d8abbbc33713b31d294596c0cc34ae1fa6112a2f9da729c8f7a20707782b0d69da3b1f8df6645b0366d08825ca1522e0c + languageName: node + linkType: hard + "@types/unist@npm:*": version: 3.0.1 resolution: "@types/unist@npm:3.0.1" @@ -6753,6 +6788,7 @@ __metadata: "@fortawesome/free-brands-svg-icons": "npm:^6.6.0" "@fortawesome/free-solid-svg-icons": "npm:^6.6.0" "@fortawesome/react-fontawesome": "npm:^0.2.2" + "@giscus/react": "npm:^3.0.0" "@microsoft/applicationinsights-web": "npm:^3.3.3" "@playwright/test": "npm:^1.47.1" "@raae/gatsby-remark-oembed": "npm:^0.3.3" @@ -14550,6 +14586,15 @@ __metadata: languageName: node linkType: hard +"giscus@npm:^1.5.0": + version: 1.5.0 + resolution: "giscus@npm:1.5.0" + dependencies: + lit: "npm:^3.1.2" + checksum: 2e94c0260128c402de16550d1ec1b5797dc2efbebed994371920fed1a7018f4b20377f147205c6e479e3e99d975a499db746ae813ca11e1a7d58009e6f059842 + languageName: node + linkType: hard + "git-up@npm:^4.0.0": version: 4.0.5 resolution: "git-up@npm:4.0.5" @@ -17405,6 +17450,37 @@ __metadata: languageName: node linkType: hard +"lit-element@npm:^4.1.0": + version: 4.1.1 + resolution: "lit-element@npm:4.1.1" + dependencies: + "@lit-labs/ssr-dom-shim": "npm:^1.2.0" + "@lit/reactive-element": "npm:^2.0.4" + lit-html: "npm:^3.2.0" + checksum: b3c6c77d60a8239134d7c7e7c002be48414074f5b42f9ad026216749101a4f948266a4db9110a536fb23914044d584dbe4185c87064a4fa98baa4045ba2bbb46 + languageName: node + linkType: hard + +"lit-html@npm:^3.2.0": + version: 3.2.1 + resolution: "lit-html@npm:3.2.1" + dependencies: + "@types/trusted-types": "npm:^2.0.2" + checksum: 31c02df2148bf9a73545570cbe57aae01c4de1d9b44060b6ff13641837d38e39e6b1abcf92e13882cc84f5fee37605ed79602b91ad479728549014462808118e + languageName: node + linkType: hard + +"lit@npm:^3.1.2": + version: 3.2.1 + resolution: "lit@npm:3.2.1" + dependencies: + "@lit/reactive-element": "npm:^2.0.4" + lit-element: "npm:^4.1.0" + lit-html: "npm:^3.2.0" + checksum: 064a31459fe54ad052c0685d058dd5aef089ddc97a247888ef91a0356dfef60c8cc531e48077bbd2cb4e9f48cb86f0ff0951bb535f1d9f144d2351f253291f66 + languageName: node + linkType: hard + "lmdb@npm:2.5.2": version: 2.5.2 resolution: "lmdb@npm:2.5.2" From b8af3956550a3c68a15da1aeca4dfa495e23d91a Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 15:14:36 +0800 Subject: [PATCH 02/17] added giscus component --- .env.template | 2 ++ src/components/comments/comments.js | 2 +- src/components/discussion/discussion.js | 32 +++++++++++++++++++++++++ src/style.css | 2 +- src/templates/rule.js | 3 +++ 5 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/components/discussion/discussion.js diff --git a/.env.template b/.env.template index 46c0790a6..7d0d60a22 100644 --- a/.env.template +++ b/.env.template @@ -17,3 +17,5 @@ GITHUB_REPO=#{GITHUB_REPO} GATSBY_ALGOLIA_APP_ID=#{GATSBY_ALGOLIA_APP_ID} GATSBY_ALGOLIA_SEARCH_KEY=#{GATSBY_ALGOLIA_SEARCH_KEY} ALGOLIA_ADMIN_KEY=#{ALGOLIA_ADMIN_KEY} +GISCUS_REPO_ID=#{GISCUS_REPO_ID} +GISCUS_CATEGORY_ID=#{GISCUS_CATEGORY_ID} \ No newline at end of file diff --git a/src/components/comments/comments.js b/src/components/comments/comments.js index fa5f02d30..dab2e5120 100644 --- a/src/components/comments/comments.js +++ b/src/components/comments/comments.js @@ -8,7 +8,7 @@ const Comments = (props) => { title: props.title, }; return ( -
+
); diff --git a/src/components/discussion/discussion.js b/src/components/discussion/discussion.js new file mode 100644 index 000000000..f21279473 --- /dev/null +++ b/src/components/discussion/discussion.js @@ -0,0 +1,32 @@ +import Giscus from '@giscus/react'; +import React from 'react'; +import PropTypes from 'prop-types'; + +const Discussion = (props) => { + return ( +
+ +
+ ); +}; + +export default Discussion; + +Discussion.propTypes = { + ruleGuid: PropTypes.string.isRequired, +}; diff --git a/src/style.css b/src/style.css index 85e63e3e5..c33f6c7f6 100644 --- a/src/style.css +++ b/src/style.css @@ -2065,7 +2065,7 @@ div.bad-example { border-top: 1px solid #f5f5f5 } -.disqus-box { +.discussion-box { margin-bottom: 5rem; padding: 1rem 1.5rem; } diff --git a/src/templates/rule.js b/src/templates/rule.js index cb6869daf..e0bfad811 100644 --- a/src/templates/rule.js +++ b/src/templates/rule.js @@ -26,6 +26,7 @@ import { useAuth0 } from '@auth0/auth0-react'; import { useAuthService } from '../services/authService'; import { faGithub } from '@fortawesome/free-brands-svg-icons'; import useAppInsights from '../hooks/useAppInsights.js'; +import Discussion from '../components/discussion/discussion.js'; const Rule = ({ data, location }) => { const capitalizeFirstLetter = (string) => { @@ -256,6 +257,8 @@ const Rule = ({ data, location }) => { />
+ + Date: Fri, 18 Oct 2024 15:31:22 +0800 Subject: [PATCH 03/17] removed reaction component and it's style --- src/components/reaction/reaction.js | 211 ---------------------------- src/style.css | 73 +--------- src/templates/rule.js | 7 +- 3 files changed, 3 insertions(+), 288 deletions(-) delete mode 100644 src/components/reaction/reaction.js diff --git a/src/components/reaction/reaction.js b/src/components/reaction/reaction.js deleted file mode 100644 index 7eecc3399..000000000 --- a/src/components/reaction/reaction.js +++ /dev/null @@ -1,211 +0,0 @@ -/* eslint-disable no-console */ -import React, { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import { useAuth0 } from '@auth0/auth0-react'; -import { - GetReactionForUser, - PostReactionForUser, - ReactionType, - RemoveReaction, -} from '../../services/apiService'; -import { useAuthService } from '../../services/authService'; -import useAppInsights from '../../hooks/useAppInsights'; - -const Reaction = (props) => { - const { ruleId } = props; - const [superLikesCount, setSuperLikesCount] = useState(0); - const [likesCount, setLikesCount] = useState(0); - const [dislikesCount, setDislikesCount] = useState(0); - const [superDislikesCount, setSuperDisikesCount] = useState(0); - const [change, setChange] = useState(0); - const [currentReactionType, setCurrentReactionType] = useState(null); - - const { isAuthenticated, user, loginWithRedirect } = useAuth0(); - const { fetchIdToken } = useAuthService(); - - const { trackException } = useAppInsights(); - - useEffect(() => { - if (isAuthenticated) { - GetReactionForUser(ruleId, user.sub) - .then((success) => { - setSuperLikesCount(success.superLikeCount ?? 0); - setLikesCount(success.likeCount ?? 0); - setDislikesCount(success.dislikeCount ?? 0); - setSuperDisikesCount(success.superDislikeCount ?? 0); - setCurrentReactionType(success.userStatus); - }) - .catch((err) => { - trackException(err, 3); - }); - } else { - setCurrentReactionType(null); - GetReactionForUser(ruleId) - .then((success) => { - setSuperLikesCount(success.superLikeCount ?? 0); - setLikesCount(success.likeCount ?? 0); - setDislikesCount(success.dislikeCount ?? 0); - setSuperDisikesCount(success.superDislikeCount ?? 0); - }) - .catch((err) => { - trackException(err, 3); - }); - } - }, [change, user]); - - function removePreviousReaction() { - if (currentReactionType == ReactionType.SuperLike) { - setSuperLikesCount(superLikesCount - 1); - } else if (currentReactionType == ReactionType.Like) { - setLikesCount(likesCount - 1); - } else if (currentReactionType == ReactionType.DisLike) { - setDislikesCount(dislikesCount - 1); - } else { - setSuperDisikesCount(superDislikesCount - 1); - } - } - - async function onClick(type) { - if (isAuthenticated) { - const data = { - type: type, - ruleGuid: ruleId, - userId: user.sub, - }; - const idToken = await fetchIdToken(); - if (currentReactionType == type) { - removePreviousReaction(); - setCurrentReactionType(null); - RemoveReaction(data, idToken) - .then(() => { - setChange(change + 1); - }) - .catch((err) => { - trackException(err, 3); - }); - } else { - if (type == ReactionType.SuperLike) { - setSuperLikesCount(superLikesCount + 1); - } else if (type == ReactionType.Like) { - setLikesCount(likesCount + 1); - } else if (type == ReactionType.DisLike) { - setDislikesCount(dislikesCount + 1); - } else if (type == ReactionType.SuperDisLike) { - setSuperDisikesCount(superDislikesCount + 1); - } - if (currentReactionType != null && currentReactionType != type) { - removePreviousReaction(); - } - setCurrentReactionType(type); - PostReactionForUser(data, idToken) - .then(() => { - setChange(change + 1); - }) - .catch((err) => { - trackException(err, 3); - }); - } - } else { - if (window.confirm('Sign in to rate this rule')) { - const currentPage = - typeof window !== 'undefined' - ? window.location.pathname.split('/').pop() - : null; - await loginWithRedirect({ - appState: { - targetUrl: currentPage, - }, - }); - } - } - } - - return ( -
-
-
-
-
-
- {superLikesCount} -
-
-
-
-
-
{likesCount}
-
-
-
-
-
- {dislikesCount} -
-
-
-
-
-
- {superDislikesCount} -
-
- ); -}; - -Reaction.propTypes = { - ruleId: PropTypes.string, -}; - -export default Reaction; diff --git a/src/style.css b/src/style.css index c33f6c7f6..9fdb63424 100644 --- a/src/style.css +++ b/src/style.css @@ -1221,66 +1221,6 @@ div.bad-example { @apply text-ssw-red; } -.reaction-grid { - grid-template-columns: auto 2.5rem 2.2rem 0.7rem 2.2rem 2.2rem 0.7rem 2.2rem 2.2rem 0.7rem 2.2rem 2.7rem auto; - display: grid; - grid-template-rows: 2rem; - padding-bottom: 1rem; -} - -.agree-btn-container:after, .agree-btn-container-pressed:after { - content: '\f004'; - font-family: FontAwesome; - font-size: 1.7rem; - padding-left: 0.5rem; -} - -.agree-btn-container-pressed:after, .somewhat-disagree-btn-container-pressed:after, .disagree-btn-container-pressed:after, .somewhat-agree-btn-container-pressed:after { - @apply text-ssw-red; -} - -.agree-btn-container:hover:after, .agree-btn-container-pressed:hover:after, .somewhat-disagree-btn-container:hover:after, .somewhat-disagree-btn-container-pressed:hover:after, .disagree-btn-container:hover:after, .disagree-btn-container-pressed:hover:after, .somewhat-agree-btn-container:hover:after, .somewhat-agree-btn-container-pressed:hover:after { - @apply text-ssw-red; - font-size: 1.8rem; - transition: font-size 0.2s; -} - -.somewhat-agree-btn-container:after, .somewhat-agree-btn-container-pressed:after { - content: '\f164'; - font-family: FontAwesome; - font-size: 1.7rem; -} - -.somewhat-disagree-btn-container:after, .somewhat-disagree-btn-container-pressed:after { - content: '\f165'; - font-family: FontAwesome; - font-size: 1.7rem; - align-self: center; -} - -.disagree-btn-container:after, .disagree-btn-container-pressed:after { - content: '\f05e'; - font-family: FontAwesome; - font-size: 1.7rem; - padding-left: 0.1rem; -} - -.agree-grid-item { - grid-column: 2; -} - -.somewhat-agree-grid-item { - grid-column: 5; -} - -.somewhat-disagree-grid-item { - grid-column: 8; -} - -.disagree-grid-item { - grid-column: 11; -} - .rule-header-container { display: flex; } @@ -1342,7 +1282,7 @@ div.bad-example { margin-top: 0; } -.tooltip, .react-tooltip, .disqus-tooltip, .info-tooltip, .forgot-username-tooltip { +.tooltip, .disqus-tooltip, .info-tooltip, .forgot-username-tooltip { position: relative; margin: 2px 0; height: 2.5rem; @@ -1435,12 +1375,6 @@ div.bad-example { bottom: 105%; } -.react-tooltip .tooltiptext { - margin-left: -53px !important; - bottom: 90%; - width: 80px; -} - .disqus-tooltip .tooltiptext { margin-left: 0 !important; bottom: 2.5rem; @@ -1473,7 +1407,7 @@ div.bad-example { } /* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext, .react-tooltip:hover .tooltiptext, .disqus-tooltip:hover .tooltip, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{ +.tooltip:hover .tooltiptext, .disqus-tooltip:hover .tooltip, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{ visibility: visible; opacity: 1; padding: 0.3rem !important; @@ -1630,9 +1564,6 @@ div.bad-example { .rule-content { padding: 1rem; } - .reaction-grid { - grid-template-columns: auto 2rem 0.5rem 1.5rem 2.2rem 0.5rem 1.5rem 2.2rem 0.5rem 1.5rem 2.3rem 1rem auto; - } .profile-image { visibility: hidden; grid-column: 1; diff --git a/src/templates/rule.js b/src/templates/rule.js index e0bfad811..64b2f1ceb 100644 --- a/src/templates/rule.js +++ b/src/templates/rule.js @@ -18,7 +18,6 @@ import Comments from '../components/comments/comments'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import PropTypes from 'prop-types'; import ReactDOMServer from 'react-dom/server'; -import Reaction from '../components/reaction/reaction'; import RuleSideBar from '../components/rule-side-bar/rule-side-bar'; import formatDistance from 'date-fns/formatDistance'; import { format } from 'date-fns'; @@ -240,11 +239,7 @@ const Rule = ({ data, location }) => {
-
- -
-
+ >
From d2923319b717671ee3033d2b922ff1487fa37adf Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 16:12:25 +0800 Subject: [PATCH 04/17] removed the link to profile page in dropdown --- src/components/dropdown-card/dropdown-card.js | 9 --------- src/style.css | 20 ------------------- 2 files changed, 29 deletions(-) diff --git a/src/components/dropdown-card/dropdown-card.js b/src/components/dropdown-card/dropdown-card.js index 24fed0dd6..bc058dcfe 100644 --- a/src/components/dropdown-card/dropdown-card.js +++ b/src/components/dropdown-card/dropdown-card.js @@ -20,15 +20,6 @@ const DropdownCard = ({ setOpen }) => {
- - )} - - -
- -
-
-
-

- - Read more - -

-
- - ); - })} - - - )} - {type == 'comment' && userCommentsConnected ? ( - - ) : ( - <> - )} - - ); -}; - -RuleList.propTypes = { - rules: PropTypes.array.isRequired, - viewStyle: PropTypes.string.isRequired, - type: PropTypes.string.isRequired, - onRemoveClick: PropTypes.func.isRequired, - userCommentsConnected: PropTypes.bool, - setState: PropTypes.func, - state: PropTypes.number, - disqusPrivacyEnabled: PropTypes.bool, -}; - -export default ProfileContent; diff --git a/src/components/profile-filter-menu/profile-filter-menu.js b/src/components/profile-filter-menu/profile-filter-menu.js deleted file mode 100644 index d7c88e0f5..000000000 --- a/src/components/profile-filter-menu/profile-filter-menu.js +++ /dev/null @@ -1,200 +0,0 @@ -/* eslint-disable no-console */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import React from 'react'; -import PropTypes from 'prop-types'; -import BookmarkIcon from '-!svg-react-loader!../../images/bookmarkIcon.svg'; -import DisqusIcon from '-!svg-react-loader!../../images/disqusIcon.svg'; - -const ProfileFilterMenu = ({ - selectedFilter, - setSelectedFilter, - superLikedRulesCount, - likedRulesCount, - dislikedRulesCount, - superDislikedRulesCount, - bookmarkedRulesCount, - commentedRulesCount, -}) => { - return ( - <> -
-
{ - setSelectedFilter(Filter.Bookmarks); - }} - > - Bookmarks - -
{bookmarkedRulesCount ?? 0}
-
-
{ - setSelectedFilter(Filter.Comments); - }} - > - Comments - -
{commentedRulesCount ?? 0}
-
-
{ - setSelectedFilter(Filter.SuperLikes); - }} - > -
- Love it -
-
{superLikedRulesCount ?? 0}
-
-
{ - setSelectedFilter(Filter.Likes); - }} - > -
- Agree -
-
{likedRulesCount ?? 0}
-
-
{ - setSelectedFilter(Filter.Dislikes); - }} - > -
- Disagree -
-
{dislikedRulesCount ?? 0}
-
-
{ - setSelectedFilter(Filter.SuperDislikes); - }} - > -
- No way -
-
{superDislikedRulesCount ?? 0}
-
-
- - ); -}; - -ProfileFilterMenu.propTypes = { - selectedFilter: PropTypes.number.isRequired, - setSelectedFilter: PropTypes.func.isRequired, - superLikedRulesCount: PropTypes.number, - likedRulesCount: PropTypes.number, - dislikedRulesCount: PropTypes.number, - superDislikedRulesCount: PropTypes.number, - bookmarkedRulesCount: PropTypes.number, - commentedRulesCount: PropTypes.number, -}; - -export const Filter = { - Comments: 5, - Bookmarks: 4, - SuperLikes: 3, - Likes: 2, - Dislikes: 1, - SuperDislikes: 0, -}; -export default ProfileFilterMenu; diff --git a/src/pages/profile.js b/src/pages/profile.js deleted file mode 100644 index 05dce2404..000000000 --- a/src/pages/profile.js +++ /dev/null @@ -1,173 +0,0 @@ -/* eslint-disable no-console */ -import React, { useEffect, useState } from 'react'; -import PropTypes from 'prop-types'; -import { useStaticQuery, graphql } from 'gatsby'; -import Breadcrumb from '../components/breadcrumb/breadcrumb'; -import ProfileBadge from '../components/profile-badge/profile-badge'; -import ProfileContent from '../components/profile-content/profile-content'; -import ProfileFilterMenu from '../components/profile-filter-menu/profile-filter-menu'; -import GitHubIcon from '-!svg-react-loader!../images/github.svg'; -import DisqusIcon from '-!svg-react-loader!../images/disqusIcon.svg'; -import { useAuth0 } from '@auth0/auth0-react'; -import { GetUser } from '../services/apiService'; -import { useAuthService } from '../services/authService'; -import useAppInsights from '../hooks/useAppInsights'; - -const Profile = ({ data, gitHubUsername }) => { - const [selectedFilter, setSelectedFilter] = useState(4); - const [state, setState] = useState(0); - const { user, isAuthenticated, loginWithRedirect } = useAuth0(); - const { fetchIdToken } = useAuthService(); - const [commentsConnected, setCommentsConnected] = useState(false); - const [bookmarkedRulesCount, setBookmarkedRulesCount] = useState(); - const [superLikedRulesCount, setSuperLikedRulesCount] = useState(); - const [likedRulesCount, setLikedRulesCount] = useState(); - const [dislikedRulesCount, setDislikedRulesCount] = useState(); - const [superDislikedRulesCount, setSuperDislikedRulesCount] = useState(); - const [commentedRulesCount, setCommentedRulesCount] = useState(); - const { trackException } = useAppInsights(); - - async function CheckUser() { - const jwt = await fetchIdToken(); - GetUser(user.sub, jwt) - .then((success) => { - setCommentsConnected(success.commentsConnected); - }) - .catch((err) => { - trackException(err, 3); - }); - } - - useEffect(() => { - if (isAuthenticated) { - CheckUser(); - } - }, [state, user]); - if (isAuthenticated) { - return ( - <> - -
-
-
-
-
- -
-
- {isAuthenticated ? user.name : ''} -
- - - GitHub account - - {commentsConnected ? ( - - - Disqus account - - ) : null} -
- -
-
- -
-
-
- - ); - } else { - return ( -
- -
{gitHubUsername}
-
- ); - } -}; -Profile.propTypes = { - data: PropTypes.object.isRequired, - gitHubUsername: PropTypes.string, -}; - -function ProfileWithQuery(props) { - const data = useStaticQuery(graphql` - query ProfilePageQuery { - allMarkdownRemark(filter: { frontmatter: { type: { eq: "rule" } } }) { - nodes { - excerpt(format: HTML, pruneLength: 500) - frontmatter { - title - uri - guid - authors { - title - } - } - htmlAst - } - } - } - `); - - return ; -} - -ProfilePage.propTypes = { - gitHubUsername: PropTypes.string, - props: PropTypes.any, -}; - -export default function ProfilePage({ gitHubUsername, props }) { - return ( - <> - - - ); -} diff --git a/src/style.css b/src/style.css index 7b6655838..e69ca9532 100644 --- a/src/style.css +++ b/src/style.css @@ -816,7 +816,7 @@ blockquote :last-child { } .rule-content a:hover, -.rule-category a:hover:not(.github-link, .disqus-link, .get-username-btn::after) { +.rule-category a:hover:not(.github-link, .get-username-btn::after) { text-decoration:underline; @apply text-ssw-red; } @@ -1282,7 +1282,7 @@ div.bad-example { margin-top: 0; } -.tooltip, .disqus-tooltip, .info-tooltip, .forgot-username-tooltip { +.tooltip, .info-tooltip, .forgot-username-tooltip { position: relative; margin: 2px 0; height: 2.5rem; @@ -1338,11 +1338,6 @@ div.bad-example { margin-left: -58px; } -.disqus-tooltip { - margin: auto 1rem auto auto; - height: 3rem; -} - .info-tooltip { margin: 1.85rem auto 0 0; } @@ -1375,13 +1370,6 @@ div.bad-example { bottom: 105%; } -.disqus-tooltip .tooltiptext { - margin-left: 0 !important; - bottom: 2.5rem; - left: -1.6rem; - width: 5rem; -} - .info-tooltip .tooltiptext { left: 65%; margin-left: -79px; @@ -1407,7 +1395,7 @@ div.bad-example { } /* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext, .disqus-tooltip:hover .tooltip, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{ +.tooltip:hover .tooltiptext, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{ visibility: visible; opacity: 1; padding: 0.3rem !important; @@ -1491,20 +1479,6 @@ div.bad-example { z-index: 21; } -/* Profile Page --------------------------------------------------- */ - -.no-content-message { - text-align: center; - margin: 2rem auto; -} - -.profile-header { - background-color: #f5f5f5; - padding: 3rem; - height: auto; -} - .grid-container { display: grid; grid-template-columns: 8rem auto auto; @@ -1524,43 +1498,11 @@ div.bad-example { height: 6.25rem; } -.profile-github-icon { - margin: 0.2rem 0.25rem 0 0; -} - -.profile-disqus-icon { - margin: 0.1rem 0.1rem 0 -0.15rem; - height: 1.3rem; - width: 1.3rem; - fill: #CC4141; -} - -.profile-image { - grid-row-start: 1; - grid-row-end: 3; -} - @media screen and (max-width: 600px) { .rule-content { padding: 1rem; } - .profile-image { - visibility: hidden; - grid-column: 1; - height: 0 - } - .profile-bookmark-icon, .profile-like-icon, .profile-dislike-icon{ - display: none !important; - } - .profile-large-name { - grid-column: 1; - } - .profile-github-icon { - margin: 0.2rem 0 0 0; - height: 1rem; - width: 1.8rem; - } - .github-link, .disqus-link { + .github-link { grid-column: 1 !important; padding-top: 0.75rem; } @@ -1573,9 +1515,6 @@ div.bad-example { .rule-content-title { padding: 0 !important; } - .remove-item { - padding: 0 !important; - } } @media screen and (max-width: 1024px) { .radio-button-1 { @@ -1587,32 +1526,9 @@ div.bad-example { .radio-button-3 { grid-column: unset !important; } - .profile-large-name { - font-size: 1.75rem !important; - } -} -@media screen and (max-width: 800px) { - .filter-menu { - grid-template-columns: auto !important; - margin-left: auto; - margin-right: auto; - left: 0 !important; - top: 2rem !important; - } - .menu-item { - grid-column: 1 !important; - } - .profile-header { - height: auto; - } } -.profile-large-name { - font-size: 1.75rem; - grid-row: 1; -} - -.github-link, .disqus-link { +.github-link { width: fit-content; font-size: 14; @apply text-ssw-red !important; @@ -1624,23 +1540,10 @@ div.bad-example { grid-column: 2; } -.disqus-link { - grid-row: 3; - grid-column: 2; -} - -.github-link:hover, .disqus-link:hover { +.github-link:hover { opacity: 0.8; } -.filter-menu { - top: 3rem; - position: relative; - display: grid; - grid-template-columns: auto auto auto auto auto auto auto; - column-gap: 1rem; -} - .radio-button-1 { grid-column: 2; } @@ -1651,50 +1554,6 @@ div.bad-example { grid-column: 4; } -.menu-item { - padding: 0 0.5rem 0.5rem; - text-align: center; - position: relative; - display: flex; - margin: auto; - white-space: nowrap; -} - -.menu-item:hover { - padding: 0 0.5rem 0.25rem; - border-bottom: 0.25rem solid #CC4141; - cursor: pointer; -} - -.menu-item:hover .agree-title:after, .menu-item:hover .love-title:after, .menu-item:hover .disagree-title:after, .menu-item:hover .comments-title:after, .menu-item:hover .super-disagree-title:after, .menu-item:hover .filter-menu-bookmark-icon { - @apply text-ssw-red; -} - -.bookmarks-item:after, .love-title:after, .love-title-pressed:after, .agree-title:after, .agree-title-pressed:after, .super-disagree-title:after, .super-disagree-title-pressed:after, .disagree-title:after, .disagree-title-pressed:after, .comments-title:after, .comments-title-pressed:after { - padding-left: 0.5rem; - font-family: FontAwesome; -} - -.love-title:after, .love-title-pressed:after { - content: '\f004'; -} - -.agree-title:after, .agree-title-pressed:after { - content: '\f164'; -} - -.disagree-title:after, .disagree-title-pressed:after { - content: '\f165'; -} - -.super-disagree-title:after, .super-disagree-title-pressed:after { - content: '\f05e'; -} - -.love-title-pressed:after, .agree-title-pressed:after, .disagree-title-pressed:after, .super-disagree-title-pressed:after { - @apply text-ssw-red; -} - .heading-container { display: inline-flex; background: #f5f5f5; @@ -1709,34 +1568,6 @@ div.bad-example { margin: 0.5rem 0.8rem; } -.profile-bookmark-icon, .profile-like-icon, .profile-dislike-icon { - height: 2rem; - font-size: 1.8rem !important; - margin: auto auto auto 0; -} - -.filter-menu-bookmark-icon, .filter-menu-bookmark-icon-pressed { - margin: auto; - margin-right: -0.5rem; - height: 1rem; - width: 1.8rem; -} - -.filter-menu-bookmark-icon-pressed { - @apply text-ssw-red; -} - -.filter-menu-disqus-icon, .filter-menu-disqus-icon-pressed { - margin: auto; - margin-right: -0.5rem; - height: 1.5rem; - width: 1.5rem; -} - -.filter-menu-disqus-icon-pressed { - @apply text-ssw-red; -} - .rule-heading-love:after { content: '\f004'; font-family: FontAwesome; @@ -1766,46 +1597,11 @@ div.bad-example { margin-left: 1rem; } -.remove-item, .disqus-comment-link { - margin-left: auto; - right: 3rem; - margin: auto 1rem auto auto; - font-size: 1.8rem !important; -} - -.disqus-comment-link { - cursor: pointer; -} - -.disqus-comment-link svg { - height: 50px; -} - -.remove-item { - width: 1.6rem; -} - -.remove-item:after { - content: '\f057'; - font-family: FontAwesome; - color: #ddd; -} - -.remove-item:hover:after { - @apply text-ssw-red !important; -} - .gavel-icon { height: 50px; margin-top: 10px; } -.no-tagged-message:before { - font-family: FontAwesome; - content: '\f00d'; - margin-right: 0.5rem; -} - .username-input-box, .username-input-box-error { border: 0.1rem solid rgb(136, 136, 136); border-radius: 5px; @@ -1837,36 +1633,6 @@ div.bad-example { font-size: 1rem !important; } -.disconnect-acc-button { - margin: 0 4.2rem 1rem auto; - cursor: pointer; - display: flex; - vertical-align: middle; - font-size: 1rem; - color: #666; -} - -.disconnect-acc-button:before { - display: inline-block; - font-family: FontAwesome; - content: '\f00d'; - text-decoration: none !important; - margin: auto; - font-size: 1.1rem; - margin-top: -0.02rem; - padding-right: 0.4rem; -} - -.disconnect-acc-button svg { - height: 1.6rem; - width: 1.6rem; - margin-left: .3rem; -} - -.disconnect-acc-button:hover { - @apply text-ssw-red; -} - .connect-acc-container { text-align: center; margin: 2rem auto; From 78d5628f7d665f38161484cbc561339068833281 Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 17:31:04 +0800 Subject: [PATCH 07/17] cleaned up apiService.js --- src/services/apiService.js | 61 -------------------------------------- 1 file changed, 61 deletions(-) diff --git a/src/services/apiService.js b/src/services/apiService.js index 07cd12fed..364e1309e 100644 --- a/src/services/apiService.js +++ b/src/services/apiService.js @@ -1,68 +1,7 @@ -/* Reactions */ - const API_URL = process.env.API_BASE_URL + '/api'; const GITHUB_API_PAT = process.env.GITHUB_API_PAT; const DISQUS_API_KEY = process.env.DISQUS_API_KEY; -export async function GetReactionForUser(ruleId, userId) { - var query = userId - ? `${API_URL}/GetReactionsFunction?rule_guid=${ruleId}&user_id=${userId}` - : `${API_URL}/GetReactionsFunction?rule_guid=${ruleId}`; - const response = await fetch(query); - return await response.json(); -} - -export async function GetAllLikedDisliked(userId) { - var query = `${API_URL}/GetAllReactionsFunction?&user_id=${userId}`; - const response = await fetch(query); - return await response.json(); -} - -export async function PostReactionForUser(data, token) { - const isEmpty = Object.values(data).some((x) => x == null); - if (!data || isEmpty) { - return { - error: true, - message: 'Data is empty or in the wrong format', - }; - } - - const response = await fetch(`${API_URL}/ReactFunction`, { - method: 'POST', - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify(data), - }); - return response.json(); -} - -export const ReactionType = { - SuperLike: 3, - Like: 2, - DisLike: 1, - SuperDisLike: 0, -}; - -export async function RemoveReaction(data, token) { - if (!data || Object.values(data).some((x) => !x)) { - return { - error: true, - message: 'Data is empty or in the wrong format', - }; - } - const response = await fetch(`${API_URL}/RemoveReactionFunction`, { - method: 'POST', - headers: { - Authorization: `Bearer ${token}`, - 'Content-Type': 'application/json', - }, - body: JSON.stringify(data), - }); - return response.json(); -} - /* Bookmarks */ export async function GetBookmarksForUser(userId, ruleId) { From eac9235a00618390969689737668624732756fe9 Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 17:36:39 +0800 Subject: [PATCH 08/17] remove unused var --- gatsby-node.js | 1 - 1 file changed, 1 deletion(-) diff --git a/gatsby-node.js b/gatsby-node.js index 94a3b0407..16d1564dd 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,4 +1,3 @@ -const siteConfig = require('./site-config'); const { createFilePath } = require('gatsby-source-filesystem'); const appInsights = require('applicationinsights'); const WebpackAssetsManifest = require('webpack-assets-manifest'); From 57b7a71a8d8a9d58b93428d0af36ac3fce87e5f4 Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 17:52:47 +0800 Subject: [PATCH 09/17] fixed repo name --- src/components/discussion/discussion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/discussion/discussion.js b/src/components/discussion/discussion.js index f21279473..08aa90376 100644 --- a/src/components/discussion/discussion.js +++ b/src/components/discussion/discussion.js @@ -7,7 +7,7 @@ const Discussion = (props) => {
Date: Mon, 21 Oct 2024 11:32:40 +0800 Subject: [PATCH 10/17] added strict option to giscus --- src/components/discussion/discussion.js | 2 +- src/components/dropdown-icon/dropdown-icon.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/discussion/discussion.js b/src/components/discussion/discussion.js index 08aa90376..c6456fbd7 100644 --- a/src/components/discussion/discussion.js +++ b/src/components/discussion/discussion.js @@ -9,9 +9,9 @@ const Discussion = (props) => { id="comments" repo="SSWConsulting/SSW.Rules.Content" repoId={process.env.GISCUS_REPO_ID} - category="General" categoryId={process.env.GISCUS_CATEGORY_ID} mapping="specific" + strict="1" term={props.ruleGuid} reactionsEnabled="1" emitMetadata="0" diff --git a/src/components/dropdown-icon/dropdown-icon.js b/src/components/dropdown-icon/dropdown-icon.js index 2e27a5ca4..294e60b54 100644 --- a/src/components/dropdown-icon/dropdown-icon.js +++ b/src/components/dropdown-icon/dropdown-icon.js @@ -7,7 +7,7 @@ const DropdownIcon = () => { const drop = useRef(null); function handleClick(e) { - if (!e.target.closest(`.${drop.current.className}`) && open) { + if (!e.target.closest(`.${drop.current?.className}`) && open) { setOpen(false); } } From 1791dcb369d574935acfa08ed674dcaaeeb11000 Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Fri, 18 Oct 2024 17:52:47 +0800 Subject: [PATCH 11/17] fixed repo name --- src/components/discussion/discussion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/discussion/discussion.js b/src/components/discussion/discussion.js index f21279473..08aa90376 100644 --- a/src/components/discussion/discussion.js +++ b/src/components/discussion/discussion.js @@ -7,7 +7,7 @@ const Discussion = (props) => {
Date: Mon, 21 Oct 2024 11:32:40 +0800 Subject: [PATCH 12/17] added strict option to giscus --- src/components/discussion/discussion.js | 2 +- src/components/dropdown-icon/dropdown-icon.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/discussion/discussion.js b/src/components/discussion/discussion.js index 08aa90376..c6456fbd7 100644 --- a/src/components/discussion/discussion.js +++ b/src/components/discussion/discussion.js @@ -9,9 +9,9 @@ const Discussion = (props) => { id="comments" repo="SSWConsulting/SSW.Rules.Content" repoId={process.env.GISCUS_REPO_ID} - category="General" categoryId={process.env.GISCUS_CATEGORY_ID} mapping="specific" + strict="1" term={props.ruleGuid} reactionsEnabled="1" emitMetadata="0" diff --git a/src/components/dropdown-icon/dropdown-icon.js b/src/components/dropdown-icon/dropdown-icon.js index 6cb630b63..d734ddccd 100644 --- a/src/components/dropdown-icon/dropdown-icon.js +++ b/src/components/dropdown-icon/dropdown-icon.js @@ -8,7 +8,7 @@ const DropdownIcon = ({ displayActions }) => { const drop = useRef(null); function handleClick(e) { - if (!e.target.closest(`.${drop.current.className}`) && open) { + if (!e.target.closest(`.${drop.current?.className}`) && open) { setOpen(false); } } From a4b2e97ebe44cc89e63cd4af1fee84df6ec19865 Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Mon, 21 Oct 2024 14:15:30 +0800 Subject: [PATCH 13/17] Revert "removed the link to profile page in dropdown" This reverts commit d2923319b717671ee3033d2b922ff1487fa37adf. --- src/components/dropdown-card/dropdown-card.js | 9 +++++++++ src/style.css | 20 +++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/src/components/dropdown-card/dropdown-card.js b/src/components/dropdown-card/dropdown-card.js index a091fede6..90b123cdc 100644 --- a/src/components/dropdown-card/dropdown-card.js +++ b/src/components/dropdown-card/dropdown-card.js @@ -19,6 +19,15 @@ const DropdownCard = () => {
+ + )} +
+ +
+ +
+
+
+

+ + Read more + +

+
+ + ); + })} + + + )} + {type == 'comment' && userCommentsConnected ? ( + + ) : ( + <> + )} + + ); +}; + +RuleList.propTypes = { + rules: PropTypes.array.isRequired, + viewStyle: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + onRemoveClick: PropTypes.func.isRequired, + userCommentsConnected: PropTypes.bool, + setState: PropTypes.func, + state: PropTypes.number, + disqusPrivacyEnabled: PropTypes.bool, +}; + +export default ProfileContent; diff --git a/src/components/profile-filter-menu/profile-filter-menu.js b/src/components/profile-filter-menu/profile-filter-menu.js new file mode 100644 index 000000000..d7c88e0f5 --- /dev/null +++ b/src/components/profile-filter-menu/profile-filter-menu.js @@ -0,0 +1,200 @@ +/* eslint-disable no-console */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +import React from 'react'; +import PropTypes from 'prop-types'; +import BookmarkIcon from '-!svg-react-loader!../../images/bookmarkIcon.svg'; +import DisqusIcon from '-!svg-react-loader!../../images/disqusIcon.svg'; + +const ProfileFilterMenu = ({ + selectedFilter, + setSelectedFilter, + superLikedRulesCount, + likedRulesCount, + dislikedRulesCount, + superDislikedRulesCount, + bookmarkedRulesCount, + commentedRulesCount, +}) => { + return ( + <> +
+
{ + setSelectedFilter(Filter.Bookmarks); + }} + > + Bookmarks + +
{bookmarkedRulesCount ?? 0}
+
+
{ + setSelectedFilter(Filter.Comments); + }} + > + Comments + +
{commentedRulesCount ?? 0}
+
+
{ + setSelectedFilter(Filter.SuperLikes); + }} + > +
+ Love it +
+
{superLikedRulesCount ?? 0}
+
+
{ + setSelectedFilter(Filter.Likes); + }} + > +
+ Agree +
+
{likedRulesCount ?? 0}
+
+
{ + setSelectedFilter(Filter.Dislikes); + }} + > +
+ Disagree +
+
{dislikedRulesCount ?? 0}
+
+
{ + setSelectedFilter(Filter.SuperDislikes); + }} + > +
+ No way +
+
{superDislikedRulesCount ?? 0}
+
+
+ + ); +}; + +ProfileFilterMenu.propTypes = { + selectedFilter: PropTypes.number.isRequired, + setSelectedFilter: PropTypes.func.isRequired, + superLikedRulesCount: PropTypes.number, + likedRulesCount: PropTypes.number, + dislikedRulesCount: PropTypes.number, + superDislikedRulesCount: PropTypes.number, + bookmarkedRulesCount: PropTypes.number, + commentedRulesCount: PropTypes.number, +}; + +export const Filter = { + Comments: 5, + Bookmarks: 4, + SuperLikes: 3, + Likes: 2, + Dislikes: 1, + SuperDislikes: 0, +}; +export default ProfileFilterMenu; diff --git a/src/pages/profile.js b/src/pages/profile.js new file mode 100644 index 000000000..05dce2404 --- /dev/null +++ b/src/pages/profile.js @@ -0,0 +1,173 @@ +/* eslint-disable no-console */ +import React, { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; +import { useStaticQuery, graphql } from 'gatsby'; +import Breadcrumb from '../components/breadcrumb/breadcrumb'; +import ProfileBadge from '../components/profile-badge/profile-badge'; +import ProfileContent from '../components/profile-content/profile-content'; +import ProfileFilterMenu from '../components/profile-filter-menu/profile-filter-menu'; +import GitHubIcon from '-!svg-react-loader!../images/github.svg'; +import DisqusIcon from '-!svg-react-loader!../images/disqusIcon.svg'; +import { useAuth0 } from '@auth0/auth0-react'; +import { GetUser } from '../services/apiService'; +import { useAuthService } from '../services/authService'; +import useAppInsights from '../hooks/useAppInsights'; + +const Profile = ({ data, gitHubUsername }) => { + const [selectedFilter, setSelectedFilter] = useState(4); + const [state, setState] = useState(0); + const { user, isAuthenticated, loginWithRedirect } = useAuth0(); + const { fetchIdToken } = useAuthService(); + const [commentsConnected, setCommentsConnected] = useState(false); + const [bookmarkedRulesCount, setBookmarkedRulesCount] = useState(); + const [superLikedRulesCount, setSuperLikedRulesCount] = useState(); + const [likedRulesCount, setLikedRulesCount] = useState(); + const [dislikedRulesCount, setDislikedRulesCount] = useState(); + const [superDislikedRulesCount, setSuperDislikedRulesCount] = useState(); + const [commentedRulesCount, setCommentedRulesCount] = useState(); + const { trackException } = useAppInsights(); + + async function CheckUser() { + const jwt = await fetchIdToken(); + GetUser(user.sub, jwt) + .then((success) => { + setCommentsConnected(success.commentsConnected); + }) + .catch((err) => { + trackException(err, 3); + }); + } + + useEffect(() => { + if (isAuthenticated) { + CheckUser(); + } + }, [state, user]); + if (isAuthenticated) { + return ( + <> + +
+
+
+
+
+ +
+
+ {isAuthenticated ? user.name : ''} +
+ + + GitHub account + + {commentsConnected ? ( + + + Disqus account + + ) : null} +
+ +
+
+ +
+
+
+ + ); + } else { + return ( +
+ +
{gitHubUsername}
+
+ ); + } +}; +Profile.propTypes = { + data: PropTypes.object.isRequired, + gitHubUsername: PropTypes.string, +}; + +function ProfileWithQuery(props) { + const data = useStaticQuery(graphql` + query ProfilePageQuery { + allMarkdownRemark(filter: { frontmatter: { type: { eq: "rule" } } }) { + nodes { + excerpt(format: HTML, pruneLength: 500) + frontmatter { + title + uri + guid + authors { + title + } + } + htmlAst + } + } + } + `); + + return ; +} + +ProfilePage.propTypes = { + gitHubUsername: PropTypes.string, + props: PropTypes.any, +}; + +export default function ProfilePage({ gitHubUsername, props }) { + return ( + <> + + + ); +} diff --git a/src/style.css b/src/style.css index cbca5445a..9fdb63424 100644 --- a/src/style.css +++ b/src/style.css @@ -816,7 +816,7 @@ blockquote :last-child { } .rule-content a:hover, -.rule-category a:hover:not(.github-link, .get-username-btn::after) { +.rule-category a:hover:not(.github-link, .disqus-link, .get-username-btn::after) { text-decoration:underline; @apply text-ssw-red; } @@ -1282,7 +1282,7 @@ div.bad-example { margin-top: 0; } -.tooltip, .info-tooltip, .forgot-username-tooltip { +.tooltip, .disqus-tooltip, .info-tooltip, .forgot-username-tooltip { position: relative; margin: 2px 0; height: 2.5rem; @@ -1338,6 +1338,11 @@ div.bad-example { margin-left: -58px; } +.disqus-tooltip { + margin: auto 1rem auto auto; + height: 3rem; +} + .info-tooltip { margin: 1.85rem auto 0 0; } @@ -1370,6 +1375,13 @@ div.bad-example { bottom: 105%; } +.disqus-tooltip .tooltiptext { + margin-left: 0 !important; + bottom: 2.5rem; + left: -1.6rem; + width: 5rem; +} + .info-tooltip .tooltiptext { left: 65%; margin-left: -79px; @@ -1395,7 +1407,7 @@ div.bad-example { } /* Show the tooltip text when you mouse over the tooltip container */ -.tooltip:hover .tooltiptext, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{ +.tooltip:hover .tooltiptext, .disqus-tooltip:hover .tooltip, .info-tooltip:hover .tooltiptext, .forgot-username-tooltip:hover .tooltiptext{ visibility: visible; opacity: 1; padding: 0.3rem !important; @@ -1499,6 +1511,20 @@ div.bad-example { z-index: 21; } +/* Profile Page +-------------------------------------------------- */ + +.no-content-message { + text-align: center; + margin: 2rem auto; +} + +.profile-header { + background-color: #f5f5f5; + padding: 3rem; + height: auto; +} + .grid-container { display: grid; grid-template-columns: 8rem auto auto; @@ -1518,11 +1544,43 @@ div.bad-example { height: 6.25rem; } +.profile-github-icon { + margin: 0.2rem 0.25rem 0 0; +} + +.profile-disqus-icon { + margin: 0.1rem 0.1rem 0 -0.15rem; + height: 1.3rem; + width: 1.3rem; + fill: #CC4141; +} + +.profile-image { + grid-row-start: 1; + grid-row-end: 3; +} + @media screen and (max-width: 600px) { .rule-content { padding: 1rem; } - .github-link { + .profile-image { + visibility: hidden; + grid-column: 1; + height: 0 + } + .profile-bookmark-icon, .profile-like-icon, .profile-dislike-icon{ + display: none !important; + } + .profile-large-name { + grid-column: 1; + } + .profile-github-icon { + margin: 0.2rem 0 0 0; + height: 1rem; + width: 1.8rem; + } + .github-link, .disqus-link { grid-column: 1 !important; padding-top: 0.75rem; } @@ -1535,6 +1593,9 @@ div.bad-example { .rule-content-title { padding: 0 !important; } + .remove-item { + padding: 0 !important; + } } @media screen and (max-width: 1024px) { .radio-button-1 { @@ -1546,9 +1607,32 @@ div.bad-example { .radio-button-3 { grid-column: unset !important; } + .profile-large-name { + font-size: 1.75rem !important; + } +} +@media screen and (max-width: 800px) { + .filter-menu { + grid-template-columns: auto !important; + margin-left: auto; + margin-right: auto; + left: 0 !important; + top: 2rem !important; + } + .menu-item { + grid-column: 1 !important; + } + .profile-header { + height: auto; + } } -.github-link { +.profile-large-name { + font-size: 1.75rem; + grid-row: 1; +} + +.github-link, .disqus-link { width: fit-content; font-size: 14; @apply text-ssw-red !important; @@ -1560,10 +1644,23 @@ div.bad-example { grid-column: 2; } -.github-link:hover { +.disqus-link { + grid-row: 3; + grid-column: 2; +} + +.github-link:hover, .disqus-link:hover { opacity: 0.8; } +.filter-menu { + top: 3rem; + position: relative; + display: grid; + grid-template-columns: auto auto auto auto auto auto auto; + column-gap: 1rem; +} + .radio-button-1 { grid-column: 2; } @@ -1574,6 +1671,50 @@ div.bad-example { grid-column: 4; } +.menu-item { + padding: 0 0.5rem 0.5rem; + text-align: center; + position: relative; + display: flex; + margin: auto; + white-space: nowrap; +} + +.menu-item:hover { + padding: 0 0.5rem 0.25rem; + border-bottom: 0.25rem solid #CC4141; + cursor: pointer; +} + +.menu-item:hover .agree-title:after, .menu-item:hover .love-title:after, .menu-item:hover .disagree-title:after, .menu-item:hover .comments-title:after, .menu-item:hover .super-disagree-title:after, .menu-item:hover .filter-menu-bookmark-icon { + @apply text-ssw-red; +} + +.bookmarks-item:after, .love-title:after, .love-title-pressed:after, .agree-title:after, .agree-title-pressed:after, .super-disagree-title:after, .super-disagree-title-pressed:after, .disagree-title:after, .disagree-title-pressed:after, .comments-title:after, .comments-title-pressed:after { + padding-left: 0.5rem; + font-family: FontAwesome; +} + +.love-title:after, .love-title-pressed:after { + content: '\f004'; +} + +.agree-title:after, .agree-title-pressed:after { + content: '\f164'; +} + +.disagree-title:after, .disagree-title-pressed:after { + content: '\f165'; +} + +.super-disagree-title:after, .super-disagree-title-pressed:after { + content: '\f05e'; +} + +.love-title-pressed:after, .agree-title-pressed:after, .disagree-title-pressed:after, .super-disagree-title-pressed:after { + @apply text-ssw-red; +} + .heading-container { display: inline-flex; background: #f5f5f5; @@ -1588,6 +1729,34 @@ div.bad-example { margin: 0.5rem 0.8rem; } +.profile-bookmark-icon, .profile-like-icon, .profile-dislike-icon { + height: 2rem; + font-size: 1.8rem !important; + margin: auto auto auto 0; +} + +.filter-menu-bookmark-icon, .filter-menu-bookmark-icon-pressed { + margin: auto; + margin-right: -0.5rem; + height: 1rem; + width: 1.8rem; +} + +.filter-menu-bookmark-icon-pressed { + @apply text-ssw-red; +} + +.filter-menu-disqus-icon, .filter-menu-disqus-icon-pressed { + margin: auto; + margin-right: -0.5rem; + height: 1.5rem; + width: 1.5rem; +} + +.filter-menu-disqus-icon-pressed { + @apply text-ssw-red; +} + .rule-heading-love:after { content: '\f004'; font-family: FontAwesome; @@ -1617,11 +1786,46 @@ div.bad-example { margin-left: 1rem; } +.remove-item, .disqus-comment-link { + margin-left: auto; + right: 3rem; + margin: auto 1rem auto auto; + font-size: 1.8rem !important; +} + +.disqus-comment-link { + cursor: pointer; +} + +.disqus-comment-link svg { + height: 50px; +} + +.remove-item { + width: 1.6rem; +} + +.remove-item:after { + content: '\f057'; + font-family: FontAwesome; + color: #ddd; +} + +.remove-item:hover:after { + @apply text-ssw-red !important; +} + .gavel-icon { height: 50px; margin-top: 10px; } +.no-tagged-message:before { + font-family: FontAwesome; + content: '\f00d'; + margin-right: 0.5rem; +} + .username-input-box, .username-input-box-error { border: 0.1rem solid rgb(136, 136, 136); border-radius: 5px; @@ -1653,6 +1857,36 @@ div.bad-example { font-size: 1rem !important; } +.disconnect-acc-button { + margin: 0 4.2rem 1rem auto; + cursor: pointer; + display: flex; + vertical-align: middle; + font-size: 1rem; + color: #666; +} + +.disconnect-acc-button:before { + display: inline-block; + font-family: FontAwesome; + content: '\f00d'; + text-decoration: none !important; + margin: auto; + font-size: 1.1rem; + margin-top: -0.02rem; + padding-right: 0.4rem; +} + +.disconnect-acc-button svg { + height: 1.6rem; + width: 1.6rem; + margin-left: .3rem; +} + +.disconnect-acc-button:hover { + @apply text-ssw-red; +} + .connect-acc-container { text-align: center; margin: 2rem auto; From 6700c57ead03981874352c0af7e20d383f5fe5a5 Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Mon, 21 Oct 2024 14:16:11 +0800 Subject: [PATCH 16/17] Revert "cleaned up apiService.js" This reverts commit 78d5628f7d665f38161484cbc561339068833281. --- src/services/apiService.js | 61 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/src/services/apiService.js b/src/services/apiService.js index 364e1309e..07cd12fed 100644 --- a/src/services/apiService.js +++ b/src/services/apiService.js @@ -1,7 +1,68 @@ +/* Reactions */ + const API_URL = process.env.API_BASE_URL + '/api'; const GITHUB_API_PAT = process.env.GITHUB_API_PAT; const DISQUS_API_KEY = process.env.DISQUS_API_KEY; +export async function GetReactionForUser(ruleId, userId) { + var query = userId + ? `${API_URL}/GetReactionsFunction?rule_guid=${ruleId}&user_id=${userId}` + : `${API_URL}/GetReactionsFunction?rule_guid=${ruleId}`; + const response = await fetch(query); + return await response.json(); +} + +export async function GetAllLikedDisliked(userId) { + var query = `${API_URL}/GetAllReactionsFunction?&user_id=${userId}`; + const response = await fetch(query); + return await response.json(); +} + +export async function PostReactionForUser(data, token) { + const isEmpty = Object.values(data).some((x) => x == null); + if (!data || isEmpty) { + return { + error: true, + message: 'Data is empty or in the wrong format', + }; + } + + const response = await fetch(`${API_URL}/ReactFunction`, { + method: 'POST', + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }); + return response.json(); +} + +export const ReactionType = { + SuperLike: 3, + Like: 2, + DisLike: 1, + SuperDisLike: 0, +}; + +export async function RemoveReaction(data, token) { + if (!data || Object.values(data).some((x) => !x)) { + return { + error: true, + message: 'Data is empty or in the wrong format', + }; + } + const response = await fetch(`${API_URL}/RemoveReactionFunction`, { + method: 'POST', + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }); + return response.json(); +} + /* Bookmarks */ export async function GetBookmarksForUser(userId, ruleId) { From a0dd0755f9e68a22cd934153d5a45545de1dc85b Mon Sep 17 00:00:00 2001 From: Baba Kamyljanov Date: Mon, 21 Oct 2024 14:16:30 +0800 Subject: [PATCH 17/17] Revert "remove unused var" This reverts commit eac9235a00618390969689737668624732756fe9. --- gatsby-node.js | 1 + 1 file changed, 1 insertion(+) diff --git a/gatsby-node.js b/gatsby-node.js index 643c231bf..8c05d8b5e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,3 +1,4 @@ +const siteConfig = require('./site-config'); const { createFilePath } = require('gatsby-source-filesystem'); const appInsights = require('applicationinsights'); const WebpackAssetsManifest = require('webpack-assets-manifest');