Add initial research module layout #1110

danitrod · 2021-03-07T15:08:48Z

PR Type

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

PR Checklist

- Latest master branch merged
- PR title descriptive (can be used in release notes)
- Passes Tests

Description

Adding the first layout for research module listing, details and updates. Also finished setting up the folder structure and mock data for researches.

Still missing:

insert the DBDoc metadata into a newly created update
add forms for creating a research, creating an update, and editing a research
setting up permissions for deleting/editing a research
add tests for the new pages

Git Issues

Closes #1080 and closes #1079 - probably should create some more issues for the above points

Screenshots/Videos

github-actions · 2021-03-07T15:12:41Z

Visit the preview URL for this PR (updated for commit 40cfe5c):

https://onearmy-next--pr1110-research-module-fron-ai8bkc36.web.app

_{(expires Thu, 08 Apr 2021 23:12:46 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

cypress · 2021-03-07T15:17:56Z

Test summary

62 • 0 • 0 • 0

Run details


Project	onearmy-community-platform
Status	Passed
Commit	`cf966a8` ℹ️
Started	Mar 9, 2021 10:50 PM
Ended	Mar 9, 2021 10:56 PM
Duration	06:09 💡
OS	Linux Ubuntu Linux - 16.04
Browser	Multiple

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

davehakkens · 2021-03-08T09:56:16Z

niceee!
Added issue for "add forms for creating a research, creating an update, and editing a research"
#1111

chrismclarke · 2021-03-09T05:15:28Z

src/components/Research/ResearchListItem.tsx

+
+const GridBox = styled(Box)`
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;


personally I like css grid and media queries, but in case you weren't aware there's an added option included in rebass components to provide widths for the theme breakpoints (https://rebassjs.org/layout). You'll see in a lot of the howto components code like <Flex px={4} py={4} flexDirection={'column'} width={[1, 1, 1 / 2]}> where the width array corresponds to sizes at the various theme breakpoints (at least I think that's what it does! I try to stay away from frontend where I can)

nice touch! i was kinda fixed on the grid idea cause i used to work with bootstrap a lot

Yeah it's a kind of weird niche that these rebass components are trying to fill. I see the benefit if you're trying to keep consistency across all screens/components, but like most js and css libraries/frameworks if you know what you are doing as a developer you can usually achieve the same outcomes using more vanilla-style approaches. I don't think we're super opinionated, as long as there is a reasonable level of consistency or standard approaches so that someone else can make changes in the future if required, happy with whatever way devs find themselves working best.

chrismclarke · 2021-03-09T05:17:19Z

src/pages/Howto/Content/Howto/Step/Step.tsx

 import { IUploadedFileMeta } from 'src/stores/storage'
-import ImageGallery from './ImageGallery'


thanks for refactoring this into a shared component, makes a lot of sense to do so. Feel free to make any other changes you see as sensible for tidying up component structures or sharing code between components

chrismclarke · 2021-03-09T05:19:49Z

src/pages/Research/Content/ResearchItemDetail.tsx

+import { MOCK_UPDATES } from 'src/mocks/research.mocks'
+import { NotFoundPage } from 'src/pages/NotFound/NotFound'
+import { ResearchStoreContext } from 'src/stores/Research/research.store'
+import { Loader } from '../../../components/Loader/index'


is this also just the src/components folder? if so probably easier to import it that way

yep, using auto-import is tricky sometimes

chrismclarke · 2021-03-09T05:22:38Z

src/stores/Research/research.store.tsx

+        {
+          ...update,
+          // TODO - insert metadata into the new update
+          _id: Math.random().toString(),


As it happens this should be handled automatically in src\stores\databaseV2\index.tsx - basically all db writes get automatically populated with standard _created, modified, _id metadata so individual stores don't need to worry about it.

Oh, also if you ever did want to use Math.random to generate a random string you can also include a radix in the string method. E.g. Math.random().toString(36) is pretty common, as base36 would use 10 digits (0-9) and 26 letters of alphabet (a-z), so you get an output like 0.pwqjb68tqqr. Take the substring from digit 2 and you get a quick unique id pwqjb68tqqr. There's still a few limitations with this however, as strings won't always be uniform length if ending in 0s (which would just be omitted) - small discussion on this if you scroll down here: https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript

Thank you for the reviews! And nice tip on the Math.random().toString() usage - wasn't used to that. A question here, I did try to insert the updates without the metadata, the meta fields weren't automatically populated by the DB though, I think it's because the updates are an array inside of the research object which is in fact populated with the metadata. Do we have to store the updates in a separate collection and reference them from the research object?

Oh, that makes a lot more sense, I had been thinking about individual docs and not data stored within the research object array. I think we can go about it either way, either creating a new subcollection doc each time there is an update, or just storing everything in a single array in the research object itself. If we store things in the object itself then we will want to manually add some metadata as you started to do. Happy for you to proceed however you think best and we can always decide if we want to refactor later

chrismclarke · 2021-03-09T05:47:55Z

What's there looks really good to me. For the metadata you actually don't need to worry as that's all handled by automatically by the common db methods mentioned in the comment above. So you can just remove the code to manually add. Otherwise from a dev side I'm happy to merge and continue to build from here.

Assuming you're happy with the design implementation so far @davehakkens? (can follow-up next steps in separate issue)

danitrod · 2021-03-09T21:05:03Z

Added a couple of changes for the suggestions, the only issue is with the update DBDoc metadata populating - as I responded to your comment the db isn't populating it automatically when concatenating a new raw update to the array :(

danitrod · 2021-03-09T22:38:48Z

took the liberty to add a Mod: Research 🔬 label for PRs and issues

chrismclarke · 2021-03-09T23:10:54Z

took the liberty to add a Mod: Research 🔬 label for PRs and issues

Nice! Was gonna ask if you could also add it to the pr-labeller action that automatically tags things based on the code that changes but can see you've already done it!

chrismclarke

Thanks for making the updates, looks like a nice base to build from, merging

danitrod added 3 commits March 5, 2021 19:29

add research module listing

b6f8229

setup research update steps

7740977

finish first research module layout

4140d5d

github-actions bot added the Mod: HowTo 📰 label Mar 7, 2021

davehakkens added the Review allow-preview ✅ Has received manual check for malicious code and can be safely built for preview label Mar 7, 2021

davehakkens mentioned this pull request Mar 8, 2021

Research Module - create/edit #1111

Closed

chrismclarke reviewed Mar 9, 2021

View reviewed changes

chrismclarke added the Review: Changes Requested 🗨️ Code reviewed, pending update to changes requested label Mar 9, 2021

pr review ONEARMY#1110

acae1a6

add research mod label

40cfe5c

chrismclarke added the Mod: Research 🔬 label Mar 9, 2021

chrismclarke self-requested a review March 9, 2021 23:11

chrismclarke approved these changes Mar 9, 2021

View reviewed changes

chrismclarke merged commit 439f78d into ONEARMY:master Mar 9, 2021

danitrod deleted the research-module-frontend branch March 10, 2021 00:29

danitrod mentioned this pull request Mar 10, 2021

Add DB metadata to research updates #1114

Closed

franknoirot mentioned this pull request Dec 30, 2021

Add Comments to Research Module #1363

Closed

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add initial research module layout #1110

Add initial research module layout #1110

danitrod commented Mar 7, 2021

github-actions bot commented Mar 7, 2021 •

edited

Loading

cypress bot commented Mar 7, 2021 •

edited

Loading

davehakkens commented Mar 8, 2021 •

edited

Loading

chrismclarke Mar 9, 2021

danitrod Mar 9, 2021

chrismclarke Mar 9, 2021

chrismclarke Mar 9, 2021

chrismclarke Mar 9, 2021

danitrod Mar 9, 2021

chrismclarke Mar 9, 2021

chrismclarke Mar 9, 2021

danitrod Mar 9, 2021

chrismclarke Mar 9, 2021

chrismclarke commented Mar 9, 2021

danitrod commented Mar 9, 2021

danitrod commented Mar 9, 2021

chrismclarke commented Mar 9, 2021 •

edited

Loading

chrismclarke left a comment

		import { IUploadedFileMeta } from 'src/stores/storage'
		import ImageGallery from './ImageGallery'

Add initial research module layout #1110

Add initial research module layout #1110

Conversation

danitrod commented Mar 7, 2021

Description

Git Issues

Screenshots/Videos

github-actions bot commented Mar 7, 2021 • edited Loading

cypress bot commented Mar 7, 2021 • edited Loading

Test summary

Run details

davehakkens commented Mar 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrismclarke commented Mar 9, 2021

danitrod commented Mar 9, 2021

danitrod commented Mar 9, 2021

chrismclarke commented Mar 9, 2021 • edited Loading

chrismclarke left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 7, 2021 •

edited

Loading

cypress bot commented Mar 7, 2021 •

edited

Loading

davehakkens commented Mar 8, 2021 •

edited

Loading

chrismclarke commented Mar 9, 2021 •

edited

Loading