rastack 0.0.16

package/hooks/form/structure.ts

@@ -0,0 +1,39 @@
+import { SchemaObject } from "ajv";
+import { FormType } from "./interfaces";
+
+interface GetFieldStructureResponse {
+  isRequired: boolean;
+  type: FormType;
+}
+
+export function getFieldStructure<TFieldName>(
+  validationSchema: SchemaObject | undefined,
+  fieldName: TFieldName,
+): GetFieldStructureResponse {
+  let type: FormType = "text";
+  if (validationSchema?.properties) {
+    const schemaJson = validationSchema.properties[fieldName];
+    if (!schemaJson) {
+      return { isRequired: false, type };
+    }
+    let schemaJsonType = schemaJson.type;
+
+    if (typeof schemaJsonType === "string") {
+      schemaJsonType = [schemaJsonType];
+    }
+    if (schemaJsonType) {
+      if (schemaJsonType.includes("integer")) {
+        type = "number";
+      }
+      if (schemaJsonType.includes("array")) {
+        type = "array";
+      }
+    }
+  }
+
+  let isRequired = false;
+  if (validationSchema?.required) {
+    isRequired = validationSchema.required?.includes(fieldName);
+  }
+  return { isRequired, type };
+}

package/hooks/form/validate-schema.ts

@@ -0,0 +1,49 @@
+import { FormikErrors } from "formik";
+import addFormats from "ajv-formats";
+import Ajv, { ErrorObject } from "ajv";
+
+export function createAJV() {
+  const ajvInstance = new Ajv({ allErrors: true });
+  addFormats(ajvInstance);
+
+  ajvInstance.addFormat("decimal", {
+    type: "number",
+    validate: (num: number) =>
+      // @ts-ignore
+      !Number.isNaN(num) && num.toString().includes("."),
+  });
+
+  return ajvInstance;
+}
+
+export function formikJSONSchemaValidation<TData>(
+  data: TData,
+  schema?: any | undefined,
+): FormikErrors<TData> {
+  const AJV = createAJV();
+  const validate = AJV.compile(schema);
+  const valid = validate(data);
+  if (valid) return {};
+
+  const errors: FormikErrors<TData> = {};
+  validate.errors?.forEach((error) => {
+    const ajvError = error as ErrorObject & {
+      dataPath: string;
+      params: { missingProperty?: string };
+    };
+    let path = ajvError.instancePath.replace(/^\//, "").replace(/\//g, ".");
+
+    if (
+      // @ts-ignore
+      ajvError.schemaPath.includes("#/required") &&
+      ajvError.params.missingProperty
+    ) {
+      path = `${path}.${ajvError.params.missingProperty}`.replace(/^\./, "");
+      (errors as Record<string, string>)[path] =
+        `${ajvError.params.missingProperty} is required`;
+    } else {
+      (errors as Record<string, string>)[path] = ajvError.message as string;
+    }
+  });
+  return errors;
+}

package/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./form";
+export * from "./query";
+export * from "./real-time";

package/hooks/query/api.ts

@@ -0,0 +1,42 @@
+import axios, { AxiosAdapter, AxiosInstance } from "axios";
+
+// @ts-ignore
+const defaultBaseURL = process.env.NEXT_PUBLIC_BASE_URL || "http://127.0.0.1:8000";
+
+/**
+ * The shared axios client every generated hook talks through. It is a stable
+ * singleton — imported directly all over the codegen — so `<RAStackProvider>`
+ * reconfigures it *in place* (base URL for `remote` mode, or a WASM adapter for
+ * `local`/`s3` mode) rather than swapping the instance. That is what lets the
+ * same hooks hit a Lambda over HTTP or an in-browser WASM engine with no
+ * codegen changes.
+ */
+export const API: AxiosInstance = axios.create({
+  baseURL: defaultBaseURL,
+});
+
+export interface ApiConfig {
+  /** Base URL for HTTP (`remote`) mode. */
+  baseURL?: string;
+  /**
+   * Axios adapter override. Pass the WASM adapter to route requests into the
+   * in-browser engine; pass `null` to restore axios's default HTTP transport.
+   */
+  adapter?: AxiosAdapter | null;
+}
+
+/** Reconfigure the shared client. Called by `<RAStackProvider>` on mode changes. */
+export function configureApi(config: ApiConfig): void {
+  if (config.baseURL !== undefined) {
+    API.defaults.baseURL = config.baseURL;
+  }
+  if ("adapter" in config) {
+    API.defaults.adapter = config.adapter ?? undefined;
+  }
+}
+
+/** Restore the client to its default HTTP transport and base URL. */
+export function resetApi(): void {
+  API.defaults.baseURL = defaultBaseURL;
+  API.defaults.adapter = undefined;
+}

package/hooks/query/delete.ts

@@ -0,0 +1,45 @@
+import { AxiosResponse } from "axios";
+import { UseMutationResult } from "react-query/types/react/types";
+import { useMutation, useQueryClient } from "react-query";
+import { IDeleteQueryResult } from "./interfaces";
+import { API } from "./api";
+
+interface DeleteQueryProps {
+  deleteUrl?: ((id: string) => string) | string;
+  listQueryCacheKey?: string | undefined;
+}
+
+export function useDeleteQuery<TResult>({
+  deleteUrl,
+  listQueryCacheKey,
+}: DeleteQueryProps): IDeleteQueryResult<TResult> {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    async (params: { id?: string }) => {
+      if (params.id === undefined) {
+        throw new Error("ID is required for delete operation");
+      }
+      let url: string = "";
+      if (typeof deleteUrl === "function") {
+        if (params.id) {
+          url = deleteUrl(params.id);
+        }
+      } else {
+        if (deleteUrl) {
+          url = deleteUrl;
+        }
+      }
+
+      const response: AxiosResponse = await API.delete(url);
+      return response.data.results;
+    },
+    {
+      onSuccess: () => {
+        if (listQueryCacheKey) {
+          queryClient.invalidateQueries(listQueryCacheKey);
+        }
+      },
+    },
+  ) as UseMutationResult<TResult>;
+}

