semantic-ui-react#Dropdown JavaScript Examples

function Mobile() {
  return (
    <Responsive {...Responsive.onlyMobile}>
      <Nav>
        <Menu.Menu position="right">
          <Dropdown item icon={null} trigger={<Icon name="bars" />}>
            <Dropdown.Menu items={items}>
              {items.map((item, idx) => (
                <Dropdown.Item key={idx} {...item} />
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Menu.Menu>
      </Nav>
    </Responsive>
  );
}

render() {
    const { disabled } = this.props;
    const { header, confirmModalOpened, type } = this.state;
    return (
      <Dropdown
        button
        fluid
        labeled
        disabled={disabled}
        text="Decline request"
        icon="cancel"
        className="icon negative"
      >
        <Dropdown.Menu>
          <Confirm
            confirmButton="Decline request"
            content="Are you sure you want to decline this request?"
            header={`Decline: ${header}`}
            open={confirmModalOpened}
            onCancel={this.onCancel}
            onConfirm={() => this.onConfirm(type)}
          />
          <Dropdown.Header content="Specify a reason" />
          {this.renderOptions()}
        </Dropdown.Menu>
      </Dropdown>
    );
  }

SortByElementMobile = ({
  currentSortBy,
  options,
  onValueChange,
}) => {
  return (
    <Dropdown
      text="Sort"
      size="small"
      pointing="top right"
      className="link item"
      item
    >
      <Dropdown.Menu>
        <Dropdown.Header icon="sort" content="Sort by" />
        {options.map((element) => {
          return (
            <Dropdown.Item
              key={element.value}
              value={element.value}
              text={element.text}
              onClick={(e, { value }) => onValueChange(value)}
            />
          );
        })}
      </Dropdown.Menu>
    </Dropdown>
  );
}

render() {
        return (
            <Table.Row disabled={this.props.loading}>
                <Table.Cell>{this.props.word}</Table.Cell>
                <Table.Cell>
                    <Dropdown
                        fluid
                        selection
                        name='weight'
                        value={this.state.weight}
                        options={[
                            { key: 'A', text: 'A', value: 'A' },
                            { key: 'B', text: 'B', value: 'B' },
                            { key: 'C', text: 'C', value: 'C' },
                            { key: 'D', text: 'D', value: 'D' },
                        ]}
                        onChange={this.handleSelectChange}
                    />
                </Table.Cell>
                <Table.Cell textAlign='right' collapsing>
                    <ConfirmDeleteDialog
                        id={this.props.word}
                        table='weights'
                    />
                </Table.Cell>
            </Table.Row>
        );
    }

SortByElement = ({ currentSortBy, options, onValueChange }) => {
  const _options = options.map((element, index) => {
    return { key: index, text: element.text, value: element.value };
  });
  return (
    <Dropdown
      selection
      options={_options}
      value={currentSortBy}
      onChange={(e, { value }) => onValueChange(value)}
    />
  );
}

renderLevel() {
    const handleOnChange = (e, data) => {
      this.level = _.findWhere(data.options, { value: data.value });
      console.log(this.level);
    };
    // eslint-disable-next-line max-len
    const Levels = [{ key: 0, text: 'Experienced', value: 'Experienced' }, {
      key: 1,
      text: 'Novice',
      value: 'Novice',
    }, { key: 2, text: 'Don\'t know, but would like to learn', value: 'Don\'t know, but would like to learn' }];
    // eslint-disable-next-line max-len
    // return Skillname.map((skill, i) => <Dropdown.Item key={i} onClick={() => this.selectSkill(skill)} >{skill}</Dropdown.Item>);
    // eslint-disable-next-line max-len
    return <Dropdown placeholder="please pick a Level for the skill" fluid selection options={Levels}
                     onChange={handleOnChange} />;
  }

renderTools() {
    const handleOnChange = (e, data) => {
      this.tool = _.findWhere(data.options, { value: data.value });
      // console.log(this.skill);
    };
    const ToolsArray = this.props.tools;
    // console.log(SkillArray);
    const Toolname = [];
    for (let i = 0; i < ToolsArray.length; i++) {
      const sn = {
        key: ToolsArray[i].slugID, docid: ToolsArray[i]._id,
        text: ToolsArray[i].name, value: ToolsArray[i].name,
      };
      Toolname.push(sn);
    }
    return <Dropdown placeholder="please pick a skill" selection options={Toolname} onChange={handleOnChange} />;
  }

renderSkill() {
    const handleOnChange = (e, data) => {
      this.skill = _.findWhere(data.options, { value: data.value });
      console.log(this.skill);
    };
    const SkillArray = this.props.skills;
    // console.log(SkillArray);
    const Skillname = [];
    for (let i = 0; i < SkillArray.length; i++) {
      const sn = {
        key: SkillArray[i].slugID, docid: SkillArray[i]._id,
        text: SkillArray[i].name, value: SkillArray[i].name,
      };
      Skillname.push(sn);
    }
    return <Dropdown placeholder="please pick a skill" selection options={Skillname} onChange={handleOnChange} />;
  }

renderDropDown() {
    const _select = (e, data) => {
      const newState = { select: data.value };
      this.setState(newState);
    };
    const options = [
      { key: 0, text: 'sort the teams by the challenges that match your challenges', value: 'default' },
      { key: 1, text: 'sort by best fit teams', value: 'best' },
      { key: 2, text: 'sort the teams by the skills that match your skills', value: 'skill' },
      { key: 3, text: 'sort the teams by the tools that match your tools', value: 'tool' },
      { key: 4, text: 'sort the teams by the name in alphabet order', value: 'AToZ' },
    ];
    return <div>
      <Grid stackable columns={2} style={{ paddingTop: '1rem' }}>
        <Grid.Column width={7}>
          <Header>Please select a filter to reorder the teams: </Header>
        </Grid.Column>
        <Grid.Column>
          <Dropdown style={{ fontSize: `${20}px`, width: 'device-width' }} options={options} onChange={_select}
                    placeholder="Select an option to reorder the team" />
        </Grid.Column>
      </Grid>
      <hr />
    </div>;
  }

render() {
    const { i18n } = this.props;
    const language = languages[i18n.language];

    const switchLanguage = (value, text) => () => {
      i18n.changeLanguage(value);
      this.props.handleChangeLanguage(text);
    };

    return language ? (
      <div className="language-selector">
        <Dropdown text={language}>
          <Dropdown.Menu className={this.props.className}>
            {whitelist.map((key) => (
              <Dropdown.Item
                selected={key === i18n.language}
                key={key}
                text={languages[key]}
                onClick={switchLanguage(key, languages[key])}
              />
            ))}
          </Dropdown.Menu>
        </Dropdown>
      </div>
    ) : null;
  }

render() {
    const { modelName } = this.props;
    const searchConfig = getSearchConfig(modelName);

    return (
      <Dropdown
        item
        upward={false}
        size="small"
        pointing="top left"
        simple
        className="link item mobile-filters-dropdown"
        disabled={_isEmpty(searchConfig.FILTERS)}
        text="Filters"
        closeOnBlur
        closeOnEscape
        scrolling
      >
        <Dropdown.Menu key="sub-menu">
          <Dropdown.Header>Refine search</Dropdown.Header>
          <Accordion styled fluid>
            {searchConfig.FILTERS.map((filter) => (
              <BucketAggregation
                key={filter.field}
                title={filter.title}
                agg={{ field: filter.field, aggName: filter.aggName }}
                overridableId="menu"
              />
            ))}
          </Accordion>
        </Dropdown.Menu>
      </Dropdown>
    );
  }

function SearchOptions({ totalCount, fieldset, ranking, onSearch, relatedId }) {
  return (
    <>
      <Container>
        {totalCount > 0 && (
          <>
            <b>{totalCount}</b> matches
          </>
        )}
        <span>
          Searching in{' '}
          <Dropdown
            inline
            defaultValue={
              fieldsets.find(
                ({ value }, i) => fieldset === value || (!fieldset && i === 0)
              ).value
            }
            options={fieldsets.map((flds, id) => ({ id, ...flds }))}
            onChange={(event, { value }) => onSearch({ fieldset: value })}
          />
          {' and sorting by '}
          <Dropdown
            inline
            defaultValue={
              rankings.find(
                ({ value }, i) => ranking === value || (!ranking && i === 0)
              ).value
            }
            options={rankings.map((rnk, id) => ({ id, ...rnk }))}
            onChange={(event, { value }) => onSearch({ ranking: value })}
          />
        </span>
      </Container>
      {relatedId && <RelatedArticle id={relatedId} />}
    </>
  );
}

PostItemView = (props) => {
  return (
    <>
      <Item.Group divided>
        {props.items.map((item) => (
          <Item key={item._id}>
            <Item.Content>
              <Item.Header>
                <Link href={"/dashboard/post/" + item._id}>
                  <a>{item.title}</a>
                </Link>
              </Item.Header>

              <Item.Description>{item.summary}</Item.Description>
              <Item.Extra>
                {item.tags.map((tag) => (
                  <Label key={tag}>{tag}</Label>
                ))}
                <span>
                  Last edited: <TimeAgo date={item.updatedAt} />
                </span>
                <Dropdown text="Action">
                  <Dropdown.Menu>
                    {props.onRecover && (
                      <Dropdown.Item
                        text="Recover"
                        onClick={() => props.onRecover(item._id)}
                      />
                    )}
                    {!props.onRecover && (
                      <Link href={"/dashboard/post/" + item._id}>
                        <Dropdown.Item>Edit</Dropdown.Item>
                      </Link>
                    )}
                    <Dropdown.Item
                      text={props.onRecover ? "Permanently Delete" : "Delete"}
                      onClick={() => props.onRemove(item._id)}
                    />
                  </Dropdown.Menu>
                </Dropdown>
              </Item.Extra>
            </Item.Content>
          </Item>
        ))}
      </Item.Group>
    </>
  );
}

renderOptions() {
    const options = [
      {
        key: 'USER_CANCEL',
        text: 'Cancelled by the user',
        value: 'USER_CANCEL',
        icon: 'user cancel',
      },
      {
        key: 'IN_CATALOG',
        text: 'Literature already in catalog',
        value: 'IN_CATALOG',
        icon: 'search',
      },
      {
        key: 'NOT_FOUND',
        text: 'Literature not found in any provider',
        value: 'NOT_FOUND',
        icon: 'minus',
      },
      {
        key: 'OTHER',
        text: 'Other reason',
        value: 'OTHER',
        icon: 'minus',
      },
    ];
    return options.map((option) => {
      const dropdown = <Dropdown.Item {...option} onClick={this.onClick} />;
      if (option.value === 'IN_CATALOG') {
        return (
          <ESSelectorModal
            key={option.value}
            trigger={dropdown}
            query={documentApi.list}
            serializer={serializeDocument}
            title="Decline request: already in the catalog"
            content="Select document already in catalog."
            emptySelectionInfoText="No literature selected"
            onSave={this.onDeclineWithDocument}
            saveButtonContent="Decline request"
          />
        );
      }
      return dropdown;
    });
  }

export default function AccountSelector (props) {
  const { api, keyring } = useSubstrate();
  const { setAccountAddress } = props;
  const [accountSelected, setAccountSelected] = useState('');

  // Get the list of accounts we possess the private key for
  const keyringOptions = keyring.getPairs().map(account => ({
    key: account.address,
    value: account.address,
    text: account.meta.name.toUpperCase(),
    icon: 'user'
  }));

  const initialAddress =
    keyringOptions.length > 0 ? keyringOptions[0].value : '';

  // Set the initial address
  useEffect(() => {
    setAccountSelected(initialAddress);
    setAccountAddress(initialAddress);
  }, [setAccountAddress, initialAddress]);

  const onChange = address => {
    // Update state with new account address
    setAccountAddress(address);
    setAccountSelected(address);
  };

  return (
    <Menu
      attached='top'
      tabular
      style={{
        backgroundColor: '#fff',
        borderColor: '#fff',
        paddingTop: '1em',
        paddingBottom: '1em'
      }}
    >
      <Container>
        <Menu.Menu>
          <Image src='Substrate-Logo.png' size='mini' />
        </Menu.Menu>
        <Menu.Menu position='right'>
          <Icon
            name='users'
            size='large'
            circular
            color={accountSelected ? 'green' : 'red'}
          />
          <Dropdown
            search
            selection
            clearable
            placeholder='Select an account'
            options={keyringOptions}
            onChange={(_, dropdown) => { onChange(dropdown.value); }}
            value={accountSelected}
          />
          {api.query.balances && api.query.balances.freeBalance
            ? <BalanceAnnotation accountSelected={accountSelected} />
            : null}
        </Menu.Menu>
      </Container>
    </Menu>
  );
}

render() {
    const { onExportClick, max } = this.props;
    const { currentFormat } = this.state;
    return (
      <Popup
        trigger={
          <Button primary icon size="small" labelPosition="left">
            <Icon name="download" />
            Export results to a file
          </Button>
        }
        flowing
        on="click"
        position="top right"
      >
        <div>
          <span>
            Format{' '}
            <Menu compact>
              <Dropdown
                simple
                item
                options={this.formatOptions}
                defaultValue={this.formatOptions[0].value}
                onChange={(e, { value }) => {
                  this.setState({
                    currentFormat: value,
                  });
                }}
              />
            </Menu>
          </span>
        </div>
        <br />
        <div>
          <span>Export is limited to the first {max} results.</span>
        </div>
        <br />
        <div style={{ textAlign: 'center' }}>
          <Button
            icon="download"
            primary
            content="Download"
            onClick={() => {
              onExportClick(currentFormat, max);
            }}
          />
        </div>
      </Popup>
    );
  }

function Milestone({ id = null }) {
  const state = useMilestonesState();
  const dispatch = useMilestonesDispatch();

  const { data } = state.milestones;
  const milestones = data?.milestones;
  const { selectedMilestone } = state;
  const openCnt = data?.milestoneCnt[0];
  const closeCnt = data?.milestoneCnt[1];

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

  const clickHandler = async (item) => {
    let flag = true;
    let newMilestone = null;
    if (!selectedMilestone) newMilestone = item;
    else if (selectedMilestone.id !== item.id) newMilestone = item;
    else flag = false;

    dispatch({ type: 'UPDATE_SELECTED_MILESTONE', data: newMilestone });
    if (id) await api.updateIssueMilestone(id, item.id, flag);
  };

  return (
    <LS.LabelContainer>
      <DS.FilterDropdown className="label-dropdown">
        <Dropdown className="dropdown" multiple trigger={trigger} icon={null}>
          <Dropdown.Menu className="dropdown-menu" direction="left">
            <Dropdown.Header className="dropdown-header" content="Set milestone" />
            {milestones &&
              milestones.map((item, index) => (
                <>
                  <hr className="dropdown-divider" />
                  <Dropdown.Item
                    className="dropdown-item"
                    key={index}
                    onClick={() => clickHandler(item)}
                  >
                    <S.ItemWrapper>
                      {selectedMilestone ? (
                        selectedMilestone.id === item.id ? (
                          <CheckIcon size={16} className="sidebar-check-icon show" />
                        ) : (
                            <CheckIcon size={16} className="sidebar-check-icon" />
                          )
                      ) : null}
                      <S.TitleContainer>
                        <S.ItemTitle>{item.title}</S.ItemTitle>
                        <S.ItemDate>
                          Due by{' '}
                          {Date.getDate(item.dueDate, {
                            day: 'numeric',
                            year: 'numeric',
                            month: 'long',
                          })}
                        </S.ItemDate>
                      </S.TitleContainer>
                    </S.ItemWrapper>
                  </Dropdown.Item>
                </>
              ))}
          </Dropdown.Menu>
        </Dropdown>
      </DS.FilterDropdown>
      {selectedMilestone ? (
        <>
          <S.ProgressBar value={openCnt} max={openCnt + closeCnt} />
          <S.SelectedItem>{selectedMilestone.title}</S.SelectedItem>
        </>
      ) : (
          <div>No Milestone</div>
        )}
    </LS.LabelContainer>
  );
}

function Labels({ id = null }) {
  const state = useLabelState();
  const dispatch = useLabelDispatch();

  const { data: labels } = state.labels;
  const { selectedLabels } = state;

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

  const clickHandler = async (item) => {
    let flag = true;
    const newLabels = new Set();
    for (const label of Array.from(selectedLabels)) {
      if (item.id !== label.id) newLabels.add(label);
      else flag = false;
    }
    if (flag) newLabels.add(item);
    dispatch({ type: 'UPDATE_SELECTED_LABELS', data: newLabels });
    if (id) await api.updateIssueLabel(id, item.id, flag);
  };

  return (
    <S.LabelContainer>
      <DS.FilterDropdown className="label-dropdown">
        <Dropdown className="dropdown" multiple trigger={trigger} icon={null}>
          <Dropdown.Menu className="dropdown-menu" direction="left">
            <Dropdown.Header className="dropdown-header" content="Apply labels to this issue" />
            {labels &&
              labels.map((item) => (
                <>
                  <hr className="dropdown-divider" />
                  <Dropdown.Item
                    className="dropdown-item"
                    key={item.id}
                    onClick={() => clickHandler(item)}
                  >
                    <S.TitleContainer>
                      {Array.from(selectedLabels).some((label) => label.id === item.id) ? (
                        <CheckIcon size={16} className="sidebar-check-icon show" />
                      ) : (
                          <CheckIcon size={16} className="sidebar-check-icon" />
                        )}
                      <S.BoxColor background={item.color} />
                      <S.LabelName>{item.name}</S.LabelName>
                    </S.TitleContainer>
                    <S.LabelDesc>{item.desc}</S.LabelDesc>
                  </Dropdown.Item>
                </>
              ))}
          </Dropdown.Menu>
        </Dropdown>
      </DS.FilterDropdown>
      {selectedLabels.size === 0 || selectedLabels.length === 0 ? (
        <div>None yet</div>
      ) : (
          Array.from(selectedLabels).map((label, index) => (
            <S.SelectedItem key={index} background={label.color}>
              {label.name}
            </S.SelectedItem>
          ))
        )}
    </S.LabelContainer>
  );
}

FunderDropdown = withState(
  ({
    currentResultsState: awardsList,
    updateQueryState: updateQueryState,
    currentQueryState: currentQueryState,
  }) => {
    const [fundersFromFacets] = useFundersFromFacets(awardsList);

    /**
     * Trigger on funder selection.
     * Updated the query state to filter by the selected funder.
     *
     * @param {*} event
     * @param {*} data
     */
    function onFunderSelect(event, data) {
      let newFilter = [];

      if (data && data.value !== '') {
        newFilter = ['funders', data.value];
      }
      updateQueryState({ ...currentQueryState, filters: newFilter, page: 1 });
    }

    /**
     * Custom hook, triggered when the awards list changes.
     * It retrieves funders from new award's facets.
     *
     * @param {object} awards
     *
     * @returns {object[]} an array of objects, each representing a facetted funder.
     */
    function useFundersFromFacets(awards) {
      const [result, setResult] = React.useState([]);
      React.useEffect(() => {
        /**
         * Retrieves funders from awards facets and sets the result in state 'result'.
         */
        function getFundersFromAwardsFacet() {
          if (awards.loading) {
            setResult([]);
            return;
          }

          const funders = awards.data.aggregations?.funders?.buckets.map(
            (agg) => {
              return {
                key: agg.key,
                value: agg.key,
                text: agg.label,
              };
            }
          );
          setResult(funders);
        }

        getFundersFromAwardsFacet();
      }, [awards]);

      return [result];
    }

    return (
      <Dropdown
        placeholder={i18next.t('Funder')}
        search
        selection
        clearable
        scrolling
        multiple={false}
        options={fundersFromFacets || []}
        allowAdditions={false}
        onChange={onFunderSelect}
        fluid={true}
        selectOnBlur={false}
        selectOnNavigation={false}
      />
    );
  }
)

function Filters() {
  const state = useIssuesState();
  const dispatch = useIssuesDispatch();
  const { filters } = state;

  const uncheckFiltersHandler = (index) => {
    const authorDropdown = document.querySelector('.author-dropdown');
    const assigneeDropdown = document.querySelector('.assignee-dropdown');
    if (index === 1) uncheckAllFilters(authorDropdown);
    if (index === 2) uncheckAllFilters(assigneeDropdown);
  };

  const selectHandler = (index, updatedFilter) => {
    dispatch({ type: UPDATE_FILTER, filters: { ...filters, ...updatedFilter } });
    // yourIssues, assigning you 필터 선택시, 드롭다운 필터에 있는 체크를 display:none으로 변경
    uncheckFiltersHandler(index);
  };

  return (
    <S.FiltersWrapper>
      <S.FiltersButton className="filters-button" />
      <Dropdown className="filters-dropdown" text="Filters">
        <Dropdown.Menu className="dropdown-menu" direction="right">
          <Dropdown.Header className="dropdown-header" content="Filter Issues" />
          {FILTERS_ITEMS.map((item, index) => (
            <>
              <hr className="dropdown-divider" />
              <Dropdown.Item
                className="dropdown-item"
                text={item[0]}
                key={index}
                onClick={() => {
                  selectHandler(index, item[1]);
                }}
              />
            </>
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </S.FiltersWrapper>
  );
}

render() {
    const { user, answeringModal } = this.props;
    const { value, options, activePath } = this.state;

    if (user.loadingUser) {
      return null;
    } else {
      return (
        <div className="main-navbar">
          <div className="nav-item logo">
            <Link to={"/"}>SOCIAL-NETWORK</Link>
          </div>
          <div className="nav-item search-bar">
            <AutosuggestExample />
          </div>
          <div className="nav-item nav-menu">
            <Menu borderless className="top-menu">
              <Menu.Menu className="nav-container">
                {/* 5 */}
                <Menu.Menu position="right">
                  <Menu.Item active={activePath === "/"} as={Link} to="/">
                    <Icon name="home" size="big" />
                  </Menu.Item>
                  <Menu.Item
                    active={activePath.includes("/messages/")}
                    as={Link}
                    to="/messages/chat"
                  >
                    <Icon name="facebook messenger" size="big" />
                    {user.data.messagesCount !== 0 ? (
                      <Label color="red" style={{ margin: 0 }}>
                        {user.data.messagesCount}
                      </Label>
                    ) : (
                      <Label color="grey" style={{ margin: 0 }}>
                        0
                      </Label>
                    )}
                  </Menu.Item>

                  <NotificationPopup>
                    <Menu.Item
                      onClick={(e) => this.handleNotificationPopupToggle(e)}
                    >
                      <Icon name="bell" size="big" />
                      {user.data.notificationsCount !== 0 ? (
                        <Label color="red" style={{ margin: 0 }}>
                          {user.data.notificationsCount}
                        </Label>
                      ) : (
                        <Label color="grey" style={{ margin: 0 }}>
                          0
                        </Label>
                      )}
                    </Menu.Item>
                  </NotificationPopup>

                  {/* 7*/}
                  <Menu.Item
                    active={activePath === "/profile"}
                    name="avatar"
                    id="avatar-container"
                  >
                    <Dropdown
                      trigger={trigger(user.data.profilePicture)}
                      selectOnNavigation={false}
                      options={options}
                      icon={null}
                      onClose={() => this.setState({ value: "" })}
                      onChange={this.handleChange}
                      value={value}
                    />
                  </Menu.Item>
                  <Menu.Item
                    id="icon-container"
                    active={activePath === "/profile"}
                  >
                    <Dropdown
                      trigger={<Icon name="user" size="big" />}
                      selectOnNavigation={false}
                      options={options}
                      icon={null}
                      onClose={() => this.setState({ value: "" })}
                      onChange={this.handleChange}
                      value={value}
                    />
                  </Menu.Item>
                </Menu.Menu>
              </Menu.Menu>
            </Menu>
          </div>
          {answeringModal.isOpen ? <AnsweringModal></AnsweringModal> : null}
        </div>
      );
    }
  }

render() {
    const { post, _id, username } = this.props;
    const {
      open,
      optionsLoggedIn,
      optionsNotLoggedIn,
      value,
      showTags
    } = this.state;

    const isFeedMarginBottom = post.feed ? "5rem" : "0";
    const renderDivs = post.tags.map(div => (
      <div
        key={div.id}
        className="text-box"
        style={{
          top: div.y + "%",
          left: div.x + "%",
          display: showTags ? "block" : "none"
        }}
      >
        <div className="tooltip tooltip-top">
          {div.value === username ? (
            <Link to={"/profile"}>{div.value}</Link>
          ) : (
            <Link to={"/" + div.value}>{div.value}</Link>
          )}
        </div>
      </div>
    ));
    const ribbon = post.tags.length ? (
      <div className="ribbon">
        <Icon
          circular
          size="large"
          name="users"
          style={{
            backgroundColor: "rgba(0, 0, 0, 0.7)",
            color: "white",
            display: showTags ? "none" : "block"
          }}
        />
      </div>
    ) : null;
    return (
      <div className="post" style={{ marginBottom: isFeedMarginBottom }}>
        <div className="post-header">
          <div className="post-label">
            <div className="label-image">
              <img
                src={`/images/profile-picture/100x100/${post.author[0].profilePicture}`}
                alt=""
              />
            </div>
            <div className="label-info">
              <div className="label-username">
                <Link
                  to={
                    post.author[0].username === username
                      ? "/profile"
                      : "/" + post.author[0].username
                  }
                >
                  {post.author[0].username}
                </Link>
              </div>
              <div className="label-time">
                {dayjs(post.createdAt).fromNow()}
              </div>
            </div>
            {post.location && post.location.address !== "" ? (
              <div className="label-location">
                <Link
                  to={`/location/${post.location.coordinates[0]},${post.location.coordinates[1]}`}
                >
                  {post.location.address}
                </Link>
              </div>
            ) : null}
          </div>
          <div className="post-options">
            <Modal open={open} onClose={this.close} size="tiny">
              <Modal.Header>Delete Your Post</Modal.Header>
              <Modal.Content>
                <p>Are you sure you want to delete your post</p>
              </Modal.Content>
              <Modal.Actions>
                <Button negative onClick={this.close}>
                  No
                </Button>
                <Button
                  positive
                  icon="checkmark"
                  labelPosition="right"
                  content="Yes"
                  onClick={this.deletePost}
                />
              </Modal.Actions>
            </Modal>
            {post.author[0]._id === _id ? (
              <Button.Group>
                <Dropdown
                  selectOnNavigation={false}
                  onChange={this.handleChange}
                  value={value}
                  className="button icon"
                  floating
                  options={optionsLoggedIn}
                  trigger={<React.Fragment />}
                />
              </Button.Group>
            ) : (
              <Button.Group>
                <Dropdown
                  selectOnNavigation={false}
                  onChange={this.handleChange}
                  value={value}
                  className="button icon"
                  floating
                  options={optionsNotLoggedIn}
                  trigger={<React.Fragment />}
                />
              </Button.Group>
            )}
          </div>
        </div>

        <div className="post-image">
          {this.state.loadedImg ? null : (
            <Segment loading>
              <Image src={`/images/post-images/thumbnail/${post.photo}`} />
            </Segment>
          )}
          <img
            onClick={this.handleToggleTags}
            onLoad={() => this.setState({ loadedImg: true })}
            style={this.state.loadedImg ? {} : { display: "none" }}
            src={`/images/post-images/${post.photo}`}
            alt=""
          />
          {ribbon}
          {renderDivs}
        </div>
        {post.description ? (
          <div className="post-description">
            <Linkify options={linkifyOptions}>{post.description}</Linkify>
          </div>
        ) : null}

        <div className="post-footer">
          <div className="footer-likes">
            <LikePost
              post={{
                postId: post._id,
                photo: post.photo,
                authorId: post.author[0]._id,
                likes: post.likes
              }}
            />
          </div>
          <div className="footer-comments">
            <Icon
              name="comment outline"
              style={{ cursor: "pointer" }}
              onClick={this.getPostComments}
            />
            <div>{post.comments}</div>
          </div>
        </div>

        <PostComments
          post={{
            postId: post._id,
            commentsCount: post.comments,
            photo: post.photo,
            authorId: post.author[0]._id
          }}
        />

        <div className="post-form">
          <PostForm
            post={{
              postId: post._id,
              authorId: post.author[0]._id,
              photo: post.photo
            }}
          />
        </div>
      </div>
    );
  }

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>
    )
  }

render() {
    const { show } = this.state
    const url = 'www.thevaccinetracker.com'
    return (
      <div className="container mainHeader">
        <div className="row">
          <div className="col-md-6 col-xs-12">
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <Link to="/">
              <img
                src={logo}
                alt="The Vaccine Tracker Logo"
                className="img img-responsive"
                width="160"
              />
            </Link>
          </div>
          <div className="col-md-6 col-xs-12">
            <div className="virusMainStatus">
              <ul>
                <li className="virusType">
                  <div className="blinking liveUpdates" />
                  COVID-19
                </li>
                <li className="overallStatus vaccineStatus">VACCINE TRACKER</li>
              </ul>
              <Dropdown
                text="Share"
                pointing
                className="link item shareButton"
                icon="share"
              >
                <Dropdown.Menu>
                  <Dropdown.Item
                    onClick={() =>
                      window.open(`https://wa.me/?text=${url}`, '_self')
                    }
                  >
                    <img
                      src={whatsappIcon}
                      alt="whatsapp share"
                      className="img img-responsive"
                      width="10"
                    />
                    WhatsApp
                  </Dropdown.Item>
                  <Dropdown.Item
                    onClick={() => {
                      window.open(
                        'https://www.facebook.com/sharer/sharer.php?u=' +
                          encodeURIComponent(url),
                        'facebook-share-dialog',
                        'width=626,height=436'
                      )
                      return false
                    }}
                  >
                    <img
                      src={facebookIcon}
                      alt="facebook share"
                      className="img img-responsive"
                      width="10"
                    />
                    Facebook
                  </Dropdown.Item>
                  <Dropdown.Item
                    onClick={() =>
                      window.open(
                        `https://twitter.com/intent/tweet?url=${url}`,
                        '_target'
                      )
                    }
                  >
                    <img
                      src={twitterIcon}
                      alt="twitter share"
                      className="img img-responsive"
                      width="10"
                    />
                    Twitter
                  </Dropdown.Item>
                  <Dropdown.Item onClick={this.copyToClipBoard}>
                    <img
                      src={copyIcon}
                      alt="copy link share"
                      className="img img-responsive"
                      width="10"
                    />
                    Copy Link
                  </Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown>
            </div>
          </div>
        </div>
        <Toast
          onClose={() => this.setShow(false)}
          show={show}
          delay={1000}
          autohide
        >
          <Toast.Body style={{ textAlign: 'center' }}>
            Copied To ClipBoard !
          </Toast.Body>
        </Toast>
        <br />
        <div className="discontinue">
          <h2>We are discontinuing</h2>
          <p>
            We took the pledge of helping atleast 1,000 people, but we are happy
            to announce that our platform helped more than 21,000 people. We are
            group of people from Bangalore who has daily office, with which it
            becomes bit difficult to continue maintaining this. Hence please
            consider this as an official announcement that we are going to
            discontinue updating the information from now ie. from 4th Jan 2021.
            If you or anyone you know is interested then please contact Rohit
            Bind the details for reaching out to him is given below.
          </p>
          <p>
            Reason for discontinuing.
            <ol>
              <li>
                The goal which we had set it achieved - we took pledge of
                helping 1000 people but we helped more than 21k people with the
                NPS score of 4.1.
              </li>
              <li>
                The vaccine information is now dependent on the country level
                which is bit difficult to manage.
              </li>
            </ol>
          </p>
          <br />
          <p>
            With the NPS of 4.1 out of 5 we truly understand that the platform
            is helpful to many of the people. Hence we decided to handover this
            project to someone who can take care of it from here.
            <br />
            <br />
            If you are interested in taking over the project from here then
            please contact Rohit Bind{' '}
            <a
              href="https://www.linkedin.com/in/rohitbind/"
              target="_blank"
              rel="noreferrer"
            >
              https://www.linkedin.com/in/rohitbind
            </a>
          </p>
        </div>
      </div>
    )
  }

FormField = (props) => {
  // console.log("PROPS", props);

  const handleChange = (event, { name, value }) => {
    if (props.updateInput) {
      props.updateInput(name, value);
    }
  };

  const handleRadioClick = (event) => {
    const name = event.target.name;
    const value = props.value === "Y" ? "N" : "Y";
    props.updateInput(name, value);
  };

  const handleAddition = (event, { value, name }) => {
    if (props.handleAddition) {
      props.handleAddition(value, name);
    }
  };

  const handleSearchChange = (event, search) => {
    // console.log("DOSEARCH", search);

    if (props.handleSearchChange) {
      props.handleSearchChange(search.searchQuery);
    }
  };

  const handleFocus = () => {
    if (props.handleFocus) {
      props.handleFocus();
    }
  };

  const handleBlur = () => {
    if (props.handleBlur) {
      props.handleBlur();
    }
  };

  const handleDropdownChange = (event, data) => {
    const name = data.name;
    const value = data.value;
    props.updateInput(name, value);
  };

  const handleEditorChange = (value) => {
    const name = props.name;
    const valueget = value;
    props.updateInput(name, valueget);
  };

  const handleUpload = (url) => {
    if (props.autoGenerateFeatureImage) {
      props.autoGenerateFeatureImage(url);
    }
  };

  return (
    <Form.Field>
      <label>{props.label}</label>
      {props.type === "text" && (
        <Input
          name={props.name}
          value={props.value}
          style={{ maxWidth: "100%" }}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
      )}
      {props.type === "textarea" && (
        <TextArea
          name={props.name}
          value={props.value}
          style={{ maxWidth: "100%", innerHeight: "300%" }}
          onChange={handleChange}
        />
      )}
      {props.type === "radio" && (
        <Radio
          toggle
          name={props.name}
          checked={props.value === "Y"}
          onClick={handleRadioClick}
        />
      )}
      {props.type === "dropdown" && (
        <Dropdown
          placeholder={props.placeholder || "Please choose"}
          name={props.name}
          selection
          options={props.options}
          onChange={handleChange}
        />
      )}
      {props.type === "dropdownMulti" && (
        <Dropdown
          placeholder={props.placeholder || "Please choose"}
          name={props.name}
          selection
          search
          options={props.options}
          multiple
          value={props.value ? props.value : []}
          allowAdditions
          onChange={handleDropdownChange}
          onSearchChange={handleSearchChange}
          onAddItem={handleAddition}
        />
      )}
      {props.type === "editor" && (
        <RichTextEditor
          key={props.postKey}
          value={props.value}
          onChange={handleEditorChange}
          onUpload={handleUpload}
        />
      )}
    </Form.Field>
  );
}

TableButton = ({ ...props }) => {
  const editor = useSlate();

  const [dropdownOpen, setDropdownOpen] = React.useState(false);

  const [activeRow, setActiveRow] = React.useState(1);
  const [activeColumn, setActiveColumn] = React.useState(1);

  const defaultRowCount = 5;
  const defaultColumnCount = 5;

  const [rowCount, setRowCount] = React.useState(defaultRowCount);
  const [columnCount, setColumnCount] = React.useState(defaultColumnCount);

  const resetState = React.useCallback(() => {
    setRowCount(defaultRowCount);
    setColumnCount(defaultColumnCount);
    setActiveRow(1);
    setActiveColumn(1);
  }, []);

  const createEmptyCell = React.useCallback((formatAsColumnHeaders = false) => {
    return {
      type: formatAsColumnHeaders ? 'th' : 'td',
      children: [{ type: 'p', children: [{ text: '' }] }],
    };
  }, []);

  const createEmptyRow = React.useCallback(
    (cellCount, formatAsColumnHeaders = false) => {
      // should contain at least one <td> or it is not valid that children is empty
      const row = { type: 'tr', children: [] };

      for (let i = 0; i < cellCount; ++i) {
        row.children.push(createEmptyCell(formatAsColumnHeaders));
      }

      return row;
    },
    [createEmptyCell],
  );

  /**
   * @param {number} row Number of rows for the new empty table.
   * @param {number} column Number of columns for the new empty table.
   */
  const insertEmptyTable = React.useCallback(
    ({ row, column }) => {
      const rows = [createEmptyRow(column, true)];
      for (let i = 0; i < row - 1; ++i) {
        rows.push(createEmptyRow(column));
      }

      const table = {
        type: 'table',
        children: [
          {
            type: 'tbody',
            children: rows,
          },
        ],
      };

      Transforms.insertNodes(editor, [table], {
        at: Editor.end(editor, []),
      });
    },
    [createEmptyRow, editor],
  );

  return (
    <>
      <Dropdown
        open={dropdownOpen}
        onClose={() => {
          resetState();
          setDropdownOpen(false);
        }}
        trigger={
          <ToolbarButton
            {...props}
            className="slate-table-dropdown-button"
            onClick={() => {
              if (dropdownOpen) {
                resetState();
              }

              setDropdownOpen(!dropdownOpen);
            }}
            icon={tableSVG}
          ></ToolbarButton>
        }
      >
        <Dropdown.Menu className="slate-table-dropdown-menu">
          <TableContainer
            rowCount={rowCount}
            columnCount={columnCount}
            activeColumn={activeColumn}
            activeRow={activeRow}
            onCellMouseEnter={({ row, column }) => {
              if (row > rowCount - 1) {
                setRowCount(row + 1);
              } else if (row < rowCount - 1) {
                setRowCount(defaultRowCount);
              }

              if (column > columnCount - 1) {
                setColumnCount(column + 1);
              } else if (column < columnCount - 1) {
                setColumnCount(defaultColumnCount);
              }

              if (row !== activeRow) {
                setActiveRow(row);
              }
              if (column !== activeColumn) {
                setActiveColumn(column);
              }
            }}
            onCellMouseLeave={({ row, column }) => {}}
            // `row` and `column` below are 1-based indices
            onCellClick={({ row, column }) => {
              insertEmptyTable({ row, column });
            }}
          />
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
}

export default function AddProductForm() {
  const context = useContext(Context);
  const { categories, getCategories, addProduct } = context;

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

  const listCategories = categories.map(category => ({
    key: category.id,
    text: category.name,
    value: category.id
  }));

  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [category, setCategory] = useState("");
  const [price, setPrice] = useState("");
  const [weight, setWeight] = useState("");
  const [picture1, setPicture1] = useState("");
  const [picture2, setPicture2] = useState("");
  const [picture3, setPicture3] = useState("");

  const handleChange1 = (e, { value }) => setName({ value });
  const handleChange2 = (e, { value }) => setDescription({ value });
  const handleChange3 = (e, { value }) => setCategory({ value });
  const handleChange4 = (e, { value }) => setPrice({ value });
  const handleChange5 = (e, { value }) => setWeight({ value });
  const handleChange6 = (e, { value }) => setPicture1({ value });
  const handleChange7 = (e, { value }) => setPicture2({ value });
  const handleChange8 = (e, { value }) => setPicture3({ value });

  const handleSubmit = () => {
    const pictures = [picture1.value, picture2.value, picture3.value];

    const product = {
      name: name.value,
      description: description.value,
      category_id: parseInt(category.value),
      price: parseFloat(price.value),
      weight: parseFloat(weight.value),
      picture1: pictures[0],
      picture2: pictures[1],
      picture3: pictures[2]
    };

    addProduct(product);
  };

  return (
    <Modal
      trigger={
        <Button primary fluid>
          Add new Product
        </Button>
      }
    >
      <Modal.Header>Add new Product</Modal.Header>
      <Modal.Content>
        <Form onSubmit={handleSubmit}>
          <Form.Input
            name="name"
            label="Name"
            placeholder="Product name"
            onChange={handleChange1}
            value={name.value}
          />
          <Form.Input
            name="description"
            label="Description"
            placeholder="Product description (Optional)"
            onChange={handleChange2}
            value={description.value}
          />
          <Form.Field>
            <Header as="h5">Category</Header>
            <Dropdown
              name="category"
              placeholder="Category"
              fluid
              selection
              options={listCategories}
              onChange={handleChange3}
              value={category.value}
            />
          </Form.Field>
          <Form.Group widths="equal">
            <Form.Input
              name="price"
              label="Price"
              placeholder="Price (USD)"
              onChange={handleChange4}
              value={price.value}
            />
            <Form.Input
              name="weight"
              label="Weight"
              placeholder="Weigth (Kg)"
              onChange={handleChange5}
              value={weight.value}
            />
          </Form.Group>
          <Form.Group widths="equal">
            <Form.Input
              name="picture1"
              label="Image 1"
              placeholder="Image 1 URL"
              onChange={handleChange6}
              value={picture1.value}
            />
            <Form.Input
              name="picture2"
              label="Image 2"
              placeholder="Image 2 URL"
              onChange={handleChange7}
              value={picture2.value}
            />
            <Form.Input
              name="picture3"
              label="Image 3"
              placeholder="Image 3 URL"
              onChange={handleChange8}
              value={picture3.value}
            />
          </Form.Group>
          <Button type="submit">Add</Button>
        </Form>
      </Modal.Content>
    </Modal>
  );
}

USTimezone = () => {
  const [yourDT, setYourDT] = useState("");

  const [currentDT, setCurrentDT] = useState("");
  const [currentTZ, setCurrentTZ] = useState(getMyIANATZ());

  useEffect(
    () => {
      let getYourDTTimer = setInterval(() => {
        setYourDT(getDT(currentTZ));
      }, 1000);
      return () => {
        clearTimeout(getYourDTTimer);
      };
    },
    // useEffect will run only one time with empty []
    // if you pass a value to array,
    // like this - [data]
    // then clearTimeout will run every time
    // this value changes (useEffect re-run)
    []
  );

  useEffect(
    () => {
      let getDTTimer = setInterval(() => {
        setCurrentDT(getDT(currentTZ));
      }, 1000);
      return () => {
        clearInterval(getDTTimer);
      };
    },
    // useEffect will run only one time with empty []
    // if you pass a value to array,
    // like this - [data]
    // then clearTimeout will run every time
    // this value changes (useEffect re-run)
    [currentTZ]
  );

  const handleTZChange = (event, { value }) => {
    setCurrentDT("");
    setCurrentTZ(value);
  };

  const yourTZ = useMemo(() => getMyTZ(), []);

  const mainUSTZOpts = useMemo(() => mainUSTZ(), []);
  const groupTZValue = useMemo(() => getTZGroup(currentTZ), [currentTZ]);

  const allUSTZOpts = useMemo(() => allUSTZ(), []);

  return (
    <Layout seoData={seoData}>
      <h1>United States Timezones</h1>
      <Header as="h3" icon="time" content="Your Local Date Time" />
      <Segment inverted secondary>
        {yourDT || <Loader active inline />} {!!yourDT && ` - ${yourTZ}`}
      </Segment>
      <Header as="h3" icon="plane" content="Current Date Time in:" />
      <Dropdown
        search
        selection
        wrapSelection={false}
        options={mainUSTZOpts}
        value={groupTZValue}
        onChange={handleTZChange}
      />{" "}
      <Dropdown
        search
        selection
        wrapSelection={false}
        options={allUSTZOpts}
        value={currentTZ}
        onChange={handleTZChange}
      />
      <Segment raised>
        {currentDT || <Loader active inline size="small" />}
      </Segment>
    </Layout>
  );
}

render() {
    // console.log(this.props);
    let isCompliant = this.props.canCreateTeams;
    const isAdmin = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.ADMIN);
    const isParticipant = this.props.currentUser && Roles.userIsInRole(Meteor.userId(), ROLE.PARTICIPANT);
    if (isParticipant) {
      const participant = Participants.findDoc({ userID: Meteor.userId() });
      isCompliant = isCompliant && participant.isCompliant;
    }

    const numParticipants = Participants.count();
    const numTeams = Teams.find({ open: true }).count();
    const teamCount = Teams.count();
    const suggestionCount = Suggestions.count();
    // const minors = MinorParticipants.find({}).fetch();
    // const uncompliantMinors = _.filter(minors, (m) => Participants.findDoc(m.participantID).isCompliant).length;
    return (
        <Menu attached="top" borderless inverted className={'navBar'}>
          <Menu.Item as={NavLink} activeClassName="" exact to={ROUTES.LANDING}>
            <Header inverted as='h1'>HACC-Hui</Header>
          </Menu.Item>
          {isParticipant ? (
              [
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.YOUR_PROFILE}
                           key='edit-profile'>Profile</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           disabled={!isCompliant}
                           exact
                           to={ROUTES.CREATE_TEAM}
                           key='team-creation'>Create Team</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.BEST_FIT}
                           key='list-teams'>Open Teams ({numTeams})</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.YOUR_TEAMS}
                           key='your-teams'>Your
                  Teams</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact to={ROUTES.LIST_PARTICIPANTS}
                           key='list-participants'>List Participants ({numParticipants})</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.SUGGEST_TOOL_SKILL}
                           key='suggest-tool-skill'>Suggest Tool/Skill</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.TEAM_INVITATIONS}
                           key='team-invitations'>Invitations</Menu.Item>,
              ]
          ) : ''}
          {isAdmin ? (
              [
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.CONFIGURE_HACC}
                           key={ROUTES.CONFIGURE_HACC}>Configure HACC</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.UPDATE_MP}
                           key={ROUTES.UPDATE_MP}>Update Minor Participants Status</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.LIST_SUGGESTIONS}
                           key={ROUTES.LIST_SUGGESTIONS}>Suggestions List ({suggestionCount})</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact to={ROUTES.LIST_PARTICIPANTS_ADMIN}
                           key='list-participants-admin'>List Participants ({numParticipants})</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.VIEW_TEAMS}
                           key={ROUTES.VIEW_TEAMS}>View Teams ({teamCount})</Menu.Item>,
                // <Menu.Item as={NavLink}
                //            activeClassName="active"
                //            exact
                //            to={ROUTES.SHOW_MINORS}
                //            key={ROUTES.SHOW_MINORS}>Show Minors</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact to={ROUTES.ALL_TEAM_INVITATIONS}
                           key={ROUTES.ALL_TEAM_INVITATIONS}>View All Team Invitations</Menu.Item>,
                <Menu.Item as={NavLink}
                           activeClassName="active"
                           exact
                           to={ROUTES.DUMP_DATABASE}
                           key={ROUTES.DUMP_DATABASE}>Dump Database</Menu.Item>,
                // <Menu.Item as={NavLink} activeClassName="active" exact to={ROUTES.SHOW_MINOR}
                //            key={ROUTES.SHOW_MINOR}>Show Minor</Menu.Item>,
              ]
          ) : ''}
          <Menu.Item position="right"
                     as={NavLink}
                     activeClassName="active"
                     exact
                     to={ROUTES.HELP_PAGE}
                     key={ROUTES.HELP_PAGE}>Help</Menu.Item>
          <Menu.Item>
            {this.props.currentUser === '' ? (
                <Dropdown text="Login" pointing="top right" icon={'user'}>
                  <Dropdown.Menu>
                    <Dropdown.Item
                        icon="user"
                        text="Sign In"
                        as={NavLink}
                        exact to={ROUTES.SIGN_IN} key={ROUTES.SIGN_IN}/>
                  </Dropdown.Menu>
                </Dropdown>
            ) : (
                <Dropdown text={this.props.currentUser} pointing="top right" icon={'user'}>
                  <Dropdown.Menu>
                    <Dropdown.Item
                        icon="sign out"
                        text="Sign Out"
                        as={NavLink}
                        exact to={ROUTES.SIGN_OUT} key={ROUTES.SIGN_OUT}/>
                    {isParticipant ? (
                        <Dropdown.Item icon="user delete" text="Delete Account" as={NavLink} exact
                                       to={ROUTES.DELETE_ACCOUNT}/>) : ''}
                  </Dropdown.Menu>
                </Dropdown>
            )}
          </Menu.Item>
        </Menu>
    );
  }