-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
mapCityListScreen
- Loading branch information
Showing
36 changed files
with
2,305 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,22 @@ | ||
import { GestureHandlerRootView } from 'react-native-gesture-handler'; | ||
|
||
import React, { ReactElement } from 'react'; | ||
import { Provider } from 'react-redux'; | ||
import { store } from '@state/store'; | ||
import { MainRouterNavigation } from './app/navigation/MainRouter.tsx'; | ||
|
||
/** | ||
* This is main app point | ||
* r | ||
* @constructor | ||
*/ | ||
function App(): ReactElement { | ||
return <MainRouterNavigation />; | ||
return ( | ||
<GestureHandlerRootView> | ||
<Provider store={store}> | ||
<MainRouterNavigation /> | ||
</Provider> | ||
</GestureHandlerRootView> | ||
); | ||
} | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,26 +1,36 @@ | ||
import { createNativeStackNavigator } from '@react-navigation/native-stack'; | ||
import { createStaticNavigation } from '@react-navigation/native'; | ||
import { | ||
createStaticNavigation, | ||
StaticParamList | ||
} from '@react-navigation/native'; | ||
import { MapCityListScreen } from '@screens/MapCityListScreen/MapCityListScreen.tsx'; | ||
import { WeatherDetailsScreen } from '@screens/WeatherDetailsScreen/WeatherDetailsScreen.tsx'; | ||
|
||
/** | ||
* Add here types for the screens that are passed by navigation | ||
*/ | ||
type RootStackParamList = { | ||
MapCityList: {}; | ||
WeatherDetails: {}; | ||
}; | ||
import { RootStackParamList, RouteNames } from '@navigation/types.ts'; | ||
|
||
const RootStack = createNativeStackNavigator<RootStackParamList>({ | ||
screens: { | ||
MapCityList: { | ||
[RouteNames.MapCityList]: { | ||
screen: MapCityListScreen, | ||
options: { | ||
headerShown: false | ||
} | ||
}, | ||
WeatherDetails: WeatherDetailsScreen | ||
[RouteNames.WeatherDetails]: WeatherDetailsScreen | ||
} | ||
}); | ||
|
||
type RootStackStaticParamList = StaticParamList<typeof RootStack>; | ||
|
||
/** | ||
* Override static props for navigation purposes | ||
* useNavigation use it for checking possible routes | ||
*/ | ||
declare global { | ||
// eslint-disable-next-line no-unused-vars | ||
namespace ReactNavigation { | ||
// eslint-disable-next-line no-unused-vars | ||
interface RootParamList extends RootStackStaticParamList {} | ||
} | ||
} | ||
|
||
export const MainRouterNavigation = createStaticNavigation(RootStack); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
/** | ||
* Vars are used but airbnb config doesnt respect ts - TODO: tweak/fix eslint plugins | ||
*/ | ||
export enum RouteNames { | ||
// eslint-disable-next-line no-unused-vars | ||
MapCityList = 'MapCityList', | ||
// eslint-disable-next-line no-unused-vars | ||
WeatherDetails = 'WeatherDetails' | ||
} | ||
/** | ||
* Add here types for the screens that are passed by navigation | ||
*/ | ||
export type RootStackParamList = { | ||
[RouteNames.MapCityList]: {}; | ||
[RouteNames.WeatherDetails]: {}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,47 @@ | ||
import React from 'react'; | ||
import { View, Text } from 'react-native'; | ||
import React, { useCallback, useEffect, useRef } from 'react'; | ||
import { MapView, Camera } from '@rnmapbox/maps'; | ||
|
||
import { useAppDispatch } from '@state/hooks.ts'; | ||
import { fetchCitiesWeatherInRadiusByLatLngThunk } from '@state/features/weatherCityList/weatherCityListThunks.ts'; | ||
import { mapCityListScreenStyles } from '@screens/MapCityListScreen/mapCityListScreenStyles.ts'; | ||
import { MapCityListBottomSheet } from '@screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListBottomSheet.tsx'; | ||
import { | ||
FallbackBounds, | ||
FallbackLatLng | ||
} from '@screens/MapCityListScreen/constants.ts'; | ||
|
||
export function MapCityListScreen() { | ||
const cameraRef = useRef<Camera>(null); | ||
const dispatch = useAppDispatch(); | ||
const isCameraInit = useRef(false); | ||
|
||
useEffect(function onInit() { | ||
dispatch( | ||
fetchCitiesWeatherInRadiusByLatLngThunk({ | ||
lat: FallbackLatLng.lat, | ||
lon: FallbackLatLng.lng, | ||
numberOfCities: 20, | ||
radiusInKm: 20 | ||
}) | ||
); | ||
}, []); | ||
|
||
const onCameraChanged = useCallback(() => { | ||
if (isCameraInit.current) { | ||
return; | ||
} | ||
|
||
isCameraInit.current = true; | ||
cameraRef.current?.fitBounds(FallbackBounds.ne, FallbackBounds.sw, 20, 10); | ||
}, []); | ||
|
||
return ( | ||
<View> | ||
<Text>Konichiwa I am Map City List screen</Text> | ||
</View> | ||
<MapView | ||
style={mapCityListScreenStyles.map} | ||
onCameraChanged={onCameraChanged} | ||
> | ||
<Camera ref={cameraRef} /> | ||
<MapCityListBottomSheet /> | ||
</MapView> | ||
); | ||
} |
27 changes: 27 additions & 0 deletions
27
app/screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListBottomSheet.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import React, { useCallback } from 'react'; | ||
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'; | ||
import { FlatList } from 'react-native-gesture-handler'; | ||
|
||
import { mapCityListScreenStyles } from '@screens/MapCityListScreen/mapCityListScreenStyles.ts'; | ||
import { useAppSelector } from '@state/hooks.ts'; | ||
import { weatherCityListSelector } from '@state/features/weatherCityList/weatherCityListSelectors.ts'; | ||
import { MapCityListItem } from '@screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx'; | ||
import type { ListRenderItem } from '@react-native/virtualized-lists'; | ||
import { WeatherItem } from '@http/types.ts'; | ||
|
||
export function MapCityListBottomSheet() { | ||
const cities = useAppSelector(weatherCityListSelector); | ||
|
||
const renderItem: ListRenderItem<WeatherItem> = useCallback( | ||
({ ...info }) => <MapCityListItem {...info} />, | ||
[] | ||
); | ||
|
||
return ( | ||
<BottomSheet snapPoints={['20%', '50%', '90%']}> | ||
<BottomSheetView style={mapCityListScreenStyles.contentContainer}> | ||
<FlatList data={cities} renderItem={renderItem} /> | ||
</BottomSheetView> | ||
</BottomSheet> | ||
); | ||
} |
46 changes: 46 additions & 0 deletions
46
...s/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/MapCityListItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import React, { useCallback } from 'react'; | ||
import { Image, Text, View, ListRenderItemInfo } from 'react-native'; | ||
import { TouchableOpacity } from 'react-native-gesture-handler'; | ||
|
||
import { WeatherItem } from '@http/types.ts'; | ||
import { mapCityListItemStyles } from '@screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/mapCityListItemStyles.ts'; | ||
import { getWeatherIconUri } from '@screens/MapCityListScreen/components/MapCityListBottomSheet/MapCityListItem/utils/getWeatherIconUri.ts'; | ||
import { useNavigation } from '@react-navigation/native'; | ||
import { RouteNames } from '@navigation/types.ts'; | ||
|
||
export function MapCityListItem({ | ||
item | ||
}: ListRenderItemInfo<WeatherItem>): React.ReactElement { | ||
const { navigate } = useNavigation(); | ||
const { | ||
name, | ||
main: { temp }, | ||
weather: [{ main: weatherType, icon }] | ||
} = item; | ||
|
||
const source = { uri: getWeatherIconUri(icon) }; | ||
|
||
const onItemPress = useCallback(() => { | ||
navigate(RouteNames.WeatherDetails); | ||
}, []); | ||
|
||
return ( | ||
<TouchableOpacity | ||
style={mapCityListItemStyles.container} | ||
onPress={onItemPress} | ||
> | ||
<Image | ||
source={source} | ||
resizeMode="cover" | ||
style={mapCityListItemStyles.image} | ||
/> | ||
<View> | ||
<Text style={mapCityListItemStyles.name}>{name}</Text> | ||
<Text style={mapCityListItemStyles.weatherType}>{weatherType}</Text> | ||
</View> | ||
<View style={mapCityListItemStyles.tempContainer}> | ||
<Text style={mapCityListItemStyles.temp}>{temp}°C</Text> | ||
</View> | ||
</TouchableOpacity> | ||
); | ||
} |
35 changes: 35 additions & 0 deletions
35
...CityListScreen/components/MapCityListBottomSheet/MapCityListItem/mapCityListItemStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { StyleSheet } from 'react-native'; | ||
|
||
export const mapCityListItemStyles = StyleSheet.create({ | ||
container: { | ||
height: 60, | ||
width: '100%', | ||
flexDirection: 'row', | ||
paddingBottom: 6, | ||
borderBottomWidth: 1, | ||
borderColor: 'grey' | ||
}, | ||
image: { width: 60, height: 60, marginRight: 8 }, | ||
name: { | ||
fontSize: 25 | ||
}, | ||
weatherType: { | ||
fontSize: 18 | ||
}, | ||
tempContainer: { | ||
backgroundColor: 'lightblue', | ||
height: 40, | ||
borderRadius: 20, | ||
paddingHorizontal: 12, | ||
marginLeft: 'auto', | ||
marginRight: 12, | ||
justifyContent: 'center', | ||
alignSelf: 'center' | ||
}, | ||
temp: { | ||
fontSize: 20, | ||
color: 'white', | ||
fontWeight: 'bold', | ||
textAlign: 'center' | ||
} | ||
}); |
6 changes: 6 additions & 0 deletions
6
...tyListScreen/components/MapCityListBottomSheet/MapCityListItem/utils/getWeatherIconUri.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/** | ||
* return full uri of weatherApi icon | ||
* @param iconName - name of icon from weatherApi | ||
*/ | ||
export const getWeatherIconUri = (iconName: string) => | ||
`https://openweathermap.org/img/w/${iconName}.png`; |
7 changes: 7 additions & 0 deletions
7
...reens/MapCityListScreen/components/MapCityListBottomSheet/mapCityListBottomSheetStyles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { StyleSheet } from 'react-native'; | ||
|
||
export const mapCityListBottomSheetStyles = StyleSheet.create({ | ||
container: { | ||
flex: 1 | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { getCenter } from 'geolib'; | ||
|
||
import { latLngTupleToObject } from '@utils/latLngTupleToObject.ts'; | ||
|
||
// [LNG, LAT] | ||
export const FallbackBounds: { | ||
ne: [number, number]; | ||
sw: [number, number]; | ||
} = { | ||
ne: [14.156001300148233, 53.96161914863009], | ||
sw: [22.892223645326283, 49.05142736914263] | ||
}; | ||
|
||
const centerOfBounds = getCenter([ | ||
latLngTupleToObject(FallbackBounds.ne), | ||
latLngTupleToObject(FallbackBounds.sw) | ||
]); | ||
|
||
export const FallbackLatLng = { | ||
lng: 0, | ||
lat: 0 | ||
}; | ||
|
||
if (centerOfBounds) { | ||
FallbackLatLng.lng = centerOfBounds.longitude; | ||
FallbackLatLng.lat = centerOfBounds.latitude; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { StyleSheet } from 'react-native'; | ||
|
||
export const mapCityListScreenStyles = StyleSheet.create({ | ||
map: { | ||
flex: 1 | ||
}, | ||
container: { | ||
flex: 1, | ||
backgroundColor: 'grey' | ||
}, | ||
contentContainer: { | ||
flex: 1, | ||
paddingHorizontal: 4, | ||
paddingTop: 4, | ||
paddingBottom: 36 | ||
} | ||
}); |
Oops, something went wrong.