semantic-ui-react#Message JavaScript Examples

ErrorMessage = (props) => {
  const { header, body } = props;
  return (
    <Grid.Row>
      <Message icon color="yellow">
        <Icon name="exclamation circle" />
        <Message.Content>
          <Message.Header>{header}</Message.Header>
          <p>{body}</p>
        </Message.Content>
      </Message>
      <Divider hidden />
    </Grid.Row>
  );
}

render() {
    const formSchema = new SimpleSchema2Bridge(schema);
    if (this.state.redirectToReferer) {
      const from = { pathname: ROUTES.CREATE_PROFILE };
      return <Redirect to={from}/>;
    }
    return (
        <Segment style={darkerBlueStyle}>
          <Header>HACC Registration</Header>
          <AutoForm schema={formSchema} onSubmit={data => this.submit(data)}>
              <Segment>
                <Message>
                  Read the <a href="https://hacc.hawaii.gov/hacc-rules/">HACC Rules</a>.
                  <br />
                  Then agree to the terms.
                </Message>
                <Form.Group widths="equal">
                  <TextField name="firstName" />
                  <TextField name="lastName" />
                </Form.Group>
                <BoolField name="agree" label="I have read the rules and agree to the terms" />
                <SubmitField />
              </Segment>
            </AutoForm>
        </Segment>
    );
  }

ExampleAlgoSigner = ({title, buttonText, buttonAction}) => {
  const [result, setResult] = useState("");

  const onClick = useCallback(async () => {
    const r = await buttonAction();
    setResult(r);
  }, [buttonAction]);

  return (
    <>
      <Header as="h2" dividing>{title}</Header>
      <Button primary={true} onClick={onClick}>{buttonText}</Button>
      <Message>
        <code>
          {result}
        </code>
      </Message>
    </>
  );
}

FormError = ({ message, setError, title, positive }) => {
  return (
    <Message negative={positive ? false : true}>
      <Message.Header>
        {title || 'Error'}
        <Button
          icon="close"
          color="red"
          floated="right"
          onClick={() => setError(null)}
          compact
          size="mini"
          circular
        />
      </Message.Header>
      <p>{message}</p>
    </Message>
  );
}

async onChange(e) {
      const file = e.target.files[0];
      console.log(file)
      this.setState({filename: file.name})
      const localthis = this;
      await Storage.put(("csvupload/" + file.name), file, {
        level: 'public',
        contentType: file.type,
        //customPrefix: "csvupload",
        progressCallback(progress) {
          var currentpercent = Math.round(progress.loaded/progress.total*100)
          localthis.setState({percent: currentpercent})
          console.log('Uploading:' + localthis.state.percent)
        },
      }).then (result => {
        this.setState({result: 
          <Message success>
          <Message.Header>Uploaded</Message.Header>
          <p>{this.state.filename}</p>
        </Message>
        })
        console.log(result)
        }
      ).catch(err => {
        this.setState({result: 
        <Message negative>
          <Message.Header>Error whilst uploading</Message.Header>
          <p>{this.state.filename}</p>
        </Message>
        })
        console.log(err)
        }
      );
  }

export default function FlashMessage({ message }) {
  return (
    <Message
      positive={message.type === "success"}
      negative={message.type === "fail"}
      header={message.title}
      content={message.content}
    />
  );
}

DNAMessage = ({ message, type }) => {
  console.log(type);
  if (type === "loading") {
    return (
      <Message icon>
        <Icon name="circle notched" loading />
        <Message.Content>
          <Message.Header>Just one second</Message.Header>
          We are trying very hard!
        </Message.Content>
      </Message>
    );
  }
  return (
    <Message negative={type === "error"} positive={type === "success"}>
      <Message.Content>{message}</Message.Content>
    </Message>
  );
}

render(){
        return(
            <Form onSubmit={this.onSubmit} error={!!this.state.errorMessage}>
                <Form.Field>
                    <label>Amount to Contribute</label>
                    <Input 
                        label="ether" 
                        labelPosition="right" 
                        value={this.state.value}
                        onChange = {event => this.setState ( { value : event.target.value })}
                    />
                </Form.Field>
                
                <Message error header="Oops!" content={this.state.errorMessage} />

                <Button loading={this.state.loading} primary>Contribute!</Button>
            </Form>
        );
    }

render () {
    const { loading, message } = this.state;
    return (
      <Form onSubmit={this.onSubmit} loading={loading} error={Boolean(message)}>
          <Form.Input
            name="username" required
            fluid icon='user' iconPosition='left' placeholder='Username'
          />
          <Form.Input
            name="password" type='password' required
            fluid icon='lock' iconPosition='left' placeholder='Password'
          />
          <Form.Button type="submit" fluid color='blue'>Log in</Form.Button>
          {message && <Message error size='small' content={message} />}
      </Form>
    );
  }

render() {
    const { nextUrl, url, hasError, errorMessage, ...restProps } = this.props;
    return (
      <>
        <Button
          fluid
          {...restProps}
          onClick={() =>
            authenticationService.loginWithOauthProvider(
              nextUrl || window.location.pathname,
              url
            )
          }
        />
        {hasError && (
          <Message negative header="Login failed." content={errorMessage} />
        )}
      </>
    );
  }

CurrentRecord = (props) => {
  const { record } = props;
  return (
    <Message>
      <Message.Header>Submitted record</Message.Header>
      <pre>{JSON.stringify(record)}</pre>
    </Message>
  );
}

// <div className="loading">Loading&#8230;</div>
function SecondtStep({ cropImgSrc, message }) {
  return (
    <div className="edit-post">
      {message}
      <AddTagsToImage cropImgSrc={cropImgSrc} />
      <div>
        <Message size="large" color="blue">
          Click on image to tag people
        </Message>
      </div>

      <div>
        <Map />
      </div>
      <div>
        <Message size="large" color="blue">
          Type @ to get suggestions
        </Message>
        <AddPostTextArea />
      </div>
    </div>
  );
}

Notification = () => {
  const style = {
    width: "100%",
    margin: "1rem",
  }
  return (
    <Message positive style={style}>
      <Message.Header>
        Coding period for GSoC 2022 has started. You can check the program
        timeline{" "}
        <a
          href="https://developers.google.com/open-source/gsoc/timeline"
          target="_blank"
        >
          <u>here</u>
        </a>
        .
      </Message.Header>
    </Message>
  )
}

Updates = ({ pageId, active, setActive }) => {
  const [dismiss, setDismiss] = useState(false);
  const KEY = 'DISMISS_UPDATE_2';
  const handleDismiss = () => {
    setDismiss(true);
    localStorage.setItem(KEY, true);
  };
  return (
    !dismiss &&
    localStorage.getItem(KEY) !== 'true' && (
      <Message info onDismiss={handleDismiss}>
        <Message.Header>New features:</Message.Header>
        <List bulleted>
          <List.Item>
            Data summary and cases detail by postcode/<strong>suburb</strong> on{' '}
            <Nav state='NSW' setActive={setActive} href='#location'></Nav> page{' '}
            <strong>location</strong> section.
          </List.Item>
          <List.Item>
            Death cases detail on <Nav state='AUS' setActive={setActive}></Nav>{' '}
            page <strong>death</strong> section.
          </List.Item>
        </List>
      </Message>
    )
  );
}

render() {
    let fRef = null;
    const formSchema = new SimpleSchema2Bridge(this.buildTheFormSchema());
    const model = this.buildTheModel();
    // console.log(model);
    return (
        <Grid container centered>
          <Grid.Column>
            <Divider hidden />
            <AutoForm ref={ref => {
              fRef = ref;
            }} schema={formSchema} model={model} onSubmit={(data) => {
              // console.log('submit', data);
              this.submitData(data, fRef);
            }}
                      style={{
                        paddingBottom: '40px',
                      }}>
              <Segment style={{
                borderRadius: '10px',
                backgroundColor: '#E5F0FE',
              }} className={'createTeam'}>
                <Grid columns={1} style={{ paddingTop: '20px' }}>
                  <Grid.Column style={{ paddingLeft: '30px', paddingRight: '30px' }}>
                    <Header as="h2" textAlign="center">Edit Team</Header>
                    <Message>
                      <Header as="h4" textAlign="center">Team name and Devpost page ALL
                        have to use the same name</Header>
                    </Message>
                    <Grid className='doubleLine'>
                      <TextField name='name' />
                      <RadioField
                          name='open'
                          inline
                      />
                    </Grid>
                    <LongTextField name='description' />
                    <SelectField name='challenge' disabled={!this.props.canChangeChallenges} />
                    <Grid columns={2}>
                      <Grid.Column><MultiSelectField name='skills' /></Grid.Column>
                      <Grid.Column><MultiSelectField name='tools' /></Grid.Column>
                    </Grid>
                    <TextField name="gitHubRepo" label="GitHub Repo" disabled />
                    <TextField name="devPostPage" label="Devpost Page" />
                    <TextField name="affiliation" />
                    <MultiSelectField name='members' />
                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '20px 0px',
                               }} />
                </div>
                <ErrorsField />
              </Segment>
            </AutoForm>
          </Grid.Column>
        </Grid>
    );
  }

function Checkout() {
  const [{ basket }] = useStateValue();
  return (
    <div className="checkout">
      <Container>
        <Grid doubling stackable>
          <Grid.Row>
            <Grid.Column width={8}>
              <div>
                {basket?.length === 0 ? (
                  <div className="checkout__warningMessage">
                    <Message warning>
                      <Message.Header>
                        Your shopping basket is empty
                      </Message.Header>
                      <p>
                        You have no items in your basket. To buy one or more
                        items , please click "Add to basket" next to the item
                      </p>
                    </Message>
                  </div>
                ) : (
                  <div>
                    {basket?.length >= 2 ? (
                      <h2>Your shopping basket items </h2>
                    ) : (
                      <h2>Your shopping basket item </h2>
                    )}
                    <Card fluid className="checkout__card">
                      <Item.Group>
                        {basket?.map((item) => {
                          return (
                            <CheckoutProduct
                              key={item.id}
                              id={item.id}
                              title={item.title}
                              imageUrl={item.imageUrl}
                              price={item.price}
                              rating={item.rating}
                            ></CheckoutProduct>
                          );
                        })}
                      </Item.Group>
                    </Card>
                  </div>
                )}
              </div>
            </Grid.Column>
            {basket?.length > 0 && (
              <div className="checkout__right">
                <Grid.Column width={6}>
                  <Card>
                    <Item.Group divided>
                      <SubTotal></SubTotal>
                    </Item.Group>
                  </Card>
                </Grid.Column>
              </div>
            )}
          </Grid.Row>
        </Grid>
      </Container>
    </div>
  );
}

render() {
        return (
            <Grid textAlign='center' style={{ height: '100vh' }} verticalAlign='middle'>
                <Grid.Column style={{ maxWidth: 400 }}>
                    <Segment>
                        <Header as='h2' color='blue' textAlign='center'>
                            Forgot Your Password?
                        </Header>
                        <Form onSubmit={this.handleSubmit} ref="form">
                            <Grid.Row>
                                <Input width={'100%'}
                                       type="text"
                                       name="email"
                                       placeholder="Enter your email address"
                                       onChange={this.handleChange}
                                       value={this.state.email}
                                       validators={['required']}
                                       errorMessages={['This field is required']}/>
                            </Grid.Row>
                            <Grid.Row>
                                <NavLink to="/login" style={{
                                    display: 'inline-block',
                                    padding: '4px 0 4px 0',
                                }}>Back to Login</NavLink>
                            </Grid.Row>
                            <Grid.Row>
                                <Button
                                    fluid
                                    content='Confirm Request'
                                    color="blue"
                                    disabled={!this.state.email}
                                />
                            </Grid.Row>
                        </Form>
                    </Segment>
                    { !!this.state.error &&
                    <Message negative>
                        <p>{this.state.error}</p>
                    </Message>}
                </Grid.Column>
            </Grid>);
    }

BadFile = () => (
  <Message negative className="message-container">
    <Message.Header>Bad file uploaded</Message.Header>
    <p>The file uploaded is not a valid cicero template.</p>
  </Message>
)

render() {
    const {
      messageBgColor,
      messageHeader,
      messageContent,
      buttonContent,
      redirect,
      iconName,
      loading
    } = this.state;

    const { eligible, voter } = this.props;
    if (redirect) {
      return eligible ? <Vote voter={voter} /> : <Results />;
    }

    return (
      <GridContainer verticalAlign="middle" centered columns={1}>
        <Grid.Column width={5}>
          <Image size="huge" src={AdaBotHeadImage} alt="Ada Bot Head" />
          <Progress color="blue" percent={50}></Progress>
          <Message size="massive" color={messageBgColor} icon>
            <Icon name={iconName} loading={loading} />
            <Message.Content>
              <Message.Header>{messageHeader}</Message.Header>
              {messageContent}
            </Message.Content>
          </Message>
          {!loading && (
            <Button
              onClick={this.handleButtonClick}
              fluid
              color="blue"
              size="massive"
            >
              {buttonContent}
            </Button>
          )}
        </Grid.Column>
      </GridContainer>
    );
  }

