@qlibs/react-components v2.83.2
NOTES !!! IF YOU ADJUST THIS QLIBS
- Please always use
React.useXXXXX
, not onlyuseXXXXX
(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>
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
4 months ago
5 months ago
5 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
8 months ago
11 months ago
8 months ago
9 months ago
9 months ago
9 months ago
5 months ago
8 months ago
9 months ago
9 months ago
6 months ago
8 months ago
8 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
9 months ago
9 months ago
9 months ago
6 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
5 months ago
5 months ago
5 months ago
6 months ago
10 months ago
7 months ago
7 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
7 months ago
7 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
7 months ago
7 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago