antd#Empty JavaScript Examples

PromptList = ({ createPrompt, teamPromptsAndVideos, teamId, fetchTeamVideos, teamMembersEmail}) => {
	const [showModal, setShowModal] = useState(false);
	const { userRole } = useContext(UserContext)

	return (
		<Content className="prompts-list">
			<div className="dashboard-header">
				<h2>Prompts ({teamPromptsAndVideos.length})</h2>
				{userRole === 1 ? null : (
					// <Button
					// 	icon="plus"
					// 	className="adding-button"
					// 	style={{backgroundColor:"#6954EA", color:"white", border:"none"}}
					// 	onClick={() => setShowModal(true)}>
					// 	Add Prompt
					// </Button>
					<PlusOutlined onClick={() => setShowModal(true)} style={{fontSize:"1.6rem", color:"#6954EA"}}/>
				)}
			</div>
			<AddPromptModal
				isVisible={showModal}
				setVisibility={setShowModal}
				createPrompt={createPrompt}
				teamId={teamId}
				teamMembersEmail={teamMembersEmail}
			/>
			{teamPromptsAndVideos.length > 0
			? teamPromptsAndVideos.map((prompt, index) => (<PromptCard key={prompt.id} data={prompt} index={index} />))
			: <Empty />
		}
		</Content>
	);
}

EmptyPlot = ({ mini }) => {
  if (mini) {
    return (
      <Empty
        style={{ width: 102 }}
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description={<></>}
      />
    );
  }

  return (
    <Empty
      description={(
        <>
          <Text type='primary'>
            Nothing to show yet
          </Text>
          <br />
          <Text type='secondary'>
            Results will appear here when they&apos;re available.
          </Text>
        </>
      )}
    />
  );
}

render() {

        return(
            <div>

                <Title style={{paddingLeft: "20px", paddingTop: "40px"}} level={2}><Text code>{this.state.branch}</Text></Title>

                {this.state.loading_cards && <Empty/>}
                {!this.state.loading_cards && <Title style={{paddingLeft: "40px", paddingTop: "40px"}} level={4}><Text code>{"Current Advisories"}</Text></Title>}
                {!this.state.loading_cards && <Release_branch_detail_table data={this.state.advisory_details}/>}
                <br/>
                {!this.state.loading_cards && <Title style={{paddingLeft: "40px", paddingTop: "40px"}} level={4}><Text code>{"Previous Advisories"}</Text></Title>}
                {!this.state.loading_cards && <Release_branch_detail_table data={this.state.advisory_details_previous}/>}
            </div>
        )
    }

function State({ type, width, height }) {
  return (
    <Box width={width} height={height} type={type}>
      {type === "loading" ? (
        <MiddleSpin />
      ) : (
        <MiddleEmpty
          description="暂无数据"
          image={Empty.PRESENTED_IMAGE_SIMPLE}
        />
      )}
    </Box>
  );
}

storiesOf('antd/empty', module).add('customize', () => 
  <Empty
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
    imageStyle={{
      height: 60,
    }}
    description={
      <span>
        Customize <a href="#API">Description</a>
      </span>
    }
  >
    <Button type="primary">Create Now</Button>
  </Empty>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Customize image source, image size, description and extra content.</p></>) } });

function UserVideos({ fetchUserVideos, id, videos, organizations,defaultOrganization,selectedOrganization }) {


	let organization_id = ""

		if (typeof selectedOrganization === "undefined" || typeof defaultOrganization === "undefined") {
			organization_id = "";
		} else {
			organization_id = selectedOrganization.id ? selectedOrganization.id : defaultOrganization.id;
		}


	useEffect(() => {
		fetchUserVideos(id, organization_id)
	}, [id, fetchUserVideos])
	
	useEffect(() => {
		socket.on('insertedFeedback', () => {
			fetchUserVideos(id, organization_id)
		})

	}, [])
	
	return (
		<div className="user-videos-list">
			{videos.length > 0
				? videos.map(video => <UserVideosCard key={video.id} data={video} />)
				: <Empty />
			}
		</div>
	)
}

HomeContainer = () => {
  const [stats, setStats] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchStats = async () => {
      try {
        setLoading(true)
        const response = await API.stats.list()
        setStats(response)
      } catch (error) {
        toast({ status: 'error', content: error })
      } finally {
        setLoading(false)
      }
    }

    fetchStats()
  }, [])

  return (
    <>
      <PageHeading>
        <PageTitle>Popular Courses</PageTitle>
      </PageHeading>

      <Container>
        <StatsContainer>
          <AsideHeader title="Most favourites" loading={loading} />
          <Flex>
            {stats?.courses?.popular?.map((course) => (
              <HomeItem key={course.code} course={course} />
            ))}
          </Flex>
        </StatsContainer>

        <StatsContainer>
          <AsideHeader title="Most resource requests" loading={loading} />
          <Flex>
            {stats?.courses?.requested?.reviews?.map((course) => (
              <HomeItem key={course.code} course={course} hash="reviews" />
            ))}
          </Flex>
        </StatsContainer>

        <StatsContainer>
          <AsideHeader title="Most review requests" loading={loading} />
          <Flex>
            {stats?.courses?.requested?.resources?.map((course) => (
              <HomeItem key={course.code} course={course} hash="resources" />
            ))}
          </Flex>
        </StatsContainer>
      </Container>

      <Aside title="Feed">
        <Empty description={<PageSubtitle>Coming soon!</PageSubtitle>} />
      </Aside>
    </>
  )
}

storiesOf('antd/empty', module).add('simple', () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can choose another style of <code>image</code> by setting image to <code>Empty.PRESENTED_IMAGE_SIMPLE</code>.</p></>) } });

EmptyView = styled(Empty)`
  margin-top: 12em;
`

storiesOf('antd/empty', module).add('basic', () => <Empty />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Simplest Usage.</p></>) } });

MiddleEmpty = styled(Empty)`
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
`

function Carousel({ component: Component, ...props }) {
	const [axis, setAxis] = useState(0);
	const [width, setWidth] = useState(window.innerWidth);
	const carouselList = useRef(null);

	useEffect(() => {
		function handleResize() {
			setWidth(window.innerWidth);
		}

		window.addEventListener("resize", handleResize);

		return function cleanup() {
			window.removeEventListener("resize", handleResize);
		};
	}, [width]);

	const scroll = (direction) => {
		let newAxis;
		const scrollAmount = carouselList.current.scrollWidth / carouselList.current.childElementCount;
		const maxScrollWidth = carouselList.current.scrollWidth - carouselList.current.clientWidth;

		if (axis + direction * scrollAmount > maxScrollWidth) {
			newAxis = maxScrollWidth;
		} else if (axis + direction * scrollAmount < 0) {
			newAxis = 0;
		} else {
			newAxis = axis + direction * scrollAmount;
		}

		carouselList.current.scrollTo({
			top: 0,
			left: newAxis,
			behavior: "smooth",
		});
		setAxis(newAxis);
	};

	return (
		<Content className="carousel">
			<Button
				onClick={() => {
					scroll(-1);
				}}
				disabled={axis === 0 ? true : false}
				className="leftButton">
				<Icon type="left" />
			</Button>
			<div className="carouselItems" ref={carouselList}>
				{props.children}
				{props.data.length > 0 ? props.data.map((item) => <Component key={item.id} data={item} />) : <Empty />}
			</div>
			<Button
				onClick={() => {
					scroll(1);
				}}
				disabled={
					carouselList.current && axis === carouselList.current.scrollWidth - carouselList.current.clientWidth
						? true
						: false
				}
				className="rightButton">
				<Icon type="right" />
			</Button>
		</Content>
	);
}

Competition = () => {

    const location = useLocation()

    const compId = location.pathname.slice(location.pathname.lastIndexOf('/') + 1)

    const setTitle = useStore((state) => state.setTitle)
    const setSubtitle = useStore((state) => state.setSubtitle)

    const [selected, setSelected] = useState({ type: 'class', value: '' });

    const classesQuery = useQuery(['classes', { comp: compId }], getClasses);

    const competitionQuery = useQuery(['competition', { comp: compId }], getCompetitionInfo);

    useSetInfiniteDataStore(compId);

    useEffect(() => {
        if (competitionQuery.data) {
            setTitle(competitionQuery.data.name)
            setSubtitle(competitionQuery.data.date)
        }
    }, [competitionQuery.data, setTitle, setSubtitle])

    useEffect(() => {
        if (!selected.value.length) {
            if (classesQuery.data?.classes) {
                if (classesQuery.data.classes.length) {
                    setSelected({ type: 'class', value: classesQuery.data.classes[0].className })
                }
            }
        }
    }, [classesQuery.data, selected.value.length])

    if (!selected.value.length) {
        return (
          <>
            <div className={'empty-wrapper'}>
              <Empty description='Ještě nebyla načtena žádná data.'/>
            </div>
          </>
        )
    }

    return (
        <>
            <div className={'container'}>
                <div className={'passings'}>
                    {selected !== undefined ?
                        <LastPassings
                            selectedResults={selected}
                            setSelectedResults={setSelected}
                        /> : null}
                </div>
                <div className={'sidebar'}>
                    <ClassPicker
                        classList={classesQuery.data?.classes}
                        selectedResults={selected}
                        setSelectedResults={setSelected}
                    />
                </div>
                <div className={'data'}>
                    {selected !== undefined ?
                        <ResultsTable
                            competitionId={compId}
                            selectedResults={selected}
                            setSelectedResults={setSelected}
                        /> : null}
                </div>
            </div>
        </>
    )
}

render() {
    const { Sider } = Layout;
    const { getMenuTree, collapsed, location, loadingMenuTree } = this.props;
    const { openKeys , theme } = this.state;
    const defaultProps = collapsed ? {} : { openKeys };
    const defaultSelectedKeys = location.pathname;
    return (
        <Sider trigger={null} collapsible collapsed={collapsed} collapsedWidth={collapsed ? 80 : 200} className={theme === 'light' ? 'ant-layout-sider-light' : 'ant-layout-sider-dark'}>
          <div className={theme === 'light' ?`${style.logon} ${style.Shadow}`:`${style.logon}`}>
            <Link to="/home">
              <SvgIcon iconClass='logon' fontSize='30px' />
              <CSSTransition in={!collapsed} classNames="fade" timeout={200} unmountOnExit>
                 <h2>Ant Simple Pro</h2>
               </CSSTransition>
            </Link>
          </div>
          <div className={style.menuContainer}>
            {
              loadingMenuTree ?
                (getMenuTree.length ? (<Menu mode="inline"
                  onOpenChange={this.onOpenChange}
                  defaultSelectedKeys={[defaultSelectedKeys]}
                  selectedKeys={[defaultSelectedKeys]}
                  defaultOpenKeys={openKeys}
                  {...defaultProps}
                  theme={theme}
                  className={style.menu}>
                    {this.rednerMenu(getMenuTree)}
                </Menu>) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={style.empty} />) : <LoadingData />
            }
          </div>
          <div className={style.switchThem}>
            <CSSTransition in={!collapsed} classNames="fade" timeout={200} unmountOnExit>
              <Tooltip placement="leftTop" title='主题'>
                <BulbOutlined />
              </Tooltip>
            </CSSTransition>
            <Switch checkedChildren="dark" unCheckedChildren="light" checked={theme === 'dark'} onChange={this.changeTheme}/>
          </div>
        </Sider>
    );
  }

export default function ListView({
  dataSource,
  onPageCreate,
  onPageDelete,
  onPageSelect,
  onSequenceChange,
  filters,
  showProperties,
  sequence,
  properties,
}) {
  const createEmptyPage = () => {
    onPageCreate({ title: "Untitled" });
  };

  const getProperties = (pageMeta) =>
    properties
      .filter((property) => showProperties.indexOf(property.id) > -1)
      .filter((property) => pageMeta[property.id])
      .map((property) => ({
        Display: getDisplay(property.type),
        property,
        value: pageMeta[property.id],
      }));

  const pages = useMemo(
    () => applySequence(filterPages(dataSource, filters, properties), sequence),
    [dataSource, filters, properties, sequence]
  );

  const updateSequence = ({ startIndex, endIndex }) => {
    const newSequence = pages.map((page) => page.id);

    const droppedPageId = newSequence[startIndex];
    newSequence.splice(startIndex, 1);
    newSequence.splice(endIndex, 0, droppedPageId);

    onSequenceChange(newSequence);
  };

  return (
    <div>
      <SortableList items={pages} onSort={updateSequence}>
        {(page, restProps) => (
          <Card
            // eslint-disable-next-line react/jsx-props-no-spreading
            {...restProps}
            onClick={() => onPageSelect(page.id)}
            title={page.title}
            properties={getProperties(page.meta)}
            onDelete={() => onPageDelete(page.id)}
          />
        )}
      </SortableList>

      {pages.length === 0 ? (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}>
          <Button onClick={createEmptyPage}>Create Now</Button>
        </Empty>
      ) : (
        <CreateBtn onClick={createEmptyPage} type="dashed">
          Create Page
        </CreateBtn>
      )}
    </div>
  );
}

FilterResultTable = (props) => {
  const { tableData } = props;

  const renderTable = () => {
    // loadPlotConfig returns an empty array in case plot data does not exist
    // Meanwhile, this data for this table is an object. So if tableData is an array
    // That means table data does not exist
    if (Array.isArray(tableData)
        || !tableData?.after
        || !tableData?.before
    ) {
      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
    }

    const { before, after } = tableData;

    // Rearrange data to fit table
    const titles = {
      num_cells: 'Estimated number of cells',
      total_genes: 'Total number of genes',
      median_genes: 'Median number of genes per cell',
      median_umis: 'Median UMI counts per cell',
    };

    const percentChanged = (number, total, decimalPoints = 2) => {
      const ratio = Math.round((number / total) * (10 ** decimalPoints)) / (10 ** decimalPoints);
      const percent = ratio * 100;
      const fixedDecimal = percent.toFixed(3);
      return fixedDecimal > 0 ? `+${fixedDecimal}` : `${fixedDecimal}`;
    };

    const dataSource = Object.keys(before).map((key) => ({
      key,
      title: titles[key],
      before: before[key],
      after: after[key],
      percentChanged: percentChanged(after[key] - before[key], before[key], 5),
    }));

    const columns = [
      {
        fixed: 'left',
        title: 'Statistics',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '# before',
        dataIndex: 'before',
        key: 'before',
      },
      {
        title: '# after',
        dataIndex: 'after',
        key: 'after',
      },
      {
        title: '% changed',
        dataIndex: 'percentChanged',
        key: 'percentChanged',
      },
    ];

    return (
      <Table
        bordered
        dataSource={dataSource}
        columns={columns}
        pagination={false}
        size='small'
      />
    );
  };

  return renderTable();
}

function HistoryTab(props) {
  const { history, dispatch, currentAppName, historyLoading, historyPagination } = props;
  let hasMore = false;
  let blank = !(history && history.length);

  if (historyPagination) {
    const { current, total, pageSize } = historyPagination;
    if ((current + 1) * pageSize < total) hasMore = true;
  }

  const loadHistory = (page = 0, pageSize = 20) => {
    dispatch({
      type: 'HttpDebug/loadHistory',
      payload: {
        app_name: currentAppName,
        page_size: pageSize,
        page: page,
      },
    });
  };

  useEffect(() => {
    loadHistory();
  }, [currentAppName]);

  return (
    <ReactScrollBar style={{ height: '730px' }}>
      <List loading={historyLoading} split={false}>
        {(history || []).map((item, idx) => {
          return (
            <List.Item className={styles.historyItem}>
              <RequestItem key={idx} id={item.id} method={item.method} title={item.url} />
            </List.Item>
          );
        })}
      </List>

      {blank && <Empty />}

      {hasMore && (
        <div style={{ textAlign: 'center', padding: '10px' }}>
          <Button
            onClick={() => {
              loadHistory(historyPagination.current + 1);
            }}
          >
            加载更多
          </Button>
        </div>
      )}
    </ReactScrollBar>
  );
}

export function MyAutoComplete({
    style,
    options = [],
    value = '',
    onSelect = () => {},
    onSearch = () => {},
    onChange = () => {},
    placeholder = 'Search for people',
}) {
    return (
        <div style={style}>
            <AutoComplete
                options={options}
                style={{ width: '100%' }}
                onSelect={onSelect}
                onSearch={onSearch}
                filterOption={(inputValue, option) =>
                    option.value
                        .toUpperCase()
                        .indexOf(inputValue.toUpperCase()) !== -1
                }
                notFoundContent={<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
                allowClear={true}
                backfill={true}
                // autoFocus={true}
            >
                <Input
                    value={value}
                    onChange={onChange}
                    placeholder={placeholder}
                    prefix={
                        <SearchOutlined
                            style={{
                                fontSize: 16,
                                color: '#d9d9d9',
                            }}
                        />
                    }
                />
            </AutoComplete>
        </div>
    )
}

HtxDialogView = inject("store")(
  observer(({ store, item }) => {
    if (!store.task || !store.task.dataObj) {
      return <Empty />;
    }

    const result = [];
    let name = item.value;

    if (name.charAt(0) === "$") {
      name = name.substr(1);
    }

    store.task.dataObj[name].forEach((item, ind) => {
      let bgColor;

      if (item.name) {
        bgColor = convertToRGBA(stringToColor(item.name), 0.1);
      }

      result.push(
        <DialogView
          key={ind}
          name={item.name}
          hint={item.hint}
          text={item.text}
          selected={item.selected}
          date={item.date}
          id={item.id}
          bg={bgColor}
        />,
      );
    });

    return (
      <div>
        <div
          style={{
            display: "flex",
            flexFlow: "column",
            maxHeight: "500px",
            overflowY: "scroll",
            paddingRight: "10px",
            marginTop: "10px",
          }}
        >
          {result}
        </div>
        <Divider dashed={true} />
      </div>
    );
  }),
)

IndexView = props => {
  const { dispatch, personalList, publicList, orginzationList } = props;

  useEffect(() => {
    // 首次执行

    dispatch({
      type: 'components/getPersonalComponents',
    });
    dispatch({
      type: 'components/getPublicComponents',
    });
    dispatch({
      type: 'components/getOrginzationComponents',
    });
  }, []);

  const renderList = list => {
    if (list && list.length > 0) {
      return (
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
          {list.map(item => {
            return <MyCard info={item} key={item.id} />;
          })}
        </div>
      );
    } else {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '50vh'
          }}
        >
          <Empty description="暂无组件"/>
        </div>
      );
    }
  };

  return (
    <div className={styles.content}>
      <div className={styles.editRegion}>
        <div className={styles.dragRegion}>
          <Tabs>
            <TabPane tab="个人组件" key="1">
              {renderList(personalList)}
            </TabPane>
            <TabPane tab="公共组件" key="2">
              {renderList(publicList)}
            </TabPane>
            <TabPane tab="组织组件" key="3">
              {renderList(orginzationList)}
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  );
}

render() {
    const { zoneCode, appName, env, url, loading, typ } = this.state;
    const colSpan = {
      xxl: 6,
      xl: 6,
      lg: 6,
      md: 6,
      xs: 6,
    };

    if (!env) {
      return (
        <div style={{ marginTop: 10 }}>
          <Empty description={'请选择环境和可用区'} style={{ padding: '100px' }} />
        </div>
      );
    }

    return (
      <div className={styles.applog} style={{ backgroundColor: '#f7f8fa' }}>
        <div
          style={{
            marginTop: 5,
            height: '100%',
          }}
        >
          <Card
            style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
            bodyStyle={{ height: '100%', flex: 1, display: 'flex', flexDirection: 'column' }}
            title={
              <Row>
                <Col {...colSpan}>
                  <Select
                    showSearch
                    style={{ width: '90%' }}
                    placeholder="选择查询日志类型"
                    optionFilterProp="children"
                    value={typ}
                    onSelect={this.onSelectLogTyp}
                  >
                    <Select.Option key="console" value="console">
                      启动日志
                    </Select.Option>
                    <Select.Option key="biz" value="biz">
                      业务日志
                    </Select.Option>
                    <Select.Option key="jupiter" value="jupiter">
                      框架日志
                    </Select.Option>
                  </Select>
                </Col>

                <Button
                  type="primary"
                  onClick={this.getList}
                  style={{ marginRight: `16px` }}
                  htmlType={`button`}
                >
                  查询
                </Button>
              </Row>
            }
          >
            <Spin style={{ flex: 1 }} spinning={loading}>
              {url && <Pannel url={url} />}
            </Spin>
          </Card>
        </div>
      </div>
    );
  }

render(){
    const { fileList, type } = this.conversionObject();
    const { previewImage, previewVisible } = this.state
    const { restprops, onhandleEdit, onChange } = this.props
    const wh = window.screen.height

    return(
      <Fragment>
        <span>
        { type !== 'video'
          ? fileList.map((item,index) =>
            <BodyRow
              key={index}
              item={item}
              handlePreview={this.handlePreview}
              handleDelete={onChange ? (item) => this.handleDelete(item) : undefined}
              handleEdit={onhandleEdit ? (item) => onhandleEdit(item) : undefined}
              handleItem={(item) => restprops && restprops.onSelectItem(item)}
              className={restprops && restprops.className || undefined}
              isSelect={restprops && restprops.selectList && restprops.selectList.includes(item.url)}
            /> )
          : null
        }
        </span>
        { type !== 'video' && fileList.length === 0 && <Empty /> }
        <Modal
          centered
          destroyOnClose
          zIndex={1010}
          footer={null}
          visible={previewVisible}
          onCancel={this.handleCancel}
          bodyStyle={{maxHeight: `${wh-200}px`, textAlign: 'center', overflowY: 'auto', paddingTop: 56}}>
          { previewImage && ['mp4','mp3'].includes(previewImage.split('.').reverse()[0])
            ? <video src={previewImage}  style={{ maxHeight: `${wh-360}px` }} controls="controls"/>
            : <img alt="example" style={{ width: '100%' }} src={previewImage} />
          }
        </Modal>
      </Fragment>
    )
  }

function History(props) {
  const { current, activeId, onChange, selectedService } = props;
  const [pagination, setPagination] = useState({
    current: 0,
    pageSize: 8,
    total: 0,
  });
  const [historyList, setHistoryList] = useState([]);
  const [loading, setLoading] = useState(false);

  const loadHistory = (page) => {
    setLoading(true);
    loadHistoryList({
      page: page,
      page_size: 8,
      service_id: selectedService[1],
    }).then((r) => {
      setLoading(false);

      if (r.code === 14000) {
        return;
      }
      if (r.code !== 0) {
        message.error(r.msg);
        return;
      }

      setHistoryList(r.data.list);
      setPagination(r.data.pagination);
    });
  };

  useEffect(() => {
    if (selectedService && selectedService[1]) {
      // load history
      loadHistory(current);
    }
  }, [selectedService]);

  if (!historyList) return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;

  return (
    <Spin spinning={loading}>
      <ul className={styles.list}>
        {historyList.map((item, idx) => {
          return (
            <li
              onClick={() => {
                onChange(item.id);
              }}
              className={styles.listItem + (activeId === item.id ? ' ' + styles.activeItem : '')}
              key={idx}
            >
              <div className={styles.listItemBox}>
                <div className={styles.statusIcon}>
                  {item.test_passed ? (
                    <CheckCircleOutlined style={{ color: 'green' }} />
                  ) : (
                    <CloseCircleOutlined style={{ color: 'red' }} />
                  )}
                </div>
                <div className={styles.info}>
                  <div className={styles.methodName}>{item.method_name}</div>
                  <div>Time: {item.time_cost} ms</div>
                  <div>{item.created_at}</div>
                </div>
              </div>
            </li>
          );
        })}
      </ul>

      <Pagination
        simple
        onChange={(page, pageSize) => {
          loadHistory(page - 1);
        }}
        current={pagination.current + 1}
        pageSize={pagination.pageSize}
        total={pagination.total}
      />
    </Spin>
  );
}

