Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 3x 3x 3x 1x | import React from 'react';
import ActivityItem from "./ActivityItem";
import {Activity} from "../generated/api";
import classNames from "classnames";
import {ProgressSpinner} from "primereact/progressspinner";
import {ProgressInfo} from "../type";
/**
* the {@link ActivityList} properties
*/
type Props = {
/**
* the list of the activities, injected from the {@link ActivityList} container
*/
activities: Activity[];
/**
* the progress info, injected from the {@link ActivityList} container
*/
loading: ProgressInfo,
/**
* the progress info, injected from the {@link ActivityList} container
*/
username: string,
/**
* fetch call back, used for retrieving trigger the activity fetch action
*/
fetchActivities: () => void,
/**
* make an activity as done
*/
doneToggle: (a: Activity) => void,
/**
* remove the activity call back. Used for trigger a remove actovity action
*/
removeActivity: (a: Activity) => void,
}
type ActivityListState = {
}
export class ActivityList extends React.Component<Props, ActivityListState> {
constructor(props: Props) {
super(props);
this.state = {
}
}
componentDidMount() {
this.props.fetchActivities();
}
/**
* Lifecycle, used for rendering the user login changes.
*/
componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<ActivityListState>, snapshot?: any) {
if (this.props?.username && (prevProps.username !== this.props?.username)) {
this.props.fetchActivities();
}
}
render() {
return (
<div id="activity-list" className={classNames({
'flex': true,
'flex-wrap': true,
'shadow-2': this.props.activities.length > 0,
'my-3': true,
'px-2': true,
'border-round': this.props.activities.length > 0
}
)}>
{this.props.loading.fetch &&
<ProgressSpinner
style={{width: '50px', height: '50px'}}
strokeWidth="8"
fill="var(--surface-ground)"
animationDuration=".5s"/>
}
{this.props.activities.length > 0 && this.props.activities.map((act, index) =>
<ActivityItem
key={index}
activity={act!}
loading={this.props.loading}
doneToggle={this.props.doneToggle}
removeActivity={this.props.removeActivity}
/>
)}
{this.props.activities.length === 0 && !this.props.loading.fetch &&
<div className={'mx-auto'}> No activity found.</div>
}
</div>);
}
}
|