{"version":3,"sources":["webpack:///app/javascript/opt/mastodon/app/javascript/flavours/glitch/features/directory/components/account_card.tsx","webpack:///app/javascript/opt/mastodon/app/javascript/flavours/glitch/features/directory/index.tsx"],"names":["messages","defineMessages","unfollow","id","defaultMessage","follow","cancel_follow_request","requested","unblock","unmute","edit_profile","getAccount","makeGetAccount","AccountCard","_ref","accountId","intl","useIntl","account","useAppSelector","s","dispatch","useAppDispatch","handleMouseEnter","useCallback","_ref2","currentTarget","autoPlayGif","querySelectorAll","forEach","emoji","original","getAttribute","src","handleMouseLeave","_ref3","staticUrl","handleFollow","getIn","openModal","modalType","modalProps","followAccount","get","handleBlock","_account$relationship","relationship","blocking","unblockAccount","handleMute","_account$relationship2","muting","unmuteAccount","handleEditProfile","window","open","actionBtn","me","_jsx","Button","text","formatMessage","title","onClick","_account$relationship3","disabled","blocked_by","className","classNames","Permalink","href","to","alt","Avatar","size","DisplayName","length","onMouseEnter","onMouseLeave","dangerouslySetInnerHTML","__html","ShortNumber","value","FormattedMessage","recentlyActive","newArrivals","local","federated","Directory","columnId","multiColumn","params","column","useRef","orderParam","setOrderParam","useSearchParam","localParam","setLocalParam","localParamBool","order","handlePin","removeColumn","addColumn","domain","meta","accountIds","state","user_lists","ImmutableList","isLoading","useEffect","fetchDirectory","handleMove","dir","moveColumn","handleHeaderClick","_column$current","current","scrollTop","handleChangeOrder","e","changeColumnParams","target","handleChangeLocal","handleLoadMore","expandDirectory","pinned","scrollableArea","role","RadioButton","name","label","checked","onChange","LoadingIndicator","map","LoadMore","visible","_jsxs","Column","bindToDocument","ref","children","ColumnHeader","icon","iconComponent","PeopleIcon","onPin","onMove","ScrollContainer","scrollKey","Helmet","content"],"mappings":"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","file":"js/features/glitch/async/directory-4f4ac9ea8f4193cd9a78.chunk.js","sourcesContent":["import type { MouseEventHandler } from 'react';\nimport { useCallback } from 'react';\n\nimport { FormattedMessage, defineMessages, useIntl } from 'react-intl';\n\nimport classNames from 'classnames';\n\nimport {\n  followAccount,\n  unblockAccount,\n  unmuteAccount,\n} from 'flavours/glitch/actions/accounts';\nimport { openModal } from 'flavours/glitch/actions/modal';\nimport { Avatar } from 'flavours/glitch/components/avatar';\nimport { Button } from 'flavours/glitch/components/button';\nimport { DisplayName } from 'flavours/glitch/components/display_name';\nimport { Permalink } from 'flavours/glitch/components/permalink';\nimport { ShortNumber } from 'flavours/glitch/components/short_number';\nimport { autoPlayGif, me } from 'flavours/glitch/initial_state';\nimport type { Account } from 'flavours/glitch/models/account';\nimport { makeGetAccount } from 'flavours/glitch/selectors';\nimport { useAppDispatch, useAppSelector } from 'flavours/glitch/store';\n\nconst messages = defineMessages({\n  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },\n  follow: { id: 'account.follow', defaultMessage: 'Follow' },\n  cancel_follow_request: {\n    id: 'account.cancel_follow_request',\n    defaultMessage: 'Withdraw follow request',\n  },\n  requested: {\n    id: 'account.requested',\n    defaultMessage: 'Awaiting approval. Click to cancel follow request',\n  },\n  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },\n  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },\n  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },\n});\n\nconst getAccount = makeGetAccount();\n\nexport const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {\n  const intl = useIntl();\n  const account = useAppSelector((s) => getAccount(s, accountId));\n  const dispatch = useAppDispatch();\n\n  const handleMouseEnter = useCallback<MouseEventHandler>(\n    ({ currentTarget }) => {\n      if (autoPlayGif) {\n        return;\n      }\n      const emojis =\n        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');\n\n      emojis.forEach((emoji) => {\n        const original = emoji.getAttribute('data-original');\n        if (original) emoji.src = original;\n      });\n    },\n    [],\n  );\n\n  const handleMouseLeave = useCallback<MouseEventHandler>(\n    ({ currentTarget }) => {\n      if (autoPlayGif) {\n        return;\n      }\n\n      const emojis =\n        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');\n\n      emojis.forEach((emoji) => {\n        const staticUrl = emoji.getAttribute('data-static');\n        if (staticUrl) emoji.src = staticUrl;\n      });\n    },\n    [],\n  );\n\n  const handleFollow = useCallback(() => {\n    if (!account) return;\n\n    if (\n      account.getIn(['relationship', 'following']) ||\n      account.getIn(['relationship', 'requested'])\n    ) {\n      dispatch(\n        openModal({ modalType: 'CONFIRM_UNFOLLOW', modalProps: { account } }),\n      );\n    } else {\n      dispatch(followAccount(account.get('id')));\n    }\n  }, [account, dispatch]);\n\n  const handleBlock = useCallback(() => {\n    if (account?.relationship?.blocking) {\n      dispatch(unblockAccount(account.get('id')));\n    }\n  }, [account, dispatch]);\n\n  const handleMute = useCallback(() => {\n    if (account?.relationship?.muting) {\n      dispatch(unmuteAccount(account.get('id')));\n    }\n  }, [account, dispatch]);\n\n  const handleEditProfile = useCallback(() => {\n    window.open('/settings/profile', '_blank');\n  }, []);\n\n  if (!account) return null;\n\n  let actionBtn;\n\n  if (me !== account.get('id')) {\n    if (!account.get('relationship')) {\n      // Wait until the relationship is loaded\n      actionBtn = '';\n    } else if (account.getIn(['relationship', 'requested'])) {\n      actionBtn = (\n        <Button\n          text={intl.formatMessage(messages.cancel_follow_request)}\n          title={intl.formatMessage(messages.requested)}\n          onClick={handleFollow}\n        />\n      );\n    } else if (account.getIn(['relationship', 'muting'])) {\n      actionBtn = (\n        <Button\n          text={intl.formatMessage(messages.unmute)}\n          onClick={handleMute}\n        />\n      );\n    } else if (!account.getIn(['relationship', 'blocking'])) {\n      actionBtn = (\n        <Button\n          disabled={account.relationship?.blocked_by}\n          className={classNames({\n            'button--destructive': account.getIn(['relationship', 'following']),\n          })}\n          text={intl.formatMessage(\n            account.getIn(['relationship', 'following'])\n              ? messages.unfollow\n              : messages.follow,\n          )}\n          onClick={handleFollow}\n        />\n      );\n    } else if (account.getIn(['relationship', 'blocking'])) {\n      actionBtn = (\n        <Button\n          text={intl.formatMessage(messages.unblock)}\n          onClick={handleBlock}\n        />\n      );\n    }\n  } else {\n    actionBtn = (\n      <Button\n        text={intl.formatMessage(messages.edit_profile)}\n        onClick={handleEditProfile}\n      />\n    );\n  }\n\n  return (\n    <div className='account-card'>\n      <Permalink\n        href={account.get('url')}\n        to={`/@${account.get('acct')}`}\n        className='account-card__permalink'\n      >\n        <div className='account-card__header'>\n          <img\n            src={\n              autoPlayGif ? account.get('header') : account.get('header_static')\n            }\n            alt=''\n          />\n        </div>\n\n        <div className='account-card__title'>\n          <div className='account-card__title__avatar'>\n            <Avatar account={account as Account} size={56} />\n          </div>\n          <DisplayName account={account as Account} />\n        </div>\n      </Permalink>\n\n      {account.get('note').length > 0 && (\n        <div\n          className='account-card__bio translate'\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleMouseLeave}\n          dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}\n        />\n      )}\n\n      <div className='account-card__actions'>\n        <div className='account-card__counters'>\n          <div className='account-card__counters__item'>\n            <ShortNumber value={account.get('statuses_count')} />\n            <small>\n              <FormattedMessage id='account.posts' defaultMessage='Posts' />\n            </small>\n          </div>\n\n          <div className='account-card__counters__item'>\n            <ShortNumber value={account.get('followers_count')} />{' '}\n            <small>\n              <FormattedMessage\n                id='account.followers'\n                defaultMessage='Followers'\n              />\n            </small>\n          </div>\n\n          <div className='account-card__counters__item'>\n            <ShortNumber value={account.get('following_count')} />{' '}\n            <small>\n              <FormattedMessage\n                id='account.following'\n                defaultMessage='Following'\n              />\n            </small>\n          </div>\n        </div>\n\n        <div className='account-card__actions__button'>{actionBtn}</div>\n      </div>\n    </div>\n  );\n};\n","import type { ChangeEventHandler } from 'react';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { defineMessages, useIntl } from 'react-intl';\n\nimport { Helmet } from 'react-helmet';\n\nimport { List as ImmutableList } from 'immutable';\n\nimport PeopleIcon from '@/material-icons/400-24px/group.svg?react';\nimport {\n  addColumn,\n  removeColumn,\n  moveColumn,\n  changeColumnParams,\n} from 'flavours/glitch/actions/columns';\nimport {\n  fetchDirectory,\n  expandDirectory,\n} from 'flavours/glitch/actions/directory';\nimport { Column } from 'flavours/glitch/components/column';\nimport type { ColumnRef } from 'flavours/glitch/components/column';\nimport { ColumnHeader } from 'flavours/glitch/components/column_header';\nimport { LoadMore } from 'flavours/glitch/components/load_more';\nimport { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';\nimport { RadioButton } from 'flavours/glitch/components/radio_button';\nimport ScrollContainer from 'flavours/glitch/containers/scroll_container';\nimport { useSearchParam } from 'flavours/glitch/hooks/useSearchParam';\nimport { useAppDispatch, useAppSelector } from 'flavours/glitch/store';\n\nimport { AccountCard } from './components/account_card';\n\nconst messages = defineMessages({\n  title: { id: 'column.directory', defaultMessage: 'Browse profiles' },\n  recentlyActive: {\n    id: 'directory.recently_active',\n    defaultMessage: 'Recently active',\n  },\n  newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },\n  local: { id: 'directory.local', defaultMessage: 'From {domain} only' },\n  federated: {\n    id: 'directory.federated',\n    defaultMessage: 'From known fediverse',\n  },\n});\n\nexport const Directory: React.FC<{\n  columnId?: string;\n  multiColumn?: boolean;\n  params?: { order: string; local?: boolean };\n}> = ({ columnId, multiColumn, params }) => {\n  const intl = useIntl();\n  const dispatch = useAppDispatch();\n\n  const column = useRef<ColumnRef>(null);\n\n  const [orderParam, setOrderParam] = useSearchParam('order');\n  const [localParam, setLocalParam] = useSearchParam('local');\n\n  let localParamBool: boolean | undefined;\n\n  if (localParam === 'false') {\n    localParamBool = false;\n  }\n\n  const order = orderParam ?? params?.order ?? 'active';\n  const local = localParamBool ?? params?.local ?? true;\n\n  const handlePin = useCallback(() => {\n    if (columnId) {\n      dispatch(removeColumn(columnId));\n    } else {\n      dispatch(addColumn('DIRECTORY', { order, local }));\n    }\n  }, [dispatch, columnId, order, local]);\n\n  const domain = useAppSelector((s) => s.meta.get('domain') as string);\n  const accountIds = useAppSelector(\n    (state) =>\n      state.user_lists.getIn(\n        ['directory', 'items'],\n        ImmutableList(),\n      ) as ImmutableList<string>,\n  );\n  const isLoading = useAppSelector(\n    (state) =>\n      state.user_lists.getIn(['directory', 'isLoading'], true) as boolean,\n  );\n\n  useEffect(() => {\n    void dispatch(fetchDirectory({ order, local }));\n  }, [dispatch, order, local]);\n\n  const handleMove = useCallback(\n    (dir: number) => {\n      dispatch(moveColumn(columnId, dir));\n    },\n    [dispatch, columnId],\n  );\n\n  const handleHeaderClick = useCallback(() => {\n    column.current?.scrollTop();\n  }, []);\n\n  const handleChangeOrder = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (columnId) {\n        dispatch(changeColumnParams(columnId, ['order'], e.target.value));\n      } else {\n        setOrderParam(e.target.value);\n      }\n    },\n    [dispatch, columnId, setOrderParam],\n  );\n\n  const handleChangeLocal = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (columnId) {\n        dispatch(\n          changeColumnParams(columnId, ['local'], e.target.value === '1'),\n        );\n      } else if (e.target.value === '1') {\n        setLocalParam('true');\n      } else {\n        setLocalParam('false');\n      }\n    },\n    [dispatch, columnId, setLocalParam],\n  );\n\n  const handleLoadMore = useCallback(() => {\n    void dispatch(expandDirectory({ order, local }));\n  }, [dispatch, order, local]);\n\n  const pinned = !!columnId;\n\n  const scrollableArea = (\n    <div className='scrollable'>\n      <div className='filter-form'>\n        <div className='filter-form__column' role='group'>\n          <RadioButton\n            name='order'\n            value='active'\n            label={intl.formatMessage(messages.recentlyActive)}\n            checked={order === 'active'}\n            onChange={handleChangeOrder}\n          />\n          <RadioButton\n            name='order'\n            value='new'\n            label={intl.formatMessage(messages.newArrivals)}\n            checked={order === 'new'}\n            onChange={handleChangeOrder}\n          />\n        </div>\n\n        <div className='filter-form__column' role='group'>\n          <RadioButton\n            name='local'\n            value='1'\n            label={intl.formatMessage(messages.local, { domain })}\n            checked={local}\n            onChange={handleChangeLocal}\n          />\n          <RadioButton\n            name='local'\n            value='0'\n            label={intl.formatMessage(messages.federated)}\n            checked={!local}\n            onChange={handleChangeLocal}\n          />\n        </div>\n      </div>\n\n      <div className='directory__list'>\n        {isLoading ? (\n          <LoadingIndicator />\n        ) : (\n          accountIds.map((accountId) => (\n            <AccountCard accountId={accountId} key={accountId} />\n          ))\n        )}\n      </div>\n\n      <LoadMore onClick={handleLoadMore} visible={!isLoading} />\n    </div>\n  );\n\n  return (\n    <Column\n      bindToDocument={!multiColumn}\n      ref={column}\n      label={intl.formatMessage(messages.title)}\n    >\n      <ColumnHeader\n        icon='address-book-o'\n        iconComponent={PeopleIcon}\n        title={intl.formatMessage(messages.title)}\n        onPin={handlePin}\n        onMove={handleMove}\n        onClick={handleHeaderClick}\n        pinned={pinned}\n        multiColumn={multiColumn}\n      />\n\n      {multiColumn && !pinned ? (\n        // @ts-expect-error ScrollContainer is not properly typed yet\n        <ScrollContainer scrollKey='directory'>\n          {scrollableArea}\n        </ScrollContainer>\n      ) : (\n        scrollableArea\n      )}\n\n      <Helmet>\n        <title>{intl.formatMessage(messages.title)}</title>\n        <meta name='robots' content='noindex' />\n      </Helmet>\n    </Column>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export -- Needed because this is called as an async components\nexport default Directory;\n"],"sourceRoot":""}