ResultsTable = (props) => {

    const { selectedResults, setSelectedResults } = props

    const location = useLocation()

    const compId = location.pathname.slice(location.pathname.lastIndexOf('/') + 1)

    const highlightClub = usePersonalSettings((state) => state.highlightClub)
    const clubList = useDataStore((store) => store.clubList)
    const setClubList = useDataStore((store) => store.setClubList)
    const autoRefetch = usePersonalSettings((state) => state.autoRefetch)
    const refetchInterval = usePersonalSettings((state) => state.refetchInterval)

    const [nameFilter, setNameFilter] = useState('')
    const [clubFilter, setClubFilter] = useState('')

    const { data, isLoading, isError } = useQuery(
        ['class', { comp: compId, type: selectedResults.type, value: selectedResults.value }],
        getResults,
        {
            refetchInterval: autoRefetch ? refetchInterval || 15000 : undefined,
        }
    )

    useEffect(() => {
        if (Array.isArray(data?.results)) {
            const clubs = []
            data.results.forEach((record) => {
                if (!clubList.includes(record.club) && !clubs.includes(record.club)) {
                    clubs.push(record.club)
                }
            });
            if (clubs.length) {
                setClubList([...clubList, ...clubs])
            }
        }
    }, [data, clubList, setClubList])

    if (!selectedResults.value.length) {
        return <Empty />
    }

    if (isLoading) {
        return (
            <Skeleton active title />
        )
    }

    if (isError) {
        return (
            <div>Failed to fetch data</div>
        )
    }

    const columns = [
        {
            title: '#',
            dataIndex: 'place',
            key: '#',
            render: (text) => text,
            width: '35px',
            align: 'center'
        }, {
            title: 'Jméno',
            dataIndex: 'name',
            key: 'name',
            filterDropdown: () => {
                return (
                    <div className='filterWrapper'>
                        <span>Jméno: </span>
                        <FilterInput onChange={(val) => setNameFilter(val)} />
                    </div>
                )
            },
        }
    ]

    if (selectedResults.type === 'class') {
        columns.push({
            title: 'Klub',
            dataIndex: 'club',
            key: 'club',
            filterDropdown: () => {
                return (
                    <div className='filterWrapper'>
                        <span>Klub: </span>
                        <FilterInput onChange={(val) => setClubFilter(val)} />
                    </div>
                )
            },
            render: (text) => {
                return (
                    <button onClick={() => setSelectedResults({ type: 'club', value: text })}>{text}</button>
                )
            }
        })
    } else {
        columns.push({
            title: 'Kat.',
            dataIndex: 'class',
            key: 'class',
            render: (text) => {
                return (
                    <button onClick={() => setSelectedResults({ type: 'class', value: text })}>{text}</button>
                )
            }
        })
    }

    columns.push({
        title: 'Start',
        dataIndex: 'start',
        key: 'start',
        render: (text) => {
            return formatTime(text);
        }
    })

    if (data) {
        if (Array.isArray(data.splitcontrols)) {
            if (data.splitcontrols.length) {
                data.splitcontrols.forEach((obj) => {
                    columns.push({
                        title: obj.name,
                        dataIndex: obj.code,
                        key: obj.code,
                        render: (obj) => {
                            return (
                                formatSplitResult(obj))
                        }
                    })
                })
            }
        }
        columns.push({
            title: 'Cíl',
            dataIndex: 'result',
            key: 'result',
            render: (obj) => {
                return (
                    translateFinishTime(obj)
                )
            }
        })
        columns.push({
            title: 'Ztráta',
            dataIndex: 'timeplus',
            key: 'timeplus',
            render: (obj) => {
                return (
                    translateFinishTime(obj)
                )
            }
        })
    }

    const tableData = {...data}

    if (data?.splitcontrols?.length) {
        tableData.results = data.results.map((obj) => {
            const adjusted = { ...obj };
            data.splitcontrols.forEach((splitControl) => {
                adjusted[splitControl.code] = {
                    time: obj.splits[splitControl.code],
                    place: obj.splits[splitControl.code + '_place'],
                    timeplus: obj.splits[splitControl.code + '_timeplus']
                }
            })
            return adjusted;
        })
    }

    const keyData = tableData.results.map((obj, index) => {
        return { ...obj, key: index }
    })

    const getFilteredData = () => {
        if (Array.isArray(keyData)) {
            let filteredData = [...keyData]
            if (nameFilter.length) {
                filteredData = [...filteredData.filter(obj => obj.name.includes(nameFilter))]
            }
            if (clubFilter.length) {
                filteredData = [...filteredData.filter(obj => obj.club.includes(clubFilter))]
            }
            return filteredData
        }
        else return keyData
    }

    const getRowClassName = (record, index) => {
        const isOdd = (num) => {
            return num % 2
        }

        const classNames = []

        if (isOdd(index)) {
            classNames.push('odd')
        }

        if (highlightClub?.length && record.club?.toLowerCase() === highlightClub.toLowerCase()) {
            classNames.push('highlight')
        }

        return classNames.join(' ')
    }

    return (
        <Table
            columns={columns}
            dataSource={getFilteredData()}
            pagination={false}
            size='small'
            bordered
            rowClassName={(record, index) => getRowClassName(record, index)}
            scroll={{ y: 'calc(100vh - 270px - 2.55rem)', x: true }}
        />
    )
}

