onearmy / community-platform Goto Github PK

Ideally from real data, to help building interfaces and designing form

child of #3

We have a few good examples so should just put something into the contributing file for review

Plentry of tools and examples, just need to put in and add to contribution guides so people know how to use

This will be a fairly basic template, containing title, description and step-by-step instructions (likely through document-step sub-component)
child of #3

On server side, resize cover images to display a smaller image on tutorial list. To optimize loading time page and bandwith use.

Firebase should allow for email verification, but will want login component to reflect what stage of the process they are in (possibly giving option to resend confirmation or change info provided)
child of #8
depends on #19

Create form page where user can add his own tutorial

currently in 'test' mode so all read-write ops allowed. Will need to restrict once user auth system established

display tutorial list and tutorials from firebase database instead of mocks data

Requesting a review of the home page and login components.

The home page sits within the main router at pages/index.ts. It has state typings inline and renders two different divs dependent on whether the user is logged in or not (will later be built out with components). I've created a test user that can login with userrname and password both matching '[email protected]'.

The login component sits inside a container which has bindings to get/set global state. Together they handle a number of things including communicating with the auth service, reflecting changes back to the global redux state as well as notifying up to parent component (in this case home page) - this might seem counter-design as standard model would be to read down from the global state and wrap the home page in a container to pass the property (currently feels overkill, but likely useful in future when more state read).

Could you check if the code seems organised logically and is reasonable to follow/maintain?

Updated 10-05-19 (Chrismclarke)

v0.3.0

