├── .gitignore
├── client
    ├── app.jsx
    ├── assets
    │   ├── dropdown.svg
    │   ├── mountain.svg
    │   ├── plus.svg
    │   ├── sign.svg
    │   ├── star.svg
    │   └── x.svg
    ├── components
    │   ├── confirm-delete-prompt.jsx
    │   ├── confirm-update-prompt.jsx
    │   └── entry.jsx
    ├── containers
    │   ├── entries.jsx
    │   ├── form.jsx
    │   └── header.jsx
    ├── index.html
    ├── index.js
    └── stylesheets
    │   ├── entries.css
    │   ├── form-styles.css
    │   ├── header.css
    │   ├── styles.css
    │   └── title.css
├── docs
    └── schema.png
├── package.json
├── readme.md
├── server
    ├── controllers
    │   ├── entry-controller.js
    │   └── form-controller.js
    ├── models
    │   ├── entry-queries.js
    │   ├── form-queries.js
    │   └── model.js
    └── server.js
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | .DS_Store
4 | /client/build/*


--------------------------------------------------------------------------------
/client/app.jsx:
--------------------------------------------------------------------------------
  1 | import React, {useState, useEffect} from 'react';
  2 | import Header from './containers/header.jsx';
  3 | import Form from './containers/form.jsx';
  4 | import Entries from './containers/entries.jsx';
  5 | 
  6 | const App = () => {
  7 |   // State of existing entry records
  8 |   const [ entries, setEntries ] = useState([]);
  9 | 
 10 |   // State of form dropdown options
 11 |   const [ activities, setActivities ] = useState([]);
 12 |   const [ types, setTypes ] = useState([]);
 13 |   const [ difficulties, setDifficulties ] = useState([]);
 14 | 
 15 |   // State of controlled main form component
 16 |   const [ selectedActivity, setSelectedActivity ] = useState('');
 17 |   const [ selectedType, setSelectedType ] = useState('');
 18 |   const [ selectedDifficulty, setSelectedDifficulty ] = useState('');
 19 |   const [ currentRoute, setCurrentRoute ] = useState('');
 20 |   const [ selectedRating, setSelectedRating ] = useState(0);
 21 |   const [ currentLocation, setCurrentLocation ] = useState('');
 22 |   const [ currentRegion, setCurrentRegion ] = useState('');
 23 |   const [ currentCountry, setCurrentCountry ] = useState('');
 24 |   const [ selectedStartDate, setSelectedStartDate ] = useState('');
 25 |   const [ selectedEndDate, setSelectedEndDate ] = useState('');
 26 |   const [ currentNote, setCurrentNote ] = useState('');
 27 |   const [ starHover, setStarHover ] = useState(0);
 28 | 
 29 |   // State of controlled update form component
 30 |   const [ selectedActivityForUpdate, setSelectedActivityForUpdate ] = useState('');
 31 |   const [ selectedTypeForUpdate, setSelectedTypeForUpdate ] = useState('');
 32 |   const [ selectedDifficultyForUpdate, setSelectedDifficultyForUpdate ] = useState('');
 33 |   const [ currentRouteForUpdate, setCurrentRouteForUpdate ] = useState('');
 34 |   const [ selectedRatingForUpdate, setSelectedRatingForUpdate ] = useState(0);
 35 |   const [ currentLocationForUpdate, setCurrentLocationForUpdate ] = useState('');
 36 |   const [ currentRegionForUpdate, setCurrentRegionForUpdate ] = useState('');
 37 |   const [ currentCountryForUpdate, setCurrentCountryForUpdate ] = useState('');
 38 |   const [ selectedStartDateForUpdate, setSelectedStartDateForUpdate ] = useState('');
 39 |   const [ selectedEndDateForUpdate, setSelectedEndDateForUpdate ] = useState('');
 40 |   const [ currentNoteForUpdate, setCurrentNoteForUpdate ] = useState('');
 41 | 
 42 |   // State of popup prompts
 43 |   const [ confirmDelete, setConfirmDelete ] = useState(false);
 44 |   const [ confirmUpdate, setConfirmUpdate ] = useState(false);
 45 |   const [ displayMainForm, setDisplayMainForm ] = useState(false);
 46 | 
 47 |   // Handler to update state of controlled main form component values
 48 |   const handleFormChange = (e) => {
 49 |     if (e.target.name === 'activity') {
 50 |       setSelectedActivity(Number(e.target.value));
 51 | 
 52 |       const defaultType = types.filter(type => type.activity_id === Number(e.target.value))[0]._id
 53 |       setSelectedType(defaultType)
 54 | 
 55 |       const defaultDifficulty = difficulties.filter(difficulty => difficulty.type_id === defaultType)[0]._id
 56 |       setSelectedDifficulty(defaultDifficulty)
 57 |     }
 58 |     if (e.target.name === 'type') {
 59 |       setSelectedType(Number(e.target.value));
 60 |       setSelectedDifficulty(difficulties.filter(difficulty => difficulty.type_id === Number(e.target.value))[0]._id)
 61 |     }
 62 |     if (e.target.name === 'difficulty') setSelectedDifficulty(Number(e.target.value));
 63 |     if (e.target.name === 'route') setCurrentRoute(e.target.value);
 64 |     if (e.target.name === 'location')setCurrentLocation(e.target.value);
 65 |     if (e.target.name === 'region') setCurrentRegion(e.target.value);
 66 |     if (e.target.name === 'country') setCurrentCountry(e.target.value);
 67 |     if (e.target.name === 'start-date') setSelectedStartDate(e.target.value);
 68 |     if (e.target.name === 'end-date') setSelectedEndDate(e.target.value);
 69 |     if (e.target.name === 'note') setCurrentNote(e.target.value);
 70 | 
 71 |     if (e.target.id === 'star-1') setSelectedRating(1);
 72 |     if (e.target.id === 'star-2') setSelectedRating(2);
 73 |     if (e.target.id === 'star-3') setSelectedRating(3);
 74 |     if (e.target.id === 'star-4') setSelectedRating(4);
 75 |     if (e.target.id === 'star-5') setSelectedRating(5);
 76 |     if (e.target.id === 'star-clear') setSelectedRating(0);
 77 |   }
 78 | 
 79 |   // Handler to submit controlled main form component values and create new entry record
 80 |   const handleFormSubmit = async (e) => {
 81 |     e.preventDefault();
 82 | 
 83 |     // Create http request body with controlled form component values
 84 |     const entryToCreate = {
 85 |       country: currentCountry,
 86 |       region: currentRegion,
 87 |       location: currentLocation,
 88 |       route: currentRoute,
 89 |       typeId: selectedType,
 90 |       difficultyId: selectedDifficulty,
 91 |       note: currentNote,
 92 |       startDate: selectedStartDate,
 93 |       endDate: selectedEndDate === '' ? null : selectedEndDate,
 94 |       rating: selectedRating
 95 |     }
 96 | 
 97 |     try {
 98 |       // Send POST request
 99 |       const response = await fetch('/entries', {
100 |         method: 'POST',
101 |         headers: {
102 |           'Content-Type': 'application/json'
103 |         },
104 |         body: JSON.stringify(entryToCreate)
105 |       });
106 | 
107 |       if (response.status !== 201) {
108 |         // Throw an error if request is not successful
109 |         const error = await response.json();
110 |         throw new Error(error.message);
111 |       }
112 |       else {
113 |         // If successful, add the created entry to the state of entry records in the correctly sorted position
114 |         const createdEntry = await response.json();
115 | 
116 |         setEntries([...entries, ...createdEntry].sort((a, b) => {
117 |           return new Date(b.start_date) - new Date(a.start_date)
118 |         }));
119 |       
120 |         // Reset controlled form component values
121 |         const defaultActivity = activities[0]._id
122 |         setSelectedActivity(defaultActivity);
123 | 
124 |         const defaultType = types.filter(type => type.activity_id === defaultActivity)[0]._id
125 |         setSelectedType(defaultType);
126 | 
127 |         const defaultDifficulty = difficulties.filter(difficulty => difficulty.type_id === defaultType)[0]._id
128 |         setSelectedDifficulty(defaultDifficulty);
129 | 
130 |         setCurrentRoute('');
131 |         setSelectedRating(0);
132 |         setCurrentLocation('');
133 |         setCurrentRegion('');
134 |         setCurrentCountry('');
135 |         setSelectedStartDate('');
136 |         setSelectedEndDate('');
137 |         setCurrentNote('');
138 |       }
139 |     }
140 |     catch (err) {
141 |       // Console log any caught errors
142 |       console.log(err);
143 |     }
144 |   }
145 | 
146 |   // Handler to display prompt to confirm update
147 |   const handleConfirmUpdate = (entryId) => {
148 |     if (entryId) {
149 |     const selectedEntryForUpdate = entries.filter(entry => entry.entry_id === entryId)[0];
150 | 
151 |     setSelectedActivityForUpdate(selectedEntryForUpdate.activity_id);
152 |     setSelectedTypeForUpdate(selectedEntryForUpdate.type_id);
153 |     setSelectedDifficultyForUpdate(selectedEntryForUpdate.difficulty_id);
154 |     setCurrentRouteForUpdate(selectedEntryForUpdate.route);
155 |     setSelectedRatingForUpdate(selectedEntryForUpdate.rating);
156 |     setCurrentLocationForUpdate(selectedEntryForUpdate.location);
157 |     setCurrentRegionForUpdate(selectedEntryForUpdate.region);
158 |     setCurrentCountryForUpdate(selectedEntryForUpdate.country);
159 |     setSelectedStartDateForUpdate(selectedEntryForUpdate.start_date.substring(0, 10));
160 |     setSelectedEndDateForUpdate(selectedEntryForUpdate.end_date ? selectedEntryForUpdate.end_date.substring(0, 10) : '');
161 |     setCurrentNoteForUpdate(selectedEntryForUpdate.note);
162 |     }
163 | 
164 |     setConfirmUpdate(entryId);
165 |   }
166 | 
167 |   // Handler to update state of controlled update form component values
168 |   const handleUpdateFormChange = (e) => {
169 |     if (e.target.name === 'activity') {
170 |       setSelectedActivityForUpdate(Number(e.target.value));
171 | 
172 |       const defaultType = types.filter(type => type.activity_id === Number(e.target.value))[0]._id
173 |       setSelectedTypeForUpdate(defaultType)
174 | 
175 |       const defaultDifficulty = difficulties.filter(difficulty => difficulty.type_id === defaultType)[0]._id
176 |       setSelectedDifficultyForUpdate(defaultDifficulty)
177 |     }
178 |     if (e.target.name === 'type') {
179 |       setSelectedTypeForUpdate(Number(e.target.value));
180 |       setSelectedDifficultyForUpdate(difficulties.filter(difficulty => difficulty.type_id === Number(e.target.value))[0]._id)
181 |     }
182 |     if (e.target.name === 'difficulty') setSelectedDifficultyForUpdate(Number(e.target.value));
183 |     if (e.target.name === 'route') setCurrentRouteForUpdate(e.target.value);
184 |     if (e.target.name === 'location')setCurrentLocationForUpdate(e.target.value);
185 |     if (e.target.name === 'region') setCurrentRegionForUpdate(e.target.value);
186 |     if (e.target.name === 'country') setCurrentCountryForUpdate(e.target.value);
187 |     if (e.target.name === 'start-date') setSelectedStartDateForUpdate(e.target.value);
188 |     if (e.target.name === 'end-date') setSelectedEndDateForUpdate(e.target.value);
189 |     if (e.target.name === 'note') setCurrentNoteForUpdate(e.target.value);
190 | 
191 |     if (e.target.id === 'star-1') setSelectedRatingForUpdate(1);
192 |     if (e.target.id === 'star-2') setSelectedRatingForUpdate(2);
193 |     if (e.target.id === 'star-3') setSelectedRatingForUpdate(3);
194 |     if (e.target.id === 'star-4') setSelectedRatingForUpdate(4);
195 |     if (e.target.id === 'star-5') setSelectedRatingForUpdate(5);
196 |     if (e.target.id === 'star-clear') setSelectedRatingForUpdate(0);
197 |   }
198 | 
199 |   // Handler to update an entry
200 |   const handleEntryUpdate = async (e) => {
201 |     e.preventDefault();
202 | 
203 |     const entryToUpdate = {
204 |       entryId: confirmUpdate,
205 |       country: currentCountryForUpdate,
206 |       region: currentRegionForUpdate,
207 |       location: currentLocationForUpdate,
208 |       route: currentRouteForUpdate,
209 |       typeId: selectedTypeForUpdate,
210 |       difficultyId: selectedDifficultyForUpdate,
211 |       note: currentNoteForUpdate,
212 |       startDate: selectedStartDateForUpdate,
213 |       endDate: selectedEndDateForUpdate === '' ? null : selectedEndDateForUpdate,
214 |       rating: selectedRatingForUpdate
215 |     };
216 | 
217 |     try {
218 |       const response = await fetch('/entries', {
219 |         method: 'PUT',
220 |         headers: {
221 |           'Content-Type': 'application/json'
222 |         },
223 |         body: JSON.stringify(entryToUpdate)
224 |       })
225 | 
226 |       if (response.status !== 200) {
227 |         // Throw an error if request is not successful
228 |         const error = await response.json();
229 |         throw new Error(error.message);
230 |       }
231 |       else {
232 |         const updatedEntry = await response.json();
233 | 
234 |         const updatedEntries = [
235 |           ...entries.filter(entry => entry.entry_id !== confirmUpdate),
236 |           ...updatedEntry
237 |         ]
238 | 
239 |         setEntries(updatedEntries.sort((a, b) => {
240 |           return new Date(b.start_date) - new Date(a.start_date)
241 |         }));
242 | 
243 |         setConfirmUpdate(false);
244 |       }
245 |     }
246 |     catch (err) {
247 |       console.log(err)
248 |     }
249 |   }
250 | 
251 |   // Handler to display prompt to confirm deletion
252 |   const handleConfirmDelete = (entryId) => {
253 |     setConfirmDelete(entryId);
254 |   }
255 | 
256 |   // Handler to delete an entry
257 |   const handleEntryDelete = async (entryId) => {
258 |     // Create request body with passed in id of the entry
259 |     const entryToDelete = { entryId }
260 | 
261 |     try {
262 |       // Send DELETE request
263 |       const response = await fetch('/entries', {
264 |         method: 'DELETE',
265 |         headers: {
266 |           'Content-Type': 'application/json'
267 |         },
268 |         body: JSON.stringify(entryToDelete)
269 |       })
270 | 
271 |       if (response.status !== 200) {
272 |         // Throw an error if request is not successful
273 |         const error = await response.json();
274 |         throw new Error(error);
275 |       }
276 |       else {
277 |         // If successful, remove deleted entry from rendered list of entries
278 |         setEntries(entries.filter((entry => entry.entry_id !== entryId)));
279 | 
280 |         // Remove confirm prompt
281 |         setConfirmDelete(false);
282 |       }
283 |     }
284 |     catch (err) {
285 |       console.log(err);
286 |     }
287 |   }
288 | 
289 |   // Toggle handler for main form
290 |   const toggleMainForm = () => {
291 |     setDisplayMainForm(!displayMainForm);
292 |   }
293 | 
294 |   const handleStarHover = (e) => {
295 |     if (e.type === 'mouseenter') {
296 |       if (e.target.id === 'star-1') setStarHover(1);
297 |       if (e.target.id === 'star-2') setStarHover(2);
298 |       if (e.target.id === 'star-3') setStarHover(3);
299 |       if (e.target.id === 'star-4') setStarHover(4);
300 |       if (e.target.id === 'star-5') setStarHover(5);
301 |     }
302 |     if (e.type === 'mouseleave') setStarHover(0);
303 |   }
304 | 
305 |   // Fetch and update entry records state on mount
306 |   useEffect(() => {
307 |     const fetchEntries = async () => {
308 |       const response = await fetch('/entries');
309 |       const newEntries = await response.json();
310 |       
311 |       setEntries(newEntries);
312 |     }
313 |     
314 |     fetchEntries();
315 |   }, []);
316 | 
317 |   // Fetch and update form dropdowns state and set initial dropdown selections on mount
318 |   useEffect(() => {
319 |     const fetchDropdowns = async () => {
320 |       const response = await fetch('/form');
321 |       const formDropdowns = await response.json();
322 |       
323 |       setActivities(formDropdowns.activities);
324 |       setTypes(formDropdowns.types);
325 |       setDifficulties(formDropdowns.difficulties.sort((a, b) => a.sort - b.sort));
326 | 
327 |       const defaultActivity = formDropdowns.activities[0]._id
328 |       setSelectedActivity(defaultActivity);
329 | 
330 |       const defaultType = formDropdowns.types.filter(type => type.activity_id === defaultActivity)[0]._id
331 |       setSelectedType(defaultType);
332 | 
333 |       const defaultDifficulty = formDropdowns.difficulties.filter(difficulty => difficulty.type_id === defaultType)[0]._id
334 |       setSelectedDifficulty(defaultDifficulty);
335 |     }
336 | 
337 |     fetchDropdowns();
338 |   }, []);
339 | 
340 |   // render Header, Form, and Entries containers
341 |   return(
342 |     <div id='main-container'>
343 |       <Header />
344 |       <div className="title" onClick={toggleMainForm}>
345 |         <h1 className="">What mountains did you climb today?</h1>
346 |         <img src="./assets/dropdown.svg" width="40px" />
347 |       </div>
348 |       <Form
349 |         activities={activities}
350 |         types={types}
351 |         difficulties={difficulties}
352 |         selectedActivity={selectedActivity}
353 |         selectedType={selectedType}
354 |         selectedDifficulty={selectedDifficulty}
355 |         currentRoute={currentRoute}
356 |         selectedRating={selectedRating}
357 |         currentLocation={currentLocation}
358 |         currentRegion={currentRegion}
359 |         currentCountry={currentCountry}
360 |         selectedStartDate={selectedStartDate}
361 |         selectedEndDate={selectedEndDate}
362 |         currentNote={currentNote}
363 |         handleFormChange={handleFormChange}
364 |         handleFormSubmit={handleFormSubmit}
365 |         displayMainForm={displayMainForm}
366 |         purpose="main"
367 |         handleStarHover={handleStarHover}
368 |         starHover={starHover}
369 |       />
370 |       <div className="bottom-title"></div>
371 |       <Entries
372 |         entries={entries}
373 |         confirmDelete={confirmDelete}
374 |         handleConfirmDelete={handleConfirmDelete}
375 |         handleEntryDelete={handleEntryDelete}
376 |         confirmUpdate={confirmUpdate}
377 |         handleConfirmUpdate={handleConfirmUpdate}
378 |         activities={activities}
379 |         types={types}
380 |         difficulties={difficulties}
381 |         selectedActivityForUpdate={selectedActivityForUpdate}
382 |         selectedTypeForUpdate={selectedTypeForUpdate}
383 |         selectedDifficultyForUpdate={selectedDifficultyForUpdate}
384 |         currentRouteForUpdate={currentRouteForUpdate}
385 |         selectedRatingForUpdate={selectedRatingForUpdate}
386 |         currentLocationForUpdate={currentLocationForUpdate}
387 |         currentRegionForUpdate={currentRegionForUpdate}
388 |         currentCountryForUpdate={currentCountryForUpdate}
389 |         selectedStartDateForUpdate={selectedStartDateForUpdate}
390 |         selectedEndDateForUpdate={selectedEndDateForUpdate}
391 |         currentNoteForUpdate={currentNoteForUpdate}
392 |         handleUpdateFormChange={handleUpdateFormChange}
393 |         handleEntryUpdate={handleEntryUpdate}
394 |         handleStarHover={handleStarHover}
395 |         starHover={starHover}
396 |       />
397 |       <div className='footer'></div>
398 |     </div>
399 |   );
400 | };
401 | 
402 | export default App;
403 | 


--------------------------------------------------------------------------------
/client/assets/dropdown.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
2 | <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3 | <path d="M18 9L12 15L6 9" stroke="#f0e9e1" stroke-width="2"/>
4 | </svg>


--------------------------------------------------------------------------------
/client/assets/mountain.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg  height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 5 | 	 viewBox="0 0 297 297" xml:space="preserve">
 6 | <g>
 7 | 	<path fill="rgb(31,81,63)" d="M288.451,265.476l-26.41-41.502l-17.671,17.671c-2.798,2.796-7.334,2.796-10.132,0l-14.826-14.827l-32.337,16.169
 8 | 		c-1.018,0.509-2.115,0.757-3.202,0.757c-1.859,0-3.692-0.723-5.068-2.098l-16.017-16.017l-21.736,39.849H288.451z"/>
 9 | 	<path fill="rgb(199,55,15)" d="M169.329,183.711l18.421-33.771c4.3-7.883,12.226-12.771,21.201-13.073c8.942-0.299,17.211,4.039,22.033,11.616
10 | 		l29.894,46.976C282.809,178.775,297,152.414,297,122.793c0-50.327-40.943-91.27-91.27-91.27c-42.988,0-79.102,29.884-88.727,69.961
11 | 		L169.329,183.711z"/>
12 | 	<path fill="rgb(244,242,237)" d="M185.284,227.862l32.337-16.169c2.76-1.378,6.089-0.838,8.27,1.341l13.412,13.413l15.013-14.612l-35.42-55.661
13 | 		c-2.071-3.254-5.625-5.135-9.463-4.988c-3.855,0.13-7.259,2.229-9.105,5.614l-30.408,55.749L185.284,227.862z"/>
14 | 	<path fill="rgb(31,81,63)" d="M133.501,186.211c-2.798,2.796-7.334,2.796-10.132,0l-13.412-13.413l-31.89,31.891c-1.395,1.394-3.229,2.098-5.067,2.098
15 | 		c-1.7,0-3.404-0.602-4.765-1.816l-23.706-21.129L0,265.476h124.73l36.761-67.395l-15.501-24.359L133.501,186.211z"/>
16 | 	<path fill="rgb(244,242,237)" d="M72.718,189.774l32.173-32.174c2.798-2.796,7.334-2.796,10.132,0l13.412,13.413l9.674-9.675l-33.966-53.376
17 | 		c-2.071-3.253-5.611-5.146-9.462-4.988c-3.855,0.13-7.259,2.229-9.106,5.615l-34.017,62.365L72.718,189.774z"/>
18 | </g>
19 | </svg>
20 | 
21 | <!-- fill="rgb(31,81,63)" -->
22 | <!-- fill="rgb(244,242,237)" -->


--------------------------------------------------------------------------------
/client/assets/plus.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
2 | <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H11V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H13V4Z" fill="rgb(244,242,237)" />
4 | </svg>


--------------------------------------------------------------------------------
/client/assets/sign.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 3 | <svg width="800px" height="800px" viewBox="4 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-sign-board">
 4 | 
 5 | <title>736</title>
 6 | 
 7 | <defs>
 8 | 
 9 | </defs>
10 | 
11 | <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
12 | 
13 | <g transform="translate(1.000000, 0.000000)" fill="#e8e0d5">
14 | 
15 | <path d="M14.691,2.042 C15.379,2.042 15.937,2.48 15.937,3.021 L15.937,3.021 C15.937,3.562 15.379,4 14.691,4 L4.996,4 C4.308,4 3.75,3.562 3.75,3.021 L3.75,3.021 C3.75,2.48 4.308,2.042 4.996,2.042 L14.691,2.042 L14.691,2.042 Z" class="si-glyph-fill">
16 | 
17 | </path>
18 | 
19 | <path d="M12.993,6.044 L6.965,6.044 C5.839,6.044 5.041,5.953 5.041,7.08 L5.041,11.945 C5.041,13.072 5.954,12.98 7.08,12.98 L12.898,12.98 C14.024,12.98 14.937,13.072 14.937,11.945 L14.937,7.08 C14.938,5.953 14.119,6.044 12.993,6.044 L12.993,6.044 Z" class="si-glyph-fill">
20 | 
21 | </path>
22 | 
23 | <g transform="translate(6.000000, 3.000000)">
24 | 
25 | <rect x="0" y="0" width="0.937" height="2.874" class="si-glyph-fill">
26 | 
27 | </rect>
28 | 
29 | <rect x="7" y="0" width="0.937" height="2.874" class="si-glyph-fill">
30 | 
31 | </rect>
32 | 
33 | </g>
34 | 
35 | </g>
36 | 
37 | </g>
38 | 
39 | </svg>


--------------------------------------------------------------------------------
/client/assets/star.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | 
  3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 | 
  5 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
  6 | <svg fill="#000000" width="800px" height="800px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
  7 | 
  8 | <rect id="Icons" x="-512" y="-192" width="1280" height="800" style="fill:none;"/>
  9 | 
 10 | <g id="Icons1" serif:id="Icons">
 11 | 
 12 | <g id="Strike">
 13 | 
 14 | </g>
 15 | 
 16 | <g id="H1">
 17 | 
 18 | </g>
 19 | 
 20 | <g id="H2">
 21 | 
 22 | </g>
 23 | 
 24 | <g id="H3">
 25 | 
 26 | </g>
 27 | 
 28 | <g id="list-ul">
 29 | 
 30 | </g>
 31 | 
 32 | <g id="hamburger-1">
 33 | 
 34 | </g>
 35 | 
 36 | <g id="hamburger-2">
 37 | 
 38 | </g>
 39 | 
 40 | <g id="list-ol">
 41 | 
 42 | </g>
 43 | 
 44 | <g id="list-task">
 45 | 
 46 | </g>
 47 | 
 48 | <g id="trash">
 49 | 
 50 | </g>
 51 | 
 52 | <g id="vertical-menu">
 53 | 
 54 | </g>
 55 | 
 56 | <g id="horizontal-menu">
 57 | 
 58 | </g>
 59 | 
 60 | <g id="sidebar-2">
 61 | 
 62 | </g>
 63 | 
 64 | <g id="Pen">
 65 | 
 66 | </g>
 67 | 
 68 | <g id="Pen1" serif:id="Pen">
 69 | 
 70 | </g>
 71 | 
 72 | <g id="clock">
 73 | 
 74 | </g>
 75 | 
 76 | <g id="external-link">
 77 | 
 78 | </g>
 79 | 
 80 | <g id="hr">
 81 | 
 82 | </g>
 83 | 
 84 | <g id="info">
 85 | 
 86 | </g>
 87 | 
 88 | <g id="warning">
 89 | 
 90 | </g>
 91 | 
 92 | <g id="plus-circle">
 93 | 
 94 | </g>
 95 | 
 96 | <g id="minus-circle">
 97 | 
 98 | </g>
 99 | 
100 | <g id="vue">
101 | 
102 | </g>
103 | 
104 | <g id="cog">
105 | 
106 | </g>
107 | 
108 | <g id="logo">
109 | 
110 | </g>
111 | 
112 | <path id="star" d="M32.001,9.188l5.666,17.438l18.335,0l-14.833,10.777l5.666,17.438l-14.834,-10.777l-14.833,10.777l5.666,-17.438l-14.834,-10.777l18.335,0l5.666,-17.438Z"/>
113 | 
114 | <g id="radio-check">
115 | 
116 | </g>
117 | 
118 | <g id="eye-slash">
119 | 
120 | </g>
121 | 
122 | <g id="eye">
123 | 
124 | </g>
125 | 
126 | <g id="toggle-off">
127 | 
128 | </g>
129 | 
130 | <g id="shredder">
131 | 
132 | </g>
133 | 
134 | <g id="spinner--loading--dots-" serif:id="spinner [loading, dots]">
135 | 
136 | </g>
137 | 
138 | <g id="react">
139 | 
140 | </g>
141 | 
142 | <g id="check-selected">
143 | 
144 | </g>
145 | 
146 | <g id="turn-off">
147 | 
148 | </g>
149 | 
150 | <g id="code-block">
151 | 
152 | </g>
153 | 
154 | <g id="user">
155 | 
156 | </g>
157 | 
158 | <g id="coffee-bean">
159 | 
160 | </g>
161 | 
162 | <g id="coffee-beans">
163 | 
164 | <g id="coffee-bean1" serif:id="coffee-bean">
165 | 
166 | </g>
167 | 
168 | </g>
169 | 
170 | <g id="coffee-bean-filled">
171 | 
172 | </g>
173 | 
174 | <g id="coffee-beans-filled">
175 | 
176 | <g id="coffee-bean2" serif:id="coffee-bean">
177 | 
178 | </g>
179 | 
180 | </g>
181 | 
182 | <g id="clipboard">
183 | 
184 | </g>
185 | 
186 | <g id="clipboard-paste">
187 | 
188 | </g>
189 | 
190 | <g id="clipboard-copy">
191 | 
192 | </g>
193 | 
194 | <g id="Layer1">
195 | 
196 | </g>
197 | 
198 | </g>
199 | 
200 | </svg>


--------------------------------------------------------------------------------
/client/assets/x.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
3 | <svg fill="rgb(175,175,175)" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
4 | <title>cancel2</title>
5 | <path d="M19.587 16.001l6.096 6.096c0.396 0.396 0.396 1.039 0 1.435l-2.151 2.151c-0.396 0.396-1.038 0.396-1.435 0l-6.097-6.096-6.097 6.096c-0.396 0.396-1.038 0.396-1.434 0l-2.152-2.151c-0.396-0.396-0.396-1.038 0-1.435l6.097-6.096-6.097-6.097c-0.396-0.396-0.396-1.039 0-1.435l2.153-2.151c0.396-0.396 1.038-0.396 1.434 0l6.096 6.097 6.097-6.097c0.396-0.396 1.038-0.396 1.435 0l2.151 2.152c0.396 0.396 0.396 1.038 0 1.435l-6.096 6.096z"></path>
6 | </svg>


--------------------------------------------------------------------------------
/client/components/confirm-delete-prompt.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const ConfirmDeletePrompt = (props) => {
 4 |   const { confirmDelete,
 5 |     handleEntryDelete,
 6 |     handleConfirmDelete
 7 |   } = props;
 8 | 
 9 |   const displayStyle = {
10 |     display: confirmDelete ? 'flex' : 'none'
11 |   }
12 | 
13 |   return (
14 |     <div className="prompt-bg" style={displayStyle}>
15 |       <div className="prompt">
16 |         <p>Are you sure you want to delete this entry?</p>
17 |         <div className="delete-buttons">
18 |           <button onClick={() => handleEntryDelete(confirmDelete)}>Yes</button>
19 |           <button onClick={() => handleConfirmDelete(false)}>No</button>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   );
24 | }
25 | 
26 | export default ConfirmDeletePrompt;
27 | 


--------------------------------------------------------------------------------
/client/components/confirm-update-prompt.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Form from '../containers/form.jsx'
 3 | 
 4 | const ConfirmUpdatePrompt = (props) => {
 5 |   const {
 6 |     confirmUpdate,
 7 |     handleConfirmUpdate,
 8 |     activities,
 9 |     types,
10 |     difficulties,
11 |     selectedActivityForUpdate,
12 |     selectedTypeForUpdate,
13 |     selectedDifficultyForUpdate,
14 |     currentRouteForUpdate,
15 |     selectedRatingForUpdate,
16 |     currentLocationForUpdate,
17 |     currentRegionForUpdate,
18 |     currentCountryForUpdate,
19 |     selectedStartDateForUpdate,
20 |     selectedEndDateForUpdate,
21 |     currentNoteForUpdate,
22 |     handleUpdateFormChange,
23 |     handleEntryUpdate,
24 |     handleStarHover,
25 |     starHover
26 |   } = props;
27 | 
28 |   const displayStyle = {
29 |     display: confirmUpdate ? 'flex' : 'none'
30 |   }
31 | 
32 |   const form = confirmUpdate 
33 |     ? <Form
34 |         activities={activities}
35 |         types={types}
36 |         difficulties={difficulties}
37 |         selectedActivity={selectedActivityForUpdate}
38 |         selectedType={selectedTypeForUpdate}
39 |         selectedDifficulty={selectedDifficultyForUpdate}
40 |         currentRoute={currentRouteForUpdate}
41 |         selectedRating={selectedRatingForUpdate}
42 |         currentLocation={currentLocationForUpdate}
43 |         currentRegion={currentRegionForUpdate}
44 |         currentCountry={currentCountryForUpdate}
45 |         selectedStartDate={selectedStartDateForUpdate}
46 |         selectedEndDate={selectedEndDateForUpdate}
47 |         currentNote={currentNoteForUpdate}
48 |         handleFormChange={handleUpdateFormChange}
49 |         handleFormSubmit={handleEntryUpdate}
50 |         displayMainForm={true}
51 |         purpose="update"
52 |         handleStarHover={handleStarHover}
53 |         starHover={starHover}
54 |       />
55 |     : null
56 | 
57 |   return (
58 |     <div className="prompt-bg" style={displayStyle}>
59 |       <div className="prompt" style={displayStyle}>
60 |         <svg className="cancel" onClick={() => handleConfirmUpdate(false)} width="40px" height="40" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
61 |           <path d="M19.587 16.001l6.096 6.096c0.396 0.396 0.396 1.039 0 1.435l-2.151 2.151c-0.396 0.396-1.038 0.396-1.435 0l-6.097-6.096-6.097 6.096c-0.396 0.396-1.038 0.396-1.434 0l-2.152-2.151c-0.396-0.396-0.396-1.038 0-1.435l6.097-6.096-6.097-6.097c-0.396-0.396-0.396-1.039 0-1.435l2.153-2.151c0.396-0.396 1.038-0.396 1.434 0l6.096 6.097 6.097-6.097c0.396-0.396 1.038-0.396 1.435 0l2.151 2.152c0.396 0.396 0.396 1.038 0 1.435l-6.096 6.096z"></path>
62 |         </svg>
63 |         {/* <img className="cancel" src="./assets/x.svg" width="40px" onClick={() => handleConfirmUpdate(false)} /> */}
64 |         {form}
65 |       </div>
66 |     </div>
67 |   );
68 | }
69 | 
70 | export default ConfirmUpdatePrompt;
71 | 