render() {
    const {
      modalNewRequestVisible,
      modalNewRequestFolderID,
      rightMenuVisible,
      rightMenuPosition,
      rightMenuItems,
      rightMenuState,
    } = this.state;
    const { collectionsLoading, collections } = this.props;
    const { folderTree } = this.props.model;
    return (
      <div className={styles.CollectionsTab}>
        <div className={styles.optionBar}>
          <Button
            onClick={() => {
              this.showModalCreateCollection(true);
            }}
            type={'link'}
            icon={<FolderAddOutlined />}
            size={'small'}
            title={'New Folder'}
          />
          <Button
            onClick={() => {
              this.showModalCreateTestCase(true);
            }}
            type={'link'}
            icon={<FileAddOutlined />}
            size={'small'}
            title={'New File'}
          />
        </div>

        <Spin spinning={collectionsLoading}>
          {collections && collections.length ? (
            <ReactScrollBar style={{ height: '710px' }}>
              <Tree.DirectoryTree
                onSelect={this.onSelectTreeItem}
                onRightClick={this.onTreeRightClick}
              >
                {(collections || []).map((item) => {
                  return (
                    <Tree.TreeNode
                      key={`collection-${item.id}`}
                      collectionID={item.id}
                      title={item.name}
                    >
                      {(item.test_cases || []).map((testCase) => {
                        return (
                          <Tree.TreeNode
                            key={`testcase-${testCase.id}`}
                            collectionID={item.id}
                            title={testCase.name}
                            isLeaf
                          />
                        );
                      })}
                    </Tree.TreeNode>
                  );
                })}
              </Tree.DirectoryTree>
            </ReactScrollBar>
          ) : (
            <Empty />
          )}
        </Spin>

        <NewCollectionModal />

        <NewTestCaseModal
          visible={modalNewRequestVisible}
          folderTree={folderTree}
          folderID={modalNewRequestFolderID}
          onCancel={() => {
            this.setState({
              modalNewRequestVisible: false,
            });
          }}
        />

        <RightMenu
          visible={rightMenuVisible}
          position={rightMenuPosition}
          menu={rightMenuItems}
          onClick={this.onMenuClick}
          state={rightMenuState}
          onCancel={() => {
            this.setState({
              rightMenuVisible: false,
            });
          }}
        />
      </div>
    );
  }

render(){
        const {studentProfiles} = this.props;
        const rowSelection = {
            onChange: (selectedRowKeys) => {
                this.setState({finalSelected: selectedRowKeys})
            },
            columnTitle: "Select Student"
        };

        const columns = [
            {
                title: "Student Name",
                dataIndex: 'first_name',
                key: "name",
                fixed: 'left',
                align: 'center',
                width: 200,
                render : (text, row) =>
                    text + " " +row.last_name

            },
            {
                title: "CPI",
                dataIndex: 'cpi',
                key: 'cpi',
                align: 'center',
            },
            {
                title: "Year of study",
                dataIndex: 'year_of_study',
                key: 'year_of_study',
                align: 'center',
            },
            {
                title: "Interests",
                dataIndex: 'interests',
                key: 'interests',
                align: 'center',
                width: 300,
                render: interests =>
                    interests.map((tag) => <Tag color='blue' key={tag} style={{margin: 5}}>{tag}</Tag>)
            },
            {
                title: "Skills",
                dataIndex: 'skills',
                key: 'skills',
                align: 'center',
                width: 300,
                render: skills =>
                    skills.map((tag) => <Tag color='blue' key={tag} style={{margin: 5}}>{tag}</Tag>)
            },
            {
                title: "More details",
                dataIndex: '_id',
                key: 'id',
                align: 'center',
                fixed: 'right',
                width: 150,
                render: (id) =>
                    <Button type = 'primary ' onClick = {() => this.handleDetails(id)} size = "large" shape = "circle" icon = "info-circle"></Button>
            },

        ];

        return(
            <div>
                {typeof this.props.studentProfiles  !== 'undefined' ?
                    <Drawer
                        width={'40vw'}
                        placement="right"
                        onClose={this.onClose}
                        visible={this.state.visible}
                    >
                        <Row type="flex" justify="center">
                            <p style={{marginBottom: 24, fontSize: 24}}>Student Profile</p>
                        </Row>
                        <Row type='flex' justify='center'>
                            <Col>
                                <Row type="flex" justify='center' style={{margin: 10}}>
                                    <Avatar src={studentProfiles[this.state.index].avatar_link} size={64}/>
                                </Row>
                                <Row type="flex" justify='center'>
                                    <Typography.Title level={4}>
                                        {studentProfiles[this.state.index].first_name} {studentProfiles[this.state.index].last_name}
                                    </Typography.Title>
                                </Row>
                            </Col>
                        </Row>
                        <Row type='flex' justify='center' style={{textAlign: 'center'}}>
                            <Typography.Text type='secondary'>
                                {commonConstants.yearToTextMap[studentProfiles[this.state.index].year_of_study] + " "}
                                {commonConstants.courseToTextMap[studentProfiles[this.state.index].course_type]}
                                <br/>
                                {commonConstants.branchToTextMap[studentProfiles[this.state.index].branch]}
                            </Typography.Text>
                        </Row>
                        <Divider/>
                        <div
                            style={{
                                margin: "12px",
                                padding: 24,
                                background: "#fff"
                            }}
                        >
                            <DescriptionItem title="CPI" content={studentProfiles[this.state.index].cpi}/>

                            <DescriptionItem title="CV Link" content={<a href={studentProfiles[this.state.index].cv[0].link} target={'_blank'}>Click Here</a>}/>

                            <DescriptionItem title="Skills" content={studentProfiles[this.state.index].skills.map((tag) =>
                                <Tag color='blue' key={tag} style={{margin: 5}}>{tag}</Tag>)}/>

                            <DescriptionItem title="Interests" content={studentProfiles[this.state.index].interests.map((interest) =>
                                <Tag color='blue' key={interest} style={{margin: 5}}>{interest}</Tag>)}/>

                        </div>
                        <Divider/>
                        <div
                            style={{
                                margin: "12px",
                                padding: 24,
                                background: "#fff"
                            }}
                        >
                            <Tabs defaultActivity="1">
                                <TabPane tab="Experience" key="1">
                                    {studentProfiles[this.state.index]["experience"].length > 0 ?
                                        <Experience data={studentProfiles[this.state.index]["experience"]} loading={false}/> :
                                        <Empty description={false}/>
                                    }
                                </TabPane>
                                <TabPane tab="Projects" key="2">
                                    {studentProfiles[this.state.index]["projects"].length > 0 ?
                                        <Project data={studentProfiles[this.state.index]["projects"]} loading={false}/> :
                                        <Empty description={false}/>
                                    }
                                </TabPane>
                            </Tabs>
                        </div>
                    </Drawer> :
                    null
                }
                <Row type='flex' justify='center'>
                    <Col md={23} xs={24} sm={24}>
                        <Table rowSelection={rowSelection} columns={columns} dataSource={this.props.studentProfiles} loading={this.props.loading} rowKey = "email" scroll={{x: 900}} bordered/>
                    </Col>
                </Row>
            </div>
        )
    }

