reactstrap#Col TypeScript Examples

export function ColumnInsertions({ analysisResult }: ColumnInsertionsProps) {
  const { t } = useTranslationSafe()
  const [showTooltip, setShowTooltip] = useState(false)
  const onMouseEnter = useCallback(() => setShowTooltip(true), [])
  const onMouseLeave = useCallback(() => setShowTooltip(false), [])

  const { seqName, insertions, totalInsertions, aaInsertions, totalAminoacidInsertions } = analysisResult
  const id = getSafeId('col-insertions', { seqName, insertions })

  const nucTitle = useMemo(() => t('Nucleotide insertions ({{n}})', { n: insertions.length }), [insertions.length, t])
  const aaTitle = useMemo(() => t('Aminoacid insertions ({{n}})', { n: aaInsertions.length }), [aaInsertions.length, t])

  return (
    <div id={id} className="w-100" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
      {totalInsertions}
      <Tooltip id={id} isOpen={showTooltip} target={id} wide fullWidth>
        <Row noGutters>
          <Col>
            <h6>{nucTitle}</h6>
            <ListOfInsertionsNuc insertions={insertions} totalInsertions={totalInsertions} />
          </Col>
        </Row>

        <Row noGutters>
          <Col>
            <h6>{aaTitle}</h6>
            <ListOfInsertionsAa insertions={aaInsertions} totalInsertions={totalAminoacidInsertions} isAminoacid />
          </Col>
        </Row>
      </Tooltip>
    </div>
  )
}

function Component({ payload }: PropsWithChildren<{ payload: Payload }>) {
  const totalPeriod = () => {
    if (payload.disableTotalPeriod) {
      return '';
    }
    return (
      <span style={{ fontSize: '50%' }}>
        <Badge>{getFormattingExperienceTotalDuration(payload)}</Badge>
      </span>
    );
  };

  // 여기는 기간 표시, Skill Keywords 같은 특이 요소가 있어서 CommonSection, CommonRow 로 못바꾸지 않을까..
  return (
    <div className="mt-5">
      <EmptyRowCol>
        <Row className="pb-3">
          <Col>
            <h2 style={Style.blue}>EXPERIENCE {totalPeriod()}</h2>
          </Col>
        </Row>
        {payload.list.map((item, index) => (
          <ExperienceRow key={index.toString()} item={item} index={index} />
        ))}
      </EmptyRowCol>
    </div>
  );
}

export function MainInputFormRunStep() {
  return (
    <MainInputFormContainer fluid>
      <Row noGutters>
        <Col>
          <DatasetCurrent />
        </Col>
      </Row>

      <Row noGutters className="my-3">
        <Col>
          <MainInputFormSequenceFilePicker />
        </Col>
      </Row>
    </MainInputFormContainer>
  )
}

export function CommonRows({
  index,
  payload,
}: PropsWithChildren<{ payload: IRow.Payload; index: number }>) {
  const { left, right } = payload;

  const isNeedDescriptionPadding = !!(right.title || right.subTitle);

  return (
    <div>
      {index > 0 ? <hr /> : ''}
      <Row>
        <Col sm={12} md={3} className="text-md-right">
          <Row>
            <Col md={12}>
              <h4 style={Style.gray}>{left.title}</h4>
            </Col>
            {left.subTitle ? <Col md={12}>{left.subTitle}</Col> : ''}
          </Row>
        </Col>
        <Col sm={12} md={9}>
          {right.title ? <h4>{right.title}</h4> : ''}
          {right.subTitle ? <i style={Style.gray}>{right.subTitle}</i> : ''}
          {right.descriptions ? (
            <CommonDescription
              descriptions={right.descriptions}
              option={{ padding: isNeedDescriptionPadding }}
            />
          ) : (
            ''
          )}
        </Col>
      </Row>
    </div>
  );
}

export function ErrorContent(props: { error?: unknown }) {
  const error = useMemo(() => sanitizeError(props.error), [props.error])

  if (!props.error) {
    return null
  }

  return (
    <Row noGutters>
      <Col>
        <Row noGutters>
          <Col>
            <ErrorContentMessage error={error} />
          </Col>
        </Row>

        <Row noGutters>
          <Col>
            <ErrorContentStack error={error} />
          </Col>
        </Row>
      </Col>
    </Row>
  )
}

function Component({ payload }: PropsWithChildren<{ payload: IFooter.Payload }>) {
  return (
    <Row>
      <Col style={Style.footerCover}>
        <div style={Style.footer} className="text-center mt-2">
          <EmptyRowCol>
            <small>
              v.{`${payload.version} / `}
              {/* Github 주소는 origin repository 의 주소를 넣는다. */}
              <HrefTargetBlank url="https://github.com/uyu423/resume-nextjs" text="Github" />
              {' / '}
              Thanks for <HrefTargetBlank url="https://blog.outsider.ne.kr/1234" text="Outsider" />
            </small>
          </EmptyRowCol>
          <EmptyRowCol>
            <small>
              <HrefTargetBlank url="https://nextjs.org/" text="Next.js" /> v{payload.nextVersion}
              {' / '}
              <HrefTargetBlank url="https://reactjs.org/" text="React.js" /> v{payload.reactVersion}
              {' / '}
              <HrefTargetBlank url="https://getbootstrap.com" text="Bootstrap" /> v
              {payload.bootstrapVersion}
            </small>
          </EmptyRowCol>
          <br />
        </div>
      </Col>
    </Row>
  );
}

export function HelpTipsColumnSeqViewGeneLegend() {
  const columns = splitToColumns(AMINOACID_COLORS, 4)

  return (
    <Legend>
      <Row>
        {columns.map((col, i) => (
          // eslint-disable-next-line react/no-array-index-key
          <Col key={i}>
            {Object.entries(col).map(([aa, color]) => (
              <LegendItem key={aa}>
                <LegendColorBox color={color} />
                {aa}
              </LegendItem>
            ))}
          </Col>
        ))}
      </Row>
    </Legend>
  )
}

function Component({ payload }: PropsWithChildren<{ payload: Payload }>) {
  const { image, contact, name, notice } = payload;
  return (
    <div className="mt-5">
      <Row>
        <Col md={3} sm={12}>
          <ProfileImage src={image} />
        </Col>
        <Col md={9} sm={12}>
          {createNameArea(name)}
          {createProfileContactMap(contact)}
          {createNoticeArea(notice)}
        </Col>
      </Row>
    </div>
  );
}

function ErrorPage({ statusCode, title, error }: ErrorPageProps) {
  const { t } = useTranslationSafe()

  const reload = useReloadPage('/')

  const titleText = useMemo(() => {
    const statusCodes: { [code: number]: string } = {
      400: t('Bad Request'),
      404: t('This page could not be found'),
      405: t('Method not allowed'),
      500: t('Internal server error'),
    }
    const statusText = get(statusCodes, statusCode ?? 0, undefined)
    return title ?? statusText ?? t('An unexpected error has occurred')
  }, [statusCode, t, title])

  const errorContent = useMemo(() => {
    if (!error) {
      return null
    }

    return (
      <Row noGutters>
        <Col>
          <ErrorContent error={error} />
        </Col>
      </Row>
    )
  }, [error])

  return (
    <LayoutResults>
      <MainContent>
        <MainSectionTitle />

        <Row noGutters>
          <Col className="text-center text-danger">
            <h2>{titleText}</h2>
          </Col>
        </Row>

        {errorContent}

        <Row noGutters>
          <Col>
            <ErrorContentExplanation />
          </Col>
        </Row>

        <Row noGutters>
          <Col className="w-100 d-flex">
            <Button
              className="ml-auto"
              type="button"
              color="danger"
              title={t('Reload the page and start Nextclade fresh')}
              onClick={reload}
            >
              {t('Restart Nextclade')}
            </Button>
          </Col>
        </Row>
      </MainContent>
    </LayoutResults>
  )
}

export function EmptyRowCol<T = {}>({ children }: PropsWithChildren<T>) {
  return (
    <Row>
      <Col>{children}</Col>
    </Row>
  );
}

export function DatasetCurrent() {
  const { t } = useTranslationSafe()
  const [advancedOpen, setAdvancedOpen] = useState(false)
  const datasetCurrent = useRecoilValue(datasetCurrentAtom)
  const resetDatasetCurrent = useResetRecoilState(datasetCurrentNameAtom)

  const onChangeClicked = useCallback(() => {
    resetDatasetCurrent()
  }, [resetDatasetCurrent])

  const onCustomizeClicked = useCallback(() => setAdvancedOpen((advancedOpen) => !advancedOpen), [])

  if (!datasetCurrent) {
    return null
  }

  return (
    <CurrentDatasetInfoContainer>
      <CurrentDatasetInfoHeader>
        <DatasetInfoH4>{t('Selected pathogen')}</DatasetInfoH4>
      </CurrentDatasetInfoHeader>

      <CurrentDatasetInfoBody>
        <Row noGutters>
          <Col className="d-flex flex-row">
            <Left>
              <DatasetInfo dataset={datasetCurrent} />
            </Left>

            <Right>
              <ChangeButton type="button" color="secondary" onClick={onChangeClicked}>
                {t('Change')}
              </ChangeButton>
              <LinkExternal
                className="ml-auto mt-auto"
                href="https://github.com/nextstrain/nextclade_data/blob/master/CHANGELOG.md"
              >
                <small>{t('Recent dataset updates')}</small>
              </LinkExternal>
            </Right>
          </Col>
        </Row>

        <Row noGutters>
          <Col>
            <ButtonCustomize isOpen={advancedOpen} onClick={onCustomizeClicked} />

            <Collapse isOpen={advancedOpen}>
              <AdvancedModeExplanationWrapper>
                <AdvancedModeExplanationContent />
              </AdvancedModeExplanationWrapper>

              <FilePickerAdvanced />
            </Collapse>
          </Col>
        </Row>
      </CurrentDatasetInfoBody>
    </CurrentDatasetInfoContainer>
  )
}

Typography: React.FC = () => {
  return (
    <div className='relative'>
      <Widget>
        <Col>
          {Object.entries(COLORS).map(([color]: [string, any], i: number) => {
            return Object.entries(SIZES).map(([size]: [string, any], j: number) => {
              if (color !== 'black') {
                const arr = [];
                for (let k = 1; k < 10; k++) {
                  arr.push(
                    <Row key={`${i}${j}${k}`}>
                      <Col sm={2} className='text-sm'>
                        <code>
                          .text-{color}-{k}00 .text-{size}
                        </code>
                      </Col>
                      <Col sm={10}>
                        <div className={`text-${color}-${k}00 text-${size}`}>Default full text</div>
                      </Col>
                    </Row>,
                  );
                }
                return arr;
              } else {
                return (
                  <Row key={`${i}${j}`}>
                    <Col sm={2} className='text-sm'>
                      <code>
                        .text-{color} .text-{size}
                      </code>
                    </Col>
                    <Col sm={10}>
                      <div className={`text-${color} text-${size}`}>Default full text</div>
                    </Col>
                  </Row>
                );
              }
            });
          })}
        </Col>
      </Widget>
    </div>
  );
}

function createWorkingPeriod(startedAtString: string, endedAtString?: string) {
  const DATE_FORMAT = Util.LUXON_DATE_FORMAT;
  const startedAt = DateTime.fromFormat(startedAtString, DATE_FORMAT.YYYY_LL);

  const { periodTitle, endedAt, isWorking } = (() => {
    if (!endedAtString) {
      return {
        periodTitle: `${startedAt.toFormat(DATE_FORMAT.YYYY_DOT_LL)} ~`,
        isWorking: true,
        endedAt: undefined,
      };
    }

    const _endedAt = DateTime.fromFormat(endedAtString, DATE_FORMAT.YYYY_LL);
    return {
      periodTitle: `${startedAt.toFormat(DATE_FORMAT.YYYY_DOT_LL)} ~ ${_endedAt.toFormat(
        DATE_FORMAT.YYYY_DOT_LL,
      )}`,
      endedAt: _endedAt,
      isWorking: false,
    };
  })();

  return (
    <Row>
      <Col md={12} xs={isWorking ? 7 : 9}>
        <h4 style={Style.gray}>{periodTitle}</h4>
      </Col>
      <Col md={12} xs={isWorking ? 5 : 3} className="text-md-right text-center">
        {isWorking ? (
          <Badge color="primary" className="mr-1">
            재직 중
          </Badge>
        ) : (
          ''
        )}
        <Badge color="info">{Util.getFormattingDuration(startedAt, endedAt)}</Badge>
      </Col>
    </Row>
  );
}

HorizontalTabs: React.FC<TabsProps> = (props) => {
  const { tabs, navClass = '', activeClass = '', activeTabId = '1', pills, verticalIcons = true } = props;
  const [activeTab, setActiveTab] = React.useState(activeTabId);

  const toggle = (tab: string) => {
    if (activeTab !== tab) setActiveTab(tab);
  };
  return (
    <div className='tab'>
      <Nav pills={pills} tabs className={classNames({ 'border-0 m-0 p-0 bg-white': activeClass, 'border-0': pills })}>
        {tabs.map((tab: TabType, index: number) => {
          const { label, tabId } = tab;
          const klassName = verticalIcons ? 'text-center' : 'd-flex align-items-center justify-content-between';
          return (
            <TabItem
              key={index}
              tabId={tabId}
              activeClass={activeClass}
              className={navClass}
              activeTab={activeTab}
              toggle={toggle}>
              <div className={klassName}>{label}</div>
            </TabItem>
          );
        })}
      </Nav>
      <TabContent className='mt-3' activeTab={activeTab}>
        {tabs.map((tab: TabType, index: number) => {
          const { content, tabId } = tab;
          return (
            <TabPane key={index} tabId={tabId}>
              <Row>
                <Col sm='12'>{content}</Col>
              </Row>
            </TabPane>
          );
        })}
      </TabContent>
    </div>
  );
}

function Home(props) {
  const { t } = useTranslation("layout");
  const [selectedProduct, setSelectedProduct] = useState<Product>();
  const [products, setProducts] = useState<Product[] | undefined>();
  const [demoMode, setDemoMode] = useState<boolean>(props.demoMode === undefined ? false : true);

  const getProducts = async () => {
    try {
      setProducts(await new BackendClient().getProductsList());
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    //noinspection JSIgnoredPromiseFromCall
    getProducts();
  }, []);

  return (
    <>
      <TestnetWarning />
      <Container>
        <h1 className="text-center font-weight-bold mt-5">{t("name")}</h1>

        <section className="mt-5">
          {products && (
            <Row>
              {products.map((product, i) => (
                <Col key={product.gtin} md={6} lg={4}>
                  <Card key={product.gtin} className="mb-4">
                    <CardImg top src={product.image_url} />
                    <CardBody>
                      <CardTitle className="font-weight-bold h5">{product.name}</CardTitle>
                      <CardText>{product.description}</CardText>
                    </CardBody>
                    <CardFooter>
                      <Row>
                        <Col>
                          <div>
                            <strong>Price:</strong> {product.price / 1000000} {product.currency}
                          </div>
                        </Col>
                        <Col lg={4} className="text-right">
                          <Button
                            color="secondary"
                            block
                            className="btn-sm"
                            onClick={() => setSelectedProduct(products[i])}
                          >
                            Buy Now
                          </Button>
                        </Col>
                      </Row>
                    </CardFooter>
                  </Card>
                </Col>
              ))}
            </Row>
          )}
          {!products && <ProductsLoader />}
        </section>
      </Container>
      <Payment
        demoMode={demoMode}
        product={selectedProduct}
        isOpen={!!selectedProduct}
        onClose={() => setSelectedProduct(undefined)}
      />
    </>
  );
}

export function PlaceOptions(props: PlaceOptionsProps): JSX.Element {
  const { placeInfo } = useContext(Context);

  useEffect(() => {
    if (!placeInfo.value.selectedPlace.dcid) {
      // Do nothing here because no place has been chosen yet.
      return;
    }
    if (_.isNull(placeInfo.value.selectedPlace.types)) {
      getNamedTypedPlace(placeInfo.value.selectedPlace.dcid).then(
        (selectedPlace) => {
          placeInfo.set({ ...placeInfo.value, selectedPlace });
        }
      );
      return;
    }
    if (_.isNull(placeInfo.value.parentPlaces)) {
      getParentPlacesPromise(
        placeInfo.value.selectedPlace.dcid
      ).then((parentPlaces) => placeInfo.setParentPlaces(parentPlaces));
      return;
    }
    if (
      placeInfo.value.enclosedPlaceType &&
      _.isEmpty(placeInfo.value.enclosingPlace.dcid)
    ) {
      loadEnclosingPlace(placeInfo);
    }
  }, [
    placeInfo.value.selectedPlace,
    placeInfo.value.parentPlaces,
    placeInfo.value.enclosedPlaceType,
  ]);

  return (
    <PlaceSelector
      selectedPlace={placeInfo.value.selectedPlace}
      enclosedPlaceType={placeInfo.value.enclosedPlaceType}
      onPlaceSelected={placeInfo.setSelectedPlace}
      onEnclosedPlaceTypeSelected={placeInfo.setEnclosedPlaceType}
      getEnclosedPlaceTypes={getAllChildPlaceTypes}
      customSearchPlaceholder={"Enter a country or state to get started"}
    >
      <Row className="d-lg-none">
        <Col>
          <Button color="primary" onClick={props.toggleSvHierarchyModal}>
            Select variable
          </Button>
        </Col>
      </Row>
    </PlaceSelector>
  );
}

function createCalculatedSkillItems(items: ISkill.Item[]) {
  const log = Util.debug('SkillRow:createCalculatedSkillItems');

  /**
   * @developer_commentary 단을 3단, 4단을 시도해봤지만 생각보다 이쁘게 나오지 않았고, 우선은 3단으로 한다. 만약 이쪽을 발전시킨다면 조금 더 이쁘고 능동적이게 데이터를 쪼갤 수 있는 방법을 찾으면 될 듯..
   */
  const layer = 3;

  // const splitPoint = layer % 2 ? Math.ceil(items.length / layer) : Math.floor(items.length / layer);
  const splitPoint = Math.ceil(items.length / layer);

  const list: ISkill.Item[][] = [];

  for (let i = 0, splitAfter = splitPoint; i < layer; i += 1, splitAfter += splitPoint) {
    list.push(items.slice(splitAfter - splitPoint, i === layer - 1 ? undefined : splitAfter));
  }

  log('origin', items, items.length, splitPoint);
  log('list', list);

  return (
    <Row className="mt-2 mt-md-0">
      {list.map((skills, index) => {
        return (
          <Col md={4} xs={12} key={index.toString()}>
            <ul>
              {skills.map((skill, skillIndex) => {
                return (
                  <li key={skillIndex.toString()}>
                    {createBadge(skill.level)}
                    {skill.title}
                  </li>
                );
              })}
            </ul>
          </Col>
        );
      })}
    </Row>
  );
}

export function DatasetSelector({ searchTerm, setSearchTerm }: DatasetSelectorProps) {
  const { t } = useTranslationSafe()
  const [error, setError] = useState<string | undefined>()
  const { datasets, defaultDatasetName } = useRecoilValue(datasetsAtom)
  const [datasetCurrentName, setDatasetCurrent] = useRecoilState(datasetCurrentNameAtom)
  const [datasetHighlighted, setDatasetHighlighted] = useState<string | undefined>(
    datasetCurrentName ?? defaultDatasetName,
  )

  const onSearchTermChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const { value } = event.target
      setSearchTerm(value)
    },
    [setSearchTerm],
  )

  const onNextClicked = useCallback(() => {
    if (datasetHighlighted) {
      setDatasetCurrent(datasetHighlighted)
      setError(undefined)
    } else {
      setError(t('Please select a pathogen first'))
    }
  }, [datasetHighlighted, setDatasetCurrent, t])

  const isBusy = datasets.length === 0

  return (
    <DatasetSelectorContainer fluid>
      <Row noGutters>
        <Col sm={6} className="d-flex">
          <DatasetSelectorTitle>{t('Select a pathogen')}</DatasetSelectorTitle>
        </Col>

        <Col sm={6}>
          <Input
            type="text"
            title="Search pathogens"
            placeholder="Search pathogens"
            autoComplete="off"
            autoCorrect="off"
            autoCapitalize="off"
            spellCheck="false"
            data-gramm="false"
            value={searchTerm}
            onChange={onSearchTermChange}
          />
        </Col>
      </Row>

      <Row noGutters className="mt-2">
        <DatasetSelectorListContainer>
          {!isBusy && (
            <DatasetSelectorList
              datasets={datasets}
              datasetHighlighted={datasetHighlighted}
              searchTerm={searchTerm}
              onDatasetHighlighted={setDatasetHighlighted}
            />
          )}

          {isBusy && (
            <SpinnerWrapper>
              <SpinnerWrapperInternal>
                <Spinner color="#aaa" width={20} height={20} />
              </SpinnerWrapperInternal>
            </SpinnerWrapper>
          )}
        </DatasetSelectorListContainer>
      </Row>

      <Row noGutters>
        <Col className="py-1">
          <LinkExternal href="https://github.com/nextstrain/nextclade_data/blob/master/CHANGELOG.md">
            <small>{t('Recent dataset updates')}</small>
          </LinkExternal>
        </Col>
      </Row>

      <Row noGutters className="mt-2">
        <Col className="d-flex">
          {error && <p className="m-0 p-0 flex-1 text-danger">{error}</p>}
          <Button
            className={classNames('ml-auto', !datasetHighlighted && 'disabled')}
            type="button"
            color={datasetHighlighted ? 'primary' : 'secondary'}
            onClick={onNextClicked}
          >
            {t('Next')}
          </Button>
        </Col>
      </Row>
    </DatasetSelectorContainer>
  )
}

