react-device-detect#isBrowser JavaScript Examples

render () {
    const date = new Date()
    const year = date.getFullYear()
    return (
      <Segment attached className='app-footer-segment'>
        <div className='app-footer-container'>
          <span>
            <a
              href='https://internet.channeli.in/maintainer_site/'
              target='_blank'
              rel='noopener noreferrer'
            >
              {isBrowser ? 'Information Management Group' : 'IMG'}
            </a>
            {', '}
            <a
              href='https://iitr.ac.in/'
              target='_blank'
              rel='noopener noreferrer'
            >
              {isBrowser ? 'IIT Roorkee' : 'IITR'}
            </a>
            {'  '}
            <Icon fitted name='copyright outline' /> {year}
          </span>
          <span>
            Made with <Icon fitted name='heart' color='red' /> by{' '}
            <a
              href='https://internet.channeli.in/maintainer_site/team/nisarg73/'
              target='_blank'
              rel='noopener noreferrer'
            >
              nisarg73
            </a>
          </span>
        </div>
      </Segment>
    )
  }

render () {
    return (
      <Segment attached className='app-header-segment'>
        <div className='app-header-container'>
          {isBrowser ? (
            <h1>JEE Opening Closing Ranks</h1>
          ) : (
            <h1>JEE Cutoff Ranks</h1>
          )}
        </div>
      </Segment>
    )
  }

export function Input(props) {
  const { autoFocus, value, ...inputProps } = props

  return (
    <input
      {...inputProps}
      autoFocus={autoFocus && isBrowser}
      value={value}
      className={DEFAULT_INPUT_CLASSES}
    />
  )
}

Dashboard = () => {
  return (
    <Provider store={store}>
      <Container>
        {isMobile && (
          <NoSSR>
            <NetworkMap
              height={isMobile ? '50%' : '100%'}
              width={isMobile ? '100%' : '70%'}
            />
          </NoSSR>
        )}
        <FilterPanel />
        <SidePanel />
        {isBrowser && (
          <NoSSR>
            <NetworkMap
              height={isMobile ? '50%' : '100%'}
              width={isMobile ? '100%' : '70%'}
            />
          </NoSSR>
        )}
      </Container>
    </Provider>
  )
}

updateScroll = () => isBrowser && window.scroll.update()

SimpleInput = (props) => {
  const {
    className,
    name,
    dataType,
    register,
    required,
    pattern,
    validate,
    autoCorrect,
    label,
    loading,
    errorMessage,
    autoComplete,
    autoFocus,
    ...inputProps
  } = props

  return (
    <>
      <span className={classnames('flex flex-col xs:flex-row w-full relative', className)}>
        <label className='xs:w-1/4 xs:text-right my-auto xs:mr-4' htmlFor={name}>
          {label} {dataType && <span className='ml-1 text-xxs opacity-70'>{`${dataType}`}</span>}
        </label>
        <input
          {...inputProps}
          type={inputProps.type || 'text'}
          className='bg-card xs:w-3/4 p-2 rounded-sm outline-none focus:outline-none active:outline-none hover:bg-primary focus:bg-primary trans trans-fast border border-transparent focus:border-card'
          id={name}
          autoFocus={autoFocus && isBrowser}
          name={name}
          ref={register?.({ required, pattern, validate })}
          autoCorrect={autoCorrect || 'off'}
          autoComplete={autoComplete || 'hidden'}
        />
        {loading && (
          <div className='absolute right-0 mr-2 mt-2'>
            <ClipLoader size={14} color='rgba(255,255,255,0.3)' />
          </div>
        )}
      </span>
      {errorMessage && <span className='ml-auto text-xxs text-red font-bold'>{errorMessage}</span>}
    </>
  )
}

