Revamp saved cache list item. Tentative new Cache fields including type....

Revamp saved cache list item. Tentative new Cache fields including type. Markers render based on type.
parent faa51628
......@@ -23,6 +23,7 @@
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
"linebreak-style": "off",
"func-names": "off",
"max-len": "error",
"no-console": "off",
......
[
{
"featureType": "administrative",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#abce83"
}
]
},
{
"featureType": "landscape",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#8dab68"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#534b4b"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#d8e33b"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#aee2e0"
},
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
]
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#1d2c4d"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8ec3b9"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1a3646"
}
]
},
{
"featureType": "administrative",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#023e58"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#023e58"
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#304a7d"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#0e1626"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
]
......@@ -7171,6 +7171,23 @@
}
}
},
"react-native-animatable": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.3.tgz",
"integrity": "sha512-2ckIxZQAsvWn25Ho+DK3d1mXIgj7tITkrS4pYDvx96WyOttSvzzFeQnM2od0+FUMzILbdHDsDEqZvnz1DYNQ1w==",
"requires": {
"prop-types": "^15.7.2"
}
},
"react-native-drawer": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/react-native-drawer/-/react-native-drawer-2.5.1.tgz",
"integrity": "sha512-cxcQNbSWy5sbGi7anSVp6EDr6JarOBMY9lbFOeLFeVYbONiudoqRKbgEsSDgSw3/LFCLvUXK5zdjXCOedeytxQ==",
"requires": {
"prop-types": "^15.5.8",
"tween-functions": "^1.0.1"
}
},
"react-native-elements": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-2.0.0.tgz",
......@@ -7215,6 +7232,15 @@
"resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.26.1.tgz",
"integrity": "sha512-p4VTB8YB5ZmOmDRCUpoHZkm05amZwhIo04AJMBbB9+JAR2PNNfpo0vceoWX0Mag4wnePkdzPomeWMplr/wimTg=="
},
"react-native-modal": {
"version": "11.5.6",
"resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.5.6.tgz",
"integrity": "sha512-APGNfbvgC4hXbJqcSADu79GLoMKIHUmgR3fDQ7rCGZNBypkStSP8imZ4PKK/OzIZZfjGU9aP49jhMgGbhY9KHA==",
"requires": {
"prop-types": "^15.6.2",
"react-native-animatable": "1.3.3"
}
},
"react-native-ratings": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.5.0.tgz",
......@@ -7252,6 +7278,14 @@
"resolved": "https://registry.npmjs.org/react-native-swipe-list-view/-/react-native-swipe-list-view-2.5.0.tgz",
"integrity": "sha512-HTsVaxA3an6myShlLroTyDZo/AOrZ6HJr+EwCaGRE2YuGdM/cFHoYfsuslOEEig5GenTw8DILUB8kqYWQ5lJtA=="
},
"react-native-touchable-scale": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-native-touchable-scale/-/react-native-touchable-scale-2.1.1.tgz",
"integrity": "sha512-sQm3CxTFdMT/NfWj6srqLrUzQjBytDbreYLJ83OMt+Zf1gHAHoatZs1AgkAZZCQ3glyg3f+WMSV6ZwLiKZDJgw==",
"requires": {
"prop-types": "^15.6.0"
}
},
"react-native-view-shot": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-3.0.2.tgz",
......@@ -8356,6 +8390,11 @@
"tslib": "^1.8.1"
}
},
"tween-functions": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
"integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
},
"type-check": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
......
# Geo Frontend Repo
## Quick Links
- [Redux Toolkit](<[https://redux-toolkit.js.org/tutorials/basic-tutorial](https://redux-toolkit.js.org/tutorials/basic-tutorial)>)
- [React native maps](<[https://github.com/react-native-community/react-native-maps](https://github.com/react-native-community/react-native-maps)>)
- [React native elements](<[https://react-native-elements.github.io/react-native-elements/docs/overview](https://react-native-elements.github.io/react-native-elements/docs/overview)>)
- [React navigation](<[https://reactnavigation.org/docs/getting-started/](https://reactnavigation.org/docs/getting-started/)>)
- [Font Awesome (Icons)](<[https://fontawesome.com/icons?d=gallery](https://fontawesome.com/icons?d=gallery)>)
- [Google Maps styling wizard](<[https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)>)
## React
- Use functional components and hooks whenever possible
### Components
Do your best to follow this style. It is based roughly on the [Airbnb style guide]([https://github.com/airbnb/javascript "https://github.com/airbnb/javascript"). Try to keep one component per file.
```js
// imports
import React from "react";
// constants
const SIZE = 40;
// styles
const style = StyleSheet.create({
container: {
flex: 1,
},
});
// Component prop typing
interface Props {
show: boolean;
}
// Functional arrow component
const MyComponent: React.FC<Props> = ({ show }) => <View>yuh</View>;
export default MyComponent;
```
## Theme
See `theme.ts`. Use the default exported theme object for colors and spacing (`padding`/`margin`)
## Redux
We are using [Redux Toolkit](<[https://redux-toolkit.js.org/tutorials/basic-tutorial](https://redux-toolkit.js.org/tutorials/basic-tutorial)>). For each _slice_ of the store, break the code into up to 4 files:
- Caches**State**
Put TypeScript types here, including the interface of the _slice_
- Caches**Slice**
_Slice_ is the new terminology for _reducer_. It represents an independent part of the redux store. In this file, export the slice as default. Export the actions here too if there is no need for an **Actions** file.
- Caches**Actions**
Put any actions that operate on the _slice_'s state in this file. You can export the _slice_'s actions here and create new ones that are more complex (ie. _thunks_)
- Caches**Selectors**
Selectors are functions that efficiently extract parts of the _slice_'s state for external use. Put them all in this file.
For components that need to interact with redux, use the `useSelector` and `dispatch` hooks:
```js
const dispatch = useDispatch();
const idToken = useSelector(getAuthToken);
```
[React context](<[https://reactjs.org/docs/context.html](https://reactjs.org/docs/context.html)>) is a popular new strategy for FE state management and might be a better approach than redux in some situations. Look at `UserLocationProvider` for an example.
## React native maps
[React native maps](<[https://github.com/react-native-community/react-native-maps](https://github.com/react-native-community/react-native-maps)>) is our map library. Try to keep all map use cases under the `GeoMap` component.
[Google Maps styling wizard](<[https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)>) is what I've been using to create the `json` config for the map style. If you want to change the style you can import our existing `json` into the wizard.
## React native elements
[React native elements](<[https://react-native-elements.github.io/react-native-elements/docs/overview](https://react-native-elements.github.io/react-native-elements/docs/overview)>) is a helpful component library. It is probably better to use this than to try to create your own component at this point in time. In the future, our custom components will probably wrap the components from **elements**
I have been using the prefix **Geo**- as a convention for component/file names to distinguish custom components from **elements** components.
## React navigation
[React navigation](<[https://reactnavigation.org/docs/getting-started/](https://reactnavigation.org/docs/getting-started/)>) is our nav library. Put navigators in their own files under the `navigation` folder.
## Icons
[Font Awesome](<[https://fontawesome.com/icons?d=gallery](https://fontawesome.com/icons?d=gallery)>) is an icon provider that is used by the **React Native Elements** `Icon` component. For now we are using the free icons. Search for icons on their site and copy the name of the icon into the `name` prop.
```js
<Icon name={"book"} type={"font-awesome-5"} />
```
In the future we will probably create our own icons using `Svg`s and a custom `Icon` component.
## Linting
Use **eslint** and **prettier**.
There's a `lint` script in our `package.json`. There's probably a lot of linting errors in the repo as of writing this that I will get around to fixing. When the errors are manageable again please lint before your merge.
My VS Code settings are below. They might need some reworking.
```json
{
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.detectIndentation": true,
"editor.insertSpaces": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false
}
}
```
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"elementType": "geometry.stroke",
"stylers": [
{
"saturation": 35
},
{
"weight": 2.5
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#dcd2be"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ae9e90"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#93817c"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a5b076"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#447530"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#fdfcf8"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#f8c967"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e9bc62"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#e98d58"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#db8555"
}
]
},
{
"featureType": "road.local",