agileventures / sfn-client Goto Github PK

Create Containers directory

Containers are many times your parent class components that hold state.

Many times these are whole pages, like the causes page.

They should be separated into a direct subdirectory of src, and a sibling to the components directory.

We will want to refactor every container separately, as there are many moving parts, so this is the first step.

Now that we have an expanded test suite, we can do this properly.

You will probably need to create a blank .keep file inside the src/containers/ directory.

Otherwise you won't be able to commit the change.

CSS classes for better maintenance should follow BEM naming conventions, so potentially this website should be added to the README: http://getbem.com/naming/

Adding a container for the content will help us eliminate questions like "How wide the content should flow on different screens?", "What are our breakpoints?". As part of the implementation I'm planning to use the well-tested bootstrap 12 columns, but using CSS grid, and also in combination with flexbox.

Add coverrals for test coverage

Add ArtistBio styling

Call it ArtistBio.scss

You can add headline and paragraph elements, along with Lorem ipsum to the <ArtistBio> component to help you out.

We need to start expanding the test suite, now that we have a good folder structure, to ensure we don't break anything as we add more moving parts.

Let's start simple, however.

Let's create the files, and write tests that just make sure that the components are in the right files and folders and can be instantiated.

You can achieve this by just copying our sole test, and modifying it for all our containers.
Located here:src/components/Artist/Artist.test.js

import React from "react";
import Artist from "./ArtistContainer";

//Need at least 1 test to pass Travis CI
it ("creates component without crashing", () => {
  const artist = <Artist/>;
});

Once we have this in place, we'll bring in Enzyme, to really build the test suite.

It would be great to have a branding (logo-only at first) which nicely compliment to the colors and typography that has been already settled. I feel if we have a designer who would like to contribute it's a good & important one to pick up. Otherwise I can create myself later once, some React basis is created. This can give additional benefits to the project like: creating the PR kit, having social media presence, etc.

The individual performance item elements will be part of the performances component.

As this is a new project, and as far as I see not that complex yet to import a whole library I'm thinking of building some foundations.

As I read in the create-react-app they don't recommend to add CSS class inheritance between components which will take into consideration, and I'm thinking mostly in utility classes for spacings (margins and paddings) and adding styles to individual components separately.

From the mockup as I see the following routes might be beneficial:

• home "/"
• about "/about" // rendering about page
• causes "/causes" // rendering list of causes
• artists "/artists" // rendering list of artists
• artist "/artists/:id" ✔️
• artist edit "/artistst/:id/edit" // editing existing artist (update, delete)
• artist create "/artists/new" // creating new artist
• performances "/performances" // rendering performances list
• contact "/contact" // rendering a contact page

Is this fine @FedericoEsparza to start with?

Upgrade react-scripts

Use yarn upgrade --latest

Will need later version of node, like v10.14.2

Add trending artist component

Let's call these TrendingArtist. They're the individual components inside the list.

Refactor Performances Container

After #83 has been merged in, refactor, move, and rename src/components/Performances/PerformancesContainer.js.

It's new home and name will be src/components/Performances/Performances.js

Move the test along with it: src/components/Performances/Performances.test.js
will now be at src/containers/Performances/Performances.test.js

You'll need to refactor the reference to ./PerformancesContainer and change it to ./Performances
in the test file.

You'll also need to refactor the class name and the export default to Performances

In src/components/App.js you'll have to refactor the import statement to

import Performances from "../containers/Performances/Performances";

And you'll also have to refactor the reference to the container in that file from {PerformancesContainer} to {Performances}

Leave an empty .keep file in src/components/Performances/

Add Waffle banner-link to README

Just add the following code to the top of the README file:

