Skip to content

Commit 597aa72

Browse files
KSIX2KSIX2
authored
feat: Global modal for self matchmaking (#32)
* add: Global Modal for self matchmaking * current code & map added * capitalize option * file & folder name change, removed console logs * fix lint error * fix yarn build err * fix yarn build err 2 * fix yarn build err 3 * removed DashboardPage file
1 parent 287707e commit 597aa72

File tree

10 files changed

+512
-425
lines changed

10 files changed

+512
-425
lines changed

‎src/components/CommitHistory/CommitTree/CommitHistroy.tsx

Lines changed: 145 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
import { CodeRevision, GameMapRevision } from '@codecharacter-2022/client';
2-
import { useState } from 'react';
3-
import {
4-
VerticalTimeline,
5-
VerticalTimelineElement,
6-
} from 'react-vertical-timeline-component';
2+
import React, { useState } from 'react';
3+
import { VerticalTimelineElement } from 'react-vertical-timeline-component';
74
import 'react-vertical-timeline-component/style.min.css';
85
import './CommitHistory.css';
6+
import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
7+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8+
import { IconProp } from '@fortawesome/fontawesome-svg-core';
9+
import styles from '../HistoryMain/History.module.css';
10+
import { useAppDispatch } from '../../../store/hooks';
11+
import {
12+
codeCommitIDChanged,
13+
codeCommitNameChanged,
14+
isSelfMatchModalOpened,
15+
mapCommitIDChanged,
16+
mapCommitNameChanged,
17+
} from '../../../store/SelfMatchMakeModal/SelfMatchModal';
918

1019
type PropsType = {
1120
commitID: (commitID: string) => void;
1221
commitHistoryDetails: CodeRevision[] | GameMapRevision[];
22+
BigButton: string;
1323
};
1424

1525
export default function CommitHistory(props: PropsType): JSX.Element {
@@ -18,8 +28,96 @@ export default function CommitHistory(props: PropsType): JSX.Element {
1828
color: '#fff',
1929
};
2030

31+
const dispatch = useAppDispatch();
2132
const [commitNumber, setCommitNumber] = useState('0');
2233

34+
function handleCommitSelect(e: React.MouseEvent<HTMLDivElement>) {
35+
// Since the button has an icon, event
36+
// target doesnt give the button element
37+
// when clicked on the icon. Hence we get the
38+
// parent if clicked on icon
39+
const target = e.target as HTMLDivElement;
40+
if (target.getAttribute('data-uuid') === null) {
41+
if (
42+
(target.parentNode as HTMLButtonElement)?.getAttribute('data-uuid') !==
43+
null
44+
) {
45+
if (props.BigButton === 'Code') {
46+
dispatch(
47+
codeCommitNameChanged(
48+
(target.parentNode as HTMLButtonElement)?.getAttribute(
49+
'data-name',
50+
) || '',
51+
),
52+
);
53+
dispatch(
54+
codeCommitIDChanged(
55+
(target.parentNode as HTMLButtonElement)?.getAttribute(
56+
'data-uuid',
57+
) || '',
58+
),
59+
);
60+
} else {
61+
dispatch(
62+
mapCommitNameChanged(
63+
(target.parentNode as HTMLButtonElement)?.getAttribute(
64+
'data-name',
65+
) || '',
66+
),
67+
);
68+
dispatch(
69+
mapCommitIDChanged(
70+
(target.parentNode as HTMLButtonElement)?.getAttribute(
71+
'data-uuid',
72+
) || '',
73+
),
74+
);
75+
}
76+
} else {
77+
if (props.BigButton === 'Code') {
78+
dispatch(
79+
codeCommitNameChanged(
80+
(
81+
target.parentNode?.parentNode as HTMLButtonElement
82+
)?.getAttribute('data-name') || '',
83+
),
84+
);
85+
dispatch(
86+
codeCommitIDChanged(
87+
(
88+
target.parentNode?.parentNode as HTMLButtonElement
89+
)?.getAttribute('data-uuid') || '',
90+
),
91+
);
92+
} else {
93+
dispatch(
94+
mapCommitNameChanged(
95+
(
96+
target.parentNode?.parentNode as HTMLButtonElement
97+
)?.getAttribute('data-name') || '',
98+
),
99+
);
100+
dispatch(
101+
mapCommitIDChanged(
102+
(
103+
target.parentNode?.parentNode as HTMLButtonElement
104+
)?.getAttribute('data-uuid') || '',
105+
),
106+
);
107+
}
108+
}
109+
} else {
110+
if (props.BigButton === 'Code') {
111+
dispatch(codeCommitNameChanged(target.getAttribute('data-name') || ''));
112+
dispatch(codeCommitIDChanged(target.getAttribute('data-uuid') || ''));
113+
} else {
114+
dispatch(mapCommitNameChanged(target.getAttribute('data-name') || ''));
115+
dispatch(mapCommitIDChanged(target.getAttribute('data-uuid') || ''));
116+
}
117+
}
118+
119+
dispatch(isSelfMatchModalOpened(true));
120+
}
23121
const parseTimeFormat = (machineTime: string) => {
24122
const commitTimestamp = new Date(machineTime);
25123
const datePart = commitTimestamp.toDateString().substring(4, 10);
@@ -30,37 +128,49 @@ export default function CommitHistory(props: PropsType): JSX.Element {
30128
return (
31129
<div>
32130
{props.commitHistoryDetails && props.commitHistoryDetails.length > 0 ? (
33-
<VerticalTimeline layout={'1-column'} animate={true}>
34-
{props.commitHistoryDetails.map((eachCommit, index) => {
35-
return (
36-
<VerticalTimelineElement
37-
key={eachCommit.id.toString()}
38-
className="vertical-timeline-element--work"
39-
contentStyle={{ background: '#242a3c', color: '#fff' }}
40-
contentArrowStyle={{
41-
borderRight: '7px solid rgb(33, 150, 243)',
42-
}}
43-
date={parseTimeFormat(eachCommit.createdAt.toString())}
44-
iconStyle={
45-
commitNumber == eachCommit.id
46-
? CircleIcon
47-
: { background: 'rgb(33, 150, 243)', color: '#fff' }
48-
}
49-
onTimelineElementClick={() => {
50-
setCommitNumber(eachCommit.id);
51-
props.commitID(eachCommit.id);
52-
}}
131+
props.commitHistoryDetails.map((eachCommit, index) => {
132+
return (
133+
<VerticalTimelineElement
134+
key={eachCommit.id.toString()}
135+
className="vertical-timeline-element--work"
136+
contentStyle={{ background: '#242a3c', color: '#fff' }}
137+
contentArrowStyle={{
138+
borderRight: '7px solid rgb(33, 150, 243)',
139+
}}
140+
date={parseTimeFormat(eachCommit.createdAt.toString())}
141+
iconStyle={
142+
commitNumber == eachCommit.id
143+
? CircleIcon
144+
: { background: 'rgb(33, 150, 243)', color: '#fff' }
145+
}
146+
onTimelineElementClick={() => {
147+
setCommitNumber(eachCommit.id);
148+
props.commitID(eachCommit.id);
149+
}}
150+
>
151+
<h3 className="vertical-timeline-element-title">
152+
{`Commit - ${index + 1}`}
153+
</h3>
154+
<h6 className="vertical-timeline-element-subtitle">
155+
{eachCommit.message}
156+
</h6>
157+
<div
158+
className="vertical-timeline-element-subtitle flex d-flex justify-content-end"
159+
onClick={e => handleCommitSelect(e)}
53160
>
54-
<h3 className="vertical-timeline-element-title">
55-
{`Commit - ${index + 1}`}
56-
</h3>
57-
<h6 className="vertical-timeline-element-subtitle">
58-
{eachCommit.message}
59-
</h6>
60-
</VerticalTimelineElement>
61-
);
62-
})}
63-
</VerticalTimeline>
161+
<button
162+
className={styles.selectBtn}
163+
data-name={eachCommit.message}
164+
data-uuid={eachCommit.id}
165+
>
166+
{' '}
167+
<FontAwesomeIcon icon={faCheckCircle as IconProp} />{' '}
168+
<b>Select</b>{' '}
169+
</button>
170+
</div>
171+
</VerticalTimelineElement>
172+
);
173+
})
64174
) : (
65175
<h1 className="noCommitStyle">No Commits available</h1>
66176
)}

‎src/components/CommitHistory/HistoryMain/History.module.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,29 @@
129129
color: #ffffff;
130130
}
131131

132+
.selectBtnWrap{
133+
display: flex;
134+
flex-direction: row;
135+
justify-content: end;
136+
}
137+
138+
.selectBtn{
139+
font-family: 'Montserrat', sans-serif;
140+
font-size: 13px;
141+
width: 70px;
142+
margin-top: 8px;
143+
margin-right: 5px;
144+
padding: 0;
145+
height: 4vh;
146+
background: #4595CF !important;
147+
outline: none !important;
148+
border-color: #4595CF;
149+
border-radius: 0px;
150+
}
151+
152+
.selectBtn:hover{
153+
border-color: white;
154+
}
132155
.codeBox, .mapBox {
133156
-ms-overflow-style: none;
134157
scrollbar-width: none;

‎src/components/CommitHistory/HistoryMain/History.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,11 @@ export default function History(): JSX.Element {
8686
<CommitHistory
8787
commitID={commitID}
8888
commitHistoryDetails={
89-
BigButton == 'Code' ? completeCodeHistroy : completeMapHistory
89+
BigButton === 'Code'
90+
? completeCodeHistroy
91+
: completeMapHistory
9092
}
93+
BigButton={BigButton}
9194
/>
9295
) : (
9396
<h1 className={styles.noCommitDataHeader}>Loading...</h1>
@@ -100,7 +103,7 @@ export default function History(): JSX.Element {
100103
<ButtonGroup>
101104
<Button
102105
className={
103-
BigButton == 'Code' ? styles.largeButton : styles.smallButton
106+
BigButton === 'Code' ? styles.largeButton : styles.smallButton
104107
}
105108
onClick={() => {
106109
setBigButton('Code');
@@ -110,7 +113,7 @@ export default function History(): JSX.Element {
110113
</Button>
111114
<Button
112115
className={
113-
BigButton == 'Map' ? styles.largeButton : styles.smallButton
116+
BigButton === 'Map' ? styles.largeButton : styles.smallButton
114117
}
115118
onClick={() => {
116119
setBigButton('Map');

0 commit comments

Comments
 (0)