Skip to content

Commit a0d4d02

Browse files
bensohhbensohh
committed
Reduce time before joining, set localstorage variables
1 parent 84ada41 commit a0d4d02

File tree

2 files changed

+194
-154
lines changed

2 files changed

+194
-154
lines changed

‎apps/frontend/src/app/matching/MatchingModal.tsx‎

Lines changed: 137 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,148 @@
1-
import React, { useState, useEffect } from 'react';
2-
import {
3-
Modal,
4-
} from 'antd';
5-
import 'typeface-montserrat';
6-
import './styles.scss';
7-
import FindMatchContent from './modalContent/FindMatchContent';
8-
import MatchingInProgressContent from './modalContent/MatchingInProgressContent';
9-
import MatchFoundContent from './modalContent/MatchFoundContent';
10-
import JoinedMatchContent from './modalContent/JoinedMatchContent';
11-
import MatchNotFoundContent from './modalContent/MatchNotFoundContent';
12-
import MatchCancelledContent from './modalContent/MatchCancelledContent';
13-
import useMatching from '../services/use-matching';
1+
import React, { useState, useEffect } from "react";
2+
import { Modal } from "antd";
3+
import "typeface-montserrat";
4+
import "./styles.scss";
5+
import FindMatchContent from "./modalContent/FindMatchContent";
6+
import MatchingInProgressContent from "./modalContent/MatchingInProgressContent";
7+
import MatchFoundContent from "./modalContent/MatchFoundContent";
8+
import JoinedMatchContent from "./modalContent/JoinedMatchContent";
9+
import MatchNotFoundContent from "./modalContent/MatchNotFoundContent";
10+
import MatchCancelledContent from "./modalContent/MatchCancelledContent";
11+
import useMatching from "../services/use-matching";
12+
import { useRouter } from "next/navigation";
1413

1514
interface MatchingModalProps {
16-
isOpen: boolean;
17-
close: () => void;
15+
isOpen: boolean;
16+
close: () => void;
1817
}
1918