--------------------------------------------------------------------------------
/client/components/entry.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | /* -- ENTRY COMPONENT -- */
  4 | const Entry= (props) => {
  5 |   const { 
  6 |     id, 
  7 |     startYear, 
  8 |     startMonth, 
  9 |     startDay, 
 10 |     endYear, 
 11 |     endMonth, 
 12 |     endDay, 
 13 |     activity, 
 14 |     type, 
 15 |     route, 
 16 |     difficulty, 
 17 |     rating, 
 18 |     location, 
 19 |     region, 
 20 |     country, 
 21 |     note, 
 22 |     timestamp,
 23 |     displayFirstMonth,
 24 |     displayLastMonth,
 25 |     handleConfirmUpdate,
 26 |     handleConfirmDelete
 27 |   } = props;
 28 | 
 29 |   let starRating = [];
 30 | 
 31 |   for (let i = 0; i < rating; i++) {
 32 |     starRating.push(
 33 |       <svg key={i} fill="rgb(74,74,74)" width="17px" height="18px" viewBox="0 0 58 58">
 34 |         <path id="star" d="M32.001,9.188l5.666,17.438l18.335,0l-14.833,10.777l5.666,17.438l-14.834,-10.777l-14.833,10.777l5.666,-17.438l-14.834,-10.777l18.335,0l5.666,-17.438Z"/>
 35 |       </svg>
 36 |     );
 37 |   }
 38 | 
 39 |   return (
 40 |     <div className="entry">
 41 | 
 42 |       <div className={displayFirstMonth ? "entry-start-container month-banner-start" : "entry-item-start-container"}>
 43 |         <span className="entry-start-month">{
 44 |           displayFirstMonth 
 45 |             ? endMonth
 46 |               ? endMonth
 47 |               : startMonth 
 48 |             : null
 49 |           }</span>
 50 |         <span className="entry-start-year">{
 51 |           displayFirstMonth 
 52 |             ? endYear
 53 |               ? endYear
 54 |               : startYear
 55 |             : null
 56 |         }</span>
 57 |       </div>
 58 | 
 59 |       <div className="entry-start-day">
 60 |         <span>{endDay ? endDay : startDay}</span>
 61 |       </div>
 62 | 
 63 |       <div className="entry-header">
 64 |         <h1>{`${location} - ${region}, ${country}`}</h1>
 65 |         <h2>{activity}</h2>
 66 |         <h3>{`${route} - ${type} (${difficulty})`}</h3>
 67 |         {starRating}
 68 |       </div>
 69 | 
 70 |       <div className={displayLastMonth ? "entry-end-container month-banner-end" : "entry-end-container"}>
 71 |         <span className="entry-end-month">{displayLastMonth ? startMonth : null}</span>
 72 |         <span className="entry-end-year">{displayLastMonth ? startYear : null}</span>
 73 |       </div>
 74 | 
 75 |       <div className="entry-end-day">
 76 |         <span>{endDay ? startDay : endDay}</span>
 77 |       </div>
 78 | 
 79 |       <div className="entry-content">
 80 |         <p>{note}</p>
 81 |         <small>{`Posted on ${timestamp}`}</small>
 82 |       </div>
 83 | 
 84 |       <button className="entry-buttons entry-edit" onClick={() => handleConfirmUpdate(id)}>
 85 |         <svg fill="rgb(64,64,64)" height="20px" width="20px" viewBox="0 0 306.637 306.637">
 86 |           <path d="M12.809,238.52L0,306.637l68.118-12.809l184.277-184.277l-55.309-55.309L12.809,238.52z M60.79,279.943l-41.992,7.896
 87 |             l7.896-41.992L197.086,75.455l34.096,34.096L60.79,279.943z"/>
 88 |           <path d="M251.329,0l-41.507,41.507l55.308,55.308l41.507-41.507L251.329,0z M231.035,41.507l20.294-20.294l34.095,34.095
 89 |             L265.13,75.602L231.035,41.507z"/>
 90 |         </svg>
 91 |       </button>
 92 | 
 93 |       <button className="entry-buttons entry-delete" onClick={() => handleConfirmDelete(id)}>
 94 |         <svg fill="rgb(84,84,84)" width="20px" height="20px" viewBox="0 0 485 485">
 95 |           <rect x="67.224" width="350.535" height="71.81"/>
 96 |           <path d="M417.776,92.829H67.237V485h350.537V92.829H417.776z M165.402,431.447h-28.362V146.383h28.362V431.447z M256.689,431.447
 97 |             h-28.363V146.383h28.363V431.447z M347.97,431.447h-28.361V146.383h28.361V431.447z"/>
 98 |         </svg>
 99 |       </button>
100 |     </div>
101 |   );
102 | }
103 | 
104 | export default Entry;
105 | 