render() {
        return (
            <Layout className="layout-style">


                {this.state.loading && (
                    <div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
                        <Ellipsis color="#177ddc" size={120} ></Ellipsis>
                    </div>
                )}
                {
                    !this.state.targetUser && !this.state.loading && (
                        <div style={{ height: "100%", width: "100%" }}>
                            <br /><br /><br />
                            <Empty
                                image={<FrownOutlined />}
                                imageStyle={{ fontSize: "500%", color: "#177ddc" }}
                                description={<h1>We were unable to find the user "{this.props.match.params.user}"</h1>}
                            />
                        </div>
                    )
                }
                {
                    this.state.targetUser && !this.state.loading && (
                        <Layout style={{ height: "100%", width: "100%", padding: "3%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
                            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                                <div style={{ display: "flex" }}>
                                    <div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
                                        <Avatar style={{ backgroundColor: "transparent", marginRight: "3ch", width: "10ch", height: "10ch" }} size='large' src={"/static/profile/" + this.state.targetUser + ".webp"} />
                                        <h1 style={{ fontSize: "5ch" }}>{this.state.targetUser}</h1>
                                    </div>
                                    <div>
                                        <h1 style={{ fontSize: "5ch", color: "#faad14" }}><span style={{ color: "#d48806", fontSize: "1.5ch" }}><u>Score:</u> </span>{this.state.userScore}</h1>
                                    </div>
                                </div>
                            </div>
                            <Divider />
                            <h1 style={{ fontSize: "3ch" }}>Score History</h1>
                            <div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
                                <ResponsiveContainer width="90%" height={350}>
                                    <AreaChart height={350} data={this.state.graphData}
                                        margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>

                                        <defs>
                                            <linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
                                                <stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
                                                <stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
                                            </linearGradient>
                                        </defs>
                                        <XAxis dataKey="Time">
                                            <Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
                                                Time
                                            </Label>
                                        </XAxis>
                                        <YAxis >
                                            <Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
                                                Score
                                            </Label>
                                        </YAxis>
                                        <CartesianGrid strokeDasharray="3 3" />

                                        <Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
                                        <Area isAnimationActive={false} type="monotone" dataKey="Score" stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
                                    </AreaChart>
                                </ResponsiveContainer>

                            </div>
                            <Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 10 }} locale={{
                                emptyText: (
                                    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                                        <FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
                                        <h1 style={{ fontSize: "200%" }}>{this.state.targetUser} has not completed any challenges/bought any hints</h1>
                                    </div>
                                )
                            }}>
                                <Column width={1} title="Challenge/Hint" dataIndex="challenge" key="challenge"
                                    render={(text, row, index) => {
                                        if (row.challengeID !== "") return <Link to={"/Challenges/" + row.challengeID}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
                                        else return (<span>{text}</span>);
                                    }} />
                                <Column width={30} title="Score Change" dataIndex="score" key="score" />
                                <Column width={30} title="Solved Timestamp" dataIndex="time" key="time" />
                            </Table>
                        </Layout>

                    )
                }
            </Layout>
        )
    }

Estado = regionWithStyle(({ uf, className }) => {
  const dispatch = useDispatch();
  const sectors = useSelector(getSectors);
  const events = useSelector(getEvents);
  const lastCheck = useSelector(getLastCheck);
  const loading = useSelector(createLoadingSelector([LOAD_SECTORS]));
  const selectedSectors = useSelector(getSelectedSectors);
  const regionInfo = useSelector(getRegions(uf));

  const [categoryFilter, setCategoryFilter] = useState(false);
  const currRegion =
    uf && regions.filter(item => item.initial === uf.toUpperCase())[0];

  const handleCategorySearch = ev => {
    const { value } = ev.target;
    setCategoryFilter(value);
  };

  useEffect(() => {
    ReactGA.initialize(process.env.NEXT_PUBLIC_GA_KEY);
    ReactGA.pageview(document.location.pathname);

    dispatch(loadRegions(uf));
    dispatch(
      loadSectors({
        ordering: 'events_count',
        region__initial: currRegion.initial,
        limit: 100
      })
    );

    return function cleanup() {
      dispatch(resetState());
    };
  }, [uf]);

  useEffect(() => {
    if (!sectors.length) return;

    if (!lastCheck) {
      for (let sectorId of Object.keys(selectedSectors).filter(
        key => !!selectedSectors[key]
      )) {
        dispatch(loadEvents(sectorId, currRegion?.initial));
      }
    }

    if (selectedSectors[lastCheck])
      dispatch(loadEvents(lastCheck, currRegion?.initial));
  }, [selectedSectors]);

  const categories = categoryFilter
    ? sectors.filter(item => {
        return normalizeSearch(item.name).includes(
          normalizeSearch(categoryFilter)
        );
      })
    : sectors;

  const categoriesList = categories.filter(item => selectedSectors[item.id]);

  // doesnt reverse array if the
  // category wasnt checked from the ui
  const checkedFromUi = useMemo(() => {
    return !!lastCheck;
  }, [selectedSectors]);
  const filteredCategories = checkedFromUi
    ? categoriesList.reverse()
    : categoriesList;

  const handleSectorCheck = sectorId => ev => {
    dispatch(selectSector(sectorId));
  };

  return (
    <div className={'estado-page ' + className}>
      <Reset />
      <Head>
        <HeadTags region={currRegion} />
        <title>
          Corona Brasil - {currRegion?.name} - Saiba o que está funcionando em
          sua cidade e estado
        </title>
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <RegionProvider region={currRegion}>
        <Header />
        <div className='alert'>
          Você tem alguma informação sobre sua cidade/estado?{' '}
          <a href={EVENTS_FORM} target='__blank'>
            Ajude no combate à pandemia clicando aqui
          </a>
          !
        </div>

        <RegionOverview />

        <article className='description'>
          <div className='title-container'>
            <Title.h1>
              Acontecimentos - {currRegion?.name}
              <Dot type='dark' />
            </Title.h1>
            <SocialSharing message={sharing.whatsapp(currRegion?.name)} />
          </div>

          <div className='contact'>
            {regionInfo?.phone && (
              <div className='phone'>
                <span className='label'>Ouvidoria: </span>
                <a href={`tel:+55${regionInfo?.phone}`}>{regionInfo?.phone}</a>
              </div>
            )}
            <div className='social'>
              {regionInfo?.twitter && (
                <a target='__blank' href={regionInfo?.twitter}>
                  <TwitterOutlined />
                </a>
              )}
              {regionInfo?.instagram && (
                <a target='__blank' href={regionInfo?.instagram}>
                  <InstagramOutlined />
                </a>
              )}
              {regionInfo?.official_site && (
                <a target='__blank' href={regionInfo?.official_site}>
                  <GlobalOutlined />
                </a>
              )}
            </div>
          </div>
          <Text>
            O funcionamento de transportes públicos, bares, restaurantes,
            mercados, farmácias, padarias e outros estabelecimentos está mudando
            a cada semana, em cada estado ou cidade.
            <br /> Confira o que está funcionando no Brasil, até quando e por
            quê.
          </Text>
        </article>

        <section className='events'>
          <div className='events__menu'>
            <List
              header={
                <>
                  <div className='header'>
                    <h2>Categorias</h2>{' '}
                  </div>
                  <div className='search'>
                    <Input
                      prefix={<SearchOutlined />}
                      placeholder='Buscar categoria'
                      onChange={handleCategorySearch}
                    />
                  </div>
                </>
              }
              bordered
              loading={
                loading?.[LOAD_SECTORS]?.phase === 'LOADING' || !sectors.length
              }
            >
              <div className='list-container'>
                {categories.map(item => (
                  <List.Item key={JSON.stringify(item)}>
                    <Checkbox
                      checked={!!selectedSectors?.[item.id]}
                      onChange={handleSectorCheck(item.id)}
                    />
                    <SectorIcon sector={item.id} />

                    <span className='name'>{item.name}</span>
                    <Badge count={item.events_count} />
                  </List.Item>
                ))}
              </div>
            </List>
          </div>
          <div className='events__group'>
            {!filteredCategories.length && (
              <Empty description='Selecione uma categoria.' />
            )}
            {filteredCategories.map(item => (
              <Event
                key={JSON.stringify(item)}
                sector={item.id}
                title={item.name}
              >
                {events?.[item.id] && !events?.[item.id].results.length && (
                  <Empty
                    image={
                      <img width={150} src='/static/icons/loudspeaker.svg' />
                    }
                    description={
                      <div>
                        <p>
                          Ooops, nenhuma informação sobre{' '}
                          <strong>{item.name}</strong> encontrada :/
                        </p>{' '}
                        <a target='__blank' href={EVENTS_FORM}>
                          Você tem alguma informação? Ajude no combate à
                          pandemia clicando aqui!
                        </a>
                      </div>
                    }
                  />
                )}

                {events?.[item.id] &&
                  events?.[item.id].results.map(item => (
                    <Event.Item
                      key={JSON.stringify(item)}
                      event={item}
                      city={item?.city?.name}
                      status={item.status_type}
                      title={item.name}
                      description={item?.text || item?.source?.text}
                    ></Event.Item>
                  ))}
              </Event>
            ))}
          </div>
        </section>
      </RegionProvider>
      <Footer />
    </div>
  );
})

CoursePageContainer = ({ courseData }) => {
  const {
    code,
    title,
    department,
    credits,
    description,
    workload,
    semester,
    favoritedByCount,
    reviews,
    resources,
  } = courseData

  const location = useLocation()
  const navigate = useNavigate()
  const [activeKey, setActiveKey] = useState(null)

  const handleTabChange = (key) => {
    location.hash = key
    navigate(location, { replace: true })
  }

  useEffect(() => {
    setActiveKey(location.hash.split('#')[1] ?? 'reviews')
  }, [location.hash])

  return (
    <>
      <CoursePageBreadcrumbs courseTitle={`${code}: ${title}`} />

      <CoursePageBody>
        <CourseInfo>
          <h1>{code}</h1>
          <FavoriteContainer>
            <FavoriteToggle code={code} initialCount={favoritedByCount} />
          </FavoriteContainer>

          <h2>{title}</h2>
          <h3>
            {department.name} &ensp;&#9679;&ensp; {credits} credits
          </h3>

          <Divider margin="0.25rem 0" />

          <p>{description || 'Not available'}</p>
        </CourseInfo>

        <Divider margin="0.75rem 0" />

        <FlexGap>
          <CourseWorkload workload={workload} />
          <CourseProfessors semester={semester} />
          <TimetableSelector semester={semester} />
        </FlexGap>
      </CoursePageBody>

      <Container>
        <Tabs
          tabheight="2.25rem"
          tabwidth="7.5rem"
          animated
          activeKey={activeKey}
          onChange={handleTabChange}
        >
          <Tabs.TabPane
            key="reviews"
            tab={reviews?.length ? `Reviews (${reviews.length})` : `Reviews`}
          >
            <CourseReviewContainer />
          </Tabs.TabPane>

          <Tabs.TabPane
            key="resources"
            tab={
              resources?.length
                ? `Resources (${resources.length})`
                : `Resources`
            }
          >
            <CourseResourceContainer />
          </Tabs.TabPane>
        </Tabs>
      </Container>

      <Aside title="Course stats">
        <Empty description={<PageSubtitle>Coming soon!</PageSubtitle>} />
      </Aside>
    </>
  )
}