[![Waffle.io - Columns and their card count](https://badge.waffle.io/AgileVentures/sfn-client.svg?columns=all)](https://waffle.io/AgileVentures/sfn-client)

It's a convenient link to the Waffle board, from the github repo.

Add .node-version file for nvm automatic switching when cd-ing into project directory.

Unfortunately, in vs code's integrated terminal, you have to cd .. and cd back in.

In Mac's Terminal it works automatically.

File just needs:

v10.13.0

Need to run these commands on local computer:

yarn global add  avn avn-nvm avn-n
avn setup

Please add these commands to environment setup section.

https://github.com/wbyoung/avn

Add how to review a PR documentation

I want to empower the team to review and merge each other's tickets, so that in a weekend, you're not waiting on me to review an merge a ticket that is blocking other PRs.

This will also keep more of the team aware of a wider breadth of the codebase.

Except for documentation PRs, it's important to run the app locally, because many times, you'll find inadvertent behavior that the CI tests won't catch.

As a huge head start you can copy much of this document, written largely by @mattwr18, in one of his greatest PRs ever. 😁 https://github.com/championer-org/championer_one/blob/develop/devdocs/HOW-TO-REVIEW-A-DEVELOP-PR.md

That is obviously a Phoenix app that uses npm, so a lot of it will need to be altered, but here are the tl;dr commands for us:

git fetch upstream
git checkout 57-artist-performance-component //for example
yarn
yarn test
// Press a to run all tests
// Press q to quit watch mode.
yarn start
// Review and inspect the app and its elements for expected and unexpected behavior

Also add instructions that you always want to review the Files changed.

You can navigate there by clicking on the tab in the PR page:

...or adding /files to the end of the PR url, for example https://github.com/AgileVentures/sfn-client/pull/71/files

I prefer to view the diffs in Unified form, rather than the default Split.

You can also add comments to a particular line of code, by clicking on the plus icon when you hover over a line:

You can then either just provide the single comment or start a review, if you haven't, yet:

Update README with yarn test command

yarn test

I know this is a simple step. But it's a good first issue to get someone contributing, and it's an art to find the right spot to place it, and the right words to surround it, explaining what it does and what it's for.

Add Enzyme adapter setup

So that we don't have to add enzyme adapter configuration to every test file, we need to create a common test setup file:

src/setupTests.js

You'll add the following code into that file:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

See https://airbnb.io/enzyme/docs/installation/ for more guidance

The mockups have been created as a desktop, but eventually we'll need a mobile version of the site, and it's good to do it parallel. Does Agile Ventures have some icon library you use already, maybe @FedericoEsparza you know? I would suggest the Noun project as they have really nice icons.

We have the edit mockup on Balsamiq: https://github.com/AgileVentures/sfn-client/blob/develop/documentation/wireframes/wireframes_sfn_client.bmpr

The scope of the ticket is to update the Design documentation using Balsamiq: https://balsamiq.com/wireframes/desktop/

The edit mockup optimally goes underneath the show mockup, so anyone feeling adventurous can pick it up.

Add codeclimate to the repo so code improvements are highlighted before merge for refactoring.

Implement ArtistBio component

This will be a direct child of the Artist container

Refactor Causes Container

After #83 has been merged in, refactor, move, and rename src/components/Causes/CausesContainer.js.

It's new home and name will be src/components/Causes/Causes.js

Move the test along with it: src/components/Causes/Causes.test.js
will now be at src/containers/Causes/Causes.test.js

You'll need to refactor the reference to ./CausesContainer and change it to ./Causes
in the test file.

You'll also need to refactor the class name and the export default to Causes

In src/components/App.js you'll have to refactor the import statement to

import Causes from "../containers/Causes/Causes";

And you'll also have to refactor the reference to the container in that file from {CausesContainer} to {Causes}

Leave an empty .keep file in src/components/Causes/

Implement docker setup for development

Remove this part of the README since it's a bit misleading with the broken link until we have complete setup: "First be sure that you've set up your development environment following all the steps in **Setting Up for Development on WebSiteOne (Project Set Up) 🚧"

As following the Tachyons library structure, I would like to add a clear hierarchical typography scale to the project that will help developers and designers working together in the system.

Add routing

yarn add react-router-dom

Import react-router-dom into index.js

Routes for /artists and root are ok at first.

Add yarn instruction on install

After we ask people to install yarn, we need to tell them to run yarn, so that their node modules can be installed.

Otherwise, yarn start won't work.

Add trending artists component list

We need another list component.

It will be imported intosrc/components/Artists/ArtistsContainer.js

Let's call it TrendingArtistsList

Gives instructions on how to set up development environment for the project

Implement Artist container component

This is the parent component where all of the Artist page components will be imported

describe its

Let's add describe blocks to our tests.

In our it functions, the it is what we are testing.

And a top level describe is referring to our component, typically.

So let's make that clear.

Wrap our tests (or it functions) in describe functions and have the first argument be a string representation of the component.

It can just be "App" for example, but I like this format: "<App />"

The second argument is an arrow function where the tests will be executed.

You should see a difference when you run the tests, too.

Update README with yarn start command.

yarn start

We need to add it back in. It got removed, when we took out the ultra long boilerplate README.

Adding the basics of color anyone can style the components based on the inspirational designs we have.

Add more routes. We need a few more.

If you look at src/components/App.js

    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={HomeContainer} />
          <Route path="/about" component={AboutContainer} />
          <Route path="/causes" component={CausesContainer} />
          <Route path="/artists/:id" component={ArtistContainer} />
          <Route path="/performances" component={PerformancesContainer} />
          <Route path="/contact" component={ContactContainer} />
        </div>
      </BrowserRouter>
    </div>

We have routes for the "index" of causes and the "index" of performances, but not the individual ones, like we have for artists (e.g./artists/5).

Conversely, we don't have a route for the "index" of artists, like we do in /performances and /causes

Please create the corresponding container components too. Be careful in terms of plural and singular, when naming them.

          <Route path="/causes" component={CausesContainer} />
          <Route path="/artists/:id" component={ArtistContainer} />
          <Route path="/performances" component={PerformancesContainer} />

These are correct. Just follow the same structure (e.g. Cause for the individual causes).

Add contents of yarn.lock to repo

Create test file for ArtistPerformance Component

Remove mile-long README

Add simple instructions for updating the dependencies (i.e. run yarn), starting, and testing the app.