--------------------------------------------------------------------------------
/client/containers/entries.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Entry from '../components/entry.jsx';
  3 | import ConfirmDeletePrompt from '../components/confirm-delete-prompt.jsx';
  4 | import ConfirmUpdatePrompt from '../components/confirm-update-prompt.jsx';
  5 | 
  6 | const Entries = (props) => {
  7 |   // Destructure entries from state
  8 |   const { 
  9 |     entries,
 10 |     confirmDelete,
 11 |     handleConfirmDelete, 
 12 |     handleEntryDelete,
 13 |     confirmUpdate,
 14 |     handleConfirmUpdate,
 15 |     activities,
 16 |     types,
 17 |     difficulties,
 18 |     selectedActivityForUpdate,
 19 |     selectedTypeForUpdate,
 20 |     selectedDifficultyForUpdate,
 21 |     currentRouteForUpdate,
 22 |     selectedRatingForUpdate,
 23 |     currentLocationForUpdate,
 24 |     currentRegionForUpdate,
 25 |     currentCountryForUpdate,
 26 |     selectedStartDateForUpdate,
 27 |     selectedEndDateForUpdate,
 28 |     currentNoteForUpdate,
 29 |     handleUpdateFormChange,
 30 |     handleEntryUpdate,
 31 |     handleStarHover,
 32 |     starHover
 33 |   } = props;
 34 | 
 35 |   let previousStartMonth;
 36 |   let previousEndMonth;
 37 | 
 38 |   const entryItemList = entries.map(entry => {
 39 |     const startDate = new Date(entry.start_date);
 40 |     const endDate = entry.end_date !== null ? new Date(entry.end_date) : null;
 41 |     const timestamp = new Date(entry.post_date).toLocaleString();
 42 | 
 43 |     let displayFirstMonth;
 44 |     let displayLastMonth;
 45 |     const currentStartMonth = startDate.getMonth()
 46 |     const currentEndMonth = endDate !== null ? endDate.getMonth() : null
 47 | 
 48 |     if (currentEndMonth === null) {
 49 |       if (previousStartMonth === undefined || previousStartMonth !== currentStartMonth) displayFirstMonth = true;
 50 |       else displayFirstMonth = false;
 51 |       displayLastMonth = false;
 52 |     }
 53 |     if (currentEndMonth !== null) {
 54 |       if (currentStartMonth !== currentEndMonth) displayLastMonth = true
 55 |       else displayLastMonth = false;
 56 | 
 57 |       if (previousStartMonth === undefined || currentEndMonth !== previousStartMonth) displayFirstMonth = true;
 58 |       else displayFirstMonth = false;
 59 |     }
 60 | 
 61 |     previousStartMonth = currentStartMonth;
 62 |     previousEndMonth = currentEndMonth;
 63 |     
 64 |     return (
 65 |       <Entry
 66 |         id={entry.entry_id}
 67 |         key={entry.entry_id}
 68 |         startYear={startDate.toLocaleString('default', { year: 'numeric' })}
 69 |         startMonth={startDate.toLocaleString('default', { month: 'short' }).toUpperCase()}
 70 |         startDay={startDate.toLocaleString('default', { day: 'numeric' })}
 71 |         endYear={endDate ? endDate.toLocaleString('default', { year: 'numeric' }) : null}
 72 |         endMonth={endDate ? endDate.toLocaleString('default', { month: 'short' }).toUpperCase() : null}
 73 |         endDay={endDate ? endDate.toLocaleString('default', { day: 'numeric' }) : null}
 74 |         activity={entry.activity}
 75 |         type={entry.type}
 76 |         route={entry.route}
 77 |         difficulty={entry.difficulty}
 78 |         rating={entry.rating}
 79 |         location={entry.location}
 80 |         region={entry.region}
 81 |         country={entry.country}
 82 |         note={entry.note}
 83 |         timestamp={timestamp}
 84 |         displayFirstMonth={displayFirstMonth}
 85 |         displayLastMonth={displayLastMonth}
 86 |         handleConfirmUpdate={handleConfirmUpdate}
 87 |         handleConfirmDelete={handleConfirmDelete}
 88 |       />
 89 |     );
 90 |   });
 91 | 
 92 |   // render entry items
 93 |   return(
 94 |     <div id="entry-container">
 95 |       {entryItemList}
 96 |       <ConfirmUpdatePrompt
 97 |         confirmUpdate={confirmUpdate}
 98 |         handleConfirmUpdate={handleConfirmUpdate}
 99 |         activities={activities}
100 |         types={types}
101 |         difficulties={difficulties}
102 |         selectedActivityForUpdate={selectedActivityForUpdate}
103 |         selectedTypeForUpdate={selectedTypeForUpdate}
104 |         selectedDifficultyForUpdate={selectedDifficultyForUpdate}
105 |         currentRouteForUpdate={currentRouteForUpdate}
106 |         selectedRatingForUpdate={selectedRatingForUpdate}
107 |         currentLocationForUpdate={currentLocationForUpdate}
108 |         currentRegionForUpdate={currentRegionForUpdate}
109 |         currentCountryForUpdate={currentCountryForUpdate}
110 |         selectedStartDateForUpdate={selectedStartDateForUpdate}
111 |         selectedEndDateForUpdate={selectedEndDateForUpdate}
112 |         currentNoteForUpdate={currentNoteForUpdate}
113 |         handleUpdateFormChange={handleUpdateFormChange}
114 |         handleEntryUpdate={handleEntryUpdate}
115 |         handleStarHover={handleStarHover}
116 |         starHover={starHover}
117 |       />
118 |       <ConfirmDeletePrompt
119 |         confirmDelete={confirmDelete}
120 |         handleConfirmDelete={handleConfirmDelete}
121 |         handleEntryDelete={handleEntryDelete}
122 |       />
123 |     </div>
124 |   );
125 | }
126 | 
127 | export default Entries;
128 | 