package/hooks/query/fetch.ts

@@ -0,0 +1,48 @@
+import { AxiosResponse } from "axios";
+import { useQuery } from "react-query";
+import { API } from "./api";
+import { stringifyQueryParams } from "./url";
+import { GetQueryOptions, IGetQueryResult } from "./interfaces";
+
+export interface GetQueryProps<TParam> {
+  getUrl: string;
+  queryKey: string;
+  pathParameters: (keyof TParam)[];
+  requiredParams: (keyof TParam)[];
+  isAuthenticated: boolean;
+  options?: GetQueryOptions<TParam>;
+}
+
+export function useGetQuery<TParam, TResult>({
+  getUrl,
+  queryKey,
+  pathParameters,
+  requiredParams,
+  isAuthenticated,
+  options,
+}: GetQueryProps<TParam>): IGetQueryResult<TResult> {
+  const isRequiredParamsPresent = requiredParams?.every((param) => {
+    if (!options?.params) {
+      return false;
+    } else {
+      return options?.params[param as keyof TParam] !== undefined;
+    }
+  });
+
+  const params = options?.params;
+
+  return useQuery(
+    [queryKey, getUrl, params],
+    async () => {
+      const urlParams = stringifyQueryParams(pathParameters, params);
+      const serverURL = `${getUrl}${urlParams ? `?${urlParams}` : ""}`;
+
+      const response: AxiosResponse<TResult> = await API.get(serverURL);
+
+      return response.data;
+    },
+    {
+      enabled: isAuthenticated && isRequiredParamsPresent,
+    },
+  );
+}

package/hooks/query/index.ts

@@ -0,0 +1,21 @@
+export { useGetQuery } from "./fetch";
+export type {
+  IGetQueryResult,
+  IUpdateQueryResult,
+  IDeleteQueryResult,
+  IListQuery,
+  ListQueryOptions,
+  GetQueryOptions,
+} from "./interfaces";
+export { useGetPaginatedQueryList } from "./list";
+export { useUpdateQuery } from "./update";
+export { useDeleteQuery } from "./delete";
+export type {
+  IPaginationActions,
+  ISearchingActions,
+  IFilterActions,
+  ISortingActions,
+  ReturnedHeader,
+} from "./interfaces";
+export { API, configureApi, resetApi } from "./api";
+export type { ApiConfig } from "./api";

