Skip to content

Commit

Permalink
feat: 🎸 add loading and no data in ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@yeukfei02
yeukfei02 committed Jan 13, 2023
1 parent a1b5689 commit eb06bfa
Show file tree
Hide file tree
Showing 4 changed files with 155 additions and 111 deletions.
85 changes: 50 additions & 35 deletions src/components/busArrivalTime/BusArrivalTime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ function BusArrivalTime() {
const route = useRoute();
const { t } = useTranslation();

const [loading, setLoading] = useState(true);
const [busArrivalTime, setBusArrivalTime] = useState([]);

useEffect(() => {
Expand Down Expand Up @@ -55,6 +56,7 @@ function BusArrivalTime() {
console.log("responseData = ", responseData);

if (responseData) {
setLoading(false);
setBusArrivalTime(responseData.busArrivalTime);
}
}
Expand All @@ -70,62 +72,75 @@ function BusArrivalTime() {
console.log("responseData = ", responseData);

if (responseData) {
setLoading(false);
setBusArrivalTime(responseData.busArrivalTimeKmb);
}
}
}
};

const renderBusArrivalTime = () => {
let busArrivalTimeView = null;

if (!_.isEmpty(busArrivalTime)) {
busArrivalTimeView = busArrivalTime.map((item, i) => {
return (
<View key={i}>
let busArrivalTimeView = (
<View>
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title>{t("pleaseWait")}</Title>
</Card.Content>
</Card>
</View>
);

if (!loading) {
if (!_.isEmpty(busArrivalTime)) {
busArrivalTimeView = busArrivalTime.map((item, i) => {
return (
<View key={i}>
<Card style={styles.cardContainer}>
<Card.Title
title={`${t("next")} ${item.eta_seq} ${t("bus")}`}
/>
<Card.Content>
<Title>
{t("remainingTime")} {getMinutesDiffStr(item.eta)}
</Title>
</Card.Content>
</Card>
</View>
);
});
} else {
busArrivalTimeView = (
<View>
<Card style={styles.cardContainer}>
<Card.Title title={`${t("next")} ${item.eta_seq} ${t("bus")}`} />
<Card.Content>
<Title>
{t("remainingTime")} {getMinutesDiffStr(item.eta)}
</Title>
<Card.Content style={{ alignSelf: "center" }}>
<Title style={{ color: "red" }}>{t("noData")}</Title>
</Card.Content>
</Card>
</View>
);
});
} else {
busArrivalTimeView = (
<View>
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title>{t("pleaseWait")}</Title>
</Card.Content>
</Card>
</View>
);
}
}

return busArrivalTimeView;
};

const getMinutesDiffStr = (timestamp) => {
let minutesDiffStr = "";
let minutesDiffStr = t("noData");

const now = moment().tz("Asia/Hong_Kong");
const itemTime = moment(timestamp).tz("Asia/Hong_Kong");
if (timestamp) {
const now = moment().tz("Asia/Hong_Kong");
const itemTime = moment(timestamp).tz("Asia/Hong_Kong");
console.log("now = ", now);
console.log("itemTime = ", itemTime);

// console.log("now = ", now);
// console.log("itemTime = ", itemTime);
const minutesDiff = itemTime.diff(now, "minute");
console.log("minutesDiff = ", minutesDiff);

const minutesDiff = itemTime.diff(now, "minute");

// console.log("minutesDiff = ", minutesDiff);

if (minutesDiff > 0) {
minutesDiffStr = `${minutesDiff} minutes`;
} else {
minutesDiffStr = `Arriving`;
if (minutesDiff <= 1) {
minutesDiffStr = `Arriving`;
} else {
minutesDiffStr = `${minutesDiff} minutes`;
}
}

return minutesDiffStr;
Expand Down
89 changes: 50 additions & 39 deletions src/components/busRoute/BusRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function BusRoute() {
const navigation = useNavigation();
const { t, i18n } = useTranslation();

const [loading, setLoading] = useState(true);
const [busRoute, setBusRoute] = useState({});

useEffect(() => {
Expand Down Expand Up @@ -54,6 +55,7 @@ function BusRoute() {
console.log("responseData = ", responseData);

if (responseData) {
setLoading(false);
setBusRoute(responseData.busRoute);
}
}
Expand All @@ -71,6 +73,7 @@ function BusRoute() {
console.log("responseData = ", responseData);

if (responseData) {
setLoading(false);
setBusRoute(responseData.busRouteKmb);
}
}
Expand Down Expand Up @@ -153,45 +156,53 @@ function BusRoute() {
};

const renderBusRouteView = () => {
let busRouteView = null;

if (!_.isEmpty(busRoute)) {
busRouteView = (
<Card style={styles.cardContainer}>
<Card.Title
title={busRoute.route}
subtitle={getCompanyText(busRoute.co)}
/>
<Card.Content>
<Paragraph>{getDirectionText(busRoute)}</Paragraph>
</Card.Content>
<Card.Actions>
<Button
mode="outlined"
style={{ padding: 5 }}
labelStyle={{ fontSize: 15 }}
uppercase={false}
onPress={() =>
handleEnterButtonClick(
route.params.companyId,
route.params.routeStr,
route.params.direction
)
}
>
Enter
</Button>
</Card.Actions>
</Card>
);
} else {
busRouteView = (
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title>{t("pleaseWait")}</Title>
</Card.Content>
</Card>
);
let busRouteView = (
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title>{t("pleaseWait")}</Title>
</Card.Content>
</Card>
);

if (!loading) {
if (!_.isEmpty(busRoute)) {
busRouteView = (
<Card style={styles.cardContainer}>
<Card.Title
title={busRoute.route}
subtitle={getCompanyText(busRoute.co)}
/>
<Card.Content>
<Paragraph>{getDirectionText(busRoute)}</Paragraph>
</Card.Content>
<Card.Actions>
<Button
mode="outlined"
style={{ padding: 5 }}
labelStyle={{ fontSize: 15 }}
uppercase={false}
onPress={() =>
handleEnterButtonClick(
route.params.companyId,
route.params.routeStr,
route.params.direction
)
}
>
Enter
</Button>
</Card.Actions>
</Card>
);
} else {
busRouteView = (
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title style={{ color: "red" }}>{t("noData")}</Title>
</Card.Content>
</Card>
);
}
}

return busRouteView;
Expand Down
89 changes: 52 additions & 37 deletions src/components/busRouteStop/BusRouteStop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function BusRouteStop() {
const navigation = useNavigation();
const { t, i18n } = useTranslation();

const [loading, setLoading] = useState(true);
const [busRouteStop, setBusRouteStop] = useState([]);

useEffect(() => {
Expand Down Expand Up @@ -63,6 +64,7 @@ function BusRouteStop() {
console.log("responseData = ", responseData);

if (responseData) {
setLoading(false);
setBusRouteStop(responseData.busRouteStop);
}
}
Expand All @@ -79,6 +81,7 @@ function BusRouteStop() {
console.log("responseData = ", responseData);

if (responseData) {
setLoading(false);
setBusRouteStop(responseData.busRouteStopKmb);
}
}
Expand Down Expand Up @@ -108,48 +111,60 @@ function BusRouteStop() {
};

const renderBusRouteStop = () => {
let busRouteStopView = null;

if (!_.isEmpty(busRouteStop)) {
busRouteStopView = busRouteStop.map((item, i) => {
return (
<View key={i}>
let busRouteStopView = (
<View>
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title>{t("pleaseWait")}</Title>
</Card.Content>
</Card>
</View>
);

if (!loading) {
if (!_.isEmpty(busRouteStop)) {
busRouteStopView = busRouteStop.map((item, i) => {
return (
<View key={i}>
<Card style={styles.cardContainer}>
<Card.Content>
<Title>{getNameText(item.stop)}</Title>
<Paragraph
style={styles.openInMap}
onPress={() =>
handleOpenInMap(item.stop.lat, item.stop.long)
}
>
Open in map
</Paragraph>
</Card.Content>
<Card.Actions>
<Button
mode="outlined"
style={{ padding: 5 }}
labelStyle={{ fontSize: 15 }}
uppercase={false}
onPress={() => handleEnterButtonClick(item.stop.stop)}
>
Enter
</Button>
</Card.Actions>
</Card>
{renderArrowDownIcon(i)}
</View>
);
});
} else {
busRouteStopView = (
<View>
<Card style={styles.cardContainer}>
<Card.Content>
<Title>{getNameText(item.stop)}</Title>
<Paragraph
style={styles.openInMap}
onPress={() => handleOpenInMap(item.stop.lat, item.stop.long)}
>
Open in map
</Paragraph>
<Card.Content style={{ alignSelf: "center" }}>
<Title style={{ color: "red" }}>{t("noData")}</Title>
</Card.Content>
<Card.Actions>
<Button
mode="outlined"
style={{ padding: 5 }}
labelStyle={{ fontSize: 15 }}
uppercase={false}
onPress={() => handleEnterButtonClick(item.stop.stop)}
>
Enter
</Button>
</Card.Actions>
</Card>
{renderArrowDownIcon(i)}
</View>
);
});
} else {
busRouteStopView = (
<View>
<Card style={styles.cardContainer}>
<Card.Content style={{ alignSelf: "center" }}>
<Title>{t("pleaseWait")}</Title>
</Card.Content>
</Card>
</View>
);
}
}

return busRouteStopView;
Expand Down
3 changes: 3 additions & 0 deletions src/translations/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"bus": "Bus",
"remainingTime": "Remaining Time:",
"pleaseWait": "Please wait...",
"noData": "No data",

"contactUsTitle": "Contact Us",
"hongkongMinibusArrivalApp": "Hong Kong Minibus Arrival App",
Expand Down Expand Up @@ -49,6 +50,7 @@
"bus": "車",
"remainingTime": "剩餘時間:",
"pleaseWait": "請稍等...",
"noData": "沒有數據",

"contactUsTitle": "聯繫我們",
"hongkongMinibusArrivalApp": "香港小巴到達 App",
Expand Down Expand Up @@ -79,6 +81,7 @@
"bus": "车",
"remainingTime": "剩余时间:",
"pleaseWait": "请稍等...",
"noData": "没有数据",

"contactUsTitle": "联系我们",
"hongkongMinibusArrivalApp": "香港小巴到达 App",
Expand Down

0 comments on commit eb06bfa

Please sign in to comment.