Charging

[brianchennn]

Rebase #39 and re-design frontend, see https://hackmd.io/MBX9nCDNRniF5mBDnLI3pg

[tim-ywliu]

rebase and resolve conflicts

[tim-ywliu]

  webServer:
    scheme: http
    ipv4Address: 0.0.0.0
    port: 5000

[ianchen0119]

Hi @brianchennn

Please also remember to replace all of the qfis shown in PCF PR.

[ianchen0119]

Hi @yccodr

Please help to review this PR (especially the Front End part).
Thanks.

[yccodr]

FE reviewed

[yccodr]

Could be wrapped into a custom hook to make component more leaner.

Suggested change

	const [onlineChargingData, setOnlineChargingData] = useState<ChargingData[]>([]);
	const [offlineChargingData, setOfflineChargingData] = useState<ChargingData[]>([]);
	const [chargingRecord, setChargingRecord] = useState<FlowChargingRecord[]>([]);
	const fetchChargingRecord = () => {
	const MSG_FETCH_ERROR = "Get Charging Record error";
	axios
	.get("/api/charging-record")
	.then((res) => {
	setChargingRecord(res.data ? res.data : chargingRecord);
	console.log("Charging Record", chargingRecord);
	})
	.catch((err) => {
	console.log(MSG_FETCH_ERROR, err);
	});
	};
	const fetchChargingData = (
	chargingMethod: string,
	setChargingData: React.Dispatch<React.SetStateAction<ChargingData[]>>,
	) => {
	const MSG_FETCH_ERROR = "Get Charging Data error";
	axios
	.get("/api/charging-data/" + chargingMethod)
	.then((res) => {
	if (res.data) setChargingData(res.data);
	})
	.catch((err) => {
	console.log(MSG_FETCH_ERROR, err);
	});
	};
	const onRefresh = () => {
	fetchChargingData("Online", setOnlineChargingData);
	fetchChargingData("Offline", setOfflineChargingData);
	fetchChargingRecord();
	setCurrentTime(new Date());
	};
	useEffect(() => {
	onRefresh();
	const id = setInterval(() => {
	onRefresh();
	}, 10000);
	return () => clearInterval(id);
	}, []);
	const { onlineChargingData, offlineChargingData, chargingRecord } = useChargingData();
	const useChargingData = () => {
	const [onlineChargingData, setOnlineChargingData] = useState<ChargingData[]>([]);
	const [offlineChargingData, setOfflineChargingData] = useState<ChargingData[]>([]);
	const [chargingRecord, setChargingRecord] = useState<FlowChargingRecord[]>([]);
	const fetchChargingRecord = () => {
	const MSG_FETCH_ERROR = "Get Charging Record error";
	axios
	.get("/api/charging-record")
	.then((res) => {
	setChargingRecord(res.data ? res.data : chargingRecord);
	console.log("Charging Record", chargingRecord);
	})
	.catch((err) => {
	console.log(MSG_FETCH_ERROR, err);
	});
	};
	const fetchChargingData = (
	chargingMethod: string,
	setChargingData: React.Dispatch<React.SetStateAction<ChargingData[]>>,
	) => {
	const MSG_FETCH_ERROR = "Get Charging Data error";
	axios
	.get("/api/charging-data/" + chargingMethod)
	.then((res) => {
	if (res.data) setChargingData(res.data);
	})
	.catch((err) => {
	console.log(MSG_FETCH_ERROR, err);
	});
	};
	const onRefresh = () => {
	fetchChargingData("Online", setOnlineChargingData);
	fetchChargingData("Offline", setOfflineChargingData);
	fetchChargingRecord();
	setCurrentTime(new Date());
	};
	useEffect(() => {
	onRefresh();
	const id = setInterval(() => {
	onRefresh();
	}, 10000);
	return () => clearInterval(id);
	}, []);
	return { onlineChargingData, offlineChargingData, chargingRecord };
	}

[andy89923]

Since there is a button to manually refresh, onRefresh() can't be wrapped.