CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/course/handouts/handout-student-list.tsx
Views: 923
1
/*

2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import { useIntl } from "react-intl";

7
import { redux, useRedux } from "@cocalc/frontend/app-framework";

8
import { useMemo } from "react";

9
import ScrollableList from "@cocalc/frontend/components/scrollable-list";

10
import { trunc_middle } from "@cocalc/util/misc";

11
import type { UserMap } from "../../todo-types";

12
import type { CourseActions } from "../actions";

13
import type {

14
  CourseStore,

15
  HandoutRecord,

16
  SortDescription,

17
  StudentsMap,

18
} from "../store";

19
import * as util from "../util";

20
import { StudentHandoutInfoHeader } from "./handout-info-header";

21
import { StudentHandoutInfo } from "./handouts-info-panel";

22


23
interface StudentListForHandoutProps {

24
  frame_id?: string;

25
  name: string;

26
  user_map: UserMap;

27
  students: StudentsMap;

28
  handout: HandoutRecord;

29
  actions: CourseActions;

30
}

31


32
export function StudentListForHandout({

33
  frame_id,

34
  name,

35
  user_map,

36
  students,

37
  handout,

38
  actions,

39
}: StudentListForHandoutProps) {

40
  const intl = useIntl();

41
  const active_student_sort: SortDescription = useRedux(

42
    name,

43
    "active_student_sort",

44
  );

45
  const student_list = useMemo(() => {

46
    const v0 = util.parse_students(students, user_map, redux, intl);

47


48
    // Remove deleted students

49
    const v1: any[] = [];

50
    for (const x of v0) {

51
      if (!x.deleted) {

52
        v1.push(x);

53
      }

54
    }

55
    v1.sort(util.pick_student_sorter(active_student_sort.toJS()));

56
    const student_list: string[] = v1.map((x) => x.student_id);

57
    return student_list;

58
  }, [students, user_map, active_student_sort]);

59


60
  function get_store(): CourseStore {

61
    const store = redux.getStore(name);

62
    if (store == null) throw Error("store must be defined");

63
    return store as unknown as CourseStore;

64
  }

65


66
  function render_students() {

67
    return (

68
      <ScrollableList

69
        virtualize

70
        rowCount={student_list.length}

71
        rowRenderer={({ key }) => render_student_info(key)}

72
        rowKey={(index) => student_list[index]}

73
        cacheId={`course-handout-${handout.get("handout_id")}-${

74
          actions.name

75
        }-${frame_id}`}

76
      />

77
    );

78
  }

79


80
  function render_student_info(student_id: string) {

81
    const info = get_store().student_handout_info(

82
      student_id,

83
      handout.get("handout_id"),

84
    );

85
    return (

86
      <StudentHandoutInfo

87
        key={student_id}

88
        actions={actions}

89
        info={info}

90
        title={trunc_middle(get_store().get_student_name(student_id), 40)}

91
      />

92
    );

93
  }

94


95
  return (

96
    <div style={{ height: "70vh", display: "flex", flexDirection: "column" }}>

97
      <StudentHandoutInfoHeader key="header" title="Student" />

98
      {render_students()}

99
    </div>

100
  );

101
}

102


103