package/hooks/query/interfaces.ts

@@ -0,0 +1,111 @@
+import {
+  UseMutationResult,
+  UseQueryResult,
+} from "react-query/types/react/types";
+import { ExtractKey } from "../../types";
+
+export interface IPaginationActions {
+  currentPage: number;
+  pageSize: number;
+  itemCount: number;
+  pageCount: number;
+  nextPage: () => void;
+  previousPage: () => void;
+  setPageSize: (pageSize: number) => void;
+}
+
+export interface ISearchingActions<TParam> {
+  searchText: string | undefined;
+  setSearchText: (value: string | undefined) => void;
+}
+
+export interface IPagination {
+  next: number | null;
+  previous: number | null;
+  current: number;
+  last: number;
+  page_size: number;
+  count: number;
+}
+
+export interface ISortingActions<TParam> {
+  sortField: (key: NormalizedField<ExtractKey<TParam, "order_by">>) => void;
+  getSortingDirection: (
+    key: NormalizedField<ExtractKey<TParam, "order_by">>,
+  ) => "asc" | "desc" | undefined;
+}
+
+export interface IFilterActions<TParam> {
+  getFilterFieldValue: (key: keyof TParam) => TParam[keyof TParam];
+  setFilterFieldValue: (
+    key: keyof TParam,
+  ) => (value: TParam[keyof TParam]) => void;
+}
+
+export interface IFilter {
+  [key: string]: unknown;
+}
+
+export type UseQueryResultWithoutData<TResult> = Omit<
+  UseQueryResult<IPaginatedResponse<TResult>>,
+  "data"
+>;
+
+export type NormalizedField<T> = T extends `-${infer U}` ? U : T;
+
+export interface ReturnedHeader {
+  key: string;
+  name: string;
+}
+
+export type IPaginatedResponse<TResult> = {
+  [key in keyof TResult]: TResult[key];
+} & {
+  headers?: ReturnedHeader[];
+  pagination: IPagination;
+};
+
+export interface IListQuery<TParam, TQuery>
+  extends UseQueryResultWithoutData<TQuery> {
+  pagination: IPaginationActions;
+  searching: ISearchingActions<TParam>;
+  sorting: ISortingActions<TParam>;
+  filtering: IFilterActions<TParam>;
+  header: ReturnedHeader[] | undefined;
+  data: TQuery[] | undefined;
+  raw: IPaginatedResponse<TQuery> | undefined;
+}
+
+export type IGetQueryResult<TResult> = UseQueryResult<TResult>;
+
+export interface WriteQueryVariables<TParams, TPayload> {
+  params: TParams;
+  payload: TPayload;
+}
+
+export type IUpdateQueryResult<TParams, TPayload, TResult> = UseMutationResult<
+  TResult,
+  unknown,
+  WriteQueryVariables<TParams, TPayload>,
+  unknown
+>;
+
+export type IDeleteQueryResult<TResult> = UseMutationResult<TResult>;
+
+export interface ListQueryOptions<TParam, TResult> {
+  params?: Partial<TParam>;
+  requiredParams?: (keyof TParam)[];
+  searchKey?: keyof TParam;
+  defaultSortFields?: (string & ExtractKey<TParam, "order_by">)[];
+  onSuccess?: (result: IPaginatedResponse<TResult>) => void;
+  localCache?: boolean;
+  pageSize?: number;
+  localSearchFunction?: (
+    searchValue: string | undefined,
+    searchData: TResult,
+  ) => boolean;
+}
+
+export interface GetQueryOptions<TParam> {
+  params?: Partial<TParam>;
+}

package/hooks/query/list.ts

