From 73c4457f281ff49daff22665a3e8f6d9a0fd12af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 23 May 2022 21:14:42 +0200 Subject: [PATCH] Scheduled statuses: TypeScript, fix styles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/account.tsx | 6 +- app/soapbox/components/ui/hstack/hstack.tsx | 4 +- .../{builder.js => builder.tsx} | Bin 1096 -> 1181 bytes .../components/scheduled_status.js | Bin 3673 -> 0 bytes .../components/scheduled_status.tsx | 66 ++++++++++++++++++ .../components/scheduled_status_action_bar.js | Bin 2764 -> 0 bytes .../scheduled_status_action_bar.tsx | 59 ++++++++++++++++ .../features/scheduled_statuses/index.js | Bin 2232 -> 0 bytes .../features/scheduled_statuses/index.tsx | 51 ++++++++++++++ 9 files changed, 183 insertions(+), 3 deletions(-) rename app/soapbox/features/scheduled_statuses/{builder.js => builder.tsx} (85%) delete mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status.js create mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx delete mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js create mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx delete mode 100644 app/soapbox/features/scheduled_statuses/index.js create mode 100644 app/soapbox/features/scheduled_statuses/index.tsx diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 1d670a3449..cc91ded594 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -56,6 +56,7 @@ interface IAccount { showProfileHoverCard?: boolean, timestamp?: string | Date, timestampUrl?: string, + futureTimestamp?: boolean, withDate?: boolean, withRelationship?: boolean, showEdit?: boolean, @@ -75,6 +76,7 @@ const Account = ({ showProfileHoverCard = true, timestamp, timestampUrl, + futureTimestamp = false, withDate = false, withRelationship = true, showEdit = false, @@ -205,10 +207,10 @@ const Account = ({ {timestampUrl ? ( - + ) : ( - + )} ) : null} diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx index 44dac93c75..803bbd7c1e 100644 --- a/app/soapbox/components/ui/hstack/hstack.tsx +++ b/app/soapbox/components/ui/hstack/hstack.tsx @@ -4,6 +4,8 @@ import React from 'react'; const justifyContentOptions = { between: 'justify-between', center: 'justify-center', + start: 'justify-start', + end: 'justify-end', }; const alignItemsOptions = { @@ -29,7 +31,7 @@ interface IHStack { /** Extra class names on the
element. */ className?: string, /** Horizontal alignment of children. */ - justifyContent?: 'between' | 'center', + justifyContent?: 'between' | 'center' | 'start' | 'end', /** Size of the gap between elements. */ space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6, /** Whether to let the flexbox grow. */ diff --git a/app/soapbox/features/scheduled_statuses/builder.js b/app/soapbox/features/scheduled_statuses/builder.tsx similarity index 85% rename from app/soapbox/features/scheduled_statuses/builder.js rename to app/soapbox/features/scheduled_statuses/builder.tsx index 8e3417582ae2e2a03ca5d169d8088296addce27b..2927c898487a487271927b20e63cf25d1bc584e6 100644 GIT binary patch delta 113 zcmX@XF_&|~LygSbg8ZTqg=&SM{QQ#OlEji!g<6HQqWoM1_2T@*f~5Qk{o<1RqST4^ zRN1W{iYERSm9|pw%*`z=NleN~^-V0WDK06>%uCl%NX)CWn=HcU#Fv|@kXWn$5w_;q JoWS^k2>^drDLeoG delta 48 zcmbQsd4glY!^u31N`g8H#mO0|DWy57DZwR)C8foaQyHDO(o;(`)N@nSHLW*qWqiQ| E0G4WJcqq6JS08R7YaJqy+08_YU9}@QFTAy9~rMQ z@-A7uE|hAJFR30xUuZ@IJJC0W2@oW&t}CbwG!_;+sCgAcH2k3~#E^^&j-v&H#Yn!y zx#BOh%HDs&3sx5YLYz@jOLQ!mmheH>bD3q&H9ax<-HGKu(RxjJ*syUTDinw-EitHR z;Tsi?WlmVp=iNrs2$o?2lca14Ax+!tx3F(mmTES7u^4cRvaQ&N;F+VC4a9V+CsYkS?-ALRT>8) zP~ZR~eJYlJc>TRGi7jaq1rpfsr}WR&9jdD-5?LtCpma3+b{x8OqF1O5uGT2q-7WCn zf}YhlNa=wznSd|op=`*d6VYm+<^#N1HjL}^j1`n}xH1mfh4QjUX}w$-KQ#xf@pla- ze`^SWpcF@1W5Oa3N5%t1o(vR#9boxMM=yC=dPdA!tt<^ilVuo@L>rzJS-;mA>f6l{ zi3RvWJJ!fjZ`JLzIj!J8P7J?Le88y;S>tQ)s*K|NB$y%3z&)KD>je%bS-jCu$SN%j zcjGX=o1`vPAOM?`orY;04aMPWpS-OB&Y8g|Z+KV{>@INP&~ ziFe7$8d`95;F!kN_io|SBr&Xr^-K_DEGdO<)d4;gPgn)#s2vg;;0r=i_!(s4;1)i2 zLnt2!W{BaVu7A+uH7L(+M@49Sm7%2gDEKUm=Cw0+e-=Q`9(EilQV;4fqmhRLkK^pb z;a?UWgdbDEibFZdyR3M$XP-w=THmnryGiY+hKMmg`nB=p6EahTs^-s8|JYdFx_T2_ z3owZ>5m+T~Xyjmj#1l6X)EOH8wz@^N)AIk;w%N^1U&{7&R{bUd+iFw3wA4l|36h0f zDBaFjL9x|!A9lM*m03IJAIrZ1uan5S(*emuNz)V^Bd1O+@CX`0!-fTi_-)-lH zd@U>-cn6kUOo=-N3=u@{Aal#;)3_jZ;g@lLyHgAYn!ve*?AUOxPdtmgWD~8Lt;vkY zX}Q?BiM7Jn-$?3@KXum#?aO7zk^a)0&P(Ng4);Pgn z!5mG9*}SScnXYs?wKg*<0hfdx^m;hCvTH^!?A+?%MpNfF!QGBjT>iZNx zIWkTv@qPlB#3>hFd?qoX&3I{+$5VS6DD&m0+c<04u*JHm?n}^obkN$h%V|WXz$QOO MKhz$I?sSWP0KfZ@-v9sr diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx new file mode 100644 index 0000000000..0d8b14cd3a --- /dev/null +++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx @@ -0,0 +1,66 @@ +import classNames from 'classnames'; +import React from 'react'; + +import AttachmentThumbs from 'soapbox/components/attachment-thumbs'; +import StatusContent from 'soapbox/components/status_content'; +import StatusReplyMentions from 'soapbox/components/status_reply_mentions'; +import { HStack } from 'soapbox/components/ui'; +import AccountContainer from 'soapbox/containers/account_container'; +import PollPreview from 'soapbox/features/ui/components/poll_preview'; +import { useAppSelector } from 'soapbox/hooks'; + +import { buildStatus } from '../builder'; + +import ScheduledStatusActionBar from './scheduled_status_action_bar'; + +import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities'; + +interface IScheduledStatus { + statusId: string, +} + +const ScheduledStatus: React.FC = ({ statusId, ...other }) => { + const status = useAppSelector((state) => buildStatus(state, state.scheduled_statuses.get(statusId))) as StatusEntity; + + if (!status) return null; + + const account = status.account as AccountEntity; + + return ( +
+
+
+ + + +
+ + + + + + {status.media_attachments.size > 0 && ( + + )} + + {status.poll && } + + +
+
+ ); +}; + +export default ScheduledStatus; diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js deleted file mode 100644 index 7ed5c4d088c503f2b453916000aca75af87bbb8f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2764 zcmbVOO^@3+488kTa8I^@#JQ(+yKNRl=P=#Hr1wCvm5I8xPBe`|7g{G{?Tv)C#`CT8+=|{dJ(^hgvUH_R@iW^>Gyc_P}i+x$BHlg zINVzF$7}Mta68(zn(q|Gl3dQ>Ozjb~E_%>-feuQ35|Tf1W7sn{D-iMvFYJS~6k`s6!M4VRCqWTQW$SaVdD4VFSEX*M;TP72mR!DPX!eQ`!_ z6)*Re+13n^miDH{9gG7`i{HUBw|j1_kk7yH5CCI-518Kj)>!Ig0LU+bO9jJhO!A;Ud5Gu2U4n(Fh-af@9ePeRv&H@pBnGe=9d^nLI~SwP(x<0EG!*8YFSID4zxF<`hI zG|JdnT0_pENcW``>i$y5cbdZw)q+74xgXydD$T0E2H3MOiwnJVH@c>%1Po8KvWD82 ze^%5Q2HB-%<&eJt$7|ref1hF7CUMPU^Z=l_ZMAejzy=`(udgEfj?VuQreU@?kN%S~ zyjoGWI6_vBH-xXfr`BZHQ zDUYm@H1+9Bpgu1OBuC&*Y3hnahF9Q~;V*d_#!(XQ{{Hmg z;pq_>_bHPh-Urj#V#U9?2LXaB#!T)6YeEpEX8%gh^r3? z0@+zbUKtfL2KN21->M7HBb&(x7N;ZLxdZ(%v)Gp|X2g{+1xkeymtEL@R%0nSX86`zO^ zC%`ZjdX051&lcD7EC9B7?uJiB`5WhNafe>muIv;~V@bJ2W_{0Nv*2**=fg|x!t6=V zmOigb@eK+h?h~td9{V~U4t|-hk4(pJ0`xXGEX@&!&~f7q<`mBgTk*Uja&9Tf_hovW z+hO$tZ3CNwn3WQ5*Z2fKPQBoU;qFB diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx new file mode 100644 index 0000000000..7b44805d44 --- /dev/null +++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import { openModal } from 'soapbox/actions/modals'; +import { cancelScheduledStatus } from 'soapbox/actions/scheduled_statuses'; +import { getSettings } from 'soapbox/actions/settings'; +import IconButton from 'soapbox/components/icon_button'; +import { HStack } from 'soapbox/components/ui'; +import { useAppDispatch } from 'soapbox/hooks'; + +import type { Status as StatusEntity } from 'soapbox/types/entities'; + +const messages = defineMessages({ + cancel: { id: 'scheduled_status.cancel', defaultMessage: 'Cancel' }, + deleteConfirm: { id: 'confirmations.scheduled_status_delete.confirm', defaultMessage: 'Cancel' }, + deleteHeading: { id: 'confirmations.scheduled_status_delete.heading', defaultMessage: 'Cancel scheduled post' }, + deleteMessage: { id: 'confirmations.scheduled_status_delete.message', defaultMessage: 'Are you sure you want to cancel this scheduled post?' }, +}); + +interface IScheduledStatusActionBar { + status: StatusEntity, +} + +const ScheduledStatusActionBar: React.FC = ({ status }) => { + const intl = useIntl(); + + const dispatch = useAppDispatch(); + + const handleCancelClick = () => { + dispatch((_, getState) => { + + const deleteModal = getSettings(getState()).get('deleteModal'); + if (!deleteModal) { + dispatch(cancelScheduledStatus(status.id)); + } else { + dispatch(openModal('CONFIRM', { + icon: require('@tabler/icons/icons/calendar-stats.svg'), + heading: intl.formatMessage(messages.deleteHeading), + message: intl.formatMessage(messages.deleteMessage), + confirm: intl.formatMessage(messages.deleteConfirm), + onConfirm: () => dispatch(cancelScheduledStatus(status.id)), + })); + } + }); + }; + + return ( + + + + ); +}; + +export default ScheduledStatusActionBar; diff --git a/app/soapbox/features/scheduled_statuses/index.js b/app/soapbox/features/scheduled_statuses/index.js deleted file mode 100644 index b8a63497e874d90925a84af0a8b477bf502f787c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2232 zcmbVNO>5gg5WV|XOmdM7iX7<8u|goF5Sl=U1ErJ@*4lBjt+cCZS51u2fA8#S^<^>Q z1G3b3du9J0O*chR8@9>uFpu*)6TSJ&<~>L|#?}>HE5ajD?$w#blh0Y&JBaC#L2`nmmFpsw$W<$h~=>!NVh`X{uC7NwEiB74rIx+d!UWJ1T5 z4t=r5L-_u_hjUUgKx->ywD)vTNMcqHZj-vx9a2e>b4To0Anpr?AKZ*Sc?6%%&m&sC zyx&8sK4|ANTehMhV|CP(r8jc(b<>Fmo)apa*Ivi(Hr%m-1>O4oI>Uk|fpdEP z_!#s$_IZ-i@2Uo_WMBx)9|R_MFl?=dO3&Di!~)+kl&~Xz#yQZlLa+_IiaZCMsaL2= zI!YDBr?9wmW41h)x{?sOu>q|7`4rSp5~M6AnphP8oqf!c#?ljS-Q(ing@wO?u|Ie7 z_R{B~Z2M2f@H^?>y%Aq=m%Mj@CXQ1|lV { + dispatch(expandScheduledStatuses()); +}, 300, { leading: true }); + +const ScheduledStatuses = () => { + const intl = useIntl(); + const dispatch = useAppDispatch(); + + const statusIds = useAppSelector((state) => state.status_lists.getIn(['scheduled_statuses', 'items'])); + const isLoading = useAppSelector((state) => state.status_lists.getIn(['scheduled_statuses', 'isLoading'])); + const hasMore = useAppSelector((state) => !!state.status_lists.getIn(['scheduled_statuses', 'next'])); + + useEffect(() => { + dispatch(fetchScheduledStatuses()); + }, []); + + const emptyMessage = ; + + return ( + + handleLoadMore(dispatch)} + emptyMessage={emptyMessage} + > + {statusIds.map((id: string) => )} + + + ); +}; + +export default ScheduledStatuses; \ No newline at end of file