--------------------------------------------------------------------------------
/client/containers/form.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | /* -- FORM CONTAINER -- */
  4 | const Form = (props) => {
  5 |   // Destructure drilled props: dropdown options, controlled form component values, handlers
  6 |   const { 
  7 |     activities,
  8 |     types, 
  9 |     difficulties, 
 10 |     selectedActivity, 
 11 |     selectedType,
 12 |     selectedDifficulty,
 13 |     currentRoute,
 14 |     selectedRating,
 15 |     currentLocation,
 16 |     currentRegion,
 17 |     currentCountry,
 18 |     selectedStartDate,
 19 |     selectedEndDate,
 20 |     currentNote,
 21 |     handleFormChange, 
 22 |     handleFormSubmit,
 23 |     displayMainForm,
 24 |     purpose,
 25 |     handleStarHover,
 26 |     starHover
 27 |   } = props;
 28 | 
 29 |   // Create dropdown options for activities, types and difficulties based on state values
 30 |   const activitiesList = activities.map(activity => {
 31 |     return (
 32 |       <option key={activity._id} value={activity._id}>{activity.activity}</option>
 33 |     );
 34 |   })
 35 | 
 36 |   const typesList = types.filter(type => type.activity_id === Number(selectedActivity))
 37 |     .map(type => {
 38 |       return (
 39 |         <option key={type._id} value={type._id}>{type.type}</option>
 40 |       );
 41 |     });
 42 | 
 43 |   const difficultiesList = difficulties.filter(difficulty => difficulty.type_id === Number(selectedType))
 44 |     .map(difficulty => {
 45 |       return (
 46 |         <option key={difficulty._id} value={difficulty._id}>{difficulty.difficulty}</option>
 47 |       );
 48 |     })
 49 | 
 50 |   // Set placeholder value for route field of form based on the currently selected type
 51 |   let convention; 
 52 |   if (types[0]) convention = types.filter(type => type._id === Number(selectedType))[0].convention;
 53 | 
 54 |   const displayStyle = {
 55 |     maxHeight: displayMainForm ? '475px' : '0px',
 56 |     backgroundColor: purpose === 'main' ? '#e8e0d5' : 'rgb(244,242,237)'
 57 |   }
 58 | 
 59 |   const submitText = purpose === 'main' ? 'LOG' : 'FIX';
 60 | 
 61 |   // set up star ratings for form
 62 |   let starRating = [];
 63 |   for (let i = 1; i <= 5; i++) {
 64 |     starRating.push(
 65 |       <svg
 66 |         key={i}
 67 |         id={`star-${i}`}
 68 |         className="form-star"
 69 |         onClick={handleFormChange}
 70 |         onMouseEnter={handleStarHover}
 71 |         onMouseLeave={handleStarHover}
 72 |         width="25px" 
 73 |         height="25px" 
 74 |         viewBox="5 5 58 58" 
 75 |         fill={starHover >= i || selectedRating >= i ? "rgb(31,81,63)" : "rgb(150,150,150)"}
 76 |       >
 77 |         <path d="M32.001,9.188l5.666,17.438l18.335,0l-14.833,10.777l5.666,17.438l-14.834,-10.777l-14.833,10.777l5.666,-17.438l-14.834,-10.777l18.335,0l5.666,-17.438Z"/>
 78 |       </svg>
 79 |     );
 80 |   }
 81 | 
 82 |   if (selectedRating !== 0) starRating.push(
 83 |     <span key="clear" id="star-clear" className="form-star-clear" onClick={handleFormChange}>Clear</span>
 84 |   );
 85 | 
 86 |   // Render component with dropdown lists, controlled form component values and handlers
 87 |   return (
 88 |     <div className="form-container" style={displayStyle}>
 89 |       <form>
 90 |         
 91 |         <div className="form-row">
 92 |           <svg className="addRowButton" width="20px" height="20px" viewBox="0 0 24 24" fill="none">
 93 |             <path fillRule="evenodd" clipRule="evenodd" d="M13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H11V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H13V4Z" fill="rgb(31, 125, 63)" />
 94 |           </svg>
 95 | 
 96 |           <input 
 97 |             className="form-input form-location" 
 98 |             type="text" 
 99 |             name="location" 
100 |             placeholder="Location" 
101 |             value={currentLocation} 
102 |             onChange={handleFormChange} 
103 |             autoComplete="off"
104 |           />
105 | 
106 |           <input 
107 |             className="form-input form-region" 
108 |             type="text" 
109 |             name="region" 
110 |             placeholder="Region" 
111 |             value={currentRegion} 
112 |             onChange={handleFormChange}
113 |             autoComplete="off"
114 |           />
115 | 
116 |           <input 
117 |             className="form-input form-country" 
118 |             type="text" 
119 |             name="country" 
120 |             placeholder="Country" 
121 |             value={currentCountry} 
122 |             onChange={handleFormChange}
123 |             autoComplete="off"
124 |           />
125 |         </div>
126 | 
127 |         <div className="small-gap"></div>
128 | 
129 |         <div className='route-row'>
130 |           <div className="form-row">
131 |             <svg className="addRowButton" width="20px" height="20px" viewBox="0 0 24 24" fill="none">
132 |               <path fillRule="evenodd" clipRule="evenodd" d="M13 4C13 3.44772 12.5523 3 12 3C11.4477 3 11 3.44772 11 4V11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H11V20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20V13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H13V4Z" fill="rgb(31, 125, 63)" />
133 |             </svg>
134 | 
135 |             <select className="form-input form-activity" name="activity" value={selectedActivity} onChange={handleFormChange}>
136 |               {activitiesList}
137 |             </select>
138 | 
139 |             <select className="form-input form-type" name="type" value={selectedType} onChange={handleFormChange}>
140 |                 {typesList}
141 |             </select>
142 | 
143 |             <input 
144 |               className="form-input form-route" 
145 |               type="text"  
146 |               name="route" 
147 |               placeholder={convention} 
148 |               value={currentRoute} 
149 |               onChange={handleFormChange} 
150 |               autoComplete="off"
151 |             />
152 |           </div>
153 |         
154 |           <div className="form-row form-row-rating">
155 |             <select className="form-input form-difficulty"  name="difficulty" value={selectedDifficulty} onChange={handleFormChange}>
156 |               {difficultiesList}
157 |             </select>
158 | 
159 |             {starRating}
160 |           </div>
161 |         </div>
162 | 
163 |         <div className="big-gap"></div>
164 | 
165 |         <div className="form-row">
166 |           <label htmlFor="start-date">Start Date</label>
167 |           <input 
168 |             type="date" 
169 |             className="form-input form-start-date" 
170 |             name="start-date" 
171 |             value={selectedStartDate} 
172 |             onChange={handleFormChange} 
173 |           />
174 | 
175 |           <label htmlFor="end-date">End Date</label>
176 |           <input 
177 |             type="date" 
178 |             className="form-input form-end-date" 
179 |             name="end-date" 
180 |             value={selectedEndDate} 
181 |             onChange={handleFormChange} 
182 |           />
183 |         </div>
184 | 
185 |         <textarea 
186 |           className='form-row form-input form-note' 
187 |           name='note' 
188 |           placeholder="Scribbles..." 
189 |           value={currentNote} 
190 |           onChange={handleFormChange}>
191 |         </textarea>
192 |         {/* <input className="test" type="file" accept="image/*"></input> */}
193 |         <div className="form-submit-container">
194 |           <button className="form-submit" onClick={handleFormSubmit}>
195 |             <img src="./assets/plus.svg" width="18px"/>
196 |             {submitText}
197 |           </button>
198 |         </div>
199 | 
200 |       </form>
201 |     </div>
202 |   );
203 | }
204 | 
205 | export default Form;
206 | 


