Campaign Fixes (#354)

* fixed issue with start date

* es lint fix

* change field to number field

* es lint fix

---------

Co-authored-by: Carina Akaia <cvo.akaia@gmail.com>

Author: Ebube111

src/entities/campaign/components/CampaignForm.tsx

@@ -1,5 +1,7 @@
 import { ChangeEvent, useEffect, useState } from "react";
 
+import { Temporal } from "temporal-polyfill";
+
 import { IPFS_NEAR_SOCIAL_URL } from "@/common/constants";
 import { Campaign } from "@/common/contracts/core/campaigns";
 import { yoctoNearToFloat } from "@/common/lib";
@@ -11,12 +13,6 @@ import { NearInputField } from "@/entities/_shared";
 
 import { useCampaignForm } from "../hooks/forms";
 
-const formatTimestampForInput = (timestamp: number) => {
-  if (!timestamp) return "";
-  const date = new Date(timestamp);
-  return date.toISOString().slice(0, 16);
-};
-
 export const CampaignForm = ({
   existingData,
   campaignId,
@@ -50,17 +46,13 @@ export const CampaignForm = ({
         form.setValue("max_amount", yoctoNearToFloat(existingData.max_amount));
       }
 
-      form.setValue(
-        "start_ms",
-        existingData?.start_ms ? formatTimestampForInput(existingData?.start_ms) : "",
-      );
+      form.setValue("start_ms", existingData?.start_ms);
 
-      form.setValue(
-        "end_ms",
-        existingData?.end_ms ? formatTimestampForInput(existingData?.end_ms) : "",
-      );
+      if (existingData?.end_ms) {
+        form.setValue("end_ms", existingData?.end_ms);
+      }
     }
-  }, [isUpdate, existingData, form]);
+  }, [isUpdate, existingData]);
 
   const handleCoverImageChange = async (e: ChangeEvent) => {
     const target = e.target as HTMLInputElement;
@@ -209,11 +201,19 @@ export const CampaignForm = ({
             <FormField
               control={form.control}
               name="start_ms"
-              render={({ field }) => (
+              render={({ field: { value, ...field } }) => (
                 <TextField
-                  label="Start Date"
                   {...field}
-                  required
+                  required={!!watch("min_amount")}
+                  label="Start Date"
+                  value={
+                    typeof value === "number"
+                      ? Temporal.Instant.fromEpochMilliseconds(value)
+                          .toZonedDateTimeISO(Temporal.Now.timeZoneId())
+                          .toPlainDateTime()
+                          .toString({ smallestUnit: "minute" })
+                      : undefined
+                  }
                   classNames={{ root: "lg:w-90" }}
                   type="datetime-local"
                 />
@@ -222,11 +222,19 @@ export const CampaignForm = ({
             <FormField
               control={form.control}
               name="end_ms"
-              render={({ field }) => (
+              render={({ field: { value, ...field } }) => (
                 <TextField
+                  {...field}
                   required={!!watch("min_amount")}
                   label="End Date"
-                  {...field}
+                  value={
+                    typeof value === "number"
+                      ? Temporal.Instant.fromEpochMilliseconds(value)
+                          .toZonedDateTimeISO(Temporal.Now.timeZoneId())
+                          .toPlainDateTime()
+                          .toString({ smallestUnit: "minute" })
+                      : undefined
+                  }
                   classNames={{ root: "lg:w-90" }}
                   type="datetime-local"
                 />

src/entities/campaign/hooks/forms.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/router";
 import { SubmitHandler, useForm, useWatch } from "react-hook-form";
+import { Temporal } from "temporal-polyfill";
 import { infer as FromSchema } from "zod";
 
 import { campaignsContractClient } from "@/common/contracts/core/campaigns";
@@ -79,7 +80,7 @@ export const useCampaignForm = ({ campaignId }: { campaignId?: CampaignId }) =>
     });
   }, [values, self]);
 
-  const timeToMilliseconds = (time: string) => {
+  const timeToMilliseconds = (time: number) => {
     return new Date(time).getTime();
   };
 
@@ -152,7 +153,8 @@ export const useCampaignForm = ({ campaignId }: { campaignId?: CampaignId }) =>
           max_amount: floatToYoctoNear(values.max_amount) as any,
         }),
         ...(values.start_ms &&
-          timeToMilliseconds(values.start_ms) > Date.now() && {
+          !campaignId &&
+          timeToMilliseconds(values.start_ms) >= Date.now() && {
             start_ms: timeToMilliseconds(values.start_ms),
           }),
         ...(values.end_ms && {

src/entities/campaign/models/schema.ts

@@ -2,6 +2,7 @@ import { z } from "zod";
 
 import { NETWORK } from "@/common/_config";
 import { near } from "@/common/blockchains/near-protocol/client";
+import { futureTimestamp } from "@/common/lib";
 
 export const campaignFormSchema = z
   .object({
@@ -14,8 +15,8 @@ export const campaignFormSchema = z
     min_amount: z.number().optional(),
     max_amount: z.number().optional(),
     cover_image_url: z.string().optional(),
-    start_ms: z.string().min(1, "Start Time is Required"),
-    end_ms: z.string()?.optional(),
+    start_ms: futureTimestamp.describe("Campaign Start Date"),
+    end_ms: futureTimestamp.describe("Campaign End Date"),
     owner: z.string()?.optional(),
     recipient: z.string().refine(near.isAccountValid, {
       message: `Account does not exist on ${NETWORK}`,