render () {
    const {
      data,
      year,
      round_no,
      institute_type,
      quota,
      currPage,
      count,
      search,
      clickedColumn,
      direction,
      activeIndexs,
      institute_short,
      program,
      duration,
      degree,
      category,
      pool,
      userrank,
      userdelta
    } = this.state
    return (
      <div className='app-main' id='scroll-to-filter'>
        <Segment>
          <div className='primary-filters-margin'>
            <div className='year-type'>
              <div
                className={
                  isBrowser ? 'year-round-browser' : 'year-round-mobile'
                }
              >
                <div>
                  <Button
                    content='Year'
                    color='facebook'
                    className='year-button'
                  />
                  <Dropdown
                    name='year'
                    value={year}
                    placeholder='All'
                    selection
                    compact
                    options={yearDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
                {year === '2021' && (
                  <div>
                    <Button
                      className={
                        isBrowser
                          ? 'round-button-browser'
                          : 'round-button-mobile'
                      }
                      content='Round'
                      color='facebook'
                    />
                    <Dropdown
                      name='round_no'
                      value={round_no}
                      placeholder='Round no'
                      selection
                      compact
                      options={roundDropDownOptions}
                      onChange={this.handleChange}
                    />
                  </div>
                )}
              </div>
              <div className='year-type-margin'>
                <Form>
                  <Form.Group className='form-group-margin-bottom'>
                    <Form.Field>
                      <Button content='College' color='facebook' />
                    </Form.Field>
                    <Form.Field>
                      <Radio
                        className='college-margin'
                        label='IIT'
                        name='institute_type'
                        value='IIT'
                        checked={institute_type === 'IIT'}
                        onChange={this.handleChange}
                      />
                    </Form.Field>
                    <Form.Field>
                      <Radio
                        className='college-margin'
                        label='NIT'
                        name='institute_type'
                        value='NIT'
                        checked={institute_type === 'NIT'}
                        onChange={this.handleChange}
                      />
                    </Form.Field>
                  </Form.Group>
                </Form>
              </div>
              {institute_type === 'NIT' && (
                <div className='year-type-margin'>
                  <Form>
                    <Form.Group className='form-group-margin-bottom'>
                      <Form.Field>
                        <Button
                          content='State'
                          color='facebook'
                          className='state-button'
                        />
                      </Form.Field>
                      <Form.Field>
                        <Radio
                          className='college-margin'
                          label='HS'
                          name='quota'
                          value='HS'
                          checked={quota === 'HS'}
                          onChange={this.handleChange}
                        />
                      </Form.Field>
                      <Form.Field>
                        <Radio
                          className='college-margin'
                          label='OS'
                          name='quota'
                          value='OS'
                          checked={quota === 'OS'}
                          onChange={this.handleChange}
                        />
                      </Form.Field>
                      <Form.Field>
                        <Radio
                          className='college-margin'
                          label='Both'
                          name='quota'
                          value='All'
                          checked={quota === ''}
                          onChange={this.handleChange}
                        />
                      </Form.Field>
                    </Form.Group>
                  </Form>
                </div>
              )}
            </div>
            <SemanticToastContainer />
          </div>

          <div className='year-note'>
            To all the future JEE aspirants, Best of Luck! :))
          </div>
        </Segment>
        <Accordion fluid styled>
          <Accordion.Title
            active={activeIndexs.includes(-1)}
            index={-1}
            onClick={this.handleAccordian}
          >
            <Icon name='dropdown' />
            Instructions
          </Accordion.Title>
          <Accordion.Content active={activeIndexs.includes(-1)}>
            <Message info list={instructions} />
          </Accordion.Content>

          <Accordion.Title
            active={activeIndexs.includes(0)}
            index={0}
            onClick={this.handleAccordian}
          >
            <Icon name='dropdown' />
            Primary Filters
          </Accordion.Title>
          <Accordion.Content active={activeIndexs.includes(0)}>
            <div className={isBrowser ? 'secondary-filters' : null}>
              <div className={isBrowser ? 'secondary-filters-col' : null}>
                <div className='secondary-filters-margin'>
                  <Button content='Institute' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='institute_short'
                    value={institute_short}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={
                      this.state.institute_type === 'IIT'
                        ? iitDropDownOptions
                        : nitDropDownOptions
                    }
                    onChange={this.handleChange}
                  />
                </div>
                <div className='secondary-filters-margin'>
                  <Button content='Program' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='program'
                    value={program}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={
                      this.state.institute_type === 'IIT'
                        ? iitProgramDropDownOptions
                        : nitProgramDropDownOptions
                    }
                    onChange={this.handleChange}
                  />
                </div>
              </div>
              <div className={isBrowser ? 'secondary-filters-col' : null}>
                <div className='secondary-filters-margin'>
                  <Button content='Degree' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='degree'
                    value={degree}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={
                      this.state.institute_type === 'IIT'
                        ? iitDegreeDropDownOptions
                        : nitDegreeDropDownOptions
                    }
                    onChange={this.handleChange}
                  />
                </div>
                <div className='secondary-filters-margin'>
                  <Button content='Duration' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='duration'
                    value={duration}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={durationDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
              </div>
              <div className={isBrowser ? 'secondary-filters-col' : null}>
                <div className='secondary-filters-margin'>
                  <Button content='Pool' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='pool'
                    value={pool}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={poolDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
                <div className='secondary-filters-margin'>
                  <Button content='Category' color='facebook' />
                  <Dropdown
                    className='dropdown-filters'
                    name='category'
                    value={category}
                    placeholder='All'
                    selection
                    search
                    clearable
                    options={categoryDropDownOptions}
                    onChange={this.handleChange}
                  />
                </div>
              </div>
            </div>
          </Accordion.Content>

          <Accordion.Title
            active={activeIndexs.includes(1)}
            index={1}
            onClick={this.handleAccordian}
          >
            <Icon name='dropdown' />
            Personal Rank based search
          </Accordion.Title>
          <Accordion.Content active={activeIndexs.includes(1)}>
            <div className='personalized-filter'>
              <div className='personlized-filter-align'>
                <Button
                  content={
                    institute_type === 'IIT' ? 'Adv. Rank' : 'Mains Rank'
                  }
                  color='blue'
                />
                <Input
                  style={{ width: 130, height: 37 }}
                  type='number'
                  name='userrank'
                  value={userrank}
                  onChange={this.handlePersonalFilter}
                  placeholder='Enter your JEE Rank'
                />
              </div>
              <div className='personlized-filter-align'>
                <Button content='Delta' color='blue' />
                <Input
                  style={{ width: 130, height: 37 }}
                  type='number'
                  name='userdelta'
                  value={userdelta}
                  onChange={this.handlePersonalFilter}
                  placeholder='Enter prefered Delta'
                />
              </div>
            </div>
          </Accordion.Content>
        </Accordion>

        <div className='reset-margin'>
          <Button color='google plus' onClick={this.handleResetFilters}>
            Reset Filters
          </Button>
        </div>

        <div>
          <div className='global-search'>
            <Search
              name='search'
              value={search}
              placeholder='Search by any keyword'
              open={false}
              fluid
              onSearchChange={this.handleChange}
            />
          </div>
        </div>

        <div className='table-overflow table-margin' id='scroll-ref'>
          <Table celled color={'blue'} sortable unstackable>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell textAlign='center'>Sr.</Table.HeaderCell>
                <Table.HeaderCell textAlign='center'>Year</Table.HeaderCell>
                {year === '2021' && (
                  <Table.HeaderCell textAlign='center'>Round</Table.HeaderCell>
                )}
                <Table.HeaderCell
                  sorted={
                    clickedColumn === 'institute_short' ? direction : null
                  }
                  onClick={this.handleSort('institute_short')}
                  textAlign='center'
                >
                  Institute
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'program_name' ? direction : null}
                  onClick={this.handleSort('program_name')}
                  textAlign='center'
                >
                  Program
                </Table.HeaderCell>
                {institute_type === 'NIT' && (
                  <Table.HeaderCell textAlign='center'>Quota</Table.HeaderCell>
                )}
                <Table.HeaderCell
                  sorted={
                    clickedColumn === 'program_duration' ? direction : null
                  }
                  onClick={this.handleSort('program_duration')}
                  textAlign='center'
                >
                  Duration
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'degree_short' ? direction : null}
                  onClick={this.handleSort('degree_short')}
                  textAlign='center'
                >
                  Degree
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'category' ? direction : null}
                  onClick={this.handleSort('category')}
                  textAlign='center'
                >
                  Category
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'pool' ? direction : null}
                  onClick={this.handleSort('pool')}
                  textAlign='center'
                >
                  Pool
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'opening_rank' ? direction : null}
                  onClick={this.handleSort('opening_rank')}
                  textAlign='center'
                >
                  Opening
                </Table.HeaderCell>
                <Table.HeaderCell
                  sorted={clickedColumn === 'closing_rank' ? direction : null}
                  onClick={this.handleSort('closing_rank')}
                  textAlign='center'
                >
                  Closing
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              {data.map(element => (
                <Table.Row key={data.indexOf(element)}>
                  <Table.Cell collapsing textAlign='center'>
                    {data.indexOf(element) + 1 + 50 * (currPage - 1)}
                  </Table.Cell>
                  <Table.Cell collapsing textAlign='center'>
                    {element.year}
                  </Table.Cell>
                  {year === '2021' && (
                    <Table.Cell collapsing textAlign='center'>
                      {element.round_no}
                    </Table.Cell>
                  )}
                  <Table.Cell textAlign='center'>
                    {element.institute_short}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.program_name}
                  </Table.Cell>
                  {institute_type === 'NIT' && (
                    <Table.Cell collapsing textAlign='center'>
                      {element.quota}
                    </Table.Cell>
                  )}
                  <Table.Cell collapsing textAlign='center'>
                    {element.program_duration}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.degree_short}
                  </Table.Cell>
                  <Table.Cell collapsing textAlign='center'>
                    {element.category}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>{element.pool}</Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.is_preparatory
                      ? element.opening_rank + ' - P'
                      : element.opening_rank}
                  </Table.Cell>
                  <Table.Cell textAlign='center'>
                    {element.is_preparatory
                      ? element.closing_rank + ' - P'
                      : element.closing_rank}
                  </Table.Cell>
                </Table.Row>
              ))}
            </Table.Body>
            <Table.Footer>
              <Table.Row>
                <Table.HeaderCell colSpan='10'>
                  <Pagination
                    activePage={currPage}
                    totalPages={data ? Math.ceil(count / 50) : '1'}
                    onClick={() =>
                      document.getElementById('scroll-ref').scrollIntoView()
                    }
                    onPageChange={this.handlePageChange}
                    firstItem={{
                      'aria-label': 'First item',
                      content: <Icon name='angle double left' />,
                      key: '1'
                    }}
                    prevItem={{
                      'aria-label': 'Previous item',
                      content: <Icon name='angle left' />,
                      key: '4'
                    }}
                    nextItem={{
                      'aria-label': 'Next item',
                      content: <Icon name='angle right' />,
                      key: '3'
                    }}
                    lastItem={{
                      'aria-label': 'Last item',
                      content: <Icon name='angle double right' />,
                      key: '2'
                    }}
                  />
                </Table.HeaderCell>
              </Table.Row>
            </Table.Footer>
          </Table>
          <Icon
            className='scroll-to-top'
            name='chevron circle up'
            size='big'
            color='grey'
            onClick={() => {
              document.getElementById('scroll-to-filter').scrollIntoView()
            }}
          />
        </div>
        <div className='github-repo'>
          *This is an open source project, if found helpful, do star{' '}
          <a
            href='https://github.com/nisarg73/jee-dashboard'
            target='_blank'
            rel='noopener noreferrer'
          >
            its github repo
          </a>{' '}
          :D
        </div>
      </div>
    )
  }