--------------------------------------------------------------------------------
/client/containers/header.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | /* -- HEADER CONTAINER -- */
 4 | const Header = (props) => {
 5 |   return(
 6 |     <div id="header">
 7 |       <div id="header-container">
 8 |         <img src="./assets/mountain.svg" width="50"/>
 9 |         <h1>ut & About</h1>
10 |       </div>
11 |     </div>
12 |   );
13 | }
14 | 
15 | export default Header;
16 | 


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 |   <head>
 6 |     <meta charset="UTF-8">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <title>Out & About</title>
 9 |     <link rel="icon" type="image/x-icon" href="./assets/mountain.svg">
10 |     <link rel="stylesheet" href="./stylesheets/styles.css">
11 |   </head>
12 | 
13 |   <body>
14 |     <div id="root"></div>
15 |   </body>
16 | 
17 |   <script src="./build/bundle.js"></script>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import App from './app.jsx'
4 | 
5 | const root = createRoot(document.getElementById('root'));
6 | root.render(<App />)
7 | 


--------------------------------------------------------------------------------
/client/stylesheets/entries.css:
--------------------------------------------------------------------------------
  1 | /* entry item grid layout */
  2 | #entry-container {
  3 |   width: 900px;
  4 |   margin: auto;
  5 | }
  6 | 
  7 | .entry {
  8 |   display: grid;
  9 |   grid-template-columns: 80px 60px 660px 50px 50px;
 10 |   border-top: 2px solid #e8e0d5;
 11 | }
 12 | 
 13 | /* start month/year */
 14 | .month-banner-start {
 15 |   background: url(../assets/sign.svg);
 16 |   background-size: 100px;
 17 |   background-repeat: no-repeat;
 18 | }
 19 | 
 20 | .month-banner-end {
 21 |   background: url(../assets/sign.svg);
 22 |   background-size: 100px;
 23 |   background-repeat: no-repeat;
 24 |   background-position: bottom left;
 25 | }
 26 | 
 27 | .entry-start-container {
 28 |   display: flex;
 29 |   flex-direction: column;
 30 |   justify-content: start;
 31 |   align-items: center;
 32 |   grid-column: 1;
 33 | }
 34 | 
 35 | .entry-start-container span {
 36 |   position: relative;
 37 |   top: 42px;
 38 |   left: 1px;
 39 |   display: block;
 40 |   font-family: Arial, Helvetica, sans-serif;
 41 |   color: rgb(120,120,120);
 42 | }
 43 | 
 44 | .entry-start-month {
 45 |   font-size: 18px;
 46 | }
 47 | 
 48 | .entry-start-year {
 49 |   font-size: 11px;
 50 | }
 51 | 
 52 | /* start day */
 53 | .entry-start-day {
 54 |   display: flex;
 55 |   flex-direction: column;
 56 |   justify-content: start;
 57 |   align-items: center;
 58 |   grid-column: 2;
 59 |   grid-row: 1;
 60 |   font-weight: bold;
 61 |   color: rgb(44,44,44);
 62 | }
 63 | 
 64 | .entry-start-day span { 
 65 |   position: relative;
 66 |   top: 43px;
 67 |   display: block;
 68 |   font-family: Arial, Helvetica, sans-serif;
 69 |   font-size: 28px; 
 70 | }
 71 | 
 72 | /* end month/year */
 73 | .entry-end-container {
 74 |   display: flex;
 75 |   flex-direction: column;
 76 |   justify-content: end;
 77 |   align-items: center;
 78 |   grid-column: 1;
 79 |   grid-row: 2;
 80 |   min-height: 100px;
 81 | }
 82 | 
 83 | .entry-end-container span {
 84 |   position: relative;
 85 |   bottom: 25px;
 86 |   left: 1px;
 87 |   display: block;
 88 |   font-family: Arial, Helvetica, sans-serif;
 89 |   color: rgb(120,120,120);
 90 | }
 91 | 
 92 | .entry-end-month {
 93 |   font-size: 18px;
 94 | }
 95 | 
 96 | .entry-end-year {
 97 |   font-size: 11px;
 98 | }
 99 | 