Lists: React.FC = () => {
  return (
    <div className='relative'>
      <div className='text-xl font-bold mb-3'>Lists</div>
      <Widget className='flex-wrap'>
        <Col xs={12}>
          <div className='mb-3'>
            <div className='text-sm font-light text-grey-500'>Single line lists</div>
            <div className='text-sm font-bold'>
              <span>Use the following examples as starting points for your single list components</span>
            </div>
          </div>
        </Col>
        <Col xs={12} md={6}>
          <List className='w-100 mb-2' right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
          <List className='w-100 mb-2' right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
          <List className='w-100 mb-2' right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
          <List className='w-100 mb-2' right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
        </Col>
        <Col xs={12} md={6}>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm'>Voluptas repellendus est alias ut.</div>
          </List>
        </Col>
      </Widget>
      <Widget className='flex-wrap'>
        <Col xs={12}>
          <div className='mb-3'>
            <div className='text-sm font-light text-grey-500'>Double line lists</div>
            <div className='text-sm font-bold'>
              <span>Use the following examples as starting points for your double list components</span>
            </div>
          </div>
        </Col>
        <Col xs={12} md={6}>
          <List className='w-100' left={img} right={2}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
          <List className='w-100' left={img} right={2}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
          <List className='w-100' left={img} right={2}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
          <List className='w-100' left={img} right={2}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
        </Col>
        <Col xs={12} md={6}>
          <List className='w-100' left='AB' right='2 days ago'>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
          <List className='w-100' left='AB' right='2 days ago'>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
          <List className='w-100' left='CD' right='2 days ago'>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
          <List className='w-100' left='WV' right='2 days ago'>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm'>Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.</div>
          </List>
        </Col>
      </Widget>
      <Widget className='flex-wrap'>
        <Col xs={12}>
          <div className='mb-3'>
            <div className='text-sm font-light text-grey-500'>Multi line lists</div>
            <div className='text-sm font-bold'>
              <span>Use the following examples as starting points for your multi line list components</span>
            </div>
          </div>
        </Col>
        <Col xs={12} md={6}>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm text-grey-500'>
              Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.
            </div>
            <div className='d-flex flex-row text-grey-500 align-items-center justify-content-start'>
              <Icon type='box' />
              <div className='text-grey-300 ml-2'>a few seconds ago</div>
            </div>
          </List>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm text-grey-500'>
              Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.
            </div>
            <div className='d-flex flex-row text-grey-500 align-items-center justify-content-start'>
              <Icon type='box' />
              <div className='text-grey-300 ml-2'>a few seconds ago</div>
            </div>
          </List>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm text-grey-500'>
              Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.
            </div>
            <div className='d-flex flex-row text-grey-500 align-items-center justify-content-start'>
              <Icon type='box' />
              <div className='text-grey-300 ml-2'>a few seconds ago</div>
            </div>
          </List>
          <List className='w-100' left={img} right={1}>
            <div className='text-sm font-bold'>Voluptas repellendus est alias ut.</div>
            <div className='text-sm text-grey-500'>
              Voluptatem velit et consectetur incidunt vero officiis commodi soluta iure.
            </div>
            <div className='d-flex flex-row text-grey-500 align-items-center justify-content-start'>
              <Icon type='box' />
              <div className='text-grey-300 ml-2'>a few seconds ago</div>
            </div>
          </List>
        </Col>
      </Widget>
    </div>
  );
}

export function LoginPage() {
    const history = useHistory();
    const CASRedirect = () => {
        window.location.href = ApiBaseAddress + 'api/login';
    }

    const handleAuthentication = (event: any) => {
        console.log("searching");
        event.preventDefault();
        fetch("/login/cas", {
            method: "get",
            headers: {
                "Content-Type": "application/json",
            },
            // body: JSON.stringify(this.state),
        })
            .then((res) => res.json())
            .then((data) => {
                //Callback function after states been updated.
                console.log(data.message);

                if (data.message === "success") {
                    console.log("success");
                    //Pass properties to next application
                    //NOTE: Re-write this. Not safe
                    // history.push({
                    //     pathname: "/home", //---Change path as desired.
                    //     email: this.state.email,
                    // });
                    history.push("/home/schedule")
                } else if (data.message === "failure") {
                    console.log("failure");
                    console.log("Incorrect credentials");
                }
            })
            .catch((error) => alert(error.message));
    };

    return (
        <Container>
            <Helmet>
                <meta charSet="utf-8" />
                <title>TutorBase - Login</title>
            </Helmet>

            <LoginBacking>
                <LoginPrompt>
                    <Row>
                        <Col style={{ textAlign: "center", paddingTop: "3em" }}>
                            <img src={tb_logo} style={{ maxWidth: "100%" }} alt="Rensselaer" />
                        </Col>
                    </Row>
                    <Row>
                        <Col style={{ textAlign: "center" }}>
                            A better system to connect students and tutors at RPI.
                        </Col>
                    </Row>

                    <Row>
                        <Col style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                            <Button
                                onClick={() => CASRedirect()}
                                color="danger"
                                size="lg"
                                style={{margin: '1em'}}>
                                Login
                            </Button>
                        </Col>
                    </Row>

                    <Row>
                        <Col style={{textAlign: 'center'}}>
                            An <a href="https://rcos.io/"> RCOS</a> project. &nbsp;
                            <a href="https://github.com/DangItJason/TutorBase">
                                <img style={{ maxWidth: "80%", maxHeight: "80%" }}
                                     src={git_logo}
                                     alt="GitHub" />
                            </a>
                        </Col>
                    </Row>
                </LoginPrompt>

                <Row>
                    <Col style={{textAlign: "center"}}>
                        <a href="https://www.rpi.edu">
                            <img src={rpi_logo} style={{maxWidth: "100%"}} alt="Rensselaer"/>
                        </a>
                    </Col>
                </Row>
            </LoginBacking>
        </Container>
    );
}

