From 6012d78d83a83cbc58dedb83eac6b827cb74b336 Mon Sep 17 00:00:00 2001 From: Armagan Dalkiran <77741597+armagandalkiran@users.noreply.github.com> Date: Mon, 16 Dec 2024 01:31:28 +0300 Subject: [PATCH] Revert "style: ui improvements" --- gurubu-backend/utils/groomings.js | 2 +- gurubu-client/package.json | 1 - .../room/grooming-board-jira-table.tsx | 184 ---------- .../app/components/room/grooming-board.tsx | 313 +++++++++--------- .../app/components/room/grooming-navbar.tsx | 5 +- .../components/room/import-jira-issues.tsx | 1 - gurubu-client/src/app/services/jiraService.ts | 5 +- .../app/shared/helpers/convertJiraMarkdown.ts | 45 --- gurubu-client/src/app/shared/interfaces.ts | 1 - .../room/grooming-board-jira-table.scss | 166 ---------- .../room/grooming-board-participants.scss | 4 +- .../src/app/styles/room/grooming-board.scss | 37 +-- .../src/app/styles/room/grooming-navbar.scss | 2 - gurubu-client/src/app/styles/room/style.scss | 1 - gurubu-client/yarn.lock | 5 - 15 files changed, 166 insertions(+), 606 deletions(-) delete mode 100644 gurubu-client/src/app/components/room/grooming-board-jira-table.tsx delete mode 100644 gurubu-client/src/app/shared/helpers/convertJiraMarkdown.ts delete mode 100644 gurubu-client/src/app/styles/room/grooming-board-jira-table.scss diff --git a/gurubu-backend/utils/groomings.js b/gurubu-backend/utils/groomings.js index 5d70b90..2ee5df5 100644 --- a/gurubu-backend/utils/groomings.js +++ b/gurubu-backend/utils/groomings.js @@ -393,7 +393,7 @@ const cleanRoomsAndUsers = () => { clearUser(room.roomID); } }); - }, 60000 * 60 * 3); // work every 3 hours + }, 60000 * 10); // work every 10 minutes }; const updateNickName = (credentials, newNickName, roomID, socket) => { diff --git a/gurubu-client/package.json b/gurubu-client/package.json index 3c1f107..c65c9cd 100644 --- a/gurubu-client/package.json +++ b/gurubu-client/package.json @@ -11,7 +11,6 @@ "dependencies": { "@tabler/icons-react": "^2.40.0", "axios": "^1.6.0", - "marked": "^15.0.4", "next": "14.0.0", "react": "^18", "react-dom": "^18", diff --git a/gurubu-client/src/app/components/room/grooming-board-jira-table.tsx b/gurubu-client/src/app/components/room/grooming-board-jira-table.tsx deleted file mode 100644 index 8b416c5..0000000 --- a/gurubu-client/src/app/components/room/grooming-board-jira-table.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import { useGroomingRoom } from "@/contexts/GroomingRoomContext"; -import { useSocket } from "@/contexts/SocketContext"; -import { JiraService } from "@/services/jiraService"; -import { convertJiraToMarkdown } from "@/shared/helpers/convertJiraMarkdown"; -import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; -import { marked } from "marked"; -import React, { useState } from "react"; - -interface IProps { - roomId: string; - customFieldName: string; -} - -const GroomingBoardJiraTable = ({ roomId, customFieldName }: IProps) => { - const { userInfo, groomingInfo } = useGroomingRoom(); - const socket = useSocket(); - - const [currentIssueIndex, setCurrentIssueIndex] = useState(0); - - const jiraService = new JiraService(process.env.NEXT_PUBLIC_API_URL || ""); - - const selectedIssueIndex = groomingInfo.issues?.findIndex( - (issue) => issue.selected - ); - - const renderer = new marked.Renderer(); - renderer.link = ({ - href, - title, - tokens, - }: { - href: string; - title?: string | null; - tokens: any[]; - }) => { - const text = marked.Parser.parse(tokens); - return `${text}`; - }; - - const formattedDescription = marked.parse( - convertJiraToMarkdown( - groomingInfo.issues?.[selectedIssueIndex]?.description - ), - { renderer } - ); - - const handleSetVote = async () => { - if (groomingInfo.isResultShown && groomingInfo.issues.length > 0) { - const selectedIssue = groomingInfo.issues.find((issue) => issue.selected); - if (selectedIssue && customFieldName != "") { - const selectedIssueId = selectedIssue.id; - var response = await jiraService.setEstimation( - selectedIssueId, - groomingInfo.score, - customFieldName - ); - if (response.isSuccess) { - selectedIssue.point = groomingInfo.score.toString(); - socket.emit( - "setIssues", - roomId, - groomingInfo.issues, - userInfo.lobby.credentials - ); - } - } - } - }; - - const handleNextIssue = () => { - if (currentIssueIndex < groomingInfo.issues.length - 1) { - const nextIssueIndex = currentIssueIndex + 1; - setCurrentIssueIndex(nextIssueIndex); - const updatedIssues = groomingInfo.issues.map((issue, index) => ({ - ...issue, - selected: index === nextIssueIndex, - })); - socket.emit( - "setIssues", - roomId, - updatedIssues, - userInfo.lobby.credentials - ); - socket.emit("resetVotes", roomId, userInfo.lobby.credentials); - } - }; - - const handlePrevIssue = () => { - if (selectedIssueIndex > 0) { - const prevIssueIndex = selectedIssueIndex - 1; - setCurrentIssueIndex(prevIssueIndex); - const updatedIssues = groomingInfo.issues.map((issue, index) => ({ - ...issue, - selected: index === prevIssueIndex, - })); - socket.emit( - "setIssues", - roomId, - updatedIssues, - userInfo.lobby.credentials - ); - socket.emit("resetVotes", roomId, userInfo.lobby.credentials); - } - }; - - if (!(groomingInfo.issues && groomingInfo.issues.length > 0)) { - return null; - } - - return ( -
-
-

