Skip to content

Commit 66cde99

Browse files
soggybagsoggybag
committed
Update content.md
1 parent 9080a48 commit 66cde99

File tree

1 file changed

+216
-5
lines changed

1 file changed

+216
-5
lines changed

Diff for: ‎P12-Displaying-Feature/content.md

+216-5
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,222 @@ slug: displaying-features
55

66
## Displaying Features - Detail page
77

8-
- Add a link to the web site
9-
- import font awesome
10-
- map data to icons
11-
- Show list of images
12-
- Add a map using Lat and lon
8+
Each of the spaces has a list of features. The features describe the location as indoors or outdoors, whether there is coffee, art, or a bathroom available.
139

10+
We could display these as text but it might be more fun and easier for people to understand if we displayed them with icons or emojis.
1411

12+
We have two choices to work with
13+
14+
- Emoji
15+
- Images
16+
17+
Emojis are built in and require no extra libraries or files. They are also fairly compatible across systems today.
18+
19+
Images represent a lot of things, but using images would require more files, and more work on our part but possible be more compatible. Font Awesome would be a good choice here.
20+
21+
Let's give emoji a try.
22+
23+
## Convert words to emoji
24+
25+
Looking through the base data there are five features:
26+
27+
- outdoors
28+
- coffee
29+
- art
30+
- toilet
31+
- power
32+
33+
We need an emoji for each of these.
34+
35+
- 🌲 - outdoors
36+
- ☕️ - coffee
37+
- 🖼 - art
38+
- 🚽 - toilet
39+
- 🔌 - power
40+
41+
Now we need to convert an array of words to an array of emoji. Array.map is the tool for the job. Map is meant for transforming an array of one type into an array of another type. Here you'd be converting an array of text strings into an array of emoji strings.
42+
43+
Make a component that displays the emoji!
44+
45+
> [info]
46+
>
47+
> Make a new file: `POPOSFeature.js`.
48+
>
49+
> Define a component:
50+
>
51+
```JS
52+
import React from 'react'
53+
import './POPOSFeature.css'
54+
>
55+
function getFeature(str) {
56+
switch(str) {
57+
case 'outdoors':
58+
return '🌲'
59+
case 'coffee':
60+
return '☕️'
61+
case 'art':
62+
return '🖼'
63+
case 'toilet':
64+
return '🚽'
65+
case 'power':
66+
return '🔌'
67+
default:
68+
return '？'
69+
}
70+
}
71+
>
72+
function POPOSFeature(props) {
73+
const emoji = getFeature(props.name)
74+
return <div className="POPOSFeature">{emoji}</div>
75+
}
76+
>
77+
export default POPOSFeature
78+
```
79+
>
80+
81+
This component will require a prop: name. You might create a instance like this:
82+
83+
```JS
84+
<POPOSFeature name="coffee" />
85+
```
86+
87+
Internally the component translates the word to an emoji using the `getFeature(str)` function.
88+
89+
The `switch` block is like an if else block. The switch tries to match the supplied value agains one of it's cases. If `str` matches the function returns an emoji string.
90+
91+
Add a stylessheet.
92+
93+
> [info]
94+
>
95+
> Create a new file: `POPOSFeature.css`
96+
>
97+
> Import this new stylesheet at the top `POPOSFeature.js`
98+
>
99+
```JS
100+
import './POPOSFeature.css'
101+
```
102+
>
103+
> Add the follow code at the top `POPOSFeature.css`:
104+
>
105+
```CSS
106+
.POPOSFeature {
107+
font-size: 2em;
108+
padding: 0.25em;
109+
margin: 0.125em;
110+
border-radius: 0.25em;
111+
background-color: #eee;
112+
}
113+
```
114+
>
115+
116+
This sets the font size, adds some padding and marging, sets the border radius, and sets a background color.
117+
118+
## Feature list
119+
120+
The SFPOPOS data provides a list of 0 or more strings of features. This means we need to display a list of these `POPOSFeature` components.
121+
122+
Time to make a component! This new component will take an array of strings and return an array of `POPOSFeature` components.
123+
124+
> [info]
125+
>
126+
> Create a new file: `POPOSFeatureList`.
127+
>
128+
> Add the following code here to define the new component.
129+
>
130+
```JS
131+
import React from 'react'
132+
import POPOSFeature from './POPOSFeature'
133+
import './POPOSFeatureList.css'
134+
>
135+
function POPOSFeatureList(props) {
136+
const icons = props.features.map((feature) => {
137+
return <POPOSFeature key={feature} name={feature} />
138+
})
139+
return <div className="POPOSFeatureList">{icons}</div>
140+
}
141+
>
142+
export default POPOSFeatureList
143+
```
144+
>
145+
146+
This component imports the `POPOSFeature` component.
147+
148+
This component expects an array of strings named features. We get the array on props as: `props.features`.
149+
150+
The component maps the array of strings into an array `POPOSFeature` components setting the name of each to a feature string from the array.
151+
152+
Add a style sheet.
153+
154+
> [info]
155+
>
156+
> Add a new file: `POPOSFeatureList.css`.
157+
>
158+
> Import your styles in `POPOSFeatureList.js`:
159+
>
160+
```JS
161+
import './POPOSFeatureList.css'
162+
```
163+
>
164+
> Then add some styles.
165+
>
166+
```CSS
167+
.POPOSFeatureList {
168+
display: flex;
169+
}
170+
```
171+
>
172+
173+
The only style here is flex which should line up all of the elements in a row.
174+
175+
You could add more styles if you like.
176+
177+
## Use the POPOSFeatureList
178+
179+
Use the feature list and feature components.
180+
181+
To use the `POPOSFeature` component you make an instance and set the name prop, fro example:
182+
183+
```JS
184+
<POPOSFeature name="art" />
185+
```
186+
187+
To use the POPOSFeatureList component you need to include an array of strings as the features prop, for example:
188+
189+
```JS
190+
<POPOSFeatureList features={['coffee', 'art']} />
191+
```
192+
193+
Put this to work in the details page.
194+
195+
> [info]
196+
>
197+
> Edit `POPOSFeatureList.js`
198+
>
199+
```JS
200+
...
201+
import POPOSFeatureList from '../POPOSFeatures/POPOSFeatureList'
202+
>
203+
function POPOSDetails(props) {
204+
...
205+
return (
206+
<div className="POPOSDetails">
207+
...
208+
<div className="POPOSDetails-info">
209+
...
210+
<POPOSFeatureList features={features}/>
211+
<p className="POPOSDetails-geo">{ geo.lat } { geo.lon }</p>
212+
</div>
213+
</div>
214+
)
215+
}
216+
```
217+
>
218+
> Be sure to adjust the path to your `POPOSFeatureList` component, it may be in a different location than where I placed mine!
219+
>
220+
> Be sure to remove the previous tag that displayed the features.
221+
>
222+
223+
What happened here? First we imported the POPOSFeatureList component.
224+
225+
Next, make an instance of `POPOSFeatureList` and set the feature proper to the array of feature strings that came from the data source.
15226

0 commit comments

Comments
 (0)