semantic-ui-react#Dimmer JavaScript Examples

render() {
    const { loadingUser, posts, totalPosts } = this.props;
    const hasMore = posts.length === totalPosts ? false : true;
    const feedPosts = posts.map((post) => (
      <Post key={post._id} post={{ ...post, feed: true }} />
    ));

    return loadingUser ? (
      <Dimmer active>
        <Loader />
      </Dimmer>
    ) : (
      <InfiniteScroll
        dataLength={posts.length} //This is important field to render the next data
        next={this.fetchData}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
        endMessage={
          <Divider horizontal>
            <Header as="h4">
              <Icon name="eye" />
              Yay! You have seen it all
            </Header>
          </Divider>
        }
      >
        {feedPosts}
      </InfiniteScroll>
    );
  }

function Home() {
  const [product, setProduct] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    db.collection("Products").onSnapshot((snapshot) => {
      setProduct(snapshot.docs.map((doc) => doc.data()));
      setLoading(false);
    });
  }, [setProduct]);
  console.log(product);

  return (
    <div className="home">
      {loading ? (
        <Segment className="home__segment">
          <Dimmer active inverted>
            <Loader size="large" className="home__loaderMessage">
              Loading...
            </Loader>
          </Dimmer>
        </Segment>
      ) : (
        <Container>
          <Grid container columns={4} doubling stackable>
            {product.map((product, index) => {
              return (
                <Grid.Column stretched key={index}>
                  <Product
                    id={product.id}
                    key={product.id}
                    title={product.title}
                    price={product.price}
                    rating={product.rating}
                    imageUrl={product.imageUrl}
                  ></Product>
                </Grid.Column>
              );
            })}
          </Grid>
        </Container>
      )}
    </div>
  );
}

function Main () {
  const [accountAddress, setAccountAddress] = useState(null);
  const { apiState, keyring, keyringState } = useSubstrate();
  const accountPair =
    accountAddress &&
    keyringState === 'READY' &&
    keyring.getPair(accountAddress);

  const loader = text => (
    <Dimmer active>
      <Loader size='small'>{text}</Loader>
    </Dimmer>
  );

  if (apiState === 'ERROR') return loader('Error connecting to the blockchain');
  else if (apiState !== 'READY') return loader('Connecting to the blockchain');

  if (keyringState !== 'READY') {
    return loader(
      "Loading accounts (please review any extension's authorization)"
    );
  }

  const contextRef = createRef();

  return (
    <div ref={contextRef}>
      <Sticky context={contextRef}>
        <AccountSelector setAccountAddress={setAccountAddress} />
      </Sticky>
      <Container>
        <Grid stackable columns='equal'>
          <Grid.Row stretched>
            <NodeInfo />
            <Metadata />
            <BlockNumber />
            <BlockNumber finalized />
          </Grid.Row>
          <Grid.Row stretched>
            <EVMAccounts />
          </Grid.Row>
          <Grid.Row>
            <EVMContracts accountPair={accountPair} />
          </Grid.Row>
        </Grid>
        <DeveloperConsole />
      </Container>
    </div>
  );
}

render() {
    const { currentRoom, content, userId, profilePicture } = this.props;

    const loadedMessages = currentRoom.messages - content.messages.length;
    const messages = content.messages.map(message => (
      <MessengerMessages
        key={message._id || message.uuid}
        currentRoom={currentRoom}
        message={message}
        userId={userId}
        profilePicture={profilePicture}
      ></MessengerMessages>
    ));

    return (
      <div className="content">
        {content.initialMessagesFetchig ? (
          <Dimmer active>
            <Loader />
          </Dimmer>
        ) : null}
        <div className="contact-profile">
          <img
            src={`/images/profile-picture/100x100/${currentRoom.user.profilePicture}`}
            alt=""
          />
          <p>{currentRoom.user.firstName + " " + currentRoom.user.lastName}</p>
          <div className="social-media">
            <Popup
              content="Scroll to bottom."
              trigger={
                <i
                  onClick={this.handleScrollToBottom}
                  className="fa fa-arrow-down"
                  aria-hidden="true"
                ></i>
              }
            />

            <CallingModal></CallingModal>
            <Label basic color="red" pointing="left">
              This isn't working.
            </Label>
          </div>
        </div>
        <div
          className="messages"
          id="ContainerElementID"
          ref={this.messagesContainer}
        >
          {loadedMessages ? (
            <Button
              fluid
              disabled={content.messageFetching}
              loading={content.messageFetching}
              onClick={this.fetchMessages}
            >
              Load {currentRoom.messages - content.messages.length} more
            </Button>
          ) : null}

          <ul>
            {messages}
            {content.isTyping ? (
              <li className="sent" key={currentRoom.user._id}>
                <img
                  src={`/images/profile-picture/100x100/${currentRoom.user.profilePicture}`}
                  alt=""
                />
                <p>typing...</p>
              </li>
            ) : null}
          </ul>
        </div>
        <MessengerInput></MessengerInput>
      </div>
    );
  }

render() {
    const { newUsers, username } = this.props;

    const users = newUsers.users.map((user) => {
      return (
        <List.Item key={user._id}>
          <Image
            avatar
            src={`/images/profile-picture/100x100/${user.profilePicture}`}
          />
          <List.Content>
            <List.Header
              as={Link}
              to={user.username === username ? "/profile" : "/" + user.username}
            >
              {user.username}
            </List.Header>

            <span style={{ color: "#757575" }}>
              joined {dayjs(user.date).fromNow()}
            </span>
          </List.Content>
        </List.Item>
      );
    });
    return (
      <Fragment>
        <List size="big">
          {newUsers.fetching ? (
            <Dimmer active>
              <Loader />
            </Dimmer>
          ) : null}
          {
            <List.Item>
              <List.Content>
                <List.Header> all users: {newUsers.usersCount}</List.Header>
              </List.Content>
            </List.Item>
          }
          {users}
          {newUsers.usersCount - newUsers.users.length !== 0 ? (
            <Button
              fluid
              loading={newUsers.fetchingNewUsers}
              onClick={() => this.fetchMoreUsers()}
            >
              More users
            </Button>
          ) : null}
        </List>
      </Fragment>
    );
  }

AddProductToTable = (props, history) => {
  const classes = useStyles();
  const [stores, setStores] = useState("");
  const data = scalableData(props.garment);
  const [product, setProduct] = useState({
    productName: "",
    price: "",
    description: "",
    storeID: NaN,
    designId: props.design.designId,
    color: data.product.color,
    size: "",
    product_id: data.product.id,
    type: data.design.type
  });
  const [cost, setCost] = useState([])
  const [modalIsOpen, setIsOpen] = useState(false);
  function openModal() {
    setIsOpen(true);
  }
  //fetch stores on mount of logged in user
  // get currently logged in user data from localstorage
  //GET userID from this endpoint /api/users/email
  // save the userID
  // GET stores associated from logged in user from endpoint of stores/userID
  //setStore to that list

  useEffect(() => {
    async function getStores() {
      const { email } = JSON.parse(localStorage.getItem("profile"));
      const res = await axiosWithEnv().get(
        `/api/users/email/${email}`
      );
      console.log(res, "res1");
      const userID = res.data.id;
      const res2 = await axiosWithEnv().get(
        `/api/stores/user/${userID}`
      );
      console.log(res2, "res");
      setStores(res.data);
      setProduct(
      { 
        productName: "",
        price: "",
        description: "",        
        designId: props.design.designId,
        color: data.product.color,
        size: "",
        product_id: data.product.id,
        type: data.design.type,
        storeID:res2.data.id
      })
    }
    getStores();
    //get price of product from scalablepress
      
      axiosWithEnv().post('/api/products/price', {
        type: props.garment.printStyle,
        sides: {
          front: 1
        },
          products: [{
            id: "canvas-unisex-t-shirt",
            color: data.product.color,
            size: "med",
            quantity: 1}
          ]
      })
          .then(res => {
             setCost(res.data)
          })
          .catch(err => {
            console.log(err)
          })
  }, [cost.total]);
  

  const handleChange = event => {
    setProduct({
      ...product,
      size:"med",
      [event.target.name]: event.target.value
    });
  };

    //calculate profit per item
  const calcPrice = (e, baseCost = cost.total) => {
    if(product.price){
      return product.price - baseCost
    } else{
      return 0;
    }
  }

  const handleSubmit = async event => {
    event.preventDefault();
    openModal();
    addProduct(props.history, props.garment, product, props.design);
    // setProduct({ ...product,
    //   designID: props.garment.mockUrl.substring(102)
    // })
    // setTimeout(() => {
    //   props.history.push("/dashboard");
    // }, 800);
  };
  console.log(props.garment);
  
  // const shirtColor = props.garment.color;
  const shirtImage = props.garment.mockUrl;
 
  return (
    <div className={classes.addproductContainer}>
      <Modal
        className={classes.modal}
        isOpen={modalIsOpen}
        contentLabel="Modal"
      >
        <Segment className={classes.segment}>
          <Dimmer active>
            <Loader>Adding Product to Inventory</Loader>
          </Dimmer>
        </Segment>
      </Modal>
      <div className={classes.imgContainer}>
        <img
          src={shirtImage}
          className={classes.shirtImg}
          alt="shirt design preview"
        />
      </div>
      <div className={classes.formContainer}>
        <form onSubmit={handleSubmit} className={classes.form}>
          <TextField
            className={classes.createTitle}
            label="Create Title"
            name="productName"
            value={product.productName}
            onChange={handleChange}
            InputProps={{
              disableUnderline: true
            }}
            InputLabelProps={{
              classes: {
                root: classes.labelText
              }
            }}
          />{" "}
          <div className={classes.cost}>
          <TextField
            className={classes.price}
            label="$"
            name="price"
            value={product.price}
            onChange={handleChange}
            InputProps={{
              disableUnderline: true
            }}
            InputLabelProps={{
              classes: {
                root: classes.labelText
              }
            }}
          />{" "}
         <span className={classes.profit}>Profit per item:<strong> ${`${calcPrice().toFixed(2)}`}</strong></span>
          </div>
          <TextField
            className={classes.desc}
            label="Add Product Description"
            name="description"
            multiline
            rows={5}
            value={product.description}
            onChange={handleChange}
            InputProps={{
              disableUnderline: true
            }}
            InputLabelProps={{
              classes: {
                root: classes.labelText
              }
            }}
          />{" "}
          {/* <Typography
                              className={classes.productHeader}
                              variant="h3"
                              gutterBottom
                            >
                              Product:
                            </Typography>
                            <Typography className={classes.product} variant="body1" gutterBottom>
                              Unisex T - Shirt
                            </Typography> */}{" "}
          {/* <Typography className={classes.colorHeader} variant="h3" gutterBottom>
            Color:
          </Typography>{" "}
          <Typography className={classes.color} variant="body1" gutterBottom>
            {" "}
            {shirtColor}{" "}
          </Typography>{" "} */}
          {/* <TextField
                            select
                            className={classes.storeSelect}
                            name="storeID"
                            label="Select Store"
                            value={product.storeID}
                            onChange={handleChange}
                            InputProps={{ disableUnderline: true }}
                          >
                            {stores.map(store => (
                              <MenuItem key={store.id} value={store.id}>
                                {store.store_name}
                              </MenuItem>
                            ))}
                          </TextField> */}{" "}
          <Button
            variant="contained"
            className={classes.addButton}
            type="submit"
          >
            Add Product{" "}
          </Button>{" "}
        </form>{" "}
      </div>{" "}
    </div>
  );
}

render() {
    const {
      active,
      images,
      onClickOutside,
      onClose,
      currentIndex,
    } = this.props;
    let activeImage = currentIndex;

    if (images.length >= 1) {
      // let thumbnails = images.map((image, index) => {
      //   return { src: image.src, key: index };
      // });

      // let highlight = activeImage;

      // if (thumbnails.length > 5) {
      //   if (activeImage > 2) {
      //     thumbnails = thumbnails.slice(activeImage - 2, activeImage + 3);
      //     highlight = 2;
      //   } else {
      //     thumbnails = thumbnails.slice(0, 5);
      //   }
      // }

      return (
        <Fragment>
          <Dimmer page active={active} onClickOutside={onClickOutside}>
            <div className={style.inner}>
              <Button
                className={style.close}
                onClick={onClose}
                icon="close"
                basic
                inverted
              />
              <div className={`${style.gutter} ${style.leftGutter}`}>
                <Button
                  onClick={this.handleNavigateLeft}
                  disabled={activeImage === 0}
                  basic
                  size="huge"
                  circular
                  icon
                  inverted
                >
                  <Icon name="arrow left" />
                </Button>
              </div>
              <div
                className={style.activeImage}
                onTouchStart={this.handleTouchStart}
                onTouchMove={this.handleTouchMove}
                onTouchEnd={this.handleTouchEnd}
              >
                <Image src={images[activeImage].urls.regular} />
              </div>
              <div className={`${style.gutter} ${style.rightGutter}`}>
                <Button
                  onClick={this.handleNavigateRight}
                  disabled={activeImage === images.length - 1}
                  size="huge"
                  basic
                  circular
                  icon
                  inverted
                >
                  <Icon name="arrow right" />
                </Button>
              </div>
              <div className={style.detail}>
                <span>{`${activeImage + 1} of ${images.length}`}</span>
              </div>
            </div>
          </Dimmer>
        </Fragment>
      );
    }

    return null;
  }

DefaultTextBlockEditor = (props) => {
  const {
    block,
    blocksConfig,
    data,
    detached = false,
    index,
    onChangeBlock,
    onInsertBlock,
    onMutateBlock,
    onSelectBlock,
    pathname,
    properties,
    selected,
    uploadRequest,
    uploadContent,
    uploadedContent,
    defaultSelection,
    saveSlateBlockSelection,
    allowedBlocks,
    formTitle,
    formDescription,
  } = props;

  const { slate } = config.settings;
  const { textblockExtensions } = slate;
  const { value } = data;

  // const [addNewBlockOpened, setAddNewBlockOpened] = React.useState();
  const [showDropzone, setShowDropzone] = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [newImageId, setNewImageId] = React.useState(null);

  const prevReq = React.useRef(null);

  const withBlockProperties = React.useCallback(
    (editor) => {
      editor.getBlockProps = () => props;
      return editor;
    },
    [props],
  );

  const slateSettings = React.useMemo(
    () => ({
      ...config.settings.slate,
      persistentHelpers: [
        ...config.settings.slate.persistentHelpers,
        PersistentSlashMenu,
      ],
    }),
    [],
  );

  const onDrop = React.useCallback(
    (files) => {
      // TODO: need to fix setUploading, treat uploading indicator
      // inteligently, show progress report on uploading files
      setUploading(true);
      files.forEach((file) => {
        const [mime] = file.type.split('/');
        if (mime !== 'image') return;

        readAsDataURL(file).then((data) => {
          const fields = data.match(/^data:(.*);(.*),(.*)$/);
          uploadContent(
            getBaseUrl(pathname),
            {
              '@type': 'Image',
              title: file.name,
              image: {
                data: fields[3],
                encoding: fields[2],
                'content-type': fields[1],
                filename: file.name,
              },
            },
            block,
          );
        });
      });
      setShowDropzone(false);
    },
    [pathname, uploadContent, block],
  );

  const { loaded, loading } = uploadRequest;
  const imageId = uploadedContent['@id'];
  const prevLoaded = prevReq.current;

  React.useEffect(() => {
    if (loaded && !loading && !prevLoaded && newImageId !== imageId) {
      const url = flattenToAppURL(imageId);
      setNewImageId(imageId);

      createImageBlock(url, index, props);
    }
    prevReq.current = loaded;
  }, [props, loaded, loading, prevLoaded, imageId, newImageId, index]);

  const handleUpdate = React.useCallback(
    (editor) => {
      // defaultSelection is used for things such as "restoring" the selection
      // when joining blocks or moving the selection to block start on block
      // split
      if (defaultSelection) {
        const selection = parseDefaultSelection(editor, defaultSelection);
        if (selection) {
          setTimeout(() => {
            Transforms.select(editor, selection);
            saveSlateBlockSelection(block, null);
          }, 120);
          // TODO: use React sync render API
          // without setTimeout, the join is not correct. Slate uses internally
          // a 100ms throttle, so setting to a bigger value seems to help
        }
      }
    },
    [defaultSelection, block, saveSlateBlockSelection],
  );

  const onEditorChange = (value, editor) => {
    ReactDOM.unstable_batchedUpdates(() => {
      onChangeBlock(block, {
        ...data,
        value,
        plaintext: serializeNodesToText(value || []),
        // TODO: also add html serialized value
      });
      deconstructToVoltoBlocks(editor);
    });
  };

  // Get editing instructions from block settings or props
  let instructions = data?.instructions?.data || data?.instructions;
  if (!instructions || instructions === '<p><br/></p>') {
    instructions = formDescription;
  }

  const intl = useIntl();
  const placeholder =
    data.placeholder || formTitle || intl.formatMessage(messages.text);
  const schema = TextBlockSchema(data);

  const disableNewBlocks = data?.disableNewBlocks || detached;
  const { ref, inView } = useInView({
    threshold: 0,
    rootMargin: '0px 0px 200px 0px',
  });

  const handleFocus = React.useCallback(() => {
    if (!selected) {
      onSelectBlock(block);
    }
  }, [onSelectBlock, selected, block]);

  return (
    <div className="text-slate-editor-inner" ref={ref}>
      <>
        <Dropzone
          disableClick
          onDrop={onDrop}
          className="dropzone"
          onDragOver={() => setShowDropzone(true)}
          onDragLeave={() => setShowDropzone(false)}
        >
          {({ getRootProps, getInputProps }) => {
            return showDropzone ? (
              <div className="drop-indicator">
                {uploading ? (
                  <Dimmer active>
                    <Loader indeterminate>Uploading image</Loader>
                  </Dimmer>
                ) : (
                  <Message>
                    <center>
                      <img src={imageBlockSVG} alt="" />
                    </center>
                  </Message>
                )}
              </div>
            ) : (
              <>
                <SlateEditor
                  index={index}
                  readOnly={!inView}
                  properties={properties}
                  extensions={textblockExtensions}
                  renderExtensions={[withBlockProperties]}
                  value={value}
                  block={block /* is this needed? */}
                  defaultSelection={defaultSelection}
                  onUpdate={handleUpdate}
                  debug={DEBUG}
                  onFocus={handleFocus}
                  onChange={(value, editor) => onEditorChange(value, editor)}
                  onKeyDown={handleKey}
                  selected={selected}
                  placeholder={placeholder}
                  slateSettings={slateSettings}
                />
                {DEBUG ? <div>{block}</div> : ''}
              </>
            );
          }}
        </Dropzone>

        {selected && !data.plaintext?.trim() && !disableNewBlocks && (
          <BlockChooserButton
            data={data}
            block={block}
            onInsertBlock={(id, value) => {
              onSelectBlock(onInsertBlock(id, value));
            }}
            onMutateBlock={onMutateBlock}
            allowedBlocks={allowedBlocks}
            blocksConfig={blocksConfig}
            size="24px"
            className="block-add-button"
            properties={properties}
          />
        )}

        <SidebarPortal selected={selected}>
          <div id="slate-plugin-sidebar"></div>
          {instructions ? (
            <Segment attached>
              <div dangerouslySetInnerHTML={{ __html: instructions }} />
            </Segment>
          ) : (
            <>
              <ShortcutListing />
              <MarkdownIntroduction />
              <BlockDataForm
                schema={schema}
                title={schema.title}
                onChangeField={(id, value) => {
                  onChangeBlock(block, {
                    ...data,
                    [id]: value,
                  });
                }}
                formData={data}
                block={block}
              />
            </>
          )}
        </SidebarPortal>
      </>
    </div>
  );
}

render() {
    const { user, alert } = this.props;
    const hasMore =
      user.data.postsCount === user.data.posts.length ? false : true;
    const posts = user.data.posts.map(post => {
      return (
        <Modal
          key={post._id}
          size="small"
          trigger={
            <div className="gallery-item">
              <img
                src={`/images/post-images/thumbnail/${post.photo}`}
                className="gallery-image"
                alt=""
              />

              <div className="gallery-item-info">
                <ul>
                  <li className="gallery-item-likes">
                    <span className="visually-hidden">Likes:</span>
                    <Icon name="heart" /> {post.likes}
                  </li>
                  <li className="gallery-item-comments">
                    <span className="visually-hidden">Comments:</span>
                    <Icon name="comment" /> {post.comments}
                  </li>
                </ul>
              </div>
            </div>
          }
        >
          <Post
            post={{
              ...post,
              author: [
                {
                  profilePicture: user.data.profilePicture,
                  username: user.data.username,
                  _id: user.data._id
                }
              ]
            }}
          />
        </Modal>
      );
    });

    const followingList = user.data.follwingUsers.length
      ? user.data.follwingUsers.map(({ user }) => (
          <FollowingFollowerList
            key={user._id}
            user={user}
          ></FollowingFollowerList>
        ))
      : "No followings";

    const followerList = user.data.followerUsers.length
      ? user.data.followerUsers.map(({ user }) => (
          <FollowingFollowerList
            key={user._id}
            user={user}
          ></FollowingFollowerList>
        ))
      : "No followers";

    return (
      <div className="main">
        {user.loadingUser ? (
          <Dimmer active>
            <Loader />
          </Dimmer>
        ) : (
          <Fragment>
            {user.deleting ? (
              <Dimmer active>
                <Loader />
              </Dimmer>
            ) : null}

            <header>
              <div className="container">
                {alert.type ? <Messages alert={alert} /> : null}
                <div className="profile">
                  <div className="profile-image">
                    <img
                      src={`/images/profile-picture/100x100/${user.data.profilePicture}`}
                      alt=""
                    />
                  </div>

                  <div className="profile-user-settings">
                    <h1 className="profile-user-name">{user.data.username}</h1>

                    <Button
                      as={Link}
                      to="/posts/upload"
                      className="profile-edit-btn"
                      size="large"
                      icon
                      labelPosition="right"
                    >
                      Add post
                      <Icon name="upload" />
                    </Button>
                    <EditProfileModal>
                      <Button
                        className="profile-edit-btn"
                        size="large"
                        icon
                        labelPosition="right"
                      >
                        Profile settings
                        <Icon name="setting" />
                      </Button>
                    </EditProfileModal>
                  </div>
                  <div className="profile-stats">
                    <ul>
                      <li>
                        <span className="profile-stat-count">
                          {user.data.postsCount}
                        </span>{" "}
                        posts
                      </li>
                      <Modal
                        trigger={
                          <li onClick={this.getFollowers}>
                            <span className="profile-stat-count">
                              {user.data.followers}
                            </span>{" "}
                            followers
                          </li>
                        }
                      >
                        <Modal.Header>Followers</Modal.Header>
                        <Modal.Content scrolling>
                          <Modal.Description>
                            <List verticalAlign="middle" size="huge">
                              {followerList}
                            </List>
                          </Modal.Description>
                        </Modal.Content>
                      </Modal>
                      <Modal
                        trigger={
                          <li onClick={this.getFollowings}>
                            <span className="profile-stat-count">
                              {user.data.followings}
                            </span>{" "}
                            following
                          </li>
                        }
                      >
                        <Modal.Header>Following</Modal.Header>
                        <Modal.Content scrolling>
                          <Modal.Description>
                            <List verticalAlign="middle" size="huge">
                              {followingList}
                            </List>
                          </Modal.Description>
                        </Modal.Content>
                      </Modal>
                    </ul>
                  </div>
                  <div className="profile-bio">
                    <div className="profile-real-name">
                      {user.data.firstName + " " + user.data.lastName}
                    </div>
                    <div className="profile-bio-description">
                      <Linkify options={linkifyOptions}>
                        {user.data.bio}
                      </Linkify>
                    </div>
                  </div>
                </div>
              </div>
            </header>
            <main>
              <div className="container">
                {user.data.postsCount === 0 ? (
                  <Message info size="large">
                    You have no posts. Share your first picture:{" "}
                    <Button
                      as={Link}
                      to="/posts/upload"
                      className="profile-edit-btn"
                      size="large"
                      icon
                      labelPosition="right"
                    >
                      Add post
                      <Icon name="upload" />
                    </Button>
                  </Message>
                ) : (
                  <InfiniteScroll
                    className="gallery"
                    dataLength={user.data.posts.length} //This is important field to render the next data
                    next={this.fetchData}
                    hasMore={hasMore}
                    loader={<h4>Loading...</h4>}
                  >
                    {posts}
                  </InfiniteScroll>
                )}
              </div>
            </main>
            <Divider hidden></Divider>
          </Fragment>
        )}
      </div>
    );
  }

render() {
    const { userProfileData, fetchingUserData, alert } = this.props;
    const hasMore =
      userProfileData.data.postsCount === userProfileData.data.posts.length
        ? false
        : true;
    if (alert.type) {
      return (
        <div className="container">
          <Messages alert={alert} />
        </div>
      );
    }
    if (userProfileData.loadingUser || fetchingUserData) {
      return (
        <Dimmer active>
          <Loader />
        </Dimmer>
      );
    } else {
      const posts = userProfileData.data.posts.map(post => {
        return (
          <Modal
            key={post._id}
            size="small"
            trigger={
              <div className="gallery-item">
                <img
                  src={`/images/post-images/thumbnail/${post.photo}`}
                  className="gallery-image"
                  alt=""
                />

                <div className="gallery-item-info">
                  <ul>
                    <li className="gallery-item-likes">
                      <span className="visually-hidden">Likes:</span>
                      <Icon name="heart" /> {post.likes}
                    </li>
                    <li className="gallery-item-comments">
                      <span className="visually-hidden">Comments:</span>
                      <Icon name="comment" /> {post.comments}
                    </li>
                  </ul>
                </div>
              </div>
            }
          >
            <Post
              post={{
                ...post,
                author: [
                  {
                    profilePicture: userProfileData.data.profilePicture,
                    username: userProfileData.data.username,
                    _id: userProfileData.data._id
                  }
                ]
              }}
            />
          </Modal>
        );
      });

      const followingList = userProfileData.data.follwingUsers.length
        ? userProfileData.data.follwingUsers.map(({ user }) => (
            <FollowingFollowerList
              key={user._id}
              user={user}
            ></FollowingFollowerList>
          ))
        : "No followings";

      const followerList = userProfileData.data.followerUsers.length
        ? userProfileData.data.followerUsers.map(({ user }) => (
            <FollowingFollowerList
              key={user._id}
              user={user}
            ></FollowingFollowerList>
          ))
        : "No followers";

      return (
        <Fragment>
          <header>
            <div className="container">
              <div className="profile">
                <div className="profile-image">
                  <img
                    src={`/images/profile-picture/100x100/${userProfileData.data.profilePicture}`}
                    alt=""
                  />
                </div>

                <div className="profile-user-settings">
                  <h1 className="profile-user-name">
                    {userProfileData.data.username}
                  </h1>

                  <FollowButton
                    userId={userProfileData.data._id}
                  ></FollowButton>
                </div>

                <div className="profile-stats">
                  <ul>
                    <li>
                      <span className="profile-stat-count">
                        {userProfileData.data.postsCount}
                      </span>{" "}
                      posts
                    </li>
                    <Modal
                      trigger={
                        <li onClick={this.getFollowers}>
                          <span className="profile-stat-count">
                            {userProfileData.data.followers}
                          </span>{" "}
                          followers
                        </li>
                      }
                    >
                      <Modal.Header>Followers</Modal.Header>
                      <Modal.Content scrolling>
                        <Modal.Description>
                          <List selection verticalAlign="middle" size="huge">
                            {followerList}
                          </List>
                        </Modal.Description>
                      </Modal.Content>
                    </Modal>
                    <Modal
                      trigger={
                        <li onClick={this.getFollowings}>
                          <span className="profile-stat-count">
                            {userProfileData.data.followings}
                          </span>{" "}
                          following
                        </li>
                      }
                    >
                      <Modal.Header>Following</Modal.Header>
                      <Modal.Content scrolling>
                        <Modal.Description>
                          <List selection verticalAlign="middle" size="huge">
                            {followingList}
                          </List>
                        </Modal.Description>
                      </Modal.Content>
                    </Modal>
                  </ul>
                </div>

                <div className="profile-bio">
                  <div className="profile-real-name">
                    {userProfileData.data.firstName +
                      " " +
                      userProfileData.data.lastName}
                  </div>
                  <div className="profile-bio-description">
                    <Linkify options={linkifyOptions}>
                      {userProfileData.data.bio}
                    </Linkify>
                  </div>
                </div>
              </div>
            </div>
          </header>
          <main>
            <div className="container">
              {userProfileData.data.postsCount === 0 ? (
                <Message info size="large">
                  This user has no posts yet.
                </Message>
              ) : (
                <InfiniteScroll
                  className="gallery"
                  dataLength={userProfileData.data.posts.length} //This is important field to render the next data
                  next={this.fetchData}
                  hasMore={hasMore}
                  loader={<h4>Loading...</h4>}
                >
                  {posts}
                </InfiniteScroll>
              )}
            </div>
          </main>
          <Divider hidden></Divider>
        </Fragment>
      );
    }
  }