Post scheduling (#2693)

* Post scheduling

Adds simple input for scheduling a post x minutes in the future.
Do you want to pull in a date picker library for this?

See LemmyNet/lemmy#5025

* lint

* add date picker

* Adding i18n, and fixing some fields (#2694)

* fix edits

* cleanup

---------

Co-authored-by: Dessalines <[email protected]>

src/shared/components/post/post-form.tsx

@@ -48,6 +48,11 @@ import { isBrowser } from "@utils/browser";
 import isMagnetLink, {
   extractMagnetLinkDownloadName,
 } from "@utils/media/is-magnet-link";
+import {
+  getUnixTimeLemmy,
+  getUnixTime,
+  unixTimeToLocalDateStr,
+} from "@utils/helpers/get-unix-time";
 
 const MAX_POST_TITLE_LENGTH = 200;
 
@@ -88,6 +93,8 @@ interface PostFormState {
     honeypot?: string;
     custom_thumbnail?: string;
     alt_text?: string;
+    // Javascript treats this field as a string, that can't have timezone info.
+    scheduled_publish_time?: string;
   };
   suggestedPostsRes: RequestState<SearchResponse>;
   metadataRes: RequestState<GetSiteMetadataResponse>;
@@ -112,6 +119,7 @@ function handlePostSubmit(i: PostForm, event: any) {
 
   const pForm = i.state.form;
   const pv = i.props.post_view;
+  const scheduled_publish_time = getUnixTimeLemmy(pForm.scheduled_publish_time);
 
   if (pv) {
     i.props.onEdit?.(
@@ -124,6 +132,7 @@ function handlePostSubmit(i: PostForm, event: any) {
         language_id: pForm.language_id,
         custom_thumbnail: pForm.custom_thumbnail,
         alt_text: pForm.alt_text,
+        scheduled_publish_time,
       },
       () => {
         i.setState({ bypassNavWarning: true });
@@ -141,6 +150,7 @@ function handlePostSubmit(i: PostForm, event: any) {
         honeypot: pForm.honeypot,
         custom_thumbnail: pForm.custom_thumbnail,
         alt_text: pForm.alt_text,
+        scheduled_publish_time,
       },
       () => {
         i.setState({ bypassNavWarning: true });
@@ -202,6 +212,18 @@ function handlePostNsfwChange(i: PostForm, event: any) {
   );
 }
 
+function handlePostScheduleChange(i: PostForm, event: any) {
+  const scheduled_publish_time = event.target.value;
+
+  i.setState(prev => ({
+    ...prev,
+    form: {
+      ...prev.form,
+      scheduled_publish_time,
+    },
+  }));
+}
+
 function handleHoneyPotChange(i: PostForm, event: any) {
   i.setState(s => ((s.form.honeypot = event.target.value), s));
 }
@@ -317,9 +339,10 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     this.updateUrl = this.updateUrl.bind(this);
 
     const { post_view, selectedCommunityChoice, params } = this.props;
-
     // Means its an edit
     if (post_view) {
+      const unix = getUnixTime(post_view.post.scheduled_publish_time);
+      var scheduled_publish_time = unixTimeToLocalDateStr(unix);
       this.state = {
         ...this.state,
         form: {
@@ -331,6 +354,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
           language_id: post_view.post.language_id,
           custom_thumbnail: post_view.post.thumbnail_url,
           alt_text: post_view.post.alt_text,
+          scheduled_publish_time,
         },
       };
     } else if (selectedCommunityChoice) {
@@ -684,6 +708,23 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
             </label>
           </div>
         )}
+
+        <div className="mb-3 row">
+          <label className="col-sm-2 col-form-label" htmlFor="post-schedule">
+            {I18NextService.i18n.t("scheduled_publish_time")}
+          </label>
+          <div className="col-sm-10">
+            <input
+              type="datetime-local"
+              value={this.state.form.scheduled_publish_time}
+              min={unixTimeToLocalDateStr(Date.now())}
+              id="post-schedule"
+              className="form-control mb-3"
+              onInput={linkEvent(this, handlePostScheduleChange)}
+            />
+          </div>
+        </div>
+
         <input
           tabIndex={-1}
           autoComplete="false"

src/shared/components/post/post-listing.tsx

@@ -1,7 +1,7 @@
 import { myAuth, setIsoData } from "@utils/app";
 import { canShare, share } from "@utils/browser";
 import { getExternalHost, getHttpBase } from "@utils/env";
-import { futureDaysToUnixTime, hostname } from "@utils/helpers";
+import { formatPastDate, futureDaysToUnixTime, hostname } from "@utils/helpers";
 import { isImage, isVideo } from "@utils/media";
 import { canAdmin, canMod } from "@utils/roles";
 import classNames from "classnames";
@@ -433,7 +433,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   createdLine() {
     const pv = this.postView;
-
     return (
       <div className="small mb-1 mb-md-0">
         <PersonListing person={pv.creator} />
@@ -459,6 +458,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             }
           </span>
         )}{" "}
+        {pv.post.scheduled_publish_time && (
+          <span className="mx-1 badge text-bg-light">
+            {I18NextService.i18n.t("publish_in_time", {
+              time: formatPastDate(pv.post.scheduled_publish_time),
+            })}
+          </span>
+        )}{" "}
         · <MomentTime published={pv.post.published} updated={pv.post.updated} />
       </div>
     );

src/shared/utils/helpers/get-unix-time.ts

@@ -1,3 +1,27 @@
-export default function getUnixTime(text?: string): number | undefined {
+/**
+ * Converts timestamp string to unix timestamp in seconds, as used by Lemmy API
+ */
+export function getUnixTimeLemmy(text?: string): number | undefined {
   return text ? new Date(text).getTime() / 1000 : undefined;
 }
+/**
+ * Converts timestamp string to unix timestamp in millis, as used by Javascript
+ */
+export function getUnixTime(text?: string): number | undefined {
+  return text ? new Date(text).getTime() : undefined;
+}
+
+/**
+ * This converts a unix time to a local date string,
+ * popping to tho nearest minute, and removing the Z for
+ * javascript fields.
+ */
+export function unixTimeToLocalDateStr(unixTime?: number): string | undefined {
+  return unixTime
+    ? convertUTCDateToLocalDate(new Date(unixTime)).toISOString().slice(0, -8)
+    : undefined;
+}
+
+function convertUTCDateToLocalDate(date: Date): Date {
+  return new Date(date.getTime() - date.getTimezoneOffset() * 60 * 1000);
+}

src/shared/utils/helpers/index.ts

@@ -11,7 +11,6 @@ import getQueryParams from "./get-query-params";
 import getQueryString from "./get-query-string";
 import getRandomCharFromAlphabet from "./get-random-char-from-alphabet";
 import getRandomFromList from "./get-random-from-list";
-import getUnixTime from "./get-unix-time";
 import { groupBy } from "./group-by";
 import hostname from "./hostname";
 import hsl from "./hsl";
@@ -43,7 +42,6 @@ export {
   getQueryString,
   getRandomCharFromAlphabet,
   getRandomFromList,
-  getUnixTime,
   groupBy,
   hostname,
   hsl,