use fundraiser lib

package.json

@@ -32,7 +32,9 @@
  },
  "dependencies": {
  "@better-giving/assets": "1.0.18",
+ "@better-giving/fundraiser": "1.0.0-rc.5",
  "@better-giving/registration": "1.0.24",
+ "@better-giving/types": "1.0.0-rc.2",
  "@gsap/react": "2.1.1",
  "@headlessui/react": "2.1.0",
  "@hookform/error-message": "2.0.1",

src/pages/Admin/Charity/Funds/Funds.tsx

@@ -1,11 +1,11 @@
+import type { FundItem as TFundItem } from "@better-giving/fundraiser";
 import ContentLoader from "components/ContentLoader";
 import Image from "components/Image";
 import QueryLoader from "components/QueryLoader";
 import { appRoutes } from "constants/routes";
 import { useAuthenticatedUser } from "contexts/Auth";
 import { Link } from "react-router-dom";
 import { useFundsEndowMemberOfQuery } from "services/aws/aws";
-import type { Fund } from "types/aws";
 import { useAdminContext } from "../../Context";
 
 export function Funds() {
@@ -41,7 +41,7 @@ export function Funds() {
  );
 }
 
-const FundItem = (props: Fund.Card) => {
+const FundItem = (props: TFundItem) => {
  const user = useAuthenticatedUser();
  const isActive = new Date().toISOString() <= props.expiration && props.active;
  const isEditor = user.funds.includes(props.id);

src/pages/Funds/Cards/Card.tsx

@@ -1,9 +1,9 @@
+import type { FundItem } from "@better-giving/fundraiser";
 import flying_character from "assets/images/flying-character.png";
 import Image from "components/Image";
 import VerifiedIcon from "components/VerifiedIcon";
 import { appRoutes } from "constants/routes";
 import { Link } from "react-router-dom";
-import type { Fund } from "types/aws";
 import { Progress } from "./Progress";
 
 export default function Card({
@@ -14,7 +14,7 @@ export default function Card({
  verified,
  donation_total_usd,
  target,
-}: Fund.Card) {
+}: FundItem) {
  return (
  <div className="relative">
  <Link

src/pages/Funds/Cards/Progress.tsx

@@ -1,8 +1,8 @@
+import type { FundItem } from "@better-giving/fundraiser";
 import { humanize } from "helpers";
-import type { Fund } from "types/aws";
 
 export function Progress(
- props: Pick<Fund.Card, "target" | "donation_total_usd">
+ props: Pick<FundItem, "target" | "donation_total_usd">
 ) {
  if (props.target === "0") {
  if (!props.donation_total_usd) return;

src/pages/Funds/CreateFund/CreateFund.tsx

@@ -1,3 +1,4 @@
+import type { NewFund } from "@better-giving/fundraiser/schema";
 import { valibotResolver } from "@hookform/resolvers/valibot";
 import { ControlledImgEditor as ImgEditor } from "components/ImgEditor";
 import Prompt from "components/Prompt";
@@ -19,7 +20,6 @@ import { type SubmitHandler, useController, useForm } from "react-hook-form";
 import { Link } from "react-router-dom";
 import { useLazyProfileQuery } from "services/aws/aws";
 import { useCreateFundMutation } from "services/aws/funds";
-import type { Fund } from "types/aws";
 import { GoalSelector, MAX_SIZE_IN_BYTES, VALID_MIME_TYPES } from "../common";
 import { EndowmentSelector } from "./EndowmentSelector";
 import { type FV, schema } from "./schema";
@@ -88,7 +88,7 @@ export default withAuth(function CreateFund() {
 
  showModal(Prompt, { type: "loading", children: "Creating fund..." });
 
- const fund: Fund.New = {
+ const fund: NewFund = {
  name: fv.name,
  description: fv.description,
  banner: getFullURL(uploadBaseUrl, banner.file.name),

src/pages/Funds/EditFund/Form.tsx

@@ -1,3 +1,5 @@
+import type { SingleFund } from "@better-giving/fundraiser";
+import type { FundUpdate } from "@better-giving/fundraiser/schema";
 import {
  ControlledImgEditor as ImgEditor,
  type ImgLink,
@@ -9,13 +11,15 @@ import { useModalContext } from "contexts/ModalContext";
 import { getFullURL, uploadFiles } from "helpers/uploadFiles";
 import type { SubmitHandler } from "react-hook-form";
 import { useCloseFundMutation, useEditFundMutation } from "services/aws/funds";
-import type { Fund } from "types/aws";
 import { GoalSelector, MAX_SIZE_IN_BYTES, VALID_MIME_TYPES } from "../common";
 import { FeatureBanner } from "./FeatureBanner";
-import type { FV } from "./types";
+import type { FV } from "./schema";
 import { useRhf } from "./useRhf";
 
-export function Form({ classes = "", ...props }: Fund & { classes?: string }) {
+export function Form({
+ classes = "",
+ ...props
+}: SingleFund & { classes?: string }) {
  const { showModal } = useModalContext();
  const { handleError } = useErrorContext();
  const rhf = useRhf(props);
@@ -24,8 +28,7 @@ export function Form({ classes = "", ...props }: Fund & { classes?: string }) {
  const [closeFund, { isLoading: isClosingFund }] = useCloseFundMutation();
 
  const onSubmit: SubmitHandler<FV> = async ({
- targetType,
- fixedTarget,
+ target,
  logo,
  banner,
  ...fv
@@ -40,15 +43,15 @@ export function Form({ classes = "", ...props }: Fund & { classes?: string }) {
  });
 
  /// BUILD UPDATE ///
- const update: Fund.Update = {};
+ const update: FundUpdate = {};
 
- if (rhf.dirtyFields.targetType || rhf.dirtyFields.fixedTarget) {
+ if (rhf.dirtyFields.target) {
  update.target =
- targetType === "none"
+ target.type === "none"
  ? "0"
- : targetType === "smart"
+ : target.type === "smart"
  ? "smart"
- : (fixedTarget as `${number}`);
+ : target.value;
  }
 
  if (rhf.dirtyFields.banner) update.banner = bannerUrl;
@@ -161,11 +164,11 @@ export function Form({ classes = "", ...props }: Fund & { classes?: string }) {
  />
  {rhf.targetType.value === "fixed" && (
  <Field
- {...rhf.register("fixedTarget", { shouldUnregister: true })}
+ {...rhf.register("target.value", { shouldUnregister: true })}
  label="How much money do you want to raise?"
  classes="mt-2 mb-6"
  placeholder="$"
- error={rhf.errors.fixedTarget?.message}
+ error={rhf.errors?.target?.value?.message}
  />
  )}
 

src/pages/Funds/EditFund/schema.ts

@@ -0,0 +1,27 @@
+import { fileObject } from "@better-giving/types";
+import * as v from "valibot";
+import { MAX_SIZE_IN_BYTES, VALID_MIME_TYPES, target } from "../common";
+
+const str = v.pipe(v.string(), v.trim());
+
+export const imgLink = v.object({
+ file: v.optional(
+ v.pipe(
+ v.file("required"),
+ v.mimeType(VALID_MIME_TYPES, "invalid type"),
+ v.maxSize(MAX_SIZE_IN_BYTES, "exceeds size limit")
+ )
+ ),
+ preview: v.pipe(str, v.url()),
+ ...fileObject.entries,
+});
+
+export const schema = v.object({
+ name: v.pipe(str, v.nonEmpty("required")),
+ description: v.pipe(str, v.nonEmpty("required")),
+ target,
+ banner: imgLink,
+ logo: imgLink,
+});
+
+export type FV = v.InferOutput<typeof schema>;

src/pages/Funds/EditFund/useRhf.ts

@@ -1,46 +1,9 @@
-import { yupResolver } from "@hookform/resolvers/yup";
-import type { ImgLink } from "components/ImgEditor";
+import type { SingleFund } from "@better-giving/fundraiser";
+import { valibotResolver } from "@hookform/resolvers/valibot";
 import { useController, useForm } from "react-hook-form";
-import { genFileSchema } from "schemas/file";
-import { schema as schemaFn, stringNumber } from "schemas/shape";
-import type { Fund } from "types/aws";
-import { string } from "yup";
-import {
- MAX_SIZE_IN_BYTES,
- type TargetType,
- VALID_MIME_TYPES,
-} from "../common";
-import type { FV } from "./types";
+import { type FV, schema } from "./schema";
 
-const fileObj = schemaFn<ImgLink>({
- file: genFileSchema(MAX_SIZE_IN_BYTES, VALID_MIME_TYPES),
-});
-
-const targetTypeKey: keyof FV = "targetType";
-const schema = schemaFn<FV>({
- name: string().required("required"),
- description: string().required("required"),
- fixedTarget: stringNumber(
- (str) => {
- return str.when(targetTypeKey, (values, schema) => {
- const [type] = values as [TargetType];
- return type === "fixed" ? schema.required("required") : schema;
- });
- },
- (n) => {
- return n.when(targetTypeKey, (values, schema) => {
- const [type] = values as [TargetType];
- return type === "fixed"
- ? schema.positive("must be greater than 0")
- : schema;
- });
- }
- ),
- logo: fileObj,
- banner: fileObj,
-});
-
-export function useRhf(init: Fund) {
+export function useRhf(init: SingleFund) {
  const {
  register,
  handleSubmit,
@@ -49,25 +12,24 @@ export function useRhf(init: Fund) {
  resetField,
  formState: { isSubmitting, errors, isDirty, dirtyFields },
  } = useForm<FV>({
- resolver: yupResolver(schema),
+ resolver: valibotResolver(schema),
  values: {
  name: init.name,
  description: init.description,
- targetType:
+ target:
  init.target === "0"
- ? "none"
+ ? { type: "none" }
  : init.target === "smart"
- ? "smart"
- : "fixed",
- fixedTarget: init.target === "smart" ? "" : init.target,
+ ? { type: "smart" }
+ : { type: "fixed", value: init.target },
  logo: { name: "", preview: init.logo, publicUrl: init.logo },
  banner: { name: "", preview: init.banner, publicUrl: init.banner },
  },
  });
 
  const { field: targetType } = useController({
  control,
- name: "targetType",
+ name: "target.type",
  });
 
  const { field: logo } = useController({ control, name: "logo" });

src/pages/Funds/Fund/FundContext.ts

@@ -1,10 +1,10 @@
+import type { SingleFund } from "@better-giving/fundraiser";
 import { isEmpty } from "helpers";
 import { createContext, useContext } from "react";
-import type { Fund } from "types/aws";
 
-export const FundContext = createContext<Fund>({} as Fund);
+export const FundContext = createContext<SingleFund>({} as SingleFund);
 
-export const useFundContext = (): Fund => {
+export const useFundContext = (): SingleFund => {
  const val = useContext(FundContext);
 
  if (isEmpty(Object.entries(val))) {

src/services/aws/aws.ts

@@ -1,3 +1,4 @@
+import type { FundItem } from "@better-giving/fundraiser";
 import type {
  Application,
  Page,
@@ -19,7 +20,6 @@ import type {
  EndowmentCard,
  EndowmentOption,
  EndowmentsQueryParams,
- Fund,
 } from "types/aws";
 import { version as v } from "../helpers";
 import type { EndowmentUpdate, IdOrSlug } from "../types";
@@ -158,7 +158,7 @@ export const aws = createApi({
  }
  },
  }),
- fundsEndowMemberOf: builder.query<Fund.Card[], { endowId: number }>({
+ fundsEndowMemberOf: builder.query<FundItem[], { endowId: number }>({
  providesTags: ["endowment"],
  query: ({ endowId }) => {
  return {

src/services/aws/funds.ts

@@ -1,11 +1,16 @@
+import type { FundsPage, SingleFund } from "@better-giving/fundraiser";
+import type {
+ FundUpdate,
+ FundsParams,
+ NewFund,
+} from "@better-giving/fundraiser/schema";
 import { TEMP_JWT } from "constants/auth";
-import type { Fund } from "types/aws";
 import { version as v } from "../helpers";
 import { aws } from "./aws";
 
 export const funds = aws.injectEndpoints({
  endpoints: (builder) => ({
- createFund: builder.mutation<{ id: string }, Fund.New>({
+ createFund: builder.mutation<{ id: string }, NewFund>({
  invalidatesTags: ["funds"],
  query: (payload) => {
  return {
@@ -16,7 +21,7 @@ export const funds = aws.injectEndpoints({
  };
  },
  }),
- editFund: builder.mutation<Fund, Fund.Update & { id: string }>({
+ editFund: builder.mutation<SingleFund, FundUpdate & { id: string }>({
  invalidatesTags: ["funds", "fund"],
  query: ({ id, ...payload }) => {
  return {
@@ -37,7 +42,7 @@ export const funds = aws.injectEndpoints({
  };
  },
  }),
- funds: builder.query<Fund.CardsPage, Fund.CardsQueryParams>({
+ funds: builder.query<FundsPage, FundsParams>({
  providesTags: ["funds"],
  query: (params) => {
  return {
@@ -46,7 +51,7 @@ export const funds = aws.injectEndpoints({
  };
  },
  }),
- fund: builder.query<Fund, string>({
+ fund: builder.query<SingleFund, string>({
  providesTags: ["fund"],
  query: (fundId) => `${v(1)}/funds/${fundId}`,
  }),