export function Page(): JSX.Element {
  const [selectedOptions, setSelectedOptions] = useState<DownloadOptions>(null);
  const [previewDisabled, setPreviewDisabled] = useState(false);
  const [showPreview, setShowPreview] = useState(false);
  const [validationErrors, setValidationErrors] = useState<ValidationErrors>({
    incompleteSelectionMessage: "",
    maxDate: false,
    minDate: false,
  });
  const [isSvModalOpen, updateSvModalOpen] = useState(false);
  const toggleSvModalCallback = () => updateSvModalOpen(!isSvModalOpen);

  useEffect(() => {
    if (showPreview) {
      setPreviewDisabled(true);
    }
  }, [selectedOptions]);

  useEffect(() => {
    getOptionsFromURL();
  }, []);

  if (!selectedOptions) {
    return <></>;
  }

  const getDataButtonText = showPreview ? "Update" : "Preview";
  const showInfo =
    _.isEmpty(validationErrors.incompleteSelectionMessage) && !showPreview;
  return (
    // TODO: Try to move the options into a separate component.
    <>
      <StatVarChooser
        statVars={selectedOptions.selectedStatVars}
        placeDcid={selectedOptions.selectedPlace.dcid}
        enclosedPlaceType={selectedOptions.enclosedPlaceType}
        onStatVarSelected={selectSV}
        onStatVarRemoved={removeSV}
        openSvHierarchyModal={isSvModalOpen}
        openSvHierarchyModalCallback={toggleSvModalCallback}
      />
      <div id="plot-container">
        <h1 className="mb-4">Download Tool</h1>
        <div className="download-options-container">
          <PlaceSelector
            selectedPlace={selectedOptions.selectedPlace}
            enclosedPlaceType={selectedOptions.enclosedPlaceType}
            onPlaceSelected={(place) =>
              setSelectedOptions((prev) => {
                return { ...prev, selectedPlace: place, enclosedPlaceType: "" };
              })
            }
            onEnclosedPlaceTypeSelected={(enclosedPlaceType) =>
              setSelectedOptions((prev) => {
                return { ...prev, enclosedPlaceType };
              })
            }
          >
            <div className="download-option-section">
              <div className="download-option-label">Date</div>
              <div className="download-date-options">
                <FormGroup radio="true">
                  <Label radio="true">
                    <Input
                      id="latest-date"
                      type="radio"
                      name="date"
                      defaultChecked={!selectedOptions.dateRange}
                      onClick={() =>
                        setSelectedOptions((prev) => {
                          return { ...prev, dateRange: false };
                        })
                      }
                    />
                    Latest Date
                  </Label>
                </FormGroup>
                <FormGroup radio="true" className="download-date-range-section">
                  <Label radio="true" className="download-date-range-container">
                    <Input
                      id="date-range"
                      type="radio"
                      name="date"
                      defaultChecked={selectedOptions.dateRange}
                      onClick={() =>
                        setSelectedOptions((prev) => {
                          return { ...prev, dateRange: true };
                        })
                      }
                    />
                    Date Range:
                  </Label>
                  <div className="download-date-range-input-section">
                    <div className="download-date-range-input-container">
                      <div>
                        <FormGroup>
                          <Input
                            className={`download-date-range-input${
                              validationErrors.minDate ? "-error" : ""
                            }`}
                            type="text"
                            onChange={(e) => {
                              const date = e.target.value;
                              setSelectedOptions((prev) => {
                                return { ...prev, minDate: date };
                              });
                            }}
                            disabled={!selectedOptions.dateRange}
                            value={selectedOptions.minDate}
                            onBlur={(e) => validateDate(e.target.value, true)}
                          />
                        </FormGroup>
                      </div>
                      <span>to</span>
                      <div>
                        <FormGroup>
                          <Input
                            className={`download-date-range-input${
                              validationErrors.maxDate ? "-error" : ""
                            }`}
                            type="text"
                            onChange={(e) => {
                              const date = e.target.value;
                              setSelectedOptions((prev) => {
                                return { ...prev, maxDate: date };
                              });
                            }}
                            disabled={!selectedOptions.dateRange}
                            value={selectedOptions.maxDate}
                            onBlur={(e) => validateDate(e.target.value, false)}
                          />
                        </FormGroup>
                      </div>
                    </div>
                    <div
                      className={`download-date-range-hint${
                        validationErrors.minDate || validationErrors.maxDate
                          ? "-error"
                          : ""
                      }`}
                    >
                      YYYY or YYYY-MM or YYYY-MM-DD
                    </div>
                  </div>
                </FormGroup>
              </div>
            </div>
            <div className="download-option-section">
              <div className="download-option-label">Variables</div>
              {_.isEmpty(selectedOptions.selectedStatVars) ? (
                "None selected"
              ) : (
                <div className="download-sv-chips">
                  {Object.keys(selectedOptions.selectedStatVars).map((sv) => {
                    return (
                      <Chip
                        key={sv}
                        id={sv}
                        title={selectedOptions.selectedStatVars[sv].title || sv}
                        removeChip={removeSV}
                      />
                    );
                  })}
                </div>
              )}
            </div>
            <Row className="d-lg-none">
              <Col>
                <Button color="primary" onClick={toggleSvModalCallback}>
                  Select variable
                </Button>
              </Col>
            </Row>
            <Button onClick={onGetDataButtonClicked} color="primary">
              {getDataButtonText}
            </Button>
          </PlaceSelector>
        </div>
        {!_.isEmpty(validationErrors.incompleteSelectionMessage) && (
          <div>{validationErrors.incompleteSelectionMessage}</div>
        )}
        {showPreview && (
          <div>{previewDisabled ? "disabled preview" : "preview"}</div>
        )}
        {showInfo && <div>info text</div>}
      </div>
    </>
  );

  function selectSV(sv: string, svInfo: StatVarInfo): void {
    setSelectedOptions((prev) => {
      const updatedSV = _.cloneDeep(prev.selectedStatVars);
      updatedSV[sv] = svInfo;
      return { ...prev, selectedStatVars: updatedSV };
    });
  }

  function removeSV(sv: string): void {
    setSelectedOptions((prev) => {
      const updatedSV = _.cloneDeep(prev.selectedStatVars);
      if (sv in updatedSV) {
        delete updatedSV[sv];
      }
      return { ...prev, selectedStatVars: updatedSV };
    });
  }

  function getOptionsFromURL(): void {
    const options = {
      dateRange: false,
      enclosedPlaceType: "",
      maxDate: "",
      minDate: "",
      selectedPlace: { dcid: "", name: "", types: null },
      selectedStatVars: {},
    };
    if (!window.location.hash) {
      setSelectedOptions(options);
    }
    const urlParams = new URLSearchParams(window.location.hash.split("#")[1]);
    const place = urlParams.get(URL_PARAM_KEYS.PLACE);
    const placePromise = place
      ? getNamedTypedPlace(place)
      : Promise.resolve({ dcid: "", name: "", types: null });
    const statVarsParam = urlParams.get(URL_PARAM_KEYS.STAT_VARS);
    const statVarsList = statVarsParam ? statVarsParam.split(SEPARATOR) : [];
    const svInfoPromise = !_.isEmpty(statVarsList)
      ? getStatVarInfo(statVarsList)
      : Promise.resolve({});
    options.enclosedPlaceType = urlParams.get(URL_PARAM_KEYS.PLACE_TYPE) || "";
    options.dateRange =
      urlParams.get(URL_PARAM_KEYS.DATE_RANGE) === PARAM_VALUE_TRUE;
    options.minDate = urlParams.get(URL_PARAM_KEYS.MIN_DATE) || "";
    options.maxDate = urlParams.get(URL_PARAM_KEYS.MAX_DATE) || "";
    Promise.all([placePromise, svInfoPromise])
      .then(([place, svInfo]) => {
        setSelectedOptions({
          ...options,
          selectedPlace: place,
          selectedStatVars: svInfo,
        });
      })
      .catch(() => {
        const emptySvInfo = {};
        statVarsList.forEach((sv) => (emptySvInfo[sv] = {}));
        setSelectedOptions({
          ...options,
          selectedPlace: { dcid: place, name: place, types: [] },
          selectedStatVars: emptySvInfo,
        });
      });
  }

  function updateURL(): void {
    const urlParams = new URLSearchParams(window.location.hash.split("#")[1]);
    const urlParamVals = {
      [URL_PARAM_KEYS.PLACE_TYPE]: selectedOptions.enclosedPlaceType,
      [URL_PARAM_KEYS.PLACE]: selectedOptions.selectedPlace
        ? selectedOptions.selectedPlace.dcid
        : "",
      [URL_PARAM_KEYS.STAT_VARS]: Object.keys(
        selectedOptions.selectedStatVars
      ).join(SEPARATOR),
      [URL_PARAM_KEYS.DATE_RANGE]: selectedOptions.dateRange
        ? PARAM_VALUE_TRUE
        : "",
      [URL_PARAM_KEYS.MIN_DATE]: selectedOptions.minDate,
      [URL_PARAM_KEYS.MAX_DATE]: selectedOptions.maxDate,
    };
    for (const key of Object.keys(urlParamVals)) {
      const val = urlParamVals[key];
      if (_.isEmpty(val)) {
        urlParams.delete(key);
      } else {
        urlParams.set(key, val);
      }
    }
    window.location.hash = urlParams.toString();
  }

  function validateDate(date: string, isMinDate: boolean): void {
    const dateError = !_.isEmpty(date) && !isValidDate(date);
    setValidationErrors((prev) => {
      return {
        ...prev,
        maxDate: !isMinDate ? dateError : prev.maxDate,
        minDate: isMinDate ? dateError : prev.minDate,
      };
    });
  }

  function onGetDataButtonClicked(): void {
    let incompleteSelectionMessage = "";
    if (selectedOptions.dateRange) {
      if (
        (!_.isEmpty(selectedOptions.minDate) &&
          !isValidDate(selectedOptions.minDate)) ||
        (!_.isEmpty(selectedOptions.maxDate) &&
          !isValidDate(selectedOptions.maxDate))
      ) {
        incompleteSelectionMessage = "Invalid dates entered.";
      }
    }
    if (
      _.isEmpty(selectedOptions.selectedStatVars) ||
      _.isEmpty(selectedOptions.selectedPlace) ||
      _.isEmpty(selectedOptions.enclosedPlaceType)
    ) {
      incompleteSelectionMessage =
        "Please select a place, place type, and at least one variable.";
    }
    setValidationErrors((prev) => {
      return { ...prev, incompleteSelectionMessage };
    });
    if (!_.isEmpty(incompleteSelectionMessage)) {
      return;
    }
    setShowPreview(true);
    setPreviewDisabled(false);
    updateURL();
  }
}

function ConfirmationDetails({ orderId }: OrderDetailsProps) {
  const { t } = useTranslation(["order", "layout"]);
  const [order, setOrder] = useState<Order | undefined | null>();

  useEffect(() => {
    let isOutdated = false;

    const fetchOrder = async () => {
      try {
        const fetched = await new BackendClient().getOrderDetails(orderId);

        if (!isOutdated) {
          setOrder(fetched);
        }
      } catch (e) {
        console.error("Unexpected error", e);
      }
    };

    // noinspection JSIgnoredPromiseFromCall
    fetchOrder();

    return () => {
      isOutdated = true;
    };
  }, [orderId]);

  const cashOut = async () => {
    const client = new BackendClient();
    await client.payout(order!.vaspPaymentRef);
    const fetched = await new BackendClient().getOrderDetails(orderId);
    if (fetched) {
      setOrder(fetched);
    }
  };

  // Show spinner if order is undefined - it is being loaded
  let orderInfo = (
    <div className="d-flex justify-content-center">
      <Spinner color="primary" />
    </div>
  );

  if (order !== undefined) {
    if (order === null) {
      // There is no order with this ID
      orderInfo = (
        <Alert color="danger">
          <i className="fa fa-close" /> {t("unknown")}
        </Alert>
      );
    } else {
      orderInfo = (
        <>
          <div style={{ display: "flex", alignItems: "center" }}>
            <i className="fa fa-check-circle fa-4x" style={{ color: "#59a559" }} />
            <div style={{ marginLeft: 20, fontSize: 20, fontWeight: 500, color: "black" }}>
              {t("order_on_the_way")}
            </div>
          </div>
          <div className="h5 mt-4 mb-4 font-weight-normal text-body">
            {t("got_your_order")} <br />
            {t("order_summary")}
          </div>
          <Row style={{ alignItems: "center" }}>
            <Col xs={3}>
              <img
                src={order.products[0].product.image_url}
                width="75"
                height="75"
                alt={"product image"}
              />
            </Col>
            <Col>{order.products[0].product.name}</Col>
            <Col style={{ textAlign: "right" }}>
              {t("qty")}. {order.products[0].quantity}
            </Col>
          </Row>
          <Row className="mt-4">
            <Col xs={8}>{t("items_Total")}</Col>
            <Col xs={4} style={{ textAlign: "right" }}>
              {order.totalPrice / 1000000} XUS
            </Col>
          </Row>
          <Row className="mt-1">
            <Col xs={9}>{t("shipping")}</Col>
            <Col xs={3} className="pl-2">
              {t("free")}
            </Col>
          </Row>
          <Row className="mt-1">
            <Col xs={9}>{t("duties_taxes")}</Col>
            <Col xs={3} className="pl-2">
              {t("free")}
            </Col>
          </Row>
          <Row className="mt-1">
            <Col xs={8} className="font-weight-bold">
              {t("total_order")}
            </Col>
            <Col xs={4} style={{ textAlign: "right" }} className="font-weight-bold">
              {order.totalPrice / 1000000} XUS
            </Col>
          </Row>
        </>
      );
    }
  }

  return (
    <>
      <TestnetWarning />
      <Container className="container-very-narrow pt-5">
        <div className="text-center">
          <div className="h2">{t("layout:name")}</div>
        </div>
        <div className="d-flex flex-column justify-content-center m-3">{orderInfo}</div>
      </Container>
    </>
  );
}

Alerts: React.FC = () => {
  return (
    <div className='relative'>
      <Widget>
        <Col>
          <Row>
            <Alert notificationKey='primary' color='primary'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='danger' color='danger'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='warning' color='warning'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
        </Col>
      </Widget>
      <Widget>
        <Col>
          <Row>
            <Alert notificationKey='outlinePrimary' outlined color='primary'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='outlineDanger' outlined color='danger'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='outlineWarning' outlined color='warning'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
        </Col>
      </Widget>
      <Widget>
        <Col>
          <Row>
            <Alert notificationKey='raisedPrimary' raised color='primary'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='raisedDanger' raised color='danger'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='raisedWarning' raised color='warning'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
        </Col>
      </Widget>
      <Widget>
        <Col>
          <Row>
            <Alert notificationKey='borderLeftPrimary' borderLeft color='primary'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='borderLeftDanger' borderLeft color='danger'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
          <Row>
            <Alert notificationKey='borderLeftWarning' borderLeft color='warning'>
              {' '}
              I'm alert!
            </Alert>
          </Row>
        </Col>
      </Widget>
    </div>
  );
}

export function SeqViewSettings() {
  const { t } = useTranslationSafe()

  const [maxNucMarkers, setMaxNucMarkers] = useRecoilStateDeferred(maxNucMarkersAtom)

  const [seqMarkerMissingHeightState, setSeqMarkerMissingHeightState] = useSeqMarkerState(
    seqMarkerMissingHeightStateAtom,
  )

  const [seqMarkerGapHeightState, setSeqMarkerGapHeightState] = useSeqMarkerState(seqMarkerGapHeightStateAtom)

  const [seqMarkerMutationHeightState, setSeqMarkerMutationHeightState] = useSeqMarkerState(
    seqMarkerMutationHeightStateAtom,
  )

  const [seqMarkerUnsequencedHeightState, setSeqMarkerUnsequencedHeightState] = useSeqMarkerState(
    seqMarkerUnsequencedHeightStateAtom,
  )

  return (
    <Container fluid>
      <Row noGutters>
        <Col>
          <Form>
            <NumericField
              identifier="max-nuc-markers"
              label={t('Maximum number of nucleotide sequence view markers')}
              title={t(
                'Sets threshold on maximum number of markers (mutations, deletions etc.) to display in nucleotide views. Reducing this number increases performance. If the threshold is reached, then the nucleotide sequence view will be disabled.',
              )}
              min={0}
              max={1_000_000}
              value={maxNucMarkers}
              onValueChanged={setMaxNucMarkers}
            />

            <FormGroup>
              {t('Missing')}
              <Multitoggle
                values={SEQ_MARKER_HEIGHT_STATES}
                value={seqMarkerMissingHeightState}
                onChange={setSeqMarkerMissingHeightState}
              />
            </FormGroup>

            <FormGroup>
              <Label>
                {t('Gaps')}
                <Multitoggle
                  values={SEQ_MARKER_HEIGHT_STATES}
                  value={seqMarkerGapHeightState}
                  onChange={setSeqMarkerGapHeightState}
                />
              </Label>
            </FormGroup>

            <FormGroup>
              <Label>
                {t('Mutations')}
                <Multitoggle
                  values={SEQ_MARKER_HEIGHT_STATES}
                  value={seqMarkerMutationHeightState}
                  onChange={setSeqMarkerMutationHeightState}
                />
              </Label>
            </FormGroup>

            <FormGroup>
              <Label>
                {t('Unsequenced')}
                <Multitoggle
                  values={SEQ_MARKER_HEIGHT_STATES}
                  value={seqMarkerUnsequencedHeightState}
                  onChange={setSeqMarkerUnsequencedHeightState}
                />
              </Label>
            </FormGroup>
          </Form>
        </Col>
      </Row>
    </Container>
  )
}

Notifications: React.FC = () => {
  const context = React.useContext<NotificationContextType>(NotificationContext);
  const createNotification = (type: NotificationType) => {
    switch (type) {
      case 'info':
        NotificationManager.info('Info message');
        break;
      case 'success':
        NotificationManager.success('Success message', 'Title here');
        break;
      case 'warning':
        NotificationManager.warning('Warning message', 'Close after 3000ms', 3000);
        break;
      case 'error':
        NotificationManager.error('Error message', 'Click me!', 5000, () => {
          alert('callback');
        });
        break;
    }
  };
  return (
    <div className='relative'>
      <Widget>
        <Col>
          <Row>
            <Button
              color=''
              style={{ marginRight: '5px' }}
              onClick={() => {
                context?.addNotification!({
                  position: 'top',
                  key: 'key1',
                  open: true,
                  text: `I'm alert`,
                  className: 'position-relative border-0',
                  color: 'primary',
                });
              }}>
              top
            </Button>
            <Button
              color=''
              style={{ marginRight: '5px' }}
              onClick={() => {
                context?.addNotification({
                  position: 'fixed-top',
                  key: 'key2',
                  open: true,
                  text: `I'm alert`,
                  className: '',
                  color: 'danger',
                });
              }}>
              fixed top
            </Button>
            <Button
              color=''
              style={{ marginRight: '5px' }}
              onClick={() => {
                context?.addNotification({
                  position: 'fixed-bottom',
                  key: 'key3',
                  open: true,
                  text: `I'm alert`,
                  className: 'm-0',
                  color: 'danger',
                });
              }}>
              fixed bottom
            </Button>
            <Button
              color=''
              style={{ marginRight: '5px' }}
              onClick={() => {
                context?.addNotification({
                  position: 'fixed-bottom',
                  key: 'key4',
                  open: true,
                  text: `I'm alert`,
                  className: 'w-auto m-3',
                  color: 'danger',
                });
              }}>
              fixed bottom padding
            </Button>
            <Button
              color=''
              style={{ marginRight: '5px' }}
              onClick={() => {
                createNotification('success');
              }}>
              at right corner
            </Button>
            <Button
              color=''
              style={{ marginRight: '5px' }}
              onClick={() => {
                createNotification('warning');
              }}>
              at right corner with other colors
            </Button>
          </Row>
        </Col>
      </Widget>
    </div>
  );
}

export function FilePickerAdvanced() {
  const { t } = useTranslation()

  const [refSeq, setRefSeq] = useRecoilState(refSeqInputAtom)
  const refSeqError = useRecoilValue(refSeqErrorAtom)
  const resetRefSeq = useResetRecoilState(refSeqInputAtom)

  const [geneMap, setGeneMap] = useRecoilState(geneMapInputAtom)
  const geneMapError = useRecoilValue(geneMapErrorAtom)
  const resetGeneMap = useResetRecoilState(geneMapInputAtom)

  const [refTree, setRefTree] = useRecoilState(refTreeInputAtom)
  const refTreeError = useRecoilValue(refTreeErrorAtom)
  const resetRefTree = useResetRecoilState(refTreeInputAtom)

  const [qcConfig, setQcConfig] = useRecoilState(qcConfigInputAtom)
  const qcConfigError = useRecoilValue(qcConfigErrorAtom)
  const resetQcConfig = useResetRecoilState(qcConfigInputAtom)

  const [virusProperties, setVirusProperties] = useRecoilState(virusPropertiesInputAtom)
  const virusPropertiesError = useRecoilValue(virusPropertiesErrorAtom)
  const resetVirusProperties = useResetRecoilState(virusPropertiesInputAtom)

  const [primersCsv, setPrimersCsv] = useRecoilState(primersCsvInputAtom)
  const primersCsvError = useRecoilValue(primersCsvErrorAtom)
  const resetPrimersCsv = useResetRecoilState(primersCsvInputAtom)

  const iconCsv = useMemo(() => <FileIconCsv size={30} />, [])
  const iconFasta = useMemo(() => <FileIconFasta size={30} />, [])
  const iconGff = useMemo(() => <FileIconGff size={30} />, [])
  const iconJson = useMemo(() => <FileIconJson size={30} />, [])

  return (
    <Row noGutters>
      <Col>
        <FilePicker
          className="my-3"
          compact
          icon={iconJson}
          title={t('Reference tree')}
          exampleUrl="https://example.com/tree.json"
          pasteInstructions={t('Enter tree data in Auspice JSON v2 format')}
          input={refTree}
          error={refTreeError}
          onRemove={resetRefTree}
          onInput={setRefTree}
        />

        <FilePicker
          className="my-3"
          compact
          icon={iconFasta}
          title={t('Root sequence')}
          exampleUrl="https://example.com/root_seq.fasta"
          pasteInstructions={t('Enter root sequence data in FASTA or plain text format')}
          input={refSeq}
          error={refSeqError}
          onRemove={resetRefSeq}
          onInput={setRefSeq}
        />

        <FilePicker
          className="my-3"
          compact
          icon={iconJson}
          title={t('Quality control')}
          exampleUrl="https://example.com/qc.json"
          pasteInstructions={t('Enter QC config in JSON format')}
          input={qcConfig}
          error={qcConfigError}
          onRemove={resetQcConfig}
          onInput={setQcConfig}
        />

        <FilePicker
          className="my-3"
          compact
          icon={iconJson}
          title={t('Virus properties')}
          exampleUrl="https://example.com/virus_properties.json"
          pasteInstructions={t('Enter Virus attributes in JSON format')}
          input={virusProperties}
          error={virusPropertiesError}
          onRemove={resetVirusProperties}
          onInput={setVirusProperties}
        />

        <FilePicker
          className="my-3"
          compact
          icon={iconGff}
          title={t('Gene map')}
          exampleUrl="https://example.com/gene_map.json"
          pasteInstructions={t('Enter gene map data in JSON format')}
          input={geneMap}
          error={geneMapError}
          onRemove={resetGeneMap}
          onInput={setGeneMap}
        />

        <FilePicker
          className="my-3"
          compact
          icon={iconCsv}
          title={t('PCR primers')}
          exampleUrl="https://example.com/pcr_primers.csv"
          pasteInstructions={t('Enter PCR primers data in CSV format')}
          input={primersCsv}
          error={primersCsvError}
          onRemove={resetPrimersCsv}
          onInput={setPrimersCsv}
        />
      </Col>
    </Row>
  )
}

TutorOverview = () => {
    let tutorData = useSelector(selectTutorData);
    let dispatch = useDispatch();

    let [tooltipsOpen, setTooltipsOpen] = useState<Array<boolean>>([false, false, false, false, false, false, false]);
    let [weeklyAppointments, setWeeklyAppointments] = useState<Array<Appointment>>([]);
    let [tutorCourses, setTutorCourses] = useState<Array<Course>>([]);

    let daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    let currDate = useMemo(() => {return new Date()}, [])
    let currWeekMap = GetWeekMap(currDate);

    useEffect(() => {
        const getTutorAppointments = async () => {
            return (await api.GetTutorAppointments(tutorData.tutorId)).data;
        }

        getTutorAppointments().then(value => {
                setWeeklyAppointments(GetWeeklyAppointments(value, currDate));
                dispatch(tutorDataActions.setAppointment(value));
            }
        )
    }, [currDate, tutorData.tutorId, dispatch]);

    useEffect(() => {
        const getTutorCourses = async () => {
            return (await api.GetCoursesByTutorId(tutorData.tutorId)).data;
        }

        getTutorCourses().then(value => {
                setTutorCourses(value);
                dispatch(tutorDataActions.setCourses(value));
            }
        )
    }, [tutorData.tutorId, dispatch]);

    return (
        <Container className="overview" fluid>
            <Row className="title" style={{ marginTop: '25px'}}>
                <div className="profile-text">Overview</div>
            </Row>

            <hr></hr>

            <Row>
                <Col className="courses-col" md={6}>
                    <Row className="title" style={{ marginTop: '25px'}}>
                        <h2>Courses</h2>
                    </Row>
                    <Container className="table-container">
                        <Table className="table-striped">
                            <tbody>
                                {tutorCourses.map((course, i) => {
                                        return (
                                            <tr key={i}>
                                                <td className="td-bold">{course.name}</td>
                                            </tr>
                                        );
                                    }
                                )}
                                {tutorCourses.length > 0 ? <></> :
                                    <tr><td className="td-bold">No courses found!<br/>Change which courses you plan to tutor from the Settings page.</td></tr>
                                }
                            </tbody>
                        </Table>
                    </Container>
                </Col>
                <Col className="weekly-sched-col" md={6}>
                    <Row className="title" style={{ marginTop: '25px'}}>
                        <h2>Weekly Tutoring Schedule</h2>
                    </Row>
                    <Container className="table-container">
                        <Table className="table-striped">
                            <tbody>
                                {Array.from(Array(7).keys()).map(day => {
                                    let date = currWeekMap.get(day);
                                    if(date !== undefined) {
                                        let date_time = BreakDownTime(date.toISOString());
                                        let daily_appointments = GetDailyAppointments(weeklyAppointments, date);
                                        let unconfirmed = UnconfirmedMeetingExists(daily_appointments);
                                        return (
                                            <tr key={day}>
                                                <td className="td-bold">{daysOfWeek[day]}, {date_time[0].split(",")[0]}</td>
                                                <td>
                                                    {daily_appointments.length > 0 ? daily_appointments.length : "No"} Meetings
                                                    {unconfirmed ? 
                                                    <span className="sched-pending">
                                                        <FontAwesomeIcon id={"pending-icon-"+day} icon={faQuestionCircle}/>
                                                        <Tooltip placement="top" isOpen={tooltipsOpen[day]} target={"pending-icon-"+day} toggle={() => {
                                                            let tooltipsOpenCopy = [...tooltipsOpen];
                                                            tooltipsOpenCopy[day] = !tooltipsOpen[day];
                                                            setTooltipsOpen(tooltipsOpenCopy); 
                                                        }}>
                                                            You have one or more unconfirmed meetings on this day.
                                                        </Tooltip>
                                                    </span> : <></>}
                                                </td>
                                            </tr>
                                        );
                                    } else {
                                        return <></>;
                                    }
                                })}
                            </tbody>
                        </Table>
                    </Container>
                </Col>
            </Row>

        </Container>
    );
}

export function Downloads() {
  const { t } = useTranslation()

  return (
    <Row noGutters className="mt-5">
      <Col>
        <Row noGutters>
          <Col>
            <h3 className="text-center mx-2">{t('For more advanced use-cases:')}</h3>
          </Col>
        </Row>

        <Row noGutters>
          <Col lg={4}>
            <Card>
              <CardHeader>
                <h4 className="text-center">
                  <span>
                    <span>{t('Nextclade CLI')}</span>
                  </span>
                </h4>
              </CardHeader>

              <CardBody>
                <p className="text-justify mx-2">
                  {t('Nextclade CLI is a command line version of this web application.')}
                </p>

                <p className="text-justify mx-2">
                  {t(
                    'It is a single-file, standalone executable, consumes the same inputs and the same outputs as this web application, but is faster, more configurable and more convenient for scripting, automation, and integration into bioinformatics pipelines. Nextclade CLI is available for as a single-file download for different platforms and as a Docker container image. After download, type "nextclade --help" to get started.',
                  )}
                </p>
              </CardBody>

              <CardFooter>
                <DownloadLinkList>
                  <DownloadLink
                    Icon={iconLinux}
                    text={t('Linux')}
                    url="https://github.com/nextstrain/nextclade/releases/latest/download/nextclade-Linux-x86_64"
                    download
                  />
                  <DownloadLink
                    Icon={iconApple}
                    text={t('macOS (Intel)')}
                    url="https://github.com/nextstrain/nextclade/releases/latest/download/nextclade-MacOS-x86_64"
                    download
                  />
                  <DownloadLink
                    Icon={iconApple}
                    text={t('macOS (Apple Silicon)')}
                    url="https://github.com/nextstrain/nextclade/releases/latest/download/nextclade-MacOS-arm64"
                    download
                  />
                  <DownloadLink
                    Icon={iconGithub}
                    text={t('All versions')}
                    url="https://github.com/nextstrain/nextclade/releases"
                  />
                  <DownloadLink
                    Icon={iconDocker}
                    text={t('nextstrain/nextclade')}
                    url="https://hub.docker.com/r/nextstrain/nextclade"
                  />
                  <DownloadLink
                    Icon={iconBook}
                    text={t('Documentation')}
                    url="https://docs.nextstrain.org/projects/nextclade/en/stable/user/nextclade-cli.html"
                  />
                </DownloadLinkList>
              </CardFooter>
            </Card>
          </Col>

          <Col lg={4}>
            <Card>
              <CardHeader>
                <h4 className="text-center">
                  <span>
                    <span>{t('Nextalign CLI')}</span>
                  </span>
                </h4>
              </CardHeader>

              <CardBody>
                <p className="text-justify mx-2">{t('Nextalign CLI is a sequence reference alignment tool.')}</p>

                <p className="text-justify mx-2">
                  {t(
                    'It uses the same alignment algorithm as Nextclade. Useful if you only need sequence alignment and translated peptides, without full analysis and quality control features. It is available as a set of static executables for different platforms and as a Docker container image. After download, type "nextalign --help" to get started.',
                  )}
                </p>
              </CardBody>

              <CardFooter>
                <DownloadLinkList>
                  <DownloadLink
                    Icon={iconLinux}
                    text={t('Linux')}
                    url="https://github.com/nextstrain/nextclade/releases/latest/download/nextalign-Linux-x86_64"
                    download
                  />
                  <DownloadLink
                    Icon={iconApple}
                    text={t('macOS (Intel)')}
                    url="https://github.com/nextstrain/nextclade/releases/latest/download/nextalign-MacOS-x86_64"
                    download
                  />
                  <DownloadLink
                    Icon={iconApple}
                    text={t('macOS (Apple Silicon)')}
                    url="https://github.com/nextstrain/nextclade/releases/latest/download/nextalign-MacOS-arm64"
                    download
                  />
                  <DownloadLink
                    Icon={iconGithub}
                    text={t('All versions')}
                    url="https://github.com/nextstrain/nextclade/releases"
                  />
                  <DownloadLink
                    Icon={iconDocker}
                    text={t('nextstrain/nextalign')}
                    url="https://hub.docker.com/r/nextstrain/nextalign"
                  />
                  <DownloadLink
                    Icon={iconBook}
                    text={t('Documentation')}
                    url="https://docs.nextstrain.org/projects/nextclade/en/stable/user/nextalign-cli.html"
                  />
                </DownloadLinkList>
              </CardFooter>
            </Card>
          </Col>

          <Col lg={4}>
            <Card>
              <CardHeader>
                <h4 className="text-center">
                  <span>
                    <span>{t('Nextstrain')}</span>
                  </span>
                </h4>
              </CardHeader>

              <CardBody>
                <p className="text-justify mx-2">{t('Nextclade is part of Nextstrain.')}</p>

                <p className="text-justify mx-2">
                  {t(
                    'Nextstrain is an open-source project to harness the scientific and public health potential of pathogen genome data. It provides continually-updated view of publicly available data with powerful analyses and visualizations showing pathogen evolution and epidemic spread. The goal is to aid epidemiological understanding and improve outbreak response.',
                  )}
                </p>

                <p className="text-justify mx-2">
                  {t('Learn more about Nextstrain project as a whole, and about its subprojects.')}
                </p>
              </CardBody>

              <CardFooter>
                <DownloadLinkList>
                  <DownloadLink Icon={iconLinux} text={t('nextstrain.org')} url="https://nextstrain.org/" />
                  <DownloadLink Icon={iconApple} text={t('Source code')} url="https://github.com/nextstrain" />
                  <DownloadLink Icon={iconApple} text={t('Documentation: Home')} url="https://docs.nextstrain.org/" />
                  <DownloadLink
                    Icon={iconGithub}
                    text={t('Documentation: Augur')}
                    url="https://docs.nextstrain.org/projects/augur"
                  />
                  <DownloadLink
                    Icon={iconDocker}
                    text={t('Documentation: Auspice')}
                    url="https://docs.nextstrain.org/projects/auspice"
                  />
                  <DownloadLink
                    Icon={iconBook}
                    text={t('Documentation: Nextstrain CLI')}
                    url="https://docs.nextstrain.org/projects/cli"
                  />
                  <DownloadLink Icon={iconGlobe} text={t('auspice.us')} url="https://auspice.us/" />
                </DownloadLinkList>
              </CardFooter>
            </Card>
          </Col>
        </Row>
      </Col>
    </Row>
  )
}