ClassroomProvider.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import React, { useState, useEffect, useRef, createContext, useContext } from 'react';
  2. import { useParams } from 'react-router';
  3. import { useClassroom , Role } from './useClassroom.ts';
  4. type ClassroomContextType = ReturnType<typeof useClassroom>;
  5. const ClassroomContext = createContext<ClassroomContextType | null>(null);
  6. export const ClassroomProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
  7. const classroom = useClassroom();
  8. const { id: classId, role: pathRole } = useParams();
  9. useEffect(() => {
  10. // 解析URL参数中的classId
  11. const params = new URLSearchParams(window.location.search);
  12. const queryClassId = params.get('classId');
  13. const finalClassId = classId || queryClassId;
  14. if (finalClassId) {
  15. classroom.setClassId(finalClassId);
  16. }
  17. if (pathRole && ['teacher', 'student'].includes(pathRole)) {
  18. classroom.setRole(pathRole === 'teacher' ? Role.Teacher : Role.Student);
  19. } else if (queryClassId) {
  20. classroom.setRole(Role.Student);
  21. }
  22. }, [classId, pathRole]);
  23. return (
  24. <ClassroomContext.Provider value={classroom}>
  25. {children}
  26. </ClassroomContext.Provider>
  27. );
  28. };
  29. export const useClassroomContext = () => {
  30. const context = useContext(ClassroomContext);
  31. if (!context) {
  32. throw new Error('useClassroomContext must be used within a ClassroomProvider');
  33. }
  34. return context;
  35. };