100 | /* end day */
101 | .entry-end-day {
102 |   display: flex;
103 |   flex-direction: column;
104 |   justify-content: end;
105 |   align-items: center;
106 |   grid-column: 2;
107 |   grid-row: 2;
108 |   font-weight: bold;
109 |   color: rgb(44,44,44);
110 | }
111 | 
112 | .entry-end-day span {
113 |   position: relative;
114 |   bottom: 23px;
115 |   display: block;
116 |   font-family: Arial, Helvetica, sans-serif;
117 |   font-size: 28px; 
118 | }
119 | 
120 | /* row 1 */
121 | .entry-header {
122 |   grid-column: 3;
123 |   grid-row: 1;
124 |   font-family: Arial, Helvetica, sans-serif;
125 |   color: rgb(82,79,77);
126 |   margin-left: 10px;
127 |   margin-right: 20px;
128 | }
129 | 
130 | .entry-header h1 {
131 |   margin-top: 10px;
132 |   font-size: 22px;
133 |   color: rgb(54,54,54)
134 | }
135 | 
136 | .entry-header h2 {
137 |   margin-bottom: 5px;
138 |   font-size: 20px;
139 |   color: rgb(64,64,64)
140 | }
141 | 
142 | .entry-header h3 {
143 |   margin-top: 5px;
144 |   margin-bottom: 5px;
145 |   margin-right: 10px;
146 |   font-size: 16px;
147 |   margin-left: 15px;
148 |   color: rgb(74,74,74);
149 |   display: inline;
150 | }
151 | 
152 | .entry-header svg {
153 |   position: relative;
154 |   top: 2px;
155 | }
156 | 
157 | /* row 2 */
158 | .entry-content {
159 |   grid-column: 3;
160 |   grid-row: 2;
161 |   font-family: Arial, Helvetica, sans-serif;
162 |   color: rgb(82,79,77);
163 | }
164 | 
165 | .entry-content p {
166 |   margin-top: 10px;
167 |   color: rgb(44,44,44);
168 |   margin-right: 20px;
169 |   margin-left: 10px;
170 | }
171 | 
172 | .entry-content small {
173 |   font-size: 10px;
174 |   display: block;
175 |   text-align: end;
176 |   margin: 5px;
177 |   color: rgb(104,104,104)
178 | }
179 | 
180 | /* entry buttons */
181 | .entry-buttons {
182 |   grid-row: 3;
183 |   grid-row: 1 / 5;
184 |   background-color: #e8e0d5;
185 |   border: none;
186 |   transition: background-color 0.3s;
187 |   cursor: pointer;
188 | }
189 | 
190 | .entry-buttons:hover {
191 |   background-color: #e7d7c1;
192 | }
193 | 
194 | .entry-buttons:hover svg {
195 |   transition: fill 0.3s;
196 | }
197 | 
198 | .entry-buttons:hover svg {
199 |   fill: rgb(44,44,44);
200 | }
201 | 
202 | .entry-edit {
203 |   grid-column: 4;
204 | }
205 | 
206 | .entry-delete {
207 |   grid-column: 5;
208 | }
209 | 
210 | /* confirm delete prompt */
211 | .prompt-bg {
212 |   position: fixed;
213 |   top: 0px;
214 |   left: 0px;
215 |   width: 100%;
216 |   height: 100%;
217 |   justify-content: center;
218 |   align-items: center;
219 |   background-color: rgba(0,0,0,0.8);
220 | }
221 | 
222 | .prompt {
223 |   display: flex;
224 |   flex-direction: column;
225 |   align-items: end;
226 |   background-color: rgb(244,242,237);
227 |   border-radius: 5px;
228 |   padding: 10px;
229 | }
230 | 
231 | .cancel {
232 |   position: relative;
233 |   right: 25px;
234 |   top: 10px;
235 |   fill: rgb(175,175,175);
236 |   transition: fill 0.2s;
237 | }
238 | 
239 | .cancel:hover {
240 |   fill: rgb(100,100,100);
241 |   cursor: pointer;
242 | }
243 | 
244 | .delete-buttons {
245 |   display: flex;
246 | }
247 | 
248 | .delete-buttons button {
249 |   padding: 7px 15px;
250 |   margin: 5px 5px;
251 |   background-color: transparent;
252 |   font-size: 16px;
253 |   border: 1px solid black;
254 |   border-radius: 5px;
255 |   cursor: pointer;
256 |   transition: background-color 0.3s;
257 | }
258 | 
259 | .delete-buttons button:hover {
260 |   background-color: #e8e0d5;
261 | }
262 | 
263 | .prompt p {
264 |   font-family: Arial, Helvetica, sans-serif;
265 |   font-size: 16px;
266 | }


--------------------------------------------------------------------------------
/client/stylesheets/form-styles.css:
--------------------------------------------------------------------------------
  1 | /* general styles */
  2 | label {
  3 |   margin-right: 10px;
  4 |   font-size: 16px;
  5 |   color: rgb(41,41,41);
  6 | }
  7 | 
  8 | .form-container {
  9 |   width: 900px;
 10 |   margin: 0px auto;
 11 |   padding: 0px 15px 0px 15px;
 12 |   background-color: #e8e0d5;
 13 |   font-family: Arial, Helvetica, sans-serif;
 14 |   overflow: hidden;
 15 |   transition: max-height 0.3s ease-out;
 16 | }
 17 | 
 18 | .form-row {
 19 |   margin-top: 10px;
 20 |   padding: 1px;
 21 | }
 22 | 
 23 | .form-row-rating {
 24 |   margin-left: 27px;
 25 | }
 26 | 
 27 | .form-input {
 28 |   padding: 7px;
 29 |   font-size: 16px;
 30 |   border-radius: 5px;
 31 |   background-color: rgba(253,253,252);
 32 |   color: rgb(41,41,41);
 33 |   border: none;
 34 |   box-shadow: 0px 0px 2px rgb(114,108,99);
 35 |   margin-right: 10px;
 36 | }
 37 | 
 38 | .form-input:focus {
 39 |   outline: none;
 40 | }
 41 | 
 42 | .small-gap {
 43 |   height: 10px;
 44 | }
 45 | 
 46 | .big-gap {
 47 |   height: 25px;
 48 | }
 49 | 
 50 | /* specific styles */
 51 | 
 52 | .form-location {
 53 |   width: 300px;
 54 | }
 55 | 
 56 | .form-region {
 57 |   width: 200px;
 58 | }
 59 | 
 60 | .form-country {
 61 |   width: 200px;
 62 | }
 63 | 
 64 | .form-activity {
 65 |   width: 150px;
 66 | }
 67 | 
 68 | .form-type {
 69 |   width: 150px;
 70 | }
 71 | 
 72 | .form-route {
 73 |   width: 300px;
 74 | }
 75 | 
 76 | .form-difficulty {
 77 |   width: 125px;
 78 | }
 79 | 
 80 | .form-rating {
 81 |   width: 125px;
 82 | }
 83 | 
 84 | .form-start-date {
 85 |   width: 150px;
 86 |   font-family: Arial, Helvetica, sans-serif;
 87 | }
 88 | 
 89 | .form-end-date {
 90 |   width: 150px;
 91 |   font-family: Arial, Helvetica, sans-serif;
 92 | }
 93 | 
 94 | .form-note {
 95 |   margin-left: 1px;
 96 |   width: 868px;
 97 |   height: 150px;
 98 |   resize: none;
 99 |   margin-right: 0px;
100 |   padding: 15px;
101 |   font-family: Arial, Helvetica, sans-serif;
102 |   font-size: 16px;
103 | }
104 | 
105 | .form-submit-container {
106 |   display: flex;
107 |   justify-content: end;
108 | }
109 | 
110 | .form-submit {
111 |   padding: 5px 15px 5px 10px;
112 |   background-color: rgb(31, 125, 63);
113 |   color: rgb(244,242,237);
114 |   font-size: 18px;
115 |   font-weight: bold;
116 |   border: none;
117 |   border-radius: 5px;
118 |   box-shadow: 0px 0px 1px rgb(44,44,44);
119 |   transition: background-color 0.3s;
120 |   margin-bottom: 15px;
121 |   margin-top: 10px;
122 | }
123 | 
124 | .form-submit img {
125 |   position: relative;
126 |   top: 2px;
127 |   padding-right: 5px;
128 |   rotate: 0deg;
129 |   translate: 0px;
130 |   transition: rotate 0.3s, translate 0.3s;
131 | }
132 | 
133 | .form-submit:hover img {
134 |   cursor: pointer;
135 |   background-color: rgb(31,100,63);
136 |   rotate: 0.5turn;
137 |   translate: -5px;
138 | }
139 | 
140 | .form-submit:hover {
141 |   cursor: pointer;
142 |   background-color: rgb(31,100,63);
143 | }
144 | 
145 | .route-row {
146 |   margin-left: 25px;
147 | }
148 | 
149 | .route-row path {
150 |   pointer-events: none;
151 | }
152 | 
153 | .form-star {
154 |   position: relative;
155 |   top: 7px;
156 | }
157 | 
158 | .form-star-clear {
159 |   color: rgb(125,125,125);
160 |   margin-left: 10px;
161 |   cursor: pointer;
162 |   transition: color 0.2s;
163 | }
164 | 
165 | .form-star-clear:hover {
166 |   color: rgb(100,100,100);
167 | }
168 | 
169 | .addRowButton {
170 |   position: relative;
171 |   top: 4px;
172 |   margin-right: 7px;
173 | }
174 | 
175 | /* .test {
176 |   width: 100px;
177 |   height: 100px;
178 |   background-color: red;
179 | } */