• Add notification for “under development” : Beta bar at the top
• Archive current master branch work on discussion & other section than how-to (#441)
• Update UI of pages :
  • How-to list view (#419)
  • How-to create post (#440)
  • How-to post view (#420)
  • Remove material-ui (rebuild components)
• Enhance create how-to
  • Local image compression
  • Attachment upload and limitations (e.g. size, number, filetype)
  • Add tags
  • Upload progress updates
  • Add react-final-form bindings for all inputs
  • Upload multiple images per step
• Minor fixes/enhancements
  • Limit create to logged in users only (#457)
  • Link username and avatar to created by message (#467)

backlog

• Migrate production site data to use new format (tutorials and profiles) (#468)
• List view improvements
  • filterbar
  • search
  • viewcounts
• Create how-to improvements
  • Add project
  • Reorder images (#227)
  • Max images formats (handle/block gifs)
  • Add embed video
  • Add contributions guidelines
  • Edit how-to (#103)
  • Multiple currency for how-to cost
  • Add tutorial cost field (single currency - euro) (under discussion)
• Single view improvements
  • Show video
  • Add/display comment
  • Favourite/saved how-tos
  • Rating/upvote/useful mark system
  • Set active post on list click and skip db query for post by slug if matches active
  • Image display on mobile (possibly less content padding and lightbox viewer)
  • x days ago also include months/years

Overview:
The How-To's page (previously Documentation) is a tool for people to share their processes, technics, hacks, products and findings. Heavily influenced by tools like iFixit and Instructables will help global human knowledge to exponentially expand.

In this module we have 3 main pages:

• How-to overview (#419)
• How-to post view (#420)
• How-to create post (#440)

Latest design resources:
Prototype
https://www.figma.com/proto/OZ5xbZYR4ZKNBijrs9kPJnbu/OneArmy-Platform?node-id=458%3A2&viewport=52%2C441%2C0.027&scaling=scale-down-width

Epics:
https://docs.google.com/spreadsheets/d/1pkLRKCbQiJOtQwWEhVNgSTvDWf5SnVAz10vMo4k-LNg/edit#gid=0

Any questions post in the comments

now app has been ejected it seems much slower at compiling, should investigate.

Possibly worth trying react hot reload
https://github.com/gaearon/react-hot-loader

In my opinion it would be nice to have a confirmation action (popup, alert message, etc) from the user when he click on the cross to remove a step or leave the page without saving.

I remember discussing iFixit and had a few fields like cost and time. Is there a definitive list somewhere? (or just write below)

Mattia plans to be working on this, not sure the exact timeline but hopefully soon. Until then just focus on core functionality

Should have place to specify required info: email, pw (+confirmation). Additional info likely also such as first name, last name (see what is currently in Dave Hakkens signup). This component should also double as profile update, providing option to either register or update info.
child of #8

We have a few places where we need forms, the first being the documentation tutorial section. Currently we have been using react final form, another recommendation is formik. Both seem to have strong advocates, my impression seems that formik is a little bit simpler/more familiar for react, react final form perhaps more performant/scalable.

I think both would be solid choices and can't imagine potential limitations being reached in either case. Probably best to experiment and see if can get either to work quickly.

Links to related discussions:
jaredpalmer/formik#533
https://www.npmtrends.com/formik-vs-react-final-form

Updated 06/05/19

Roadmap

Core Functionality

• View alt user profile
• Upload avatar
• User Register Form
• User Login form and functionality
• Migrate DH site data
• Update profile information
• Password forgotten/reset link
• Password change
• User email confirmation (+resend link)

Backlog

• Automated testing for all features
• User profile delete
• User avatar thumbnails (smaller sized)
• Crop avatar
• Migrate DH avatar
• Country picker for profile field
• Additional auth for user migrate

Under consideration

• Change mention name

User Module Epics

• As a user, I can login with an email and an email address
• As a user can describe basic information about themselves
• As a user will have a profile page to list their information
• As a user needs to verify their email before being able to login

Should display list of docs, with title, short description and key tag info. Clicking should update state to show the active document
child of #3

some placeholder to show at base url

Allow the user to add predefined tags to the tutorial.
Waiting on the list from design team.

• Tags will only be saved in the database and not displayed to the user.

• Tags will be directly added in the fronted code, as local data.

• Change the red cross on the top right corner of a step to a grey trash icon on the bottom right of a step.
• Remove trash icon on first step, you can't have a tutorial without step

Currently we're connected to a firebase server to manage hosting and also provide a database. It's still uncertain whether this will be the ultimate db, with possible contenders including something relational (mysql/postgres), graphdb or other nosql such as mongo.

It would make sense to base database calls around a framework that can easily be adapted/modified to work in a different environment. Current suggestion is to stick with firestore, but add a midlayer api that leverages graphql and apollo server (which could also run on any other setup).

A few links outlining the approach for reference:
https://www.youtube.com/watch?v=8D9XnnjFGMs
https://github.com/arjunyel/firestore-apollo-graphql
https://codeburst.io/learning-graphql-with-firebase-part-1-6cb0ae1499a4

(It would be nice to also include prisma, although this isn't supported yet with firebase)

We need to setup and link the project to the firebase database, and install whatever packages help best to interact with data, handle logins etc.

Enable the writer to style his text with bold, italic, heading, etc

Only allow landscape image for cover.
child of #3

We have the background image for guest visitors but would also be good to have something more substantial to display to those we plan to share logins with. In the very least we need a button to direct to the new docs page for testing (instead of relying on automated redirect). Could possibly look to start on general home page mockup at the same time.

Ho to help other developers to easily help us on the fronted ?

• provide a proper class naming convention
• example component ?

We need to know what fields already exist for users within the old database, and reflect a similar structure in the new site. Would be good to have some dummy user profiles in a mock for dev
child of #8

Currently templates have css files however it would be better to use sass. I assume there are some easy steps to add this to the compilation process

Current boilerplate should be updated to contain more information about the project

want the production site to be available at htpps://onearmy.world
requires #15

currently firebase config populated in config.dev.ts. Ideally we should either add build script to copy production config to config.ts, or work with environment variables in production mode

Define a file size limit on documentation, for uploaded images and files.
I guess for images it will be a few mo, but for the project files (3D models or other files needed to achieve the tutorial), we need to define a bigger upload limit.
Probably need to discuss with Dave & our beta users.

Our overall state object will likely evolve a bit over time but would be good to have an initial idea to start integrating into existing dev. I assume we will want a hierarchy along the lines of:

• user (e.g. login status, user meta etc.)
• {page} specific, (e.g. docs)
• network (? e.g. isOnline etc.)
• device (? info about screen size, mobile/desktop etc.)

Open to suggestions

Want initial travis setup to deploy updates to the dev branch to the live dev site (likely firebase default)

• maybe a firebase method exist to get tutorials in chrono order
• if not add createdAt field when creating a tutorial (it can be useful to have it anyway)
  child of #3

• display tags in the tutorial page
• allow tags filtering from tutorial list
• load tags dynamically from database

child of #3

Want to advertise fact that we are actively developing new platform and open to contributions
depends on #6

Whilst awaiting full UI designs makes sense to have something in place to make things look a little better

Decided sensible model is to include one index.tsx at a component/page/model group level (and not for individuals) to handle simple import/export

We currently have material-ui components and a few app-wide styles passed with it (via index.ts). Should also investigate best ways to use scss throughout the app (e.g shared modules etc)

Simple email/pw input, should communicate with firebase auth provider, display whether user is signed in and provide sign out option
child of #8

We want to navigate to /docs and be presented with a page that will then hold the docs list component

child of #3
depends on #5

Will need to decide at some point full structure, use of subdomains, slashes etc. but interim solution would be good to handle some basic page display templates