@@ -0,0 +1,286 @@
+import { AxiosResponse } from "axios";
+import { useQuery } from "react-query";
+import { useEffect, useState } from "react";
+import {
+  IFilterActions,
+  IListQuery,
+  IPaginatedResponse,
+  IPaginationActions,
+  ISearchingActions,
+  ISortingActions,
+  ListQueryOptions,
+  NormalizedField,
+} from "./interfaces";
+import { stringifyQueryParams } from "./url";
+import { useDebounceValue } from "usehooks-ts";
+import { API } from "./api";
+import { ExtractKey } from "../../types";
+
+export interface GetPaginatedQueryListProps<TParam, TResult> {
+  postUrl?: string;
+  getUrl?: string;
+  queryKey: string;
+  pathParameters: (keyof TParam)[];
+  isAuthenticated: boolean;
+  options?: ListQueryOptions<TParam, TResult>;
+}
+
+export function useGetPaginatedQueryList<TParam, TResult>({
+  postUrl,
+  getUrl,
+  queryKey,
+  pathParameters,
+  isAuthenticated,
+  options,
+}: GetPaginatedQueryListProps<TParam, TResult>): IListQuery<TParam, TResult> {
+  const [searchText, setSearchText] = useState<string | undefined>(undefined);
+  const [serverSearchText, setServerSearchText] = useDebounceValue<
+    string | undefined
+  >(undefined, 500);
+
+  const [queryParamState, setQueryParamState] = useState({
+    page: 1,
+    page_size: options?.pageSize ? options?.pageSize : 20,
+    order_by: options?.defaultSortFields ?? [],
+  });
+
+  const pageParams = ["page", "page_size"] as unknown as (keyof TParam)[];
+  const requiredParams = options?.requiredParams
+    ? [...options.requiredParams, ...pageParams]
+    : pageParams;
+
+  useEffect(() => {
+    if (!options?.localCache) {
+      setServerSearchText(searchText);
+    }
+  }, [searchText]);
+
+  useEffect(() => {
+    if (options?.searchKey) {
+      setQueryParamState((current) => ({
+        ...current,
+        page: 1,
+        [options?.searchKey as string]: serverSearchText,
+      }));
+    }
+  }, [serverSearchText]);
+
+  const serverQueryParamState = {
+    ...queryParamState,
+    ...options?.params,
+  };
+
+  const isRequiredQueryParamsPresent = requiredParams?.every(
+    // @ts-ignore Pre Validation of page, page_size and order_by will happen when the two hooks are combined
+    (param) => serverQueryParamState[param] !== undefined,
+  );
+
+  const fetchDataForAllPages = async (
+    currentPage: number = 1,
+    accumulatedData: TResult[] = [],
+  ): Promise<IPaginatedResponse<TResult>> => {
+    const serverURL = `${getUrl}?${stringifyQueryParams(pathParameters, {
+      ...serverQueryParamState,
+      // @ts-ignore Pre Validation of page, page_size and order_by will happen when the two hooks are combined
+      page: currentPage,
+    })}`;
+
+    const response: AxiosResponse<IPaginatedResponse<TResult>> = postUrl
+      ? await API.post(postUrl, serverQueryParamState)
+      : await API.get(serverURL);
+
+    // @ts-ignore This will be resolved when the List and Get endpoints will be merged
+    const newData = response.data.results;
+
+    const mergedData = [...accumulatedData, ...newData];
+
+    if (currentPage < response.data.pagination.last) {
+      return fetchDataForAllPages(currentPage + 1, mergedData);
+    } else {
+      return {
+        ...response.data,
+        pagination: {
+          current: 1,
+          last: 1,
+          next: 1,
+          previous: 1,
+          page_size: mergedData.length,
+          count: mergedData.length,
+        },
+        results: mergedData,
+      };
+    }
+  };
+
+  const fetchData = async () => {
+    if (options?.localCache) {
+      return fetchDataForAllPages();
+    } else {
+      // @ts-ignore Pre Validation of page, page_size and order_by will happen when the two hooks are combined
+      const serverURL = `${getUrl}?${stringifyQueryParams(pathParameters, serverQueryParamState)}`;
+      const response: AxiosResponse<IPaginatedResponse<TResult>> = postUrl
+        ? await API.post(postUrl, serverQueryParamState)
+        : await API.get(serverURL);
+      return response.data;
+    }
+  };
+
+  const query = useQuery<IPaginatedResponse<TResult>>(
+    [queryKey, getUrl, options?.params, serverQueryParamState],
+    fetchData,
+    {
+      enabled: isRequiredQueryParamsPresent && isAuthenticated,
+      onSuccess: options?.onSuccess,
+    },
+  );
+
+  const pageCount = query.data?.pagination?.last || 0;
+  const itemCount = query.data?.pagination?.count || 0;
+
+  function previousPage() {
+    if (queryParamState.page) {
+      const previousPage = (queryParamState.page as unknown as number) - 1;
+      setQueryParamState((current) => ({
+        ...current,
+        page: previousPage < 1 ? 1 : previousPage,
+      }));
+    }
+  }
+
+  function nextPage() {
+    if (queryParamState.page) {
+      const nextPage = (queryParamState.page as unknown as number) + 1;
+      setQueryParamState((current) => ({
+        ...current,
+        page: nextPage > pageCount ? pageCount : nextPage,
+      }));
+    }
+  }
+
+  function setPageSize(pageSize: number) {
+    setQueryParamState((current) => ({
+      ...current,
+      page_size: pageSize,
+    }));
+  }
+
+  const pagination: IPaginationActions = {
+    previousPage,
+    nextPage,
+    currentPage: serverQueryParamState.page,
+    pageSize: serverQueryParamState.page_size,
+    pageCount,
+    itemCount,
+    setPageSize,
+  };
+
+  const searching: ISearchingActions<TParam> = {
+    searchText,
+    setSearchText,
+  };
+
+  function sortField(field: NormalizedField<ExtractKey<TParam, "order_by">>) {
+    setQueryParamState((current) => {
+      const ascendingField = current.order_by?.find((item) => item === field);
+      const descendingField = current.order_by?.find(
+        (item) => item === `-${field}`,
+      );
+
+      let result: (string & ExtractKey<TParam, "order_by">)[] | undefined = [];
+      if (descendingField) {
+        result = current.order_by?.filter((item) => item !== `-${field}`);
+      } else if (ascendingField) {
+        result = current.order_by?.filter((item) => item !== field);
+        result?.push(`-${field}` as string & ExtractKey<TParam, "order_by">);
+      } else {
+        result = current.order_by
+          ? [
+              ...current.order_by,
+              field as string & ExtractKey<TParam, "order_by">,
+            ]
+          : [field as string & ExtractKey<TParam, "order_by">];
+      }
+
+      return {
+        ...current,
+        order_by: result,
+        page: 1,
+      };
+    });
+  }
+
+  function getSortingDirection(
+    field: NormalizedField<ExtractKey<TParam, "order_by">>,
+  ) {
+    const invertedField = `-${field}`;
+    if (serverQueryParamState.order_by?.find((item) => item === field)) {
+      return "asc";
+    } else if (
+      serverQueryParamState.order_by?.find((item) => item === invertedField)
+    ) {
+      return "desc";
+    } else {
+      return undefined;
+    }
+  }
+
+  const sorting: ISortingActions<TParam> = {
+    sortField,
+    getSortingDirection,
+  };
+
+  function getFilterFieldValue(key: keyof TParam) {
+    // @ts-ignore correctly handle the keyof in the future
+    return queryParamState[key] as TParam[keyof TParam];
+  }
+
+  function setFilterFieldValue(key: keyof TParam) {
+    return (value: unknown) => {
+      setQueryParamState((current) => ({
+        ...current,
+        [key]: value,
+        page: 1,
+      }));
+    };
+  }
+
+  const filtering: IFilterActions<TParam> = {
+    getFilterFieldValue,
+    setFilterFieldValue,
+  };
+
+  const data =
+    options?.localCache && searchText
+      ? // @ts-ignore the results key is based on the interface returned. This will get sorted out in a future version
+        query.data?.results.filter((value: any) => {
+          if (options.localSearchFunction && searchText) {
+            if (searchText.includes(" ")) {
+              const searchWords = searchText.split(" ");
+              return searchWords.every((word) => {
+                if (options.localSearchFunction) {
+                  return options.localSearchFunction(word, value);
+                } else {
+                  return false;
+                }
+              });
+            } else {
+              return options.localSearchFunction(searchText, value);
+            }
+          } else {
+            return true;
+          }
+        })
+      : // @ts-ignore
+        query.data?.results;
+
+  return {
+    ...query,
+    raw: query.data,
+    data,
+    header: query.data?.headers,
+    pagination,
+    searching,
+    sorting,
+    filtering,
+  };
+}