quiz temporarely backed up
This commit is contained in:
Kakabay
parent
9ac1b7e135
commit
6983d0df96
|
|
@ -125,15 +125,14 @@ const page = ({ params }: IParams) => {
|
|||
<div className="flex flex-col md:gap-[160px] gap-[80px]">
|
||||
{data?.data ? (
|
||||
<QuizQuestionList
|
||||
dynamic
|
||||
id={params.quiz_id}
|
||||
paramsId={params.quiz_id}
|
||||
initialQuestionsData={data}
|
||||
setQuizFinished={setQuizFinished}
|
||||
quizFinished={quizFinished}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{data?.data.id && (
|
||||
{data?.data.id && quizFinished && (
|
||||
<QuizWinnerTable
|
||||
smsNumber={data.data.sms_number}
|
||||
quizId={data?.data.id}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ const page = () => {
|
|||
<div className="flex flex-col md:gap-[160px] gap-[80px]">
|
||||
{data?.data ? (
|
||||
<QuizQuestionList
|
||||
id="active"
|
||||
initialQuestionsData={data}
|
||||
setQuizFinished={setQuizFinished}
|
||||
quizFinished={quizFinished}
|
||||
|
|
@ -97,7 +96,7 @@ const page = () => {
|
|||
{/* {data?.data.id && quizFinished ? (
|
||||
<QuizWinnerTable quizId={data?.data.id} quizFinished={quizFinished} />
|
||||
) : null} */}
|
||||
{data?.data.id && (
|
||||
{data?.data.id && quizFinished && (
|
||||
<QuizWinnerTable
|
||||
smsNumber={data.data.sms_number}
|
||||
quizId={data?.data.id}
|
||||
|
|
|
|||
|
|
@ -10,44 +10,19 @@ interface IProps {
|
|||
setQuizFinished: Dispatch<boolean>;
|
||||
quizFinished: boolean;
|
||||
initialQuestionsData: IQuizQuestions;
|
||||
id: string;
|
||||
dynamic?: boolean;
|
||||
paramsId?: string;
|
||||
}
|
||||
|
||||
const QuizQuestionList = ({
|
||||
setQuizFinished,
|
||||
quizFinished,
|
||||
initialQuestionsData,
|
||||
id,
|
||||
dynamic,
|
||||
paramsId,
|
||||
}: IProps) => {
|
||||
const [data, setData] = useState<IQuizQuestions>(initialQuestionsData);
|
||||
const { quizSearchData } = useContext(QuizContext).quizSearchContext;
|
||||
const { setQuestionsData } = useContext(QuizContext).quizQuestionsContext;
|
||||
|
||||
const [smsNumber, setSmsNumber] = useState<string>();
|
||||
const [socket, setSocket] = useState<WebSocket | null>(null);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
|
||||
// useEffect(() => {
|
||||
// Queries.getQuizQuestions().then((res) => setData(res));
|
||||
// data?.data.questions.map((question) =>
|
||||
// question.status === 'active' ? setQuizFinished(false) : setQuizFinished(true),
|
||||
// );
|
||||
|
||||
// if (quizFinished === true) {
|
||||
// const interval = setInterval(() => {
|
||||
// Queries.getQuizQuestions().then((res) => {
|
||||
// setData(res);
|
||||
// });
|
||||
// data?.data.questions.map((question) =>
|
||||
// question.status === 'active' ? setQuizFinished(false) : setQuizFinished(true),
|
||||
// );
|
||||
// }, 15000);
|
||||
// return () => clearInterval(interval);
|
||||
// }
|
||||
// }, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Queries.getQuizQuestions().then((res) => setData(res));
|
||||
|
||||
|
|
@ -59,34 +34,29 @@ const QuizQuestionList = ({
|
|||
// : setQuizFinished(true),
|
||||
// );
|
||||
|
||||
if (!dynamic && quizFinished === false) {
|
||||
// const interval = setInterval(() => {
|
||||
// Queries.getQuizQuestions().then((res) => {
|
||||
// setData(res);
|
||||
// setQuestionsData(res.data.questions);
|
||||
console.log('quizFinished', quizFinished);
|
||||
|
||||
// res.data.questions.map((question) =>
|
||||
// question.status === 'active' || question.status === 'new'
|
||||
// ? setQuizFinished(false)
|
||||
// : setQuizFinished(true),
|
||||
// );
|
||||
// });
|
||||
if (paramsId && !quizFinished) {
|
||||
const interval = setInterval(() => {
|
||||
Queries.getQuiz(paramsId).then((res) => {
|
||||
setData(res);
|
||||
setQuestionsData(res.data.questions);
|
||||
|
||||
// // const isActive = data?.data.questions.some(
|
||||
// // (question) => question.status === 'active' || question.status === 'new',
|
||||
// // );
|
||||
res.data.questions.map((question) =>
|
||||
question.status === 'active' || question.status === 'new'
|
||||
? setQuizFinished(false)
|
||||
: setQuizFinished(true),
|
||||
);
|
||||
});
|
||||
}, 60000);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
|
||||
// // data.data.questions.map((question) =>
|
||||
// // question.status === 'active' || question.status === 'new'
|
||||
// // ? setQuizFinished(false)
|
||||
// // : setQuizFinished(true),
|
||||
// // );
|
||||
// }, 60000);
|
||||
// return () => clearInterval(interval);
|
||||
if (!paramsId && !quizFinished) {
|
||||
const interval = setInterval(() => {
|
||||
Queries.getQuizQuestions().then((res) => {
|
||||
setData(res);
|
||||
setQuestionsData(res.data.questions);
|
||||
setSmsNumber(res.data.sms_number);
|
||||
|
||||
res.data.questions.map((question) =>
|
||||
question.status === 'active' || question.status === 'new'
|
||||
|
|
@ -94,11 +64,23 @@ const QuizQuestionList = ({
|
|||
: setQuizFinished(true),
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// const interval = setInterval(() => {
|
||||
// Queries.getQuiz(id).then((res) => {
|
||||
|
||||
// const isActive = data?.data.questions.some(
|
||||
// (question) => question.status === 'active' || question.status === 'new',
|
||||
// );
|
||||
|
||||
// data.data.questions.map((question) =>
|
||||
// question.status === 'active' || question.status === 'new'
|
||||
// ? setQuizFinished(false)
|
||||
// : setQuizFinished(true),
|
||||
// );
|
||||
}, 60000);
|
||||
return () => clearInterval(interval);
|
||||
|
||||
// Queries.getQuizQuestions().then((res) => {
|
||||
// setData(res);
|
||||
// setQuestionsData(res.data.questions);
|
||||
// setSmsNumber(res.data.sms_number);
|
||||
|
||||
// res.data.questions.map((question) =>
|
||||
// question.status === 'active' || question.status === 'new'
|
||||
|
|
@ -106,32 +88,18 @@ const QuizQuestionList = ({
|
|||
// : setQuizFinished(true),
|
||||
// );
|
||||
// });
|
||||
// }, 60000);
|
||||
// return () => clearInterval(interval);
|
||||
|
||||
Queries.getQuiz(id).then((res) => {
|
||||
setData(res);
|
||||
setQuestionsData(res.data.questions);
|
||||
setSmsNumber(res.data.sms_number);
|
||||
|
||||
res.data.questions.map((question) =>
|
||||
question.status === 'active' || question.status === 'new'
|
||||
? setQuizFinished(false)
|
||||
: setQuizFinished(true),
|
||||
);
|
||||
});
|
||||
}
|
||||
}, [quizFinished]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[40px] md:gap-[160px]">
|
||||
{data && !quizSearchData ? (
|
||||
data.data.questions.map((question, id) =>
|
||||
data.data.questions.map((question, paramsId) =>
|
||||
question.status !== 'new' ? (
|
||||
<QuizQuestion
|
||||
score={question.score}
|
||||
questionId={question.id}
|
||||
questionNumber={id}
|
||||
questionNumber={paramsId}
|
||||
finished={question.status}
|
||||
question={question.question}
|
||||
key={v4()}
|
||||
|
|
|
|||
|
|
@ -52,85 +52,84 @@ const QuizWinnerTable = ({ quizId, quizFinished, smsNumber }: IProps) => {
|
|||
useEffect(() => {
|
||||
Queries.getQuizWinners(quizId).then((res) => {
|
||||
setWinnersData(res);
|
||||
console.log(res);
|
||||
});
|
||||
}, [quizId]);
|
||||
|
||||
useEffect(() => {
|
||||
let socket: WebSocket | null = null;
|
||||
let reconnectTimeout: NodeJS.Timeout | null = null;
|
||||
let pingInterval: NodeJS.Timeout | null = null;
|
||||
// useEffect(() => {
|
||||
// let socket: WebSocket | null = null;
|
||||
// let reconnectTimeout: NodeJS.Timeout | null = null;
|
||||
// let pingInterval: NodeJS.Timeout | null = null;
|
||||
|
||||
const connectWebSocket = () => {
|
||||
try {
|
||||
socket = new WebSocket(`wss://sms.turkmentv.gov.tm/ws/quiz?dst=${smsNumber}`);
|
||||
setSocket(socket);
|
||||
// const connectWebSocket = () => {
|
||||
// try {
|
||||
// socket = new WebSocket(`wss://sms.turkmentv.gov.tm/ws/quiz?dst=${smsNumber}`);
|
||||
// setSocket(socket);
|
||||
|
||||
socket.onopen = () => {
|
||||
console.log('WebSocket is connected');
|
||||
setIsConnected(true);
|
||||
// socket.onopen = () => {
|
||||
// console.log('WebSocket is connected');
|
||||
// setIsConnected(true);
|
||||
|
||||
pingInterval = setInterval(() => {
|
||||
if (socket?.readyState === WebSocket.OPEN) {
|
||||
try {
|
||||
socket.send(JSON.stringify({ type: 'ping' }));
|
||||
} catch (error) {
|
||||
console.error('Error sending ping:', error);
|
||||
}
|
||||
}
|
||||
}, 25000); // Ping every 25 seconds
|
||||
};
|
||||
// pingInterval = setInterval(() => {
|
||||
// if (socket?.readyState === WebSocket.OPEN) {
|
||||
// try {
|
||||
// socket.send(JSON.stringify({ type: 'ping' }));
|
||||
// } catch (error) {
|
||||
// console.error('Error sending ping:', error);
|
||||
// }
|
||||
// }
|
||||
// }, 25000); // Ping every 25 seconds
|
||||
// };
|
||||
|
||||
socket.onmessage = (event) => {
|
||||
try {
|
||||
console.log('Message received from WebSocket:', event.data);
|
||||
const message = JSON.parse(event.data);
|
||||
handleOnMessage(message);
|
||||
} catch (error) {
|
||||
console.error('Error processing message:', error);
|
||||
}
|
||||
};
|
||||
// socket.onmessage = (event) => {
|
||||
// try {
|
||||
// console.log('Message received from WebSocket:', event.data);
|
||||
// const message = JSON.parse(event.data);
|
||||
// handleOnMessage(message);
|
||||
// } catch (error) {
|
||||
// console.error('Error processing message:', error);
|
||||
// }
|
||||
// };
|
||||
|
||||
socket.onerror = (error) => {
|
||||
console.error('WebSocket error:', error);
|
||||
};
|
||||
// socket.onerror = (error) => {
|
||||
// console.error('WebSocket error:', error);
|
||||
// };
|
||||
|
||||
socket.onclose = () => {
|
||||
console.log('WebSocket is closed');
|
||||
setIsConnected(false);
|
||||
// socket.onclose = () => {
|
||||
// console.log('WebSocket is closed');
|
||||
// setIsConnected(false);
|
||||
|
||||
if (pingInterval) {
|
||||
clearInterval(pingInterval);
|
||||
}
|
||||
// if (pingInterval) {
|
||||
// clearInterval(pingInterval);
|
||||
// }
|
||||
|
||||
if (!reconnectTimeout) {
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
console.log('Attempting to reconnect WebSocket...');
|
||||
connectWebSocket();
|
||||
}, 5000); // Reconnect after 5 seconds
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('WebSocket connection error:', error);
|
||||
}
|
||||
};
|
||||
// if (!reconnectTimeout) {
|
||||
// reconnectTimeout = setTimeout(() => {
|
||||
// console.log('Attempting to reconnect WebSocket...');
|
||||
// connectWebSocket();
|
||||
// }, 5000); // Reconnect after 5 seconds
|
||||
// }
|
||||
// };
|
||||
// } catch (error) {
|
||||
// console.error('WebSocket connection error:', error);
|
||||
// }
|
||||
// };
|
||||
|
||||
if (smsNumber && winnersData) {
|
||||
connectWebSocket();
|
||||
}
|
||||
// if (smsNumber && winnersData) {
|
||||
// connectWebSocket();
|
||||
// }
|
||||
|
||||
return () => {
|
||||
if (socket) {
|
||||
socket.close();
|
||||
}
|
||||
if (reconnectTimeout) {
|
||||
clearTimeout(reconnectTimeout);
|
||||
}
|
||||
if (pingInterval) {
|
||||
clearInterval(pingInterval);
|
||||
}
|
||||
};
|
||||
}, [smsNumber]);
|
||||
// return () => {
|
||||
// if (socket) {
|
||||
// socket.close();
|
||||
// }
|
||||
// if (reconnectTimeout) {
|
||||
// clearTimeout(reconnectTimeout);
|
||||
// }
|
||||
// if (pingInterval) {
|
||||
// clearInterval(pingInterval);
|
||||
// }
|
||||
// };
|
||||
// }, [smsNumber]);
|
||||
|
||||
// Function to handle incoming WebSocket message and update winnersData
|
||||
const handleOnMessage = (message: Message) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue