@material-ui/icons#Image JavaScript Examples

GroupRecordSummary = ({ group, rank }) => {
  const classes = useStyles();
  let data = rank || [];
  const [textCount, stickerCount, imageCount] = [
    sumData(data, "textCnt"),
    sumData(data, "stickerCnt"),
    sumData(data, "imageCnt"),
  ];
  const factCount = data.length;
  const groupCount = get(group, "count", 0);

  const SummaryData = [
    { CusIcon: Flag, title: "群組類別", content: "聊天群" },
    { CusIcon: GroupSharp, title: "紀錄/群組 人數", content: `${factCount}/${groupCount}` },
    { CusIcon: Forum, title: "訊息次數", content: textCount },
    { CusIcon: Image, title: "圖片次數", content: imageCount },
    { CusIcon: InsertEmoticon, title: "貼圖次數", content: stickerCount },
  ];

  return (
    <Grid container item direction="row" justifyContent="center">
      {SummaryData.map((data, index) => (
        <Grid container xs={2} item className={classes.card} key={index}>
          <Grid item xs={2}>
            <data.CusIcon />
          </Grid>
          <Grid container item xs={10} direction="column" spacing={1}>
            <Grid item>
              <Typography variant="subtitle1" color="textSecondary">
                {get(data, "title")}
              </Typography>
            </Grid>
            <Grid item>
              <Typography variant="subtitle2">{get(data, "content")}</Typography>
            </Grid>
          </Grid>
        </Grid>
      ))}
    </Grid>
  );
}

handleAvatar = (image, dataCy, classes) =>
  image ? (
    <Avatar data-cy={dataCy} src={image} className={classes}>
      <Image />
    </Avatar>
  ) : null

function AddMusic() {
    const useStyle = useContext(ThemeContext);
    const fileRef = useRef();
    const [selected,setSelected] = useState(null);
    const selectImg = () =>{
        fileRef.current.click()
    }
    useEffect(()=>{
        fileRef.current.onchange = (e) => {
            setSelected(e.target.files[0].name)
        }
    })
    let id =musicDB[musicDB.length-1].id + 1;
    return (
        <form style={useStyle.component} className={"AddMusic"}>
            <div className="add-music-sub-container">
                <div className="d1">
                    <Button  onClick={selectImg}  style={{backgroundColor: useStyle.subTheme,width:"200px",height:"200px"}} variant={"contained"} >
                        <Image titleAccess={"Select a music cover"} style={{color:"#f0f0f0",width:"150px",height:"150px"}}/>
                    </Button>
                    <input ref={fileRef} accept="image/*" type="file" hidden id={"music-img"}/>
                    <p>{selected}</p>
                    <Button htmlFor={"music-img"} onClick={selectImg}  style={{backgroundColor: useStyle.subTheme,width:"200px",height:"200px"}} variant={"contained"} >
                        <MusicNoteTwoTone titleAccess={"Select a music"}  style={{color:"#f0f0f0",width:"150px",height:"150px"}}/>
                    </Button>
                    <input accept="audio/*" hidden type="file"/>
                    <select>
                        <option value="0">Select Language</option>
                        <option value="1">Hindi</option>
                        <option value="2">English</option>
                    </select>
                </div>
                <div className="d2">
                    <div>
                        <input type="text" value={"ID: "+id} disabled/>
                        <input type="text" placeholder={"CurrentPlayingLarge Name"} id={"name"}/>
                        <input type="text" placeholder={"Singer Name"} id={"artist"}/>
                        <Button  style={{backgroundColor: useStyle.theme}} variant={"contained"} endIcon={<Add/>}>
                            Add
                        </Button>
                    </div>
                    <div className={"preview"}>
                        <h3>Preview</h3>
                        <p>Music Cover : {selected}</p>
                        <p>Music Image : {selected}</p>
                        <p>Music Name : {selected}</p>
                        <p>Singer Name : {selected}</p>
                        <p>Language : {selected}</p>
                    </div>
                </div>
            </div>

        </form>
    );
}

ConstructorForm = ({ isEdit, editableConstructorElement }) => {
  const styles = useStyles();
  const dispatch = useDispatch();
  const history = createBrowserHistory();

  const { pathToConstructor } = config.routes;

  const { createConstructor, setUploadConstructorImg, uploadConstructorImg } =
    useConstructorHandlers();

  const { list, model, constructorElementMethod } = useSelector(
    selectConstructorMethodAndMaterials
  );

  const [materialColors, setMaterialColors] = useState([]);
  const [constructorAvatar, setConstructorAvatar] = useState('');

  useEffect(() => {
    if (isEdit) {
      setConstructorAvatar(`${IMG_URL}${editableConstructorElement.image}`);
      setMaterialColors(
        filter(
          list,
          (el) => el._id === editableConstructorElement.features.material._id
        )[0].colors
      );
    }
  }, [dispatch]);

  const constructorValidationSchema = Yup.object().shape({
    enName: Yup.string().min(2, MIN_LENGTH_MESSAGE).required(ERROR_MESSAGE),
    uaName: Yup.string().min(2, MIN_LENGTH_MESSAGE).required(ERROR_MESSAGE),
    material: Yup.string().required(ERROR_MESSAGE),
    color: Yup.string().required(ERROR_MESSAGE),
    image: Yup.string().required(PHOTO_NOT_PROVIDED),
    basePrice: Yup.number()
      .positive(PRICE_ERROR)
      .required(ERROR_MESSAGE)
      .typeError(PRICE_ERROR)
  });

  const { values, handleSubmit, handleChange, touched, errors, setFieldValue } =
    useFormik({
      validationSchema: constructorValidationSchema,
      initialValues: {
        image: editableConstructorElement.image || '',
        uaName: editableConstructorElement.name[0].value || '',
        enName: editableConstructorElement.name[1].value || '',
        material: editableConstructorElement.features.material._id || '',
        color: editableConstructorElement.features.color._id || '',
        available: editableConstructorElement.available || false,
        default: editableConstructorElement.default || false,
        basePrice: editableConstructorElement.basePrice || 0
      },
      onSubmit: (formValues) => {
        const constructorElement = createConstructor(formValues);
        history.goBack();
        if (isEdit) {
          return dispatch(
            constructorElementMethod({
              constructorElement,
              id: editableConstructorElement._id,
              upload: uploadConstructorImg
            })
          );
        }
        return dispatch(
          constructorElementMethod({
            constructorElement,
            id: model._id,
            upload: uploadConstructorImg
          })
        );
      }
    });

  const changed = useChangedValuesChecker(values, errors);
  const unblock = useUnsavedChangesHandler(values);

  const handleMaterial = (e) => {
    setFieldValue('material', e.target.value);
    setMaterialColors(list.filter((el) => el._id === e.target.value)[0].colors);
  };
  const handleMaterialColor = (e) => {
    setFieldValue('color', e.target.value);
  };

  const checkboxes = (checkBoxName, label) => [
    {
      id: `${checkBoxName}`,
      dataCy: `${checkBoxName}`,
      value: values[`${checkBoxName}`],
      checked: values[`${checkBoxName}`],
      color: 'primary',
      label,
      handler: () =>
        setFieldValue(`${checkBoxName}`, !values[`${checkBoxName}`])
    }
  ];

  const handleImageLoad = (files, callback) => {
    if (files && files[0]) {
      const reader = new FileReader();
      reader.onload = (event) => {
        callback(event);
      };
      reader.readAsDataURL(files[0]);
    }
  };

  const handleLoadConstructorImage = (files) => {
    handleImageLoad(files, (event) => {
      setFieldValue('image', event.target.result);
      setConstructorAvatar(event.target.result);
    });
    setUploadConstructorImg(files[0]);
  };

  const selectField = (
    selectValue,
    selectChangeAction,
    selectItemsList,
    inputLabel,
    defaultValue
  ) => (
    <FormControl className={styles.formControl}>
      <InputLabel id={`multiple-${selectValue}-label`}>{inputLabel}</InputLabel>
      <Select
        variant='outlined'
        labelId={`multiple-${selectValue}-label`}
        id={`multiple-${selectValue}`}
        onChange={selectChangeAction}
        input={<Input />}
        value={defaultValue || ''}
        MenuProps={MenuProps}
        disabled={!selectItemsList.length}
      >
        {map(selectItemsList, (selectItem) => (
          <MenuItem value={selectItem._id} key={selectItem._id}>
            <div className={styles.selectBox}>
              {selectValue === 'color' ? (
                <ColorCircle size={SMALL_CIRCLE} color={selectItem.colorHex} />
              ) : null}
              <span> {selectItem.name[0].value}</span>
            </div>
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );

  const inputs = [{ label: constructorName, name: 'name' }];
  const inputOptions = {
    errors,
    touched,
    handleChange,
    values,
    inputs
  };

  const eventPreventHandler = (e) => {
    e.preventDefault();
  };

  return (
    <div>
      <form onSubmit={(e) => eventPreventHandler(e)}>
        <CheckboxOptions options={checkboxes('available', show)} />
        <CheckboxOptions options={checkboxes('default', defaultElement)} />
        <Grid item xs={12}>
          <Paper className={styles.constructorItemUpdate}>
            <div>
              <span className={styles.imageUpload}>{constructorPhoto}</span>
              <div className={styles.imageUploadAvatar}>
                <ImageUploadContainer handler={handleLoadConstructorImage} />
                {constructorAvatar && (
                  <Avatar
                    src={constructorAvatar}
                    variant='rounded'
                    className={styles.avatar}
                  >
                    <Image />
                  </Avatar>
                )}
                {touched.image && errors.image && (
                  <div className={styles.inputError}>{errors.image}</div>
                )}
              </div>
            </div>
            <TextField
              data-cy='basePrice'
              id='basePrice'
              className={styles.textField}
              variant='outlined'
              label={baseConstructorElementPrice}
              value={values.basePrice}
              onChange={handleChange}
              error={touched.basePrice && !!errors.basePrice}
            />
            {touched.basePrice && errors.basePrice && (
              <div className={styles.inputError}>{errors.basePrice}</div>
            )}
            <div className={styles.textField}>
              {selectField(
                'material',
                handleMaterial,
                list,
                constructorMaterial,
                values.material
              )}
              {touched.material && errors.material && (
                <div className={styles.inputError}>{errors.material}</div>
              )}
              {selectField(
                'color',
                handleMaterialColor,
                materialColors,
                constructorColor,
                values.color
              )}
              {touched.color && errors.color && (
                <div className={styles.inputError}>{errors.color}</div>
              )}
            </div>
          </Paper>
        </Grid>
        {languages.map((lang) => (
          <LanguagePanel lang={lang} inputOptions={inputOptions} key={lang} />
        ))}
        <BackButton pathBack={pathToConstructor} />
        <SaveButton
          className={styles.saveButton}
          onClickHandler={handleSubmit}
          unblockFunction={unblock}
          data-cy='save-btn'
          type='submit'
          title={SAVE_TITLE}
          values={values}
          errors={errors}
          {...(isEdit ? { disabled: !changed } : {})}
        />
      </form>
    </div>
  );
}

ConstructorPage = ({ match }) => {
  const styles = useStyles();
  const commonStyles = useCommonStyles();
  const dispatch = useDispatch();
  const { openSuccessSnackbar } = useSuccessSnackbar();
  const { id } = match.params;
  const [openDialog, setOpenDialog] = useState(false);
  const { model, constructorTabs, patternList, filters, loading } = useSelector(
    selectConstructorMethodAndMaterials
  );

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

  const constructorElementDeleteHandler = (
    constructorElementID,
    action,
    modelID
  ) => {
    const removeConstructorElement = () => {
      dispatch(closeDialog());
      dispatch(action({ id: modelID, constructorElementID }));
    };
    openSuccessSnackbar(removeConstructorElement, REMOVE_CONSTRUCTOR_MESSAGE);
  };
  const handleConstructorOptions = (method) => {
    dispatch(push(`/constructor/${id}/add`));
    dispatch(setConstructorElementMethod(method));
    dispatch(setEditableConstructorElement(''));
  };
  const handleOpenDialog = () => {
    setOpenDialog(true);
  };
  const handleCloseDialog = () => {
    setOpenDialog(false);
  };

  const handleConstructorOpening = (label, createConstructorElement) => {
    label === constructorPattern
      ? handleOpenDialog()
      : handleConstructorOptions(createConstructorElement);
  };

  const handleConstructorTableItems = (
    label,
    pattern,
    list,
    deleteConstHandler,
    updateConstHandler
  ) => {
    if (label === pattern) {
      return patternItems(list, deleteConstHandler);
    }
    return constructorItems(list, deleteConstHandler, updateConstHandler);
  };

  const handleListItemClick = (modelID, pattern) => {
    setOpenDialog(false);
    dispatch(addConstructorPattern({ id: modelID, pattern }));
  };
  const handleUpdateConstructor = (method, elementId, element) => {
    dispatch(push(`/constructor/${id}/${elementId}`));
    dispatch(setConstructorElementMethod(method));
    dispatch(setEditableConstructorElement(element));
  };

  const constructorItems = (list, deleteAction, editAction) =>
    map(list, (listItem) => (
      <TableContainerRow
        image={constructorListItemImage(IMG_URL, listItem)}
        showAvatar={listItem.label === constructorPattern}
        color={
          <ColorCircle
            color={listItem.features.color.colorHex}
            size={DEFAULT_CIRCLE}
          />
        }
        key={listItem._id}
        id={listItem._id}
        name={listItem.name[0].value}
        material={listItem.features.material.name[0].value}
        show={isListItemAvailable(listItem, showEnable, showDisable)}
        deleteHandler={() =>
          constructorElementDeleteHandler(listItem._id, deleteAction, id)
        }
        editHandler={() =>
          handleUpdateConstructor(editAction, listItem._id, listItem)
        }
      />
    ));

  const patternItems = (list, deleteAction) =>
    map(list, (listItem) => (
      <TableContainerRow
        image={patternListItemImages(IMG_URL, listItem)}
        key={listItem._id}
        id={listItem._id}
        name={listItem.name[0].value}
        material={listItem.features.material.name[0].value}
        show={isListItemAvailable(listItem, showEnable, showDisable)}
        deleteHandler={() =>
          constructorElementDeleteHandler(listItem._id, deleteAction, id)
        }
        showEdit={false}
      />
    ));
  const constructorOptions = model
    ? {
        constructorBasic: {
          list: model?.eligibleOptions?.constructorBasic,
          label: constructorBasic,
          buttonTitle: CREATE_CONSTRUCTOR_BASIC_TITLE,
          createConstructorElement: addConstructorBasic,
          deleteConstructorElement: deleteConstructorBasic,
          updateConstructorElement: updateConstructorBasic
        },
        constructorPattern: {
          list: model.eligibleOptions.constructorPattern,
          label: constructorPattern,
          buttonTitle: CREATE_PATTERN_TITLE,
          deleteConstructorElement: deleteConstructorPattern
        },
        constructorFrontPocket: {
          list: model.eligibleOptions.constructorFrontPocket,
          label: constructorFrontPocket,
          buttonTitle: CREATE_CONSTRUCTOR_FRONT_POCKET_TITLE,
          createConstructorElement: addConstructorFrontPocket,
          deleteConstructorElement: deleteConstructorFrontPocket,
          updateConstructorElement: updateConstructorFrontPocket
        },
        constructorBottom: {
          list: model.eligibleOptions.constructorBottom,
          label: constructorBottom,
          buttonTitle: CREATE_CONSTRUCTOR_BOTTOM_TITLE,
          createConstructorElement: addConstructorBottom,
          deleteConstructorElement: deleteConstructorBottom,
          updateConstructorElement: updateConstructorBottom
        }
      }
    : {};

  const handleTabsChange = (event, newValue) => {
    dispatch(setConstructorTabs(newValue));
    if (!constructorTabs) {
      dispatch(
        getPatterns({
          skip: 0,
          limit: 10
        })
      );
    }
  };

  const constructorTabsValue = Object.values(constructorOptions).map(
    ({ label }) => <Tab label={label} key={label} />
  );
  const constructorTables = Object.values(constructorOptions).map(
    (
      {
        label,
        list,
        buttonTitle,
        createConstructorElement,
        deleteConstructorElement,
        updateConstructorElement
      },
      index
    ) => {
      const handleConstructorTableTitles =
        label === constructorPattern
          ? patternConstructorTitles
          : generalConstructorTitles;

      return (
        <TabPanel key={label} value={constructorTabs} index={index}>
          <div className={commonStyles.adminHeader}>
            <Typography variant='h1' className={commonStyles.materialTitle}>
              {label}
            </Typography>
            <Button
              data-cy='add-constructor-element'
              onClick={() =>
                handleConstructorOpening(label, createConstructorElement)
              }
              variant='contained'
              color='primary'
            >
              {buttonTitle}
            </Button>
          </div>
          <TableContainerGenerator
            data-cy='constructorTable'
            tableTitles={handleConstructorTableTitles}
            tableItems={handleConstructorTableItems(
              label,
              constructorPattern,
              list,
              deleteConstructorElement,
              updateConstructorElement
            )}
          />
        </TabPanel>
      );
    }
  );
  if (loading) {
    return <LoadingBar />;
  }
  return (
    <div className={commonStyles.container}>
      <div className={styles.backButton}>
        <BackButton />
      </div>
      <AppBar position='static'>
        <Tabs
          className={styles.tabs}
          value={constructorTabs}
          onChange={handleTabsChange}
        >
          {constructorTabsValue}
        </Tabs>
      </AppBar>
      {constructorTables}
      <Dialog open={openDialog} onClose={handleCloseDialog}>
        <DialogTitle className={styles.dialogTitle}>
          {availablePatternsForConstructor}
        </DialogTitle>
        <List>
          {map(
            patternList.filter((el) => el.constructorImg),
            (pattern) => (
              <ListItem
                button
                onClick={() => handleListItemClick(id, pattern)}
                key={pattern._id}
              >
                <ListItemAvatar>
                  <Avatar src={`${imagePrefix}${pattern.images.thumbnail}`}>
                    <Image />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary={pattern.name[0].value} />
                <Avatar
                  src={IMG_URL + pattern.constructorImg}
                  variant='rounded'
                  className={styles.avatar}
                >
                  <Image />
                </Avatar>
              </ListItem>
            )
          )}
        </List>
      </Dialog>
    </div>
  );
}