--------------------------------------------------------------------------------
/client/stylesheets/header.css:
--------------------------------------------------------------------------------
 1 | #header {
 2 |   background-color: rgb(41,41,41);
 3 |   box-shadow: 0px -40px 100px black;
 4 |   margin-bottom: 50px;
 5 | }
 6 | 
 7 | #header-container {
 8 |   display: flex;
 9 |   width: 900px;
10 |   margin: auto;
11 | }
12 | 
13 | #header-container h1 {
14 |   padding-left: 2px;
15 |   margin-bottom: 15px;
16 |   margin-top: 15px;
17 |   color: rgb(244,242,237);
18 |   font-family:Arial, Helvetica, sans-serif;
19 | }


--------------------------------------------------------------------------------
/client/stylesheets/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('./header.css');
 2 | @import url('./title.css');
 3 | @import url('./form-styles.css');
 4 | @import url('./entries.css');
 5 | 
 6 | body {
 7 |   margin: 0px;
 8 |   background-color: rgb(244,242,237);
 9 | }
10 | 
11 | .footer {
12 |   height: 400px;
13 |   margin-top: 100px;
14 |   background-color: rgb(213, 211, 206);
15 | }


--------------------------------------------------------------------------------
/client/stylesheets/title.css:
--------------------------------------------------------------------------------
 1 | .title {
 2 |   display: flex;
 3 |   justify-content: space-between;
 4 |   font-family: Arial, Helvetica, sans-serif;
 5 |   width: 900px;
 6 |   margin: 0px auto 0px auto;
 7 |   background-color: rgb(84,84,84);
 8 |   border-radius: 5px 5px 0px 0px;
 9 |   padding: 15px 15px 0px 15px;
10 |   transition: background-color 0.3s;
11 |   box-shadow: 0px 0px 1px black;
12 | }
13 | 
14 | .bottom-title {
15 |   height: 20px;
16 |   width: 930px;
17 |   margin: 0px auto 50px auto;
18 |   border-radius: 0px 0px 5px 5px;
19 |   background-color: rgb(84,84,84);
20 |   box-shadow: 0px 0px 1px black;
21 |   transition: background-color 0.3s;
22 | }
23 | 
24 | .title:hover {
25 |   cursor: pointer;
26 |   background-color: rgb(64,64,64);
27 | }
28 | 
29 | .title:hover ~ .bottom-title {
30 |   background-color: rgb(64,64,64);
31 | }
32 | 
33 | .title h1 {
34 |   margin: 0px;
35 |   color: #f0e9e1;
36 |   font-size: 26px;
37 | }
38 | 


--------------------------------------------------------------------------------
/docs/schema.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/juliendevlin/out-and-about/7d9de7564aa261bd40b90a2a874fc2766fc4dfc5/docs/schema.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "out-and-about",
 3 |   "version": "1.0.0",
 4 |   "description": "A mountain adventure journal",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "cross-env NODE_ENV=production node server/server.js",
 8 |     "build": "cross-env NODE_ENV=production webpack",
 9 |     "dev": "cross-env NODE_ENV=development webpack serve & nodemon server/server.js"
10 |   },
11 |   "author": "Julien Devlin",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "express": "^4.18.2",
15 |     "pg": "^8.9.0",
16 |     "react": "^18.2.0",
17 |     "react-dom": "^18.2.0"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/core": "^7.20.12",
21 |     "@babel/preset-env": "^7.20.2",
22 |     "@babel/preset-react": "^7.18.6",
23 |     "babel-loader": "^9.1.2",
24 |     "cross-env": "^7.0.3",
25 |     "html-webpack-plugin": "^5.5.0",
26 |     "nodemon": "^2.0.20",
27 |     "webpack": "^5.75.0",
28 |     "webpack-cli": "^5.0.1",
29 |     "webpack-dev-server": "^4.11.1"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Out & About
 2 | ### A journaling app for ski bums, dirt bags, mountaineers, or all of the above.
 3 | #### Future Work 
 4 | * submit several locations/routes as part of one entry
 5 | * image uploads
 6 | * auto complete for existing entries 
 7 | * 3rd party API to populate db with routes/trails/etc
 8 | * authentication
 9 | * Maps/stats tabs
10 | * pagination
11 | * 3rd party integrations (lighterpack)
12 | * user feeds
13 | * expanded user-facing error handling 
14 | #### React Component Layout  
15 | |-- Index  
16 | &emsp;|-- App 
17 | &emsp;&emsp;|-- Form   
18 | &emsp;&emsp;|-- Entries Container  
19 | &emsp;&emsp;&emsp;|-- Entry Items  
20 | &emsp;&emsp;&emsp;|-- Update Prompt  
21 | &emsp;&emsp;&emsp;|-- Delete Prompt   
22 | #### Server Layout  
23 | |-- server  
24 | &emsp;|-- entries  
25 | &emsp;&emsp;|-- GET  
26 | &emsp;&emsp;|-- POST  
27 | &emsp;&emsp;|-- PUT  
28 | &emsp;&emsp;|-- DELETE  
29 | &emsp;|-- form  
30 | &emsp;&emsp;|-- GET    
31 | #### Database Schema  
32 | ![schema](./docs/schema.png)
33 | 


--------------------------------------------------------------------------------
/server/controllers/entry-controller.js:
--------------------------------------------------------------------------------
  1 | const db = require('../models/model');
  2 | const queries = require('../models/entry-queries')
  3 | 
  4 | const entryController = {}
  5 | 
  6 | // Get entry info from all columns in database, ordered by entry start date
  7 | entryController.getEntries = (req, res, next) => {
  8 |   // Check if entry id stored in locals, if so add a where condition to query for that entry, if not query for all entries
  9 |   let selectQuery = queries.selectAll;
 10 |   const queryParams = [];
 11 | 
 12 |   if (Object.hasOwn(res.locals, 'entryId')) {
 13 |     selectQuery += 'WHERE entry_routes.entry_id = ($1) ';
 14 |     queryParams.push(res.locals.entryId);
 15 |   }
 16 |   
 17 |   selectQuery += 'ORDER BY entries.start_date DESC';
 18 | 
 19 |   // Query for all columns in all tables and save to locals
 20 |   db.query(selectQuery, queryParams)
 21 |   .then(data => {
 22 |     res.locals.entries = data.rows;
 23 |     return next();
 24 |   })
 25 |   .catch(err => {
 26 |     return next({
 27 |       log: `ERROR - entryController.getEntries: ${err}`,
 28 |       message: {err: 'Failed to retrieve entries from database. Check server log for details.'}
 29 |     });
 30 |   });
 31 | }
 32 | 
 33 | entryController.setEntry = (req, res, next) => {
 34 |   // Initialize variables for storage during transaction
 35 |   let regionId;
 36 |   let countryId;
 37 |   let locationId;
 38 |   let routeId;
 39 |   let entryId;
 40 | 
 41 |   // Destrcture request body properties to use for transaction
 42 |   const { country, region, location, route, typeId, difficultyId, note, startDate, endDate, rating } = req.body;
 43 | 
 44 |   // Begin transaction
 45 |   db.query('BEGIN')
 46 |     // Search for country, insert if not found
 47 |     .then(() => db.query(queries.selectCountry, [country]))
 48 |     .then(countryQuery => {
 49 |       if (countryQuery.rows[0]) return countryQuery; 
 50 |       return db.query(queries.insertCountry, [country]);
 51 |     })
 52 |     // Search for region, insert if not found
 53 |     .then(countryQuery => {
 54 |       countryId = countryQuery.rows[0]._id;
 55 |       return db.query(queries.selectRegion, [region]);
 56 |     })
 57 |     .then(regionQuery => {
 58 |       if (regionQuery.rows[0]) return regionQuery;
 59 |       return db.query(queries.insertRegion, [region]);
 60 |     })
 61 |     // Search for location, insert if not found
 62 |     .then(regionQuery => {
 63 |       regionId = regionQuery.rows[0]._id;
 64 |       return db.query(queries.selectLocation, [location, regionId, countryId]);
 65 |     })
 66 |     .then(locationQuery => {
 67 |       if (locationQuery.rows[0]) return locationQuery;
 68 |       return db.query(queries.insertLocation, [location, regionId, countryId]);
 69 |     })
 70 |     // Search for route, insert if not found
 71 |     .then(locationQuery => {
 72 |       locationId = locationQuery.rows[0]._id;
 73 |       return db.query(queries.selectRoute, [route, typeId, difficultyId, locationId]);
 74 |     })
 75 |     .then(routeQuery => {
 76 |       if (routeQuery.rows[0]) return routeQuery;
 77 |       return db.query(queries.insertRoute, [route, typeId, difficultyId, locationId]);
 78 |     })
 79 |     // Insert entry
 80 |     .then(routeQuery => {
 81 |       routeId = routeQuery.rows[0]._id;
 82 |       return db.query(queries.insertEntry, [note, startDate, endDate, 1]);
 83 |     })
 84 |     // Insert entry route
 85 |     .then(entryQuery => {
 86 |       entryId = entryQuery.rows[0]._id;
 87 |       return db.query(queries.insertEntryRoute, [entryId, routeId, rating]);
 88 |     })
 89 |     // Commit the transaction
 90 |     .then(() => {
 91 |       return db.query('COMMIT')
 92 |     })
 93 |     // Store the entry id
 94 |     .then(() => {
 95 |       res.locals.entryId = entryId;
 96 |       return next();
 97 |     })
 98 |     // Catch any errors from the transaction
 99 |     .catch(err => {
100 |       db.query('ROLLBACK');
101 | 
102 |       return next({
103 |         log: `ERROR - entryController.setEntries: ${err}`,
104 |         message: {err: 'Failed to create entry in database. Check server log for details.'}
105 |       });
106 |     });
107 |     
108 | }
109 | 
110 | // Deletes an entry from database
111 | entryController.deleteEntry = (req, res, next) => {
112 |   // Destructure entry ID for entry to delete
113 |   const { entryId } = req.body;
114 | 
115 |   // Delete database records of the entry from entry_routes and the entry record from entries
116 |   db.query('BEGIN')
117 |     .then(() => db.query(queries.removeEntryRoutes, [entryId]))
118 |     .then(() => db.query(queries.removeEntry, [entryId]))
119 |     .then(() => db.query('COMMIT'))
120 |     .then(() => next())
121 |     .catch((err) => {
122 |       db.query('ROLLBACK');
123 | 
124 |       return next({
125 |         log: `ERROR - entryController.deleteEntries: ${err}`,
126 |         message: {err: 'Failed to delete entry in database. Check server log for details.'}
127 |       });
128 |     });
129 | }
130 | 
131 | module.exports = entryController;
132 | 