export function Input(props) {
  let {
    autoFocus,
    large,
    small,
    marginClasses,
    paddingClasses,
    borderClasses,
    bgClasses,
    textClasses,
    roundedClasses,
    pattern,
    isError,
    required,
    register,
    validate,
    disabled
  } = props

  const defaultTextClasses = 'text-xxs xs:text-sm sm:text-xl lg:text-2xl'

  if (roundedClasses === undefined) {
    roundedClasses = 'rounded-full'
  }

  if (marginClasses === undefined) {
    marginClasses = 'mb-2 lg:mb-2'
  }

  if (paddingClasses === undefined) {
    paddingClasses = 'px-8 py-3'
  }

  if (borderClasses === undefined) {
    borderClasses = 'border'
  }

  if (bgClasses === undefined) {
    bgClasses = 'bg-input'
  }

  if (textClasses === undefined) {
    if (large) {
      textClasses = 'font-bold text-3xl sm:text-5xl'
    } else if (small) {
      textClasses = 'text-xxs xs:text-xs sm:text-sm lg:text-base'
    } else {
      textClasses = defaultTextClasses
    }
  }

  let opacity = ''
  if (disabled) {
    opacity = 'border-transparent opacity-60'
  }

  const className = classnames(
    DEFAULT_INPUT_CLASSES,
    opacity,
    marginClasses,
    paddingClasses,
    borderClasses,
    bgClasses,
    textClasses,
    roundedClasses,
    props.className,
    {
      'text-red': isError
    }
  )

  const newProps = omit(props, [
    'alignLeft',
    'label',
    'small',
    'large',
    'marginClasses',
    'paddingClasses',
    'borderClasses',
    'bgClasses',
    'inlineButton',
    'roundedClasses',
    'textClasses',
    'isError',
    'isLight',
    'register',
    'required', // required is consumed by the register func but we don't want it on the <input />
    'pattern',
    'validate',
    'unsignedNumber',
    'unsignedWholeNumber',
    'centerLabel',
    'rightLabel',
    'bottomRightLabel'
  ])

  return (
    <>
      <input
        {...newProps}
        autoFocus={autoFocus && isBrowser}
        ref={register?.({
          required,
          pattern,
          validate
        })}
        // rounded-full
        className={classnames(className, 'focus:outline-none pl-6')}
      />
    </>
  )
}

