nerder / gh-explorer Goto Github PK

Description

I just fix some error that lint throw out.

requirements

• fetch real results from github

sub issues

• fetch real results #21
• show a loader while fetching results #23
• Handle API errors and show them out #31

requirements

• the app should be organized in two routes (in terms of react-router):
  • one for the main view (list of results)
  • one for the detail view (details of each result/repo)

specs

• just define an appropriate routes structure and put dummy placeholder content for each one
• Create 2 routes
• The second route accept params
• Linking to the correct route and come back to home route

The logo image have to scale. No responsive atm

Requirements

TODO

Sub issues

• Open a Modal when user click on Show More #36
• Show details info & Style Modal #41

Requirements

We need to add a 404 not found page, in order to give feedback for non existing resources

Specs

• Build new route
• Use NotFoundRoute

The search buttons will be misaligned from the search bar for every mobile view (Portrait)

Waiting for a .gif that shows the issue.
(Once i get how to do it 😄 )

requirements

scope of the iteration:

• implement the page layout
  • nav bar
    • left: app name
    • center: search component
    • right: empty
  • results panel
    • should be a floating panel

sub-issues

• main layout structure #8
• implement NavBar #9
• implement ResultsPanel #11

mockup

<- #7

requirements

• left: the app name (GH-Explorer? you can choose!)
• right: nothing
• center: SearchBar
  • composed by one input and one button
  • should notify parent with new value when user clicks on button
• UI
  • content max-width: 1000px
  • you can style the rest as you wish (background-color, height ....)

specs

• use NavBar (https://github.com/buildo/react-components/tree/master/src/nav-bar)

<- #7

requirements

The scope of this issue is to simply define the layout. No logic, style nor sub-components (like SearchBar or ResultsPanel should be implemented)

• page should not scroll vertically (the scroll will be inside the ResultsPanel itself)
• main content (future ResultsPanel will be inside it) is centered horizontally
• main content should grow horizontally, but no higher than 1000 px
• main content should grow vertically (we want it to fill the available vertical space)

for the mockup refer to #7

specs

• use FlexView for basic layout (https://github.com/buildo/react-components/tree/master/src/flex)
• consider using NavBar (https://github.com/buildo/react-components/tree/master/src/nav-bar)

<- #35

Requirements

Open a Modal box when the user click on Show More button, on the list. Fetch data from the api and let it close when user click out.

Specs

• Use ModalManager and BasicModal from BRC
• onDismiss go into the back route
• Fetch data from the gh API

description

• default route is never shown

steps to reproduce

• go to http://localhost:9090/#/dasa: not found route is not shown

Requirements

Install a new version (more strict) of eslint and fix errors

requirements

• currently, even though the top level App is the theoretical state owner for the search box value, it has no way of forcing it to a value different than what the input.value holds. This should be fixed
• value/onChange handling can be simplified, at least at SearchBox level

specs

• use linkState and componentWillReceiveProps

@nerder we should do this together

Requirements

You we get some errors that github API gives to you and show them to the user as a feedback

Specs

• Catch the error into App.js and than propagate it since the ResultPanel.js
• Show up the message and the status code

<- #22

requirements

• show a loader while the http call to github is ongoing

specs

• use LoadingSpinner from: https://github.com/buildo/react-components/tree/master/src/loading-spinner
• import css called style.scss. Note: need to be refactored
• Use the state and check if value are fetched correctly or not inside of a returned Promise

<- #7

requirements

• fill all available space (constraints should be already defined on its parent with #8 )
• may scroll internally
  • in this case we want to show an arrow on the bottom right of the panel
    • onClick should scroll programmatically to top with easing (:P)
• should receive its values as prop
  • if undefined
    • placeholder (user hasn't searched anything yet)
  • if values is an empty array
    • placeholder (no results)
  • if values is a valid array
    • show results (for now implement a mocked basic version of the ResultRow)

specs

you may consider using Panel (https://github.com/buildo/react-components/tree/master/src/Panel)
and ScrollView (https://github.com/buildo/react-components/tree/master/src/scroll)

mockups

initial state

no result

results

<- #22

requirements

• when the user clicks on the search button, we should ask for results from github.
  • You can choose the precise api and parameters (probably https://api.github.com/search/repositories)
• for each result, we should show the repo name and description
• each repo name should also link (in a separate window) to the github.com page

specs

• you should use axios to make http calls
• probably you want to keep api calls to a separate file e.g. api.js and export functions from there (each one should return a promise)
• TODO complete here with the final api parameters

Now the scroll-upbutton is always shown, it have to appear only when is actually needed.
(maybe with a nice fade-in animation :P)

Requirements

The animation have to be fluid for every results length

Specs

use a ternary operator and make it done

Requirements

We need to refactor the whole code base in order to use the routing system in the right way. We want to introduce new route search/:query to manage the ResultPanel and search/:query/detail/:idDetail in order to manage ModalManager

Specs

• Pass router to AppRoute, and use it to change the route programmatically using transitionTo from react-router (v0.13.x)
• uncouple the massive use of state from App and split it to the dedicated component that really have to manage the state
• Do the same exact thing with Detail and show his content on click of Show More

Requirements

Show the right infos fetched from server into the Modal block and style it, in order to be compliant with the rest of the App.

Specs

• Style the transition for leave and enter of the modal
• Style the entire box
• Valuable infos: name, description, owner , stats. Where stats is number of commit, number of issues, number of stars, number of contributors