--------------------------------------------------------------------------------
/server/controllers/form-controller.js:
--------------------------------------------------------------------------------
 1 | const db = require('../models/model');
 2 | const queries = require('../models/form-queries');
 3 | 
 4 | const formController = {}
 5 | 
 6 | // Queries database for form dropdown options
 7 | formController.getFormOptions = (req, res, next) => {
 8 |   db.query(queries.selectActivities)
 9 |     .then(activities => {
10 |       res.locals.formOptions = {};
11 |       res.locals.formOptions.activities = activities.rows;
12 | 
13 |       return db.query(queries.selectTypes);
14 |     })
15 |     .then(types => {
16 |       res.locals.formOptions.types = types.rows;
17 | 
18 |       return db.query(queries.selectDifficulties);
19 |     })
20 |     .then(difficulties => {
21 |       res.locals.formOptions.difficulties = difficulties.rows;
22 | 
23 |       return next();
24 |     })
25 |     .catch(err => {
26 |       next({
27 |         log: `ERROR - formController.getFormOptions: ${err}`,
28 |         message: {err: 'Failed to retrieve form options from database. Check server log for details.'}
29 |       });
30 |     });
31 | }
32 | 
33 | module.exports = formController


--------------------------------------------------------------------------------
/server/models/entry-queries.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |   // select all from all tables, ordered by entry PK
  3 |   selectAll: `
  4 |     SELECT
  5 |       entry_routes._id AS entry_routes_id,
  6 |       entry_routes.entry_id,
  7 |       entries.start_date,
  8 |       entries.end_date,
  9 |       types.activity_id,
 10 |       activities.activity,
 11 |       routes.type_id,
 12 |       types.type,
 13 |       types.convention,
 14 |       entry_routes.route_id,
 15 |       routes.route,
 16 |       routes.difficulty_id,
 17 |       difficulties.difficulty,
 18 |       routes.location_id,
 19 |       locations.location,
 20 |       locations.region_id,
 21 |       regions.region,
 22 |       locations.country_id,
 23 |       countries.country,
 24 |       entry_routes.rating,
 25 |       entries.note,
 26 |       entries.post_date
 27 | 
 28 |     FROM entry_routes
 29 |       INNER JOIN entries ON entries._id = entry_routes.entry_id
 30 |       INNER JOIN routes ON routes._id = entry_routes.route_id
 31 |       INNER JOIN types ON types._id = routes.type_id
 32 |       INNER JOIN activities ON activities._id = types.activity_id
 33 |       INNER JOIN locations ON locations._id = routes.location_id
 34 |       INNER JOIN regions ON regions._id = locations.region_id
 35 |       INNER JOIN countries ON countries._id = locations.country_id
 36 |       INNER JOIN difficulties ON difficulties._id = routes.difficulty_id 
 37 |     `,
 38 |   // select a country
 39 |   selectCountry: `
 40 |     SELECT * 
 41 |       FROM countries
 42 | 
 43 |     WHERE country = ($1)
 44 |   `,
 45 |   // select a region
 46 |   selectRegion: `
 47 |     SELECT * 
 48 |       FROM regions
 49 |   
 50 |     WHERE region = ($1)
 51 |   `,
 52 |   // select a location
 53 |   selectLocation: `
 54 |     SELECT * 
 55 |       FROM locations
 56 | 
 57 |     WHERE location = ($1)
 58 |       AND region_id = ($2) 
 59 |       AND country_id = ($3)
 60 |   `,
 61 |   // select a route
 62 |   selectRoute: `
 63 |     SELECT * 
 64 |       FROM routes
 65 |     
 66 |     WHERE route = ($1)
 67 |       AND type_id = ($2)
 68 |       AND difficulty_id = ($3) 
 69 |       AND location_id = ($4)
 70 |   `,
 71 |   // insert a country
 72 |   insertCountry: `
 73 |     INSERT INTO countries (country)
 74 |       VALUES ($1)
 75 | 
 76 |     RETURNING _id
 77 |   `,
 78 |   // insert a region
 79 |   insertRegion: `
 80 |     INSERT INTO regions (region)
 81 |       VALUES ($1)
 82 | 
 83 |     RETURNING _id
 84 |   `,
 85 |   // insert a location
 86 |   insertLocation: `
 87 |     INSERT INTO locations (location, region_id, country_id)
 88 |       VALUES ($1, $2, $3)
 89 | 
 90 |     RETURNING _id
 91 |   `,
 92 |   // insert a route
 93 |   insertRoute: `
 94 |     INSERT INTO routes (route, type_id, difficulty_id, location_id)
 95 |       VALUES ($1, $2, $3, $4)
 96 | 
 97 |     RETURNING _id
 98 |   `,
 99 |   // insert an entry
100 |   insertEntry: `
101 |     INSERT INTO entries (note, start_date, end_date, user_id)
102 |       VALUES ($1, $2, $3, $4)
103 | 
104 |     RETURNING _id
105 |   `,
106 |   // insert an entry route
107 |   insertEntryRoute: `
108 |     INSERT INTO entry_routes (entry_id, route_id, rating)
109 |       VALUES ($1, $2, $3)
110 |   `,
111 |   // remove entry routes
112 |   removeEntryRoutes:`
113 |     DELETE FROM entry_routes
114 |     WHERE entry_routes.entry_id = ($1)
115 |   `,
116 |   // remove entry
117 |   removeEntry:`
118 |     DELETE FROM entries
119 |     WHERE entries._id = ($1)
120 |   `
121 | }


--------------------------------------------------------------------------------
/server/models/form-queries.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   selectActivities:`
 3 |     SELECT *
 4 |     FROM activities
 5 |   `,
 6 | 
 7 |   selectTypes:`
 8 |     SELECT *
 9 |     FROM types
10 |   `,
11 | 
12 |   selectDifficulties:`
13 |     SELECT *
14 |     FROM difficulties
15 |   `
16 | }


--------------------------------------------------------------------------------
/server/models/model.js:
--------------------------------------------------------------------------------
 1 | // connect to db and export pool
 2 | const { Pool } = require('pg');
 3 | 
 4 | // const PG_URI = [insert postgresql uri]
 5 | 
 6 | const pool = new Pool({
 7 |   connectionString: PG_URI
 8 | });
 9 | 
10 | module.exports = {
11 |   query: (text, params, callback) => {
12 |     console.log('--QUERY EXECUTED--\n', text, '\n');
13 |     return pool.query(text, params, callback);
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const express = require('express');
 3 | 
 4 | const app = express();
 5 | const PORT = 3000;
 6 | 
 7 | const entryController = require('./controllers/entry-controller');
 8 | const formController = require('./controllers/form-controller');
 9 | 
10 | // parse all request bodies
11 | app.use(express.json());
12 | 
13 | // Get all entries route
14 | app.get('/entries', 
15 |   entryController.getEntries,
16 |   (req, res) => {
17 |     return res.status(200).json(res.locals.entries);
18 |   });
19 | 
20 | // Create new entry route
21 | app.post('/entries',
22 |   entryController.setEntry,
23 |   entryController.getEntries,
24 |   (req, res) => {
25 |     return res.status(201).json(res.locals.entries);
26 |   });
27 | 
28 | // Update entry route
29 | app.put('/entries', 
30 |   entryController.deleteEntry,
31 |   entryController.setEntry,
32 |   entryController.getEntries,
33 |   (req, res) => {
34 |     return res.status(200).json(res.locals.entries);
35 |   });
36 | 
37 | // Delete entry route
38 | app.delete('/entries',
39 |   entryController.deleteEntry,
40 |   (req, res) => {
41 |     return res.sendStatus(200);
42 |   });
43 | 
44 | // Gets form values route
45 | app.get('/form', 
46 |   formController.getFormOptions,
47 |   (req, res) => {
48 |     return res.status(200).json(res.locals.formOptions)
49 |   })
50 | 
51 | // Serve app and static files for production environments
52 | if (process.env.NODE_ENV === 'production') {
53 | 	app.use('/client', express.static(path.resolve(__dirname, '..', 'client')));
54 | 	app.get('/', (req, res) => res.status(200).sendFile(path.resolve(__dirname, '..', 'client', 'index.html')));
55 | }
56 | 
57 | // Catch-all route
58 | app.use ('/', (req,res, next) =>{
59 |   return next({
60 |     log: 'Express catch all handler caught unknown route',
61 |     status: 404,
62 |     message: {err: 'Route not found'}
63 |   });
64 | });
65 | 
66 | // Default global error object & global error handler
67 | const defaultErr = {
68 |   log: 'Express error handler caught an unknown middleware error',
69 |   status: 400,
70 |   message: { err: 'An error occurred' }, 
71 | };
72 | 
73 | app.use((err, req, res, next) => {
74 |   const errorObj = Object.assign(defaultErr, err);
75 |   console.log(errorObj.log);
76 |   return res.status(errorObj.status).json(errorObj.message);
77 | });
78 | 
79 | // Start server
80 | app.listen(PORT, () => {
81 |   console.log(`Server listening on port: ${PORT}`);
82 | });
83 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
 3 | 
 4 | module.exports = {
 5 | 	mode: process.env.NODE_ENV,
 6 | 	entry: {
 7 | 		src: path.join(__dirname, 'client', 'index.js')
 8 | 	},
 9 | 	output: {
10 | 		filename: 'bundle.js',
11 | 		path: path.join(__dirname, 'client', 'build')
12 | 	},
13 | 	module: {
14 | 		rules: [
15 | 			{
16 | 				test: /\.jsx?/,
17 | 				exclude: /node_modules/,
18 | 				use:  {
19 | 					loader: 'babel-loader',
20 | 					options: {
21 | 						presets: ['@babel/preset-env', '@babel/preset-react']
22 | 					}
23 | 				}
24 | 			},
25 | 		]
26 | 	},
27 | 	plugins: [
28 | 		new HtmlWebpackPlugin({
29 | 			template: path.join(__dirname, 'client', 'index.html')
30 | 		})
31 | 	],
32 | 	devServer: {
33 | 		static: {
34 | 			directory: path.resolve(__dirname, 'client')
35 | 		},
36 | 		proxy: {
37 | 			'/entries': 'http://localhost:3000',
38 |       '/form': 'http://localhost:3000'
39 | 		}
40 | 	}
41 | }
42 | 


--------------------------------------------------------------------------------