merdan
/
turkmen-tv-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quiz temporarely backed up

This commit is contained in:
Kakabay 2024-09-10 17:35:21 +05:00
parent 9ac1b7e135
commit 6983d0df96
4 changed files with 119 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/(main)/quiz/[quiz_id]/page.tsx
View File

@ -125,15 +125,14 @@ const page = ({ params }: IParams) => {
<div className="flex flex-col md:gap-[160px] gap-[80px]"> <div className="flex flex-col md:gap-[160px] gap-[80px]">
{data?.data ? ( {data?.data ? (
<QuizQuestionList <QuizQuestionList
dynamic paramsId={params.quiz_id}
id={params.quiz_id}
initialQuestionsData={data} initialQuestionsData={data}
setQuizFinished={setQuizFinished} setQuizFinished={setQuizFinished}
quizFinished={quizFinished} quizFinished={quizFinished}
/> />
) : null} ) : null}
{data?.data.id && ( {data?.data.id && quizFinished && (
<QuizWinnerTable <QuizWinnerTable
smsNumber={data.data.sms_number} smsNumber={data.data.sms_number}
quizId={data?.data.id} quizId={data?.data.id}

3
app/(main)/quiz/active/page.tsx
View File

@ -87,7 +87,6 @@ const page = () => {
<div className="flex flex-col md:gap-[160px] gap-[80px]"> <div className="flex flex-col md:gap-[160px] gap-[80px]">
{data?.data ? ( {data?.data ? (
<QuizQuestionList <QuizQuestionList
id="active"
initialQuestionsData={data} initialQuestionsData={data}
setQuizFinished={setQuizFinished} setQuizFinished={setQuizFinished}
quizFinished={quizFinished} quizFinished={quizFinished}
@ -97,7 +96,7 @@ const page = () => {
{/* {data?.data.id && quizFinished ? ( {/* {data?.data.id && quizFinished ? (
<QuizWinnerTable quizId={data?.data.id} quizFinished={quizFinished} /> <QuizWinnerTable quizId={data?.data.id} quizFinished={quizFinished} />
) : null} */} ) : null} */}
{data?.data.id && ( {data?.data.id && quizFinished && (
<QuizWinnerTable <QuizWinnerTable
smsNumber={data.data.sms_number} smsNumber={data.data.sms_number}
quizId={data?.data.id} quizId={data?.data.id}

104
components/quiz/QuizQuestionList.tsx
View File

@ -10,44 +10,19 @@ interface IProps {
setQuizFinished: Dispatch<boolean>; setQuizFinished: Dispatch<boolean>;
quizFinished: boolean; quizFinished: boolean;
initialQuestionsData: IQuizQuestions; initialQuestionsData: IQuizQuestions;
id: string; paramsId?: string;
dynamic?: boolean;
} }
const QuizQuestionList = ({ const QuizQuestionList = ({
setQuizFinished, setQuizFinished,
quizFinished, quizFinished,
initialQuestionsData, initialQuestionsData,
id, paramsId,
dynamic,
}: IProps) => { }: IProps) => {
const [data, setData] = useState<IQuizQuestions>(initialQuestionsData); const [data, setData] = useState<IQuizQuestions>(initialQuestionsData);
const { quizSearchData } = useContext(QuizContext).quizSearchContext; const { quizSearchData } = useContext(QuizContext).quizSearchContext;
const { setQuestionsData } = useContext(QuizContext).quizQuestionsContext; 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(() => { useEffect(() => {
// Queries.getQuizQuestions().then((res) => setData(res)); // Queries.getQuizQuestions().then((res) => setData(res));
@ -59,34 +34,29 @@ const QuizQuestionList = ({
// : setQuizFinished(true), // : setQuizFinished(true),
// ); // );
if (!dynamic && quizFinished === false) { console.log('quizFinished', quizFinished);
// const interval = setInterval(() => {
// Queries.getQuizQuestions().then((res) => {
// setData(res);
// setQuestionsData(res.data.questions);
// res.data.questions.map((question) => if (paramsId && !quizFinished) {
// question.status === 'active' || question.status === 'new' const interval = setInterval(() => {
// ? setQuizFinished(false) Queries.getQuiz(paramsId).then((res) => {
// : setQuizFinished(true), setData(res);
// ); setQuestionsData(res.data.questions);
// });
// // const isActive = data?.data.questions.some( res.data.questions.map((question) =>
// // (question) => question.status === 'active' || question.status === 'new', question.status === 'active' || question.status === 'new'
// // ); ? setQuizFinished(false)
: setQuizFinished(true),
);
});
}, 60000);
return () => clearInterval(interval);
}
// // data.data.questions.map((question) => if (!paramsId && !quizFinished) {
// // question.status === 'active' || question.status === 'new' const interval = setInterval(() => {
// // ? setQuizFinished(false)
// // : setQuizFinished(true),
// // );
// }, 60000);
// return () => clearInterval(interval);
Queries.getQuizQuestions().then((res) => { Queries.getQuizQuestions().then((res) => {
setData(res); setData(res);
setQuestionsData(res.data.questions); setQuestionsData(res.data.questions);
setSmsNumber(res.data.sms_number);
res.data.questions.map((question) => res.data.questions.map((question) =>
question.status === 'active' || question.status === 'new' question.status === 'active' || question.status === 'new'
@ -94,11 +64,23 @@ const QuizQuestionList = ({
: setQuizFinished(true), : setQuizFinished(true),
); );
}); });
} else {
// const interval = setInterval(() => { // const isActive = data?.data.questions.some(
// Queries.getQuiz(id).then((res) => { // (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); // setData(res);
// setQuestionsData(res.data.questions); // setQuestionsData(res.data.questions);
// setSmsNumber(res.data.sms_number);
// res.data.questions.map((question) => // res.data.questions.map((question) =>
// question.status === 'active' || question.status === 'new' // question.status === 'active' || question.status === 'new'
@ -106,32 +88,18 @@ const QuizQuestionList = ({
// : setQuizFinished(true), // : 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]); }, [quizFinished]);
return ( return (
<div className="flex flex-col gap-[40px] md:gap-[160px]"> <div className="flex flex-col gap-[40px] md:gap-[160px]">
{data && !quizSearchData ? ( {data && !quizSearchData ? (
data.data.questions.map((question, id) => data.data.questions.map((question, paramsId) =>
question.status !== 'new' ? ( question.status !== 'new' ? (
<QuizQuestion <QuizQuestion
score={question.score} score={question.score}
questionId={question.id} questionId={question.id}
questionNumber={id} questionNumber={paramsId}
finished={question.status} finished={question.status}
question={question.question} question={question.question}
key={v4()} key={v4()}

131
components/quiz/QuizWinnerTable.tsx
View File

@ -52,85 +52,84 @@ const QuizWinnerTable = ({ quizId, quizFinished, smsNumber }: IProps) => {
useEffect(() => { useEffect(() => {
Queries.getQuizWinners(quizId).then((res) => { Queries.getQuizWinners(quizId).then((res) => {
setWinnersData(res); setWinnersData(res);
console.log(res);
}); });
}, [quizId]); }, [quizId]);
useEffect(() => { // useEffect(() => {
let socket: WebSocket | null = null; // let socket: WebSocket | null = null;
let reconnectTimeout: NodeJS.Timeout | null = null; // let reconnectTimeout: NodeJS.Timeout | null = null;
let pingInterval: NodeJS.Timeout | null = null; // let pingInterval: NodeJS.Timeout | null = null;
const connectWebSocket = () => { // const connectWebSocket = () => {
try { // try {
socket = new WebSocket(`wss://sms.turkmentv.gov.tm/ws/quiz?dst=${smsNumber}`); // socket = new WebSocket(`wss://sms.turkmentv.gov.tm/ws/quiz?dst=${smsNumber}`);
setSocket(socket); // setSocket(socket);
socket.onopen = () => { // socket.onopen = () => {
console.log('WebSocket is connected'); // console.log('WebSocket is connected');
setIsConnected(true); // setIsConnected(true);
pingInterval = setInterval(() => { // pingInterval = setInterval(() => {
if (socket?.readyState === WebSocket.OPEN) { // if (socket?.readyState === WebSocket.OPEN) {
try { // try {
socket.send(JSON.stringify({ type: 'ping' })); // socket.send(JSON.stringify({ type: 'ping' }));
} catch (error) { // } catch (error) {
console.error('Error sending ping:', error); // console.error('Error sending ping:', error);
} // }
} // }
}, 25000); // Ping every 25 seconds // }, 25000); // Ping every 25 seconds
}; // };
socket.onmessage = (event) => { // socket.onmessage = (event) => {
try { // try {
console.log('Message received from WebSocket:', event.data); // console.log('Message received from WebSocket:', event.data);
const message = JSON.parse(event.data); // const message = JSON.parse(event.data);
handleOnMessage(message); // handleOnMessage(message);
} catch (error) { // } catch (error) {
console.error('Error processing message:', error); // console.error('Error processing message:', error);
} // }
}; // };
socket.onerror = (error) => { // socket.onerror = (error) => {
console.error('WebSocket error:', error); // console.error('WebSocket error:', error);
}; // };
socket.onclose = () => { // socket.onclose = () => {
console.log('WebSocket is closed'); // console.log('WebSocket is closed');
setIsConnected(false); // setIsConnected(false);
if (pingInterval) { // if (pingInterval) {
clearInterval(pingInterval); // clearInterval(pingInterval);
} // }
if (!reconnectTimeout) { // if (!reconnectTimeout) {
reconnectTimeout = setTimeout(() => { // reconnectTimeout = setTimeout(() => {
console.log('Attempting to reconnect WebSocket...'); // console.log('Attempting to reconnect WebSocket...');
connectWebSocket(); // connectWebSocket();
}, 5000); // Reconnect after 5 seconds // }, 5000); // Reconnect after 5 seconds
} // }
}; // };
} catch (error) { // } catch (error) {
console.error('WebSocket connection error:', error); // console.error('WebSocket connection error:', error);
} // }
}; // };
if (smsNumber && winnersData) { // if (smsNumber && winnersData) {
connectWebSocket(); // connectWebSocket();
} // }
return () => { // return () => {
if (socket) { // if (socket) {
socket.close(); // socket.close();
} // }
if (reconnectTimeout) { // if (reconnectTimeout) {
clearTimeout(reconnectTimeout); // clearTimeout(reconnectTimeout);
} // }
if (pingInterval) { // if (pingInterval) {
clearInterval(pingInterval); // clearInterval(pingInterval);
} // }
}; // };
}, [smsNumber]); // }, [smsNumber]);
// Function to handle incoming WebSocket message and update winnersData // Function to handle incoming WebSocket message and update winnersData
const handleOnMessage = (message: Message) => { const handleOnMessage = (message: Message) => {