Jira Table

-
- - - - - - - - - - {groomingInfo.issues.map( - (issue) => - issue.selected && ( - - - - - - ) - )} - -
IssueSummaryPoints
- - {issue.key} - - {issue.summary}{issue.point}
-
- {userInfo.lobby?.isAdmin && ( -
-
- - -
-
- -
-
- )} -
- ); -}; - -export default GroomingBoardJiraTable; diff --git a/gurubu-client/src/app/components/room/grooming-board.tsx b/gurubu-client/src/app/components/room/grooming-board.tsx index 6ae1b2e..27e6e72 100644 --- a/gurubu-client/src/app/components/room/grooming-board.tsx +++ b/gurubu-client/src/app/components/room/grooming-board.tsx @@ -4,23 +4,21 @@ import { useRouter } from "next/navigation"; import Image from "next/image"; import { notFound } from "next/navigation"; import { useSocket } from "@/contexts/SocketContext"; -import { - checkUserJoinedLobbyBefore, - getCurrentLobby, -} from "@/shared/helpers/lobbyStorage"; +import { checkUserJoinedLobbyBefore, getCurrentLobby } from "@/shared/helpers/lobbyStorage"; import { useGroomingRoom } from "@/contexts/GroomingRoomContext"; import VotingStick from "./voting-stick"; import MetricAverages from "./metric-averages"; import GroomingBoardParticipants from "./grooming-board-participants"; import { IconEdit, IconReportAnalytics } from "@tabler/icons-react"; import { ROOM_STATUS } from "../../room/[id]/enums"; -import { EncounteredError, GroomingInfo } from "@/shared/interfaces"; +import { EncounteredError, GroomingInfo, Issue } from "@/shared/interfaces"; import { ENCOUTERED_ERROR_TYPE, GroomingMode } from "@/shared/enums"; import GroomingBoardErrorPopup from "./grooming-board-error-popup"; import { MetricToggleTooltip } from "../metricToggle/metricToggleTooltip"; +import { JiraService } from "@/services/jiraService"; import { StoryPointCustomFieldForm } from "@/components/room/story-point-custom-field"; import { Modal } from "../common/modal"; -import GroomingBoardJiraTable from "./grooming-board-jira-table"; + interface IProps { roomId: string; @@ -28,21 +26,24 @@ interface IProps { setShowNickNameForm: (value: boolean) => void; } -const GroomingBoard = ({ - roomId, - showNickNameForm, - setShowNickNameForm, -}: IProps) => { +const GroomingBoard = ({ roomId, showNickNameForm, setShowNickNameForm }: IProps) => { const socket = useSocket(); const router = useRouter(); const [editVoteClicked, setEditVoteClicked] = useState(false); - const [customFieldName, setCustomFieldName] = useState( - process.env.NEXT_PUBLIC_STORY_POINT_CUSTOM_FIELD || "" - ); + const [currentIssueIndex, setCurrentIssueIndex] = useState(0); + const [customFieldName, setCustomFieldName] = useState(""); const [hoveredMetric, setHoveredMetric] = useState(null); + const jiraService = new JiraService(process.env.NEXT_PUBLIC_API_URL || ""); + type ModalType = "storyPointCustomField" | null; + const [selectedModal, setSelectedModal] = useState(null); const [modalOpen, setModalOpen] = useState(false); + const openModal = (modalType: ModalType) => { + setModalOpen(true); + setSelectedModal(modalType); + }; + const closeModal = () => { setModalOpen(false); }; @@ -57,17 +58,11 @@ const GroomingBoard = ({ roomStatus, setEncounteredError, encounteredError, - setShowErrorPopup, + setShowErrorPopup } = useGroomingRoom(); const isGroomingInfoLoaded = Boolean(Object.keys(groomingInfo).length); - const showVotingStick = - (editVoteClicked || - !groomingInfo.isResultShown || - groomingInfo.mode === GroomingMode.PlanningPoker) && - isGroomingInfoLoaded; - useEffect(() => { const handleInitialize = (data: GroomingInfo) => { if (data?.participants[lobby.userID]) { @@ -84,6 +79,7 @@ const GroomingBoard = ({ const handleUpdateNickName = (data: GroomingInfo) => setGroomingInfo(data); + const setIssues = (data: GroomingInfo) => { setGroomingInfo(data); }; @@ -103,8 +99,7 @@ const GroomingBoard = ({ } }; - const handleUserDisconnected = (data: GroomingInfo) => - setGroomingInfo(data); + const handleUserDisconnected = (data: GroomingInfo) => setGroomingInfo(data); const handleEncounteredError = (data: EncounteredError) => { if (data.id === ENCOUTERED_ERROR_TYPE.CONNECTION_ERROR) { @@ -129,7 +124,7 @@ const GroomingBoard = ({ }); } - socket.on("disconnect", (reason) => { + socket.on('disconnect', (reason) => { setShowErrorPopup(true); }); @@ -164,7 +159,7 @@ const GroomingBoard = ({ setEncounteredError, setShowErrorPopup, router, - userInfo, + userInfo ]); const handleShowResultsClick = () => { @@ -193,18 +188,54 @@ const GroomingBoard = ({ if (encounteredError.id === ENCOUTERED_ERROR_TYPE.ROOM_EXPIRED) { notFound(); } + const handleNextIssue = () => { + if (currentIssueIndex < groomingInfo.issues.length - 1) { + const nextIssueIndex = currentIssueIndex + 1; + setCurrentIssueIndex(nextIssueIndex); + const updatedIssues = groomingInfo.issues.map((issue, index) => ({ + ...issue, + selected: index === nextIssueIndex + })); + socket.emit("setIssues", roomId, updatedIssues, userInfo.lobby.credentials); + socket.emit("resetVotes", roomId, userInfo.lobby.credentials); + } + }; + + const handlePrevIssue = () => { + if (currentIssueIndex > 0) { + const prevIssueIndex = currentIssueIndex - 1; + setCurrentIssueIndex(prevIssueIndex); + const updatedIssues = groomingInfo.issues.map((issue, index) => ({ + ...issue, + selected: index === prevIssueIndex + })); + socket.emit("setIssues", roomId, updatedIssues, userInfo.lobby.credentials); + socket.emit("resetVotes", roomId, userInfo.lobby.credentials); + } + }; + + const handleSetVote = async () => { + if (groomingInfo.isResultShown && groomingInfo.issues.length > 0) { + const selectedIssue = groomingInfo.issues.find(issue => issue.selected); + if (selectedIssue && customFieldName != "") { + const selectedIssueId = selectedIssue.id; + var response = await jiraService.setEstimation(selectedIssueId, groomingInfo.score, customFieldName); + if (response.isSuccess) { + selectedIssue.point = groomingInfo.score.toString(); + socket.emit("setIssues", roomId, groomingInfo.issues, userInfo.lobby.credentials); + } + } + } + }; + + return (
-
+
{!editVoteClicked && groomingInfo.isResultShown && - isGroomingInfoLoaded && - groomingInfo.mode === GroomingMode.ScoreGrooming && ( + isGroomingInfoLoaded && (
{groomingInfo.score}

)} - {showVotingStick && ( -
- {groomingInfo.metrics?.map((metric) => ( - - ))} -
- )} - {!editVoteClicked && } - {groomingInfo.isResultShown && - groomingInfo.mode === GroomingMode.ScoreGrooming && ( -
- -
- )} - {!editVoteClicked && - groomingInfo.isResultShown && - isGroomingInfoLoaded && - groomingInfo.mode === GroomingMode.PlanningPoker && ( -
- trophy -

{groomingInfo.score}

-
- )} - - {userInfo.lobby?.isAdmin && - isGroomingInfoLoaded && - groomingInfo.mode === GroomingMode.ScoreGrooming && ( -
- - + {(editVoteClicked || !groomingInfo.isResultShown) && + isGroomingInfoLoaded && ( +
+ {groomingInfo.metrics?.map((metric) => ( + + ))}
)} + {!editVoteClicked && } + {groomingInfo.isResultShown && ( +
+ +
+ )}{groomingInfo.issues && groomingInfo.issues.length > 0 && ( +
+ <> + + + + + + + + + + {groomingInfo.issues.map(issue => issue.selected && ( + + + + + + ))} + +
IssueSummaryPoints
+ + {issue.key} + + {issue.summary}{issue.point}
+ {userInfo.lobby?.isAdmin && ( +
+ {groomingInfo.mode === GroomingMode.PlanningPoker && ( +
+ + +
+ )} + + +
)} + +
+ )} + {userInfo.lobby?.isAdmin && isGroomingInfoLoaded && ( +
+ + +
+ )} {!isGroomingInfoLoaded && renderLoading()}
@@ -307,8 +348,7 @@ const GroomingBoard = ({ <>
    - Participants -
    + Participants
{groomingInfo.metrics?.map((metric) => (
  • - {userInfo.lobby?.isAdmin && - isGroomingInfoLoaded && - groomingInfo.mode === GroomingMode.PlanningPoker && ( -
    - - -
    - )} )} {!isGroomingInfoLoaded && renderLoading()} @@ -367,11 +370,7 @@ const GroomingBoard = ({ - + ); diff --git a/gurubu-client/src/app/components/room/grooming-navbar.tsx b/gurubu-client/src/app/components/room/grooming-navbar.tsx index d495cbb..b9018da 100644 --- a/gurubu-client/src/app/components/room/grooming-navbar.tsx +++ b/gurubu-client/src/app/components/room/grooming-navbar.tsx @@ -7,8 +7,6 @@ import { ImportJiraIssuesForm } from "@/components/room/import-jira-issues"; import GroomingBoardProfile from "./grooming-board-profile"; import Image from "next/image"; import ThemeSelector from "./theme-selector"; -import { GroomingMode } from "@/shared/enums"; -import Logo from "../common/logo"; interface Props { showNickNameForm: boolean; @@ -63,7 +61,6 @@ const GroomingNavbar = ({ showNickNameForm, roomId }: Props) => { return (