DemoCredsInfo = () => {
  return (
    <Message header="Demo Account Credentials" content={demoCredentials} />
  );
}

Warnings = () => (
  <Message warning>
    <Message.Header>Demo only</Message.Header>
    <p>Unsplash API only allows 50 requests / hour.</p>
  </Message>
)

ConfirmEmailLayout = ({
  isConfirmed,
  isConfirmedLoading,
  backgroundImage,
}) => {
  return (
    <Overridable
      id="ConfirmEmail.layout"
      isConfirmed={isConfirmed}
      isConfirmedLoading={isConfirmedLoading}
      backgroundImage={backgroundImage}
    >
      <Container
        fluid
        className="auth-page blur"
        style={{
          backgroundImage: backgroundImage ? `url(${backgroundImage})` : null,
        }}
      >
        <Container padded>
          <Segment
            className="background-transparent pb-default pt-default"
            color="orange"
          >
            <Header as="h1">E-mail confirmation</Header>
            <Loader
              isLoading={isConfirmedLoading}
              renderElement={() => (
                <UILoader active indeterminate size="large" inline="centered">
                  Waiting for e-mail confirmation...
                </UILoader>
              )}
            >
              {isConfirmed ? (
                <Message icon positive size="big">
                  <Icon name="check" />

                  <Message.Content>
                    <Message.Header>Your are all set!</Message.Header>
                    Your email has been confirmed. Go back to the{' '}
                    <Link className="alternative" to={FrontSiteRoutes.home}>
                      home page
                    </Link>{' '}
                    to browse the library catalogue
                  </Message.Content>
                </Message>
              ) : (
                <Message icon negative size="big">
                  <Icon name="warning" />

                  <Message.Content>
                    <Message.Header>Oh snap!</Message.Header>
                    Your e-mail could <strong>not</strong> be confirmed. Please
                    contact the library.
                  </Message.Content>
                </Message>
              )}
            </Loader>
          </Segment>
        </Container>
      </Container>
    </Overridable>
  );
}

render() {
    const actionState = this.props.actionState;

    const errors = this.props.errors || {};

    const { feedback, message } = _get(ACTIONS, actionState, {
      feedback: undefined,
      message: undefined,
    });

    if (!message) {
      // if no message to display, simply return null
      return null;
    }

    const labelledMessages = this.toLabelledErrorMessages(errors);
    const listErrors = Object.entries(labelledMessages).map(
      ([label, messages]) => (
        <Message.Item key={label}>
          <b>{label}</b>: {this.renderErrorMessages(messages)}
        </Message.Item>
      )
    );

    // errors not related to validation, following a different format {status:.., message:..}
    const backendErrorMessage = errors.message;

    return (
      <Message
        visible
        positive={feedback === 'positive'}
        warning={feedback === 'warning'}
        negative={feedback === 'negative'}
        className="flashed top attached"
      >
        <Grid container>
          <Grid.Column width={15} textAlign="left">
            <strong>{backendErrorMessage || message}</strong>
            {listErrors.length > 0 && <Message.List>{listErrors}</Message.List>}
          </Grid.Column>
        </Grid>
      </Message>
    );
  }

export default function Messages({ alert: { type, message } }) {
  if (type === "success") {
    return <Message success header="Success" content={message} />;
  } else if (type === "error") {
    return <Message error header="Error" content={message} />;
  }
  return null;
}

render() {
    const {
      contextRef,
      isLoading,
      results,
      searchTerm,
      handleResultSelect,
      handleSearchChange,
      handleKeyPress,
      addSuccess,
      messageActive,
      newQ,
      t,
      account,
      onSignOut,
      handleChangeLanguage,
    } = this.props;

    return (
      <Sticky context={contextRef} className="sticky-container">
        <div className="sticky-top">
          <a href="https://www.askco19.com/">
            <img className="logo" src={logo} alt="Logo" />
          </a>
          <div>
            <LanguageSelector handleChangeLanguage={handleChangeLanguage} />
            <SearchBar
              isLoading={isLoading}
              results={normalizeResults(results)}
              value={searchTerm}
              handleResultSelect={handleResultSelect}
              handleSearchChange={handleSearchChange}
              handleKeyPress={handleKeyPress}
            />
          </div>

          <NavMenu account={account} onSignOut={onSignOut} />
          {addSuccess && messageActive && (
            <Message positive>
              <Message.Header>
                {t('patientBoard:stickyHeader.questionSubmitted')}
              </Message.Header>
              <p>
                {t('patientBoard:stickyHeader.checkBackLater')}{' '}
                {newQ && newQ.title}
              </p>
            </Message>
          )}
          {!addSuccess && messageActive && (
            <Message error>
              <Message.Header>
                {t('patientBoard:stickyHeader.triedToSubmit')}
              </Message.Header>
              <p>{t('patientBoard:stickyHeader.somethingWentWrong')}</p>
            </Message>
          )}
        </div>
      </Sticky>
    );
  }

render() {
    const processingMessage=(x)=>{
      return x.message.indexOf('data:image')=== 0?
        <Image src={x.message}/>
        :<Message
          color={x.sendBy === this.props.clientId? 'green':'orange' }>

          { (x.message.indexOf('text/csv') > -1 || x.message.indexOf('octet-stream') > -1 || x.message.indexOf('data:application') > -1 )?
          <a href={x.message} target="_blank" download={x.filename}><Icon name='download' /> {x.filename}</a>
          :x.message}
        </Message>
    }
    console.log('chat')
    return (
      <div>
        <div className='chat_history'>
          {this.props.messages.map(x=> {
            console.log(x);
            return <div className={x.sendBy === this.props.clientId? 'message_me':'message_other' }>
            {
              processingMessage(x)
            }
            <span color='grey'>{moment(x.timestamp).fromNow()}</span>
            </div>
          })
          }
        </div>
        <div>
          <Input type='text' placeholder='...' action>
            <input onChange={this.props.onMessageChange} value={this.props.message}/>
            <Button color='facebook' type='submit'  onClick={this.props.onSubmit}>
            <Icon name='rocketchat' />

            Chat
          </Button>

          </Input>
          <div className="ui middle aligned aligned grid container upload_files">
            <div className="ui fluid segment">
            <input type="file" onChange={ (e) => this.props.fileEvent(e.target.files) } className="inputfile" id="embedpollfileinput" />

            <label for="embedpollfileinput" className="ui green right floated button">
              <i className="ui upload icon"></i>
              Upload image
            </label>

            </div>

          </div>
        </div>
      </div>

    );
  }

Loading = ({ header, message }) => (
  <Container basic textAlign={'center'}>
    <Message>
      {header && <Message.Header>{header}</Message.Header>}
      <Message.Content>{message}</Message.Content>
    </Message>
  </Container>
)

