@qlibs/react-components v2.83.2

NOTES !!! IF YOU ADJUST THIS QLIBS

• Please always use React.useXXXXX, not only useXXXXX (e.g React.useState, React.useEffect)

UploadComponent

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button, Card, message } from 'antd';
import { useRef, useState } from 'react';
import { getStandardError } from '@qlibs/utils';
import { UploadComponent, UploadComponentHandle } from '@qlibs/react-components';
import { httpRequest, httpRequestMultipartFormData } from '../../services/api';

const Upload = () => {
  const childRef = useRef<UploadComponentHandle>();
  const [isLoading, setIsLoading] = useState(false);

  const handleTrigger = () => {
    if (childRef.current) {
      setIsLoading(true);
      childRef.current.save(({error, data}) => {
        setIsLoading(false);
        if (error) {
          getStandardError(error, {showToast: true, toastFunction: message});
        }
        if (data) {
          message.success('Success...');
        }
      });
    }
  };

  return (
    <Card title="Example" style={{ marginTop: 20 }}>
      <UploadComponent
        ref={childRef}
        showToast={true}
        apiConfig={{
          instanceGet: httpRequest,
          instancePut: httpRequestMultipartFormData,
          endpointGet: `/upload/sample/12345`,
          endpointPut: `/upload/sample/12345`,
        }}
      />

      <Button
        loading={isLoading}
        onClick={() => handleTrigger()}
        style={{ marginTop: 20 }}
      >
        SUBMIT
      </Button>
    </Card>
  );
}

export default Upload;

usePromiseAllData

const {
    isLoadingPromiseAllData: isLoading,
    promiseAllData,
    fetchPromiseAllData,
  } = usePromiseAllData<IPromiseAllData>({
    httpRequest: httpRequest as any,
    endpoints: [
      {
        endpoint: '/users/' + params.userId,
        returnKey: 'user',
      },
      {
        endpoint: selectedProgram?.programId
          ? `evaluation-calculator/${selectedProgram?.programId}/${params.userId}`
          : `evaluation-calculator/${params.userId}`,
        returnKey: 'competencies',
      },
    ],
  });

  useEffect(() => {
    fetchPromiseAllData();
  }, []);

useAdditionalDataForList

const { isLoadingAdditionalData, additionalData } =
    useAdditionalDataForList<IAdditionalData>({
      httpRequest: httpRequest as any,
      id: 'attendanceId',
      data,
      injects: [
        {
          injectedId: 'userId',
          endpoint: '/users?filterStatus=active&roles=talent&userIds=',
          endpointId: 'userId',
          returnKey: 'user',
        },
        props.type === 'EVENT' ? {
          injectedId: 'eventId',
          endpoint: '/event?eventIds=',
          endpointId: 'eventId',
          returnKey: 'event',
        } : {injectedId: '', endpoint: '', returnKey: '', endpointId: ''},
      ].filter(item => item?.injectedId),
    });

TRACK ME

How to use TrackMe

const {insertData} = useTrackData();
const location = useLocation()

<TrackMe 
  appName='QLIBS'
  userId='QLIBS_userId'
  userData={{name: 'QLIBS_user_name'}}
  processUpload={(
    activities: IActivity[],
    onSuccess: (ids: number[]) => void
  ) => {
    console.info('before onSuccess activities', activities);
    onSuccess(activities.map(item => (item as any).activityId));
  }}
  location={location}
  autoUploadConfig={{
    intervalInMs: 5000,
  }}
  isDemo={true}
/>

useTrackerIndexedDB({
  appName: "PROJECT_NAME",
  userId: user.userId,
  userData: user,
  processUpload: (activities: IActivity[], onSuccess: (ids: number[]) => void) => {
    httpRequest
      .post(process.env.REACT_APP_API_URL_TRACKME || '', { bulk: activities })
      .then((res: any) => {
        onSuccess((res.data.payload || []).map((item: any) => item.activityId));
      })
      .catch((err) => {
        message.error(getErrorMessage(err));
      });
  },
});

How to don't track me

<button data-trackme="false">WILL NOT TRACKED</button>