export function Input(props) {
  let {
    autoFocus,
    large,
    small,
    marginClasses,
    paddingClasses,
    borderClasses,
    bgClasses,
    textClasses,
    roundedClasses,
    pattern,
    isError,
    required,
    register,
    validate
  } = props

  const defaultTextClasses = 'text-xs xs:text-sm sm:text-xl lg:text-2xl'

  if (roundedClasses === undefined) {
    roundedClasses = 'rounded-full'
  }

  if (marginClasses === undefined) {
    marginClasses = ''
  }

  if (paddingClasses === undefined) {
    if (large) {
      paddingClasses = 'px-12 py-3'
    } else {
      paddingClasses = 'px-8 py-3'
    }
  }

  if (borderClasses === undefined) {
    borderClasses = 'border border-accent-3'
  }

  if (bgClasses === undefined) {
    bgClasses = 'bg-input'
  }

  if (textClasses === undefined) {
    if (large) {
      textClasses = 'text-3xl sm:text-4xl'
    } else if (small) {
      textClasses = 'text-xxs xs:text-xs sm:text-sm lg:text-base'
    } else {
      textClasses = defaultTextClasses
    }
  }

  const className = classnames(
    DEFAULT_INPUT_CLASSES,
    marginClasses,
    paddingClasses,
    borderClasses,
    bgClasses,
    textClasses,
    roundedClasses,
    props.className,
    {
      'text-red': isError
    }
  )

  const newProps = omit(props, [
    'alignLeft',
    'label',
    'small',
    'large',
    'marginClasses',
    'paddingClasses',
    'borderClasses',
    'bgClasses',
    'inlineButton',
    'roundedClasses',
    'textClasses',
    'isError',
    'isLight',
    'register',
    'required', // required is consumed by the register func but we don't want it on the <input />
    'pattern',
    'validate',
    'unsignedNumber',
    'unsignedWholeNumber',
    'rightLabel',
    'bottomRightLabel'
  ])

  return (
    <input
      {...newProps}
      autoFocus={autoFocus && isBrowser}
      ref={register({
        required,
        pattern,
        validate
      })}
      className={classnames(className, 'focus:outline-none')}
      // className={classnames(className, 'custom-input focus:outline-none')}
    />
  )
}

function DatePicker({ updateGraph, selectFilter }) {
  const [selectedDay, changeSelectedDay] = useState(new Date());
  const [isDayPickerVisible, changeDayPickerVisibility] = useState(false);

  const toggleDayPickerVisibility = () => changeDayPickerVisibility(!isDayPickerVisible);

  function handleDayClick(date, modifiers) {

    // Do not proceed with click action if the date is disabled
    if(modifiers.disabled){
      return;
    }

    toggleDayPickerVisibility();

    function formatDate(date) {
      var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear()

      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day

      return [year, month, day].join('-')
    }

    const newDate = formatDate(date)

    if (formatDate(selectedDay) !== newDate) {
      console.log(newDate)
      changeSelectedDay(date)

      const apiURL =
        'https://api.rootnet.in/covid19-in/unofficial/covid19india.org/patientdb/' +
        newDate

      fetch(apiURL, {
        cors: 'no-cors',
        method: 'GET',
        redirect: 'follow',
      })
        .then(resp => resp.json())
        .then(res => {
          console.log(res)
          // Update the graph only if res.success is true
          if(res.success){
            updateGraph(rowsToGraph(res.data.rawPatientData))
            selectFilter('P2P');
          }
        })
    }
  }

  const renderDayPicker = () => isDayPickerVisible ? (
    <DayPicker
      selectedDays={selectedDay}
      onDayClick={handleDayClick}
      disabledDays={[
        {
          before: new Date(2020, 2, 23),
          after: new Date(),
        },
      ]}
    />
  ) : null

  return (
    <Container>
      {isBrowser ? (
        <>
          {renderDayPicker()}
          <DatePickerButton
            onClick={toggleDayPickerVisibility}
          >
            <span>{selectedDay.toDateString()}</span>
          </DatePickerButton>
        </>
      ) : null}
    </Container>
  )
}