@ant-design/icons#PictureOutlined JavaScript Examples

MessageForm = (props) => {
  const [value, setValue] = useState("");
  const { chatId, creds } = props;

  const handleChange = (event) => {
    setValue(event.target.value);

    isTyping(props, chatId);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const text = value.trim();

    if (text.length > 0) {
      sendMessage(creds, chatId, { text });
    }

    setValue("");
  };

  const handleUpload = (event) => {
    sendMessage(creds, chatId, { files: event.target.files, text: "" });
  };

  return (
    <form className="message-form" onSubmit={handleSubmit}>
      <input
        className="message-input"
        placeholder="Send a message..."
        value={value}
        onChange={handleChange}
        onSubmit={handleSubmit}
      />
      <label htmlFor="upload-button">
        <span className="image-button">
          <PictureOutlined className="picture-icon" />
        </span>
      </label>
      <input
        type="file"
        multiple={false}
        id="upload-button"
        style={{ display: "none" }}
        onChange={handleUpload.bind(this)}
      />
      <button type="submit" className="send-button">
        <SendOutlined className="send-icon" />
      </button>
    </form>
  );
}

export function Footer() {
    const [typingText, setTypingText] = useState('')

    const handleEmojiMart = (emoji) => {
        setTypingText((prevState) => prevState + emoji.native)
    }

    const onChange = (e) => {
        setTypingText(e.target.value)
    }

    const handleSendMessage = (e) => {
        if (e.keyCode === 13) {
            console.log(typingText)
            setTypingText('')
        }
    }

    const handleUploadFile = async (file) => {
        try {
            console.log(file)

            message.success('File updated successfully.')
        } catch (error) {
            message.error(error)
        }
    }

    const handleLike = () => {
        setTypingText((prevState) => prevState + '?')
    }

    return (
        <Row
            style={{
                height: 60,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}
        >
            <Col
                style={{
                    padding: 12,
                    width: 'calc(100% - 120px)',
                }}
            >
                <Input
                    placeholder="Type a message..."
                    value={typingText}
                    onChange={onChange}
                    onKeyDown={handleSendMessage}
                    // onFocus={() => channel?.startTyping()}
                    // onBlur={() => channel?.endTyping()}
                />
            </Col>
            <Col
                style={{
                    float: 'right',
                    display: 'flex',
                }}
            >
                <Upload beforeUpload={handleUploadFile} showUploadList={false}>
                    <Button
                        style={{
                            border: 0,
                            display: 'inline-block',
                            cursor: 'pointer',
                        }}
                        type="ghost"
                        icon={<PictureOutlined />}
                        size="large"
                    />
                </Upload>

                <PickerButton
                    style={{
                        position: 'absolute',
                        bottom: 42,
                        right: 42,
                    }}
                    handleEmojiMart={handleEmojiMart}
                />

                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={
                        <LikeOutlined
                            style={{
                                color: PRIMARY_COLOR,
                            }}
                        />
                    }
                    size="large"
                    onClick={handleLike}
                />
            </Col>
        </Row>
    )
}

export function ChatInput() {
    const [typingText, setTypingText] = useState('')

    const handleEmojiMart = (emoji) => {
        setTypingText((prevState) => prevState + emoji.native)
    }

    const onChange = (e) => {
        setTypingText(e.target.value)
    }

    const handleSendMessage = (e) => {
        if (e.keyCode === 13) {
            console.log(typingText)
            setTypingText('')
        }
    }

    const handleUploadFile = async (file) => {
        try {
            console.log(file)

            message.success('File updated successfully.')
        } catch (error) {
            message.error(error)
        }
    }

    const handleLike = () => {
        setTypingText((prevState) => prevState + '?')
    }

    return (
        <Fragment>
            <Col
                style={{
                    padding: 12,
                    width: 'calc(100% - 120px)',
                }}
            >
                <Input
                    placeholder="Type a message..."
                    value={typingText}
                    onChange={onChange}
                    onKeyDown={handleSendMessage}
                    // onFocus={() => channel?.startTyping()}
                    // onBlur={() => channel?.endTyping()}
                />
            </Col>
            <Col
                style={{
                    float: 'right',
                    display: 'flex',
                }}
            >
                <Upload beforeUpload={handleUploadFile} showUploadList={false}>
                    <Button
                        style={{
                            border: 0,
                            display: 'inline-block',
                            cursor: 'pointer',
                        }}
                        type="ghost"
                        icon={<PictureOutlined />}
                        size="large"
                    />
                </Upload>
                <div>
                    <PickerButton
                        style={{
                            position: 'absolute',
                            bottom: 42,
                            right: 42,
                        }}
                        handleEmojiMart={handleEmojiMart}
                    />
                </div>

                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={
                        <LikeOutlined
                            style={{
                                color: PRIMARY_COLOR,
                            }}
                        />
                    }
                    size="large"
                    onClick={handleLike}
                />
            </Col>
        </Fragment>
    )
}

export function Footer() {
    const { channel, setMessages } = useDashboard()
    const { sendUserMessage, sendFileMessage } = useSendBird()

    const [typingText, setTypingText] = useState('')

    const handleEmojiMart = (emoji) => {
        setTypingText((prevState) => prevState + emoji.native)
    }

    const onChange = (e) => {
        setTypingText(e.target.value)
    }

    const handleKeyDown = async (e) => {
        if (e.keyCode === 13) {
            handleSendMessage()
        }
    }

    const handleSendMessage = async (e) => {
        if (typingText === '') return

        // console.log(typingText)
        const newUserMessage = await sendUserMessage(channel, typingText)
        // console.log(newUserMessage)
        const formatNewUserMessage = messageDto(channel, newUserMessage)
        setMessages((prevState) => [...prevState, formatNewUserMessage])
        setTypingText('')
    }

    const handleUploadFile = async (file) => {
        try {
            console.log(file)
            const fileMessage = await sendFileMessage(
                channel,
                file,
                file.name,
                file.size,
                file.type
            )
            const formatNewUserMessage = messageDto(channel, fileMessage)
            setMessages((prevState) => [...prevState, formatNewUserMessage])
            fileMessage && message.success('File updated successfully.')
        } catch (error) {
            message.error(error)
        }
    }

    return (
        <Row
            style={{
                height: 60,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
            }}
        >
            <Col
                style={{
                    padding: 12,
                    width: 'calc(100% - 120px)',
                }}
            >
                <Input
                    placeholder="Type a message..."
                    value={typingText}
                    onChange={onChange}
                    onKeyDown={handleKeyDown}
                    onFocus={() => channel.startTyping()}
                    onBlur={() => channel.endTyping()}
                />
            </Col>
            <Col
                style={{
                    float: 'right',
                    display: 'flex',
                }}
            >
                <Upload beforeUpload={handleUploadFile} showUploadList={false}>
                    <Button
                        style={{
                            border: 0,
                            display: 'inline-block',
                            cursor: 'pointer',
                        }}
                        type="ghost"
                        icon={<PictureOutlined />}
                        size="large"
                    />
                </Upload>

                <PickerButton
                    style={{
                        position: 'absolute',
                        bottom: 42,
                        right: 42,
                    }}
                    handleEmojiMart={handleEmojiMart}
                />

                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={
                        <SendOutlined
                            style={{
                                color: PRIMARY_COLOR,
                            }}
                        />
                    }
                    size="large"
                    onClick={handleSendMessage}
                />
            </Col>
        </Row>
    )
}

export function ChatInput() {
    const { channel, setMessages } = useDashboard()
    const { sendUserMessage, sendFileMessage } = useSendBird()

    const [typingText, setTypingText] = useState('')

    const handleEmojiMart = (emoji) => {
        setTypingText((prevState) => prevState + emoji.native)
    }

    const onChange = (e) => {
        setTypingText(e.target.value)
    }

    const handleKeyDown = async (e) => {
        if (e.keyCode === 13) {
            handleSendMessage()
        }
    }

    const handleSendMessage = async (e) => {
        if (typingText === '') return

        // console.log(typingText)
        const newUserMessage = await sendUserMessage(channel, typingText)
        // console.log(newUserMessage)
        const formatNewUserMessage = messageDto(channel, newUserMessage)
        setMessages((prevState) => [...prevState, formatNewUserMessage])
        setTypingText('')
    }

    const handleUploadFile = async (file) => {
        try {
            console.log(file)
            const fileMessage = await sendFileMessage(
                channel,
                file,
                file.name,
                file.size,
                file.type
            )
            const formatNewUserMessage = messageDto(channel, fileMessage)
            setMessages((prevState) => [...prevState, formatNewUserMessage])
            fileMessage && message.success('File updated successfully.')
        } catch (error) {
            message.error(error)
        }
    }

    return (
        <Fragment>
            <Col
                style={{
                    padding: 12,
                    width: 'calc(100% - 120px)',
                }}
            >
                <Input
                    placeholder="Type a message..."
                    value={typingText}
                    onChange={onChange}
                    onKeyDown={handleKeyDown}
                    onFocus={() => channel.startTyping()}
                    onBlur={() => channel.endTyping()}
                />
            </Col>
            <Col
                style={{
                    float: 'right',
                    display: 'flex',
                }}
            >
                <Upload beforeUpload={handleUploadFile} showUploadList={false}>
                    <ScaleIn>
                        <Button
                            style={{
                                border: 0,
                                display: 'inline-block',
                                cursor: 'pointer',
                            }}
                            type="ghost"
                            icon={<PictureOutlined />}
                            size="large"
                        />
                    </ScaleIn>
                </Upload>
                <ScaleIn>
                    <PickerButton
                        style={{
                            position: 'absolute',
                            bottom: 42,
                            right: 42,
                        }}
                        handleEmojiMart={handleEmojiMart}
                    />
                </ScaleIn>
                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={
                        <SendOutlined
                            style={{
                                color: PRIMARY_COLOR,
                            }}
                        />
                    }
                    size="large"
                    onClick={handleSendMessage}
                />
            </Col>
        </Fragment>
    )
}

function UploadForm({ afterUpload, protest }) {
  const [currentFile, setCurrentFile] = useState(null);
  const [description, setDescription] = useState('');
  const [protestModalState, setProtestModalState] = useState(false);
  const [manualAddressSelection, setManualAddressSelection] = useState(false);
  const [loadingProtests, setLoadingProtests] = useState(false);
  const [isAnnonymous, setAnnonymous] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [eventDate, setEventDate] = useState(todayDate);

  const store = useStore();
  const history = useHistory();

  const { protestStore, userStore } = store;

  const handleUpload = async () => {
    const { userCurrentProtest, user } = userStore;

    if (!userCurrentProtest) {
      alert('העלאה נכשלה: התמונה לא משוייכת להפגנה.');
      return;
    }

    if (!user) {
      alert('העלאה נכשלה: אינך מחובר/ת.');
      history.push('/sign-up?returnUrl=/upload-image?returnUrl=/live');
      return;
    }

    setUploading(true);

    const result = await uploadImage({ base64File: currentFile, protestId: userCurrentProtest.id, date: eventDate });
    if (!result) {
      alert('לא הצלחנו להעלות את התמונה.\nאם הבעיה ממשיכה להתרחש, אנא צרו איתנו קשר.');
      return;
    }

    const { secure_url: imageUrl, fileId } = result;
    const { id: protestId, displayName: protestName, cityName } = userCurrentProtest;
    const pictureData = { imageUrl, description, eventDate, protestId, protestName, cityName: cityName || '' };

    if (isAnnonymous === false) {
      pictureData.userId = user.uid;
      pictureData.uploaderName = `${user.firstName || ''} ${user.lastName || ''}`;
      pictureData.userAvatar = user.pictureUrl || '';
    }

    // Returns undefined once saved
    await savePictureToFirestore({ pictureData, fileId });

    if (isAnnonymous) {
      keepAnnonymousReference({ pictureId: fileId, userId: user.uid });
    }

    await savePictureToLiveFeed(pictureData);

    setUploading(false);

    Modal.success({
      title: 'התמונה הועלתה בהצלחה!',
      onOk: () => {
        const { returnUrl } = queryString.parse(window.location.search);
        if (returnUrl) {
          history.push(returnUrl);
        }
      },
    });
  };

  const openNearbyProtestsModal = async () => {
    try {
      const position = await getCurrentPosition();
      setManualAddressSelection(false);
      setLoadingProtests(true);
      store.setCoordinates(position);
      await protestStore.fetchProtests({ position, onlyMarkers: false });
      setProtestModalState(true);
      setLoadingProtests(false);
    } catch (err) {
      console.log(err);
      alert('לא הצלחנו לאתר את המיקום.\nניתן לבחור מיקום הפגנה ידנית :)');
    }
  };

  const setFile = async (file) => {
    const blob = await reducer().toBlob(file, {
      max: 1920,
    });

    const base64File = await fileToBase64(blob);
    setCurrentFile(base64File);
    return false;
  };

  const handleProtestSelection = (protest) => {
    userStore.setUserProtest(protest);
    setProtestModalState(false);
  };

  return (
    <UploadFormWrapper>
      <Helmet>
        <title>העלאת תמונה</title>
      </Helmet>
      <UploadFormSection.Header style={{ textAlign: 'center', fontWeight: 600 }}>העלאת תמונה</UploadFormSection.Header>
      <UploadFormSection>
        <Upload showUploadList={false} beforeUpload={setFile} accept="image/*">
          <UploadButton icon={<PictureOutlined />}>{currentFile ? ' שינוי תמונה' : 'בחירת תמונה'}</UploadButton>
          <ImagePreview src={currentFile || '/images/picture-placeholder.svg'} alt="" />
        </Upload>
        <UploadFormSection>
          <Input onChange={(e) => setDescription(e.target.value)} placeholder="הוסיפו תיאור לתמונה..." />
        </UploadFormSection>
      </UploadFormSection>
      <UploadFormSection>
        <UploadFormSection.Header>תאריך</UploadFormSection.Header>

        <Input
          type="date"
          value={eventDate}
          max={todayDate}
          onChange={(e) => setEventDate(e.target.value)}
          style={{ textAlign: ' right' }}
        />
      </UploadFormSection>

      <UploadFormSection>
        <UploadFormSection.Header>
          <span style={{ color: 'red', marginLeft: 4 }}>*</span>שיוך תמונה להפגנה
        </UploadFormSection.Header>
        {userStore.userCurrentProtest ? (
          <Title level={3} style={{ textAlign: 'center' }}>
            {userStore.userCurrentProtest.displayName}
          </Title>
        ) : (
          <Button
            type="primary"
            size="large"
            style={{ width: '100%', marginBottom: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
            icon={<GPSIcon width="16" height="16" />}
            loading={loadingProtests}
            onClick={() => openNearbyProtestsModal()}
          >
            <span style={{ marginRight: 7, marginBottom: 3 }}>מציאה לפי מיקום</span>
          </Button>
        )}
        <Button
          onClick={() => {
            setManualAddressSelection(true);
            setProtestModalState(true);
          }}
          size="large"
          style={{ width: '100%' }}
        >
          בחירת הפגנה ידנית
        </Button>
      </UploadFormSection>
      <label>
        <Checkbox onChange={(checked) => setAnnonymous(checked)}> העלאה אנונימית (שמכם לא יוצג באתר) </Checkbox>
      </label>
      <Button
        type="primary"
        size="large"
        icon={<UploadOutlined />}
        shape="round"
        onClick={handleUpload}
        disabled={!currentFile || !eventDate || !userStore.userCurrentProtest}
        loading={uploading}
        style={{ marginTop: 16, width: '100%' }}
        className="bg-success"
      >
        {uploading ? 'שולח תמונה..' : 'העלאת תמונה'}
      </Button>
      <p style={{ textAlign: 'center', fontSize: 12, fontWeight: 100, margin: '8px 50px' }}>
        בכך שאני מעלה את התמונה אני מאשר שיש לי את הזכות לפרסם אותה ואת אישור המופיעים בתמונה
      </p>
      <Modal visible={protestModalState} onCancel={() => setProtestModalState(false)} footer={null} closable={false}>
        <ProtestSelection onProtestSelection={handleProtestSelection} manualAddress={manualAddressSelection} />
      </Modal>
    </UploadFormWrapper>
  );
}

describe('SearchMenu', () => {
  it('renders correctly with no options', () => {
    const options = {};
    const component = mount(<SearchMenu options={options} />);

    const menu = component.find(Menu);
    expect(menu.length).toEqual(1);
    expect(menu.find(Input).length).toEqual(1);
    expect(menu.children().length).toEqual(1);
  });

  it('renders correctly with options and one category', () => {
    const options = {
      category1: [
        {
          key: 'one',
          name: 'item 1',
        },
        {
          key: 'two',
          name: 'item 2',
        },
      ],
      category2: [],
    };
    const component = shallow(<SearchMenu options={options} />);
    const menu = component.find(Menu);

    expect(menu.children().length).toEqual(4);
    expect(menu.childAt(1).find('Divider').length).toEqual(1);
    expect(menu.childAt(1).find('Divider').props().children).toEqual('category1');
    expect(menu.childAt(2).props().children).toMatchSnapshot();
    expect(menu.childAt(3).props().children).toMatchSnapshot();
  });

  it('renders correctly with category info', () => {
    const options = {
      category1: [
        {
          key: 'one',
          name: 'item 1',
        },
        {
          key: 'two',
          name: 'item 2',
        },
      ],
      category2: [],
    };

    const categoryInfo = {
      category1: <PictureFilled />,
      category2: <PictureOutlined />,
    };

    const component = shallow(<SearchMenu options={options} categoryInfo={categoryInfo} />);
    const menu = component.find(Menu);

    expect(menu.children().length).toEqual(4);
    expect(menu.childAt(1).find('Divider').length).toEqual(1);
    expect(menu.childAt(1).find('Divider').props().children).toEqual('category1');
    expect(menu.childAt(2).props().children).toMatchSnapshot();
    expect(menu.childAt(3).props().children).toMatchSnapshot();
  });

  it('retrieves relevant items from menu on search', () => {
    const options = {
      category1: [
        {
          key: 'one',
          name: 'item 1',
          description: 'an amazing item.',
        },
        {
          key: 'two',
          name: 'item 2',
          description: 'this is a better one',
        },
        {
          key: 'three',
          name: 'item 3',
          description: 'I went bananas',
        },
      ],
    };
    const text1 = 'banana';
    const component = shallow(<SearchMenu options={options} />);
    const menu = component.find(Menu);
    const input = menu.find(Input).getElement();
    const actualKeys = input.props.onChange({ target: { value: text1 } });
    expect(actualKeys.category1).toEqual([options.category1[2]]);
  });
});

ExplorationViewPage = ({
  experimentId, experimentData,
}) => {
  const dispatch = useDispatch();
  const layout = useSelector((state) => state.layout);
  const { windows, panel } = layout;
  const [selectedTab, setSelectedTab] = useState(panel);
  const [addMenuVisible, setAddMenuVisible] = useState(false);
  const { method } = useSelector((state) => (
    state.experimentSettings.processing?.configureEmbedding?.embeddingSettings
  )) || false;

  useEffect(() => {
    setSelectedTab(panel);
  }, [panel]);

  useEffect(() => {
    if (!method) {
      dispatch(loadProcessingSettings(experimentId));
    }
  }, []);
  const methodUppercase = method ? method.toUpperCase() : ' ';
  const embeddingTitle = `${methodUppercase} Embedding`;

  useEffect(() => {
    if (method && windows) {
      dispatch(updateLayout({
        ...windows,
        first: {
          ...windows.first,
          first: {
            ...windows.first.first,
            first: methodUppercase,
          },
        },
      }));
    }
  }, [method]);

  const TILE_MAP = {
    [methodUppercase]: {
      toolbarControls: <MosaicCloseButton key='remove-button-embedding' />,
      component: (width, height) => (
        <Embedding
          experimentId={experimentId}
          width={width}
          height={height}
        />
      ),
    },
    Heatmap: {
      toolbarControls: (
        <>
          <HeatmapSettings componentType={COMPONENT_TYPE} key='heatmap-settings' />
          <MosaicCloseButton key='remove-button-heatmap' />
        </>
      ),
      component: (width, height) => (
        <HeatmapPlot experimentId={experimentId} width={width} height={height} />
      ),
    },
    Genes: {
      toolbarControls: <MosaicCloseButton key='remove-button-genes' />,
      component: (width, height) => (
        <Tabs
          size='small'
          activeKey={selectedTab}
          onChange={(key) => { setSelectedTab(key); }}
        >
          <TabPane tab='Gene list' key='Gene list'>
            <GeneListTool experimentId={experimentId} width={width} height={height} />
          </TabPane>
          <TabPane tab='Differential expression' key='Differential expression'>
            <DiffExprManager
              experimentId={experimentId}
              view='compute'
              width={width}
              height={height}
            />
          </TabPane>
        </Tabs>
      ),
    },
    'Data Management': {
      toolbarControls: <MosaicCloseButton key='remove-button-data-management' />,
      component: (width, height) => (
        <CellSetsTool
          experimentId={experimentId}
          width={width}
          height={height}
        />
      ),
    },
  };

  const categoryItems = {
    Genes: [
      {
        description: 'Create and manage interesting groupings of cells.',
        key: 'Data Management',
      },
      {
        description: 'Find, organize, and annotate genes in your data set.',
        key: 'Gene list',
        group: 'Genes',
      },
      {
        description: 'Find and explore the most characteristic genes in a set of cells.',
        key: 'Differential expression',
        group: 'Genes',
      },
    ],
    Plots: [
      {
        key: `${methodUppercase}`,
        description: `Visualize cells clustered by genetic expression using a ${embeddingTitle}.`,
      },
      {
        key: 'Heatmap',
        description: 'Gain a high-level understanding of expression levels across large groups of genes and cells.',
      },
    ],
  };

  const categoryInfo = {
    Plots: <PictureOutlined />,
    Tools: <ToolOutlined />,
  };

  const searchMenu = (
    <SearchMenu
      options={categoryItems}
      categoryInfo={categoryInfo}
      onSelect={(key, category, belongsToGroup) => {
        dispatch(addWindow(key, belongsToGroup));
        setAddMenuVisible(false);
      }}
    />
  );

  return (
    <>
      <Header
        experimentId={experimentId}
        experimentData={experimentData}
        title='Data Exploration'
        extra={[(
          <Dropdown
            trigger={['click']}
            key='search-menu-dropdown'
            overlay={searchMenu}
            visible={addMenuVisible}
            onVisibleChange={(visible) => setAddMenuVisible(visible)}
          >
            <Button type='primary' onClick={() => setAddMenuVisible(!addMenuVisible)}>
              Add
              {' '}
              <DownOutlined />
            </Button>
          </Dropdown>
        )]}
      />
      <MultiTileContainer
        tileMap={TILE_MAP}
        initialArrangement={windows}
      />
    </>
  );
}