Overnap

Word 컴포넌트 추가

1 +import React, { useCallback, useContext } from 'react';
2 +import { IndexType } from 'typescript';
3 +import SocketContext from '../../contexts/SocketContext';
4 +import { MessageResponse, MessageType, RawMessage } from '../common/types';
5 +
6 +interface WordProps {
7 + index: number;
8 + word: string;
9 + setWordChosen: (value: React.SetStateAction<string>) => void;
10 + setWords: (value: React.SetStateAction<string[]>) => void;
11 +}
12 +
13 +export const Word: React.FC<WordProps> = (props) => {
14 + const socket = useContext(SocketContext);
15 +
16 + const handleChoose = useCallback(() => {
17 + const rawMessage: RawMessage = {
18 + type: MessageType.GAME_CHOOSE,
19 + message: { word: props.word }
20 + };
21 + socket.emit('msg', rawMessage, (response: MessageResponse<undefined>) => {
22 + if (response.ok) {
23 + props.setWords([]);
24 + props.setWordChosen(props.word);
25 + }
26 + });
27 + }, [props.setWordChosen]);
28 +
29 + return (
30 + <button className={`bg-green-500 active:bg-green-600 fixed
31 + text-white font-bold ${'mt-' + 40*(props.index+1)} mt-40
32 + px-5 py-2 rounded shadow
33 + outline-none focus:outline-none hover:shadow-md
34 + ease-linear transition-all duration-100`}
35 + type="button"
36 + onClick={() => handleChoose()}>{props.word}</button>
37 + );
38 +}