20-
const MatchingModal: React.FC<MatchingModalProps> = ({ isOpen, close: _close }) => {
21-
const matchingState = useMatching();
22-
const [closedType, setClosedType] = useState<"finding" | "cancelled" | "joined">("finding");
23-
const [timeoutAfter, setTimeoutAfter] = useState<number>(9999);
24-
const isClosable = ["timeout", "closed"].includes(matchingState.state);
19+
const MatchingModal: React.FC<MatchingModalProps> = ({
20+
isOpen,
21+
close: _close,
22+
}) => {
23+
const router = useRouter();
24+
const matchingState = useMatching();
25+
const [closedType, setClosedType] = useState<
26+
"finding" | "cancelled" | "joined"
27+
>("finding");
28+
const [timeoutAfter, setTimeoutAfter] = useState<number>(9999);
29+
const isClosable = ["timeout", "closed"].includes(matchingState.state);
2530

26-
function close() {
27-
// clean up matching and closedType State
28-
if (matchingState.state === "timeout") {
29-
matchingState.ok();
30-
}
31-
setClosedType("finding");
32-
_close();
31+
function close() {
32+
// clean up matching and closedType State
33+
if (matchingState.state === "timeout") {
34+
matchingState.ok();
3335
}
36+
setClosedType("finding");
37+
_close();
38+
}
3439

35-
const renderModalContent = () => {
36-
switch (matchingState.state) {
37-
case 'closed':
38-
switch (closedType) {
39-
case "finding":
40-
return <FindMatchContent beginMatch={matchingState.start}/>;
41-
case "cancelled":
42-
return <MatchCancelledContent
43-
reselect={() => {
44-
setClosedType("finding");
45-
}}
46-
retry={() => {}}
47-
canceledIn={timeoutAfter}
48-
/>;
49-
case "joined":
50-
return <JoinedMatchContent
51-
cancel={() => {
52-
setClosedType("cancelled");
53-
}}
54-
name1={matchingState.info?.myName || ""}
55-
name2={matchingState.info?.partnerName || ""}
56-
/>;
57-
}
58-
case 'matching':
59-
return <MatchingInProgressContent
60-
cancelMatch={(timeoutAfter: number) => {
61-
setClosedType("cancelled");
62-
setTimeoutAfter(timeoutAfter);
63-
matchingState.cancel();
64-
}}
65-
timeout={(timeoutAfter: number) => {
66-
matchingState.timeout()
67-
setTimeoutAfter(timeoutAfter);
68-
}}
69-
/>;
70-
case 'cancelling':
71-
return <MatchingInProgressContent cancelMatch={() => {}} timeout={() => {}}/>;
72-
case 'starting':
73-
return <FindMatchContent beginMatch={() => {}}/>
74-
case 'found':
75-
return <MatchFoundContent
76-
cancel={() => {
77-
matchingState.ok();
78-
setClosedType("cancelled");
79-
}}
80-
join={() => {
81-
matchingState.ok();
82-
setClosedType("joined");
83-
}}
84-
name1={matchingState.info.myName}
85-
name2={matchingState.info.partnerName}
86-
/>
87-
case 'timeout':
88-
return <MatchNotFoundContent reselect={matchingState.ok} retry={() => {}} timedOutIn={10}/>;
89-
default:
90-
throw new Error('Invalid matching state.');
40+
const renderModalContent = () => {
41+
switch (matchingState.state) {
42+
case "closed":
43+
switch (closedType) {
44+
case "finding":
45+
return <FindMatchContent beginMatch={matchingState.start} />;
46+
case "cancelled":
47+
return (
48+
<MatchCancelledContent
49+
reselect={() => {
50+
setClosedType("finding");
51+
}}
52+
retry={() => {}}
53+
canceledIn={timeoutAfter}
54+
/>
55+
);
56+
case "joined":
57+
return (
58+
<JoinedMatchContent
59+
cancel={() => {
60+
setClosedType("cancelled");
61+
}}
62+
name1={matchingState.info?.myName || ""}
63+
name2={matchingState.info?.partnerName || ""}
64+
/>
65+
);
9166
}
92-
};
67+
case "matching":
68+
return (
69+
<MatchingInProgressContent
70+
cancelMatch={(timeoutAfter: number) => {
71+
setClosedType("cancelled");
72+
setTimeoutAfter(timeoutAfter);
73+
matchingState.cancel();
74+
}}
75+
timeout={(timeoutAfter: number) => {
76+
matchingState.timeout();
77+
setTimeoutAfter(timeoutAfter);
78+
}}
79+
/>
80+
);
81+
case "cancelling":
82+
return (
83+
<MatchingInProgressContent
84+
cancelMatch={() => {}}
85+
timeout={() => {}}
86+
/>
87+
);
88+
case "starting":
89+
return <FindMatchContent beginMatch={() => {}} />;
90+
case "found":
91+
return (
92+
<MatchFoundContent
93+
cancel={() => {
94+
matchingState.ok();
95+
setClosedType("cancelled");
96+
}}
97+
join={() => {
98+
matchingState.ok();
99+
setClosedType("joined");
100+
localStorage.setItem("user", matchingState.info.myName);
101+
localStorage.setItem(
102+
"matchedUser",
103+
matchingState.info.partnerName
104+
);
105+
localStorage.setItem("collabId", matchingState.info.matchId);
106+
localStorage.setItem("docRefId", "CV480GUbjk15eWOrWrA0"); // TODO: remove temporary placeholder for quesiton testing
107+
// localStorage.setItem("docRefId", matchingState.info.docRefId); // TODO: Update the response from backend when match_found
93108

94-
return (
95-
<Modal open={isOpen}
96-
onCancel={close}
97-
footer={null}
98-
closable={false}
99-
maskClosable={false}
100-
className="modal"
101-
>
102-
{renderModalContent()}
103-
{isClosable && (
104-
<button className="close-button" onClick={close}>Close</button>
105-
)}
106-
</Modal>
107-
)
108-
}
109+
// Redirect to collaboration page
110+
router.push(`/collaboration/${matchingState.info.matchId}`);
111+
}}
112+
name1={matchingState.info.myName}
113+
name2={matchingState.info.partnerName}
114+
/>
115+
);
116+
case "timeout":
117+
return (
118+
<MatchNotFoundContent
119+
reselect={matchingState.ok}
120+
retry={() => {}}
121+
timedOutIn={10}
122+
/>
123+
);
124+
default:
125+
throw new Error("Invalid matching state.");
126+
}
127+
};
128+
129+
return (
130+
<Modal
131+
open={isOpen}
132+
onCancel={close}
133+
footer={null}
134+
closable={false}
135+
maskClosable={false}
136+
className="modal"
137+
>
138+
{renderModalContent()}
139+
{isClosable && (
140+
<button className="close-button" onClick={close}>
141+
Close
142+
</button>
143+
)}
144+
</Modal>
145+
);
146+
};
109147

110148
export default MatchingModal;

‎apps/frontend/src/app/matching/modalContent/MatchFoundContent.tsx‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,66 @@
1-
import React from 'react';
2-
import { Avatar } from 'antd';
3-
import { UserOutlined } from '@ant-design/icons';
4-
import 'typeface-montserrat';
5-
import './styles.scss';
6-
import { handleCancelMatch, handleJoinMatch } from '../handlers';
7-
import { formatTime } from '@/utils/DateTime';
8-
import { useTimer } from "react-timer-hook"
1+
import React from "react";
2+
import { Avatar } from "antd";
3+
import { UserOutlined } from "@ant-design/icons";
4+
import "typeface-montserrat";
5+
import "./styles.scss";
6+
import { handleCancelMatch, handleJoinMatch } from "../handlers";
7+
import { formatTime } from "@/utils/DateTime";
8+
import { useTimer } from "react-timer-hook";
99

1010
interface Props {
11-
join(): void,
12-
cancel(): void,
13-
name1: string, // user's username
14-
name2: string, // matched user's username
11+
join(): void;
12+
cancel(): void;
13+
name1: string; // user's username
14+
name2: string; // matched user's username
1515
}
1616

1717
const TIMEOUT = 10;
1818

19-
const MatchFoundContent: React.FC<Props> = ({join, cancel, name1: me, name2: you}) => {
20-
const { totalSeconds } = useTimer({
21-
expiryTimestamp: new Date(Date.now() + 10 * 1000),
22-
onExpire: join
23-
});
24-
25-
return (
26-
<div className="matching-found-content">
27-
<div className="matched-profiles">
28-
<div className="avatar-caption-container">
29-
<Avatar size={64} icon={<UserOutlined />} />
30-
<div className="user-caption">{me}</div>
31-
</div>
32-
<svg xmlns="http://www.w3.org/2000/svg"
33-
height="24px"
34-
viewBox="0 -960 960 960"
35-
width="24px"
36-
fill="#e8eaed"
37-
className="bolt-icon"
38-
>
39-
<path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z"/>
40-
</svg>
41-
<div className="avatar-caption-container">
42-
<Avatar size={64} icon={<UserOutlined />} />
43-
<div className="user-caption">{you}</div>
44-
</div>
45-
</div>
46-
<div className="match-status-label">Match Found!</div>
47-
<div className="match-status-message">
48-
Joining in... {formatTime(totalSeconds)}
49-
</div>
50-
<button className="join-match-button"
51-
onClick={join}
52-
>
53-
Join
54-
</button>
55-
<button className="cancel-match-button"
56-
onClick={cancel}
57-
>
58-
Cancel
59-
</button>
19+
const MatchFoundContent: React.FC<Props> = ({
20+
join,
21+
cancel,
22+
name1: me,
23+
name2: you,
24+
}) => {
25+
const { totalSeconds } = useTimer({
26+
expiryTimestamp: new Date(Date.now() + 5 * 1000),
27+
onExpire: join,
28+
});
29+
30+
return (
31+
<div className="matching-found-content">
32+
<div className="matched-profiles">
33+
<div className="avatar-caption-container">
34+
<Avatar size={64} icon={<UserOutlined />} />
35+
<div className="user-caption">{me}</div>
6036
</div>
61-
)
62-
}
37+
<svg
38+
xmlns="http://www.w3.org/2000/svg"
39+
height="24px"
40+
viewBox="0 -960 960 960"
41+
width="24px"
42+
fill="#e8eaed"
43+
className="bolt-icon"
44+
>
45+
<path d="m422-232 207-248H469l29-227-185 267h139l-30 208ZM320-80l40-280H160l360-520h80l-40 320h240L400-80h-80Zm151-390Z" />
46+
</svg>
47+
<div className="avatar-caption-container">
48+
<Avatar size={64} icon={<UserOutlined />} />
49+
<div className="user-caption">{you}</div>
50+
</div>
51+
</div>
52+
<div className="match-status-label">Match Found!</div>
53+
<div className="match-status-message">
54+
Joining in... {formatTime(totalSeconds)}
55+
</div>
56+
<button className="join-match-button" onClick={join}>
57+
Join
58+
</button>
59+
<button className="cancel-match-button" onClick={cancel}>
60+
Cancel
61+
</button>
62+
</div>
63+
);
64+
};
6365

6466
export default MatchFoundContent;

0 commit comments

Comments
 (0)