/** Render the form. Use Uniforms: https://github.com/vazco/uniforms */
  render() {
    if (!this.props.participant.isCompliant) {
      return (
          <div align={'center'}>
            <Header as='h2' icon>
              <Icon name='thumbs down outline' />
              You have not agreed to the <a href="https://hacc.hawaii.gov/hacc-rules/">HACC Rules</a>
              &nbsp;or we&apos;ve haven&apos;t received the signed form yet.
              <Header.Subheader>
                You cannot create a team until you do agree to the rules. Please check back later.
              </Header.Subheader>
            </Header>
          </div>
      );
    }

    let fRef = null;
    const formSchema = new SimpleSchema2Bridge(this.buildTheFormSchema());
    const model = this.buildTheModel();
    const disabled = !this.props.canCreateTeams;
    return (
        <Grid container centered style={{ paddingBottom: '50px', paddingTop: '40px' }}>
          <Grid.Column>
            <Divider hidden />
            <Segment
                style={{
                  // borderRadius: '10px',
                  backgroundColor: '#E5F0FE',
                }} className={'createTeam'}>
              <Header as="h2" textAlign="center">Create a Team</Header>
              {/* eslint-disable-next-line max-len */}
              <Message>
                <Header as="h4" textAlign="center">Team name and Devpost page ALL
                  have to use the same name</Header>
              </Message>
              <AutoForm
                  ref={ref => {
                    fRef = ref;
                  }}
                  schema={formSchema}
                  model={model}
                  onSubmit={data => this.submit(data, fRef)}
                  style={{
                    paddingBottom: '40px',
                  }}
              >
                <Grid columns={1} style={{ paddingTop: '20px' }}>
                  <Grid.Column style={{ paddingLeft: '30px', paddingRight: '30px' }}>
                    <Grid className='doubleLine'>
                      <TextField name='name' />
                      <RadioField
                          name='open'
                          inline
                      />
                    </Grid>
                    <LongTextField name='description' />
                    <SelectField name='challenge' />
                    <Grid columns={2}>
                      <Grid.Column><MultiSelectField name='skills' /></Grid.Column>
                      <Grid.Column><MultiSelectField name='tools' /></Grid.Column>
                    </Grid>
                    <TextField name="devpostPage" />
                    <TextField name="affiliation" />

                    <ListField name="participants" label={'Enter each participant\'s email'}>
                      <ListItemField name="$">
                        <TextField showInlineError
                                   iconLeft='mail'
                                   name="email"
                                   label={'Email'} />
                      </ListItemField>
                    </ListField>

                  </Grid.Column>
                </Grid>
                <div align='center'>
                  <SubmitField value='Submit'
                               style={{
                                 color: 'white', backgroundColor: '#dd000a',
                                 margin: '20px 0px',
                               }}
                               disabled={disabled}
                  />
                </div>
                <ErrorsField />
              </AutoForm>
            </Segment>
            <Modal
                onClose={this.close}
                open={this.state.errorModal}
            >
              <Modal.Header>Member Warning</Modal.Header>
              <Modal.Content scrolling>
                <Modal.Description>
                  <Header>Some Members you are trying to invite have not registered with SlackBot.</Header>
                  <b>Registered Members:</b>
                  <List items={this.state.isRegistered} />
                  <b>Not Registered Members:</b>
                  <List items={this.state.notRegistered} />
                </Modal.Description>
              </Modal.Content>
              <Modal.Actions>
                <b floated="left">Slackbot will only send invites to registered members, please confirm.</b>
                <Button
                    content="I Understand"
                    labelPosition='right'
                    icon='checkmark'
                    onClick={() => this.closeModal()}
                    positive
                />
              </Modal.Actions>
            </Modal>
          </Grid.Column>
        </Grid>

    );
  }

function AddProduct() {
  const history = useHistory();
  const [image, setImage] = useState(null);
  const [title, setTitle] = useState("");
  const [price, setPrice] = useState();
  const [rating, setRating] = useState();
  const [progress, setProgress] = useState(0);
  const [{ user }] = useStateValue();

  const handleChange = (event) => {
    if (event.target.files[0]) {
      setImage(event.target.files[0]);
    }
  };

  const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        //progress function
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        ); //proogress details
        setProgress(progress);
      },
      (error) => {
        console.error(error);
        alert(error.message);
      },
      //final upload
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then((url) => {
            //post image inside data
            db.collection("Products").add({
              title,
              price,
              rating,
              imageUrl: url,
            });
            setProgress(0);
            setTitle("");
            setPrice();
            setRating();
            setImage(null);
            history.push("/");
          });
      }
    );
  };

  return (
    <div className="addProduct">
      <Container>
        <Grid centered columns={3} doubling stackable>
          {user ? (
            <Grid.Column>
              <h2>Add Product</h2>
              <Card>
                <Form className="addProduct__form">
                  <Form.Field required>
                    <label>Product title</label>
                    <input
                      placeholder="product title"
                      type="text"
                      onChange={(event) => setTitle(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <label>Product Price</label>
                    <input
                      placeholder="product price"
                      type="number"
                      onChange={(event) => setPrice(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <label>Product Rating</label>
                    <input
                      placeholder="product rating"
                      type="number"
                      onChange={(event) => setRating(event.target.value)}
                    />
                  </Form.Field>
                  <Form.Field required>
                    <input
                      placeholder="Last Name"
                      type="file"
                      onChange={handleChange}
                    />
                    <Progress percent={progress} indicating size="tiny" />
                  </Form.Field>
                  <Button color="green" type="submit" onClick={handleUpload}>
                    Upload
                  </Button>
                </Form>
              </Card>
            </Grid.Column>
          ) : (
            <div className="addProduct__warningMessage">
              <Message warning>
                <Message.Header>
                  You must sign in to upload a product!
                </Message.Header>
                <p>
                  Please visit <Link to="/login">sigin page</Link>, then try
                  again.
                </p>
              </Message>
            </div>
          )}
        </Grid>
      </Container>
    </div>
  );
}