dillionverma / github-issues-explorer Goto Github PK
View Code? Open in Web Editor NEWHacktoberfest 2018 :ghost: github issues explorer :jack_o_lantern:
Hacktoberfest 2018 :ghost: github issues explorer :jack_o_lantern:
Issues will have an issue icon
Pull requests will have a pull request icon.
(to check if an issue is actually a pull request, check if the pull_request
key exists.)
Bonus: If issues are open, show green icon. If closed, show red icon.
If pull request merged, show purple pull request icon.
Similar to this
Right now we are using a very unstructured way to style our issues viewer. Lets use scss which allows us to have nested styles.
The two main files which need refactoring are Landing.css and Issues.css.
The combined total lines of css is 150 lines
Check this tutorial to get started.
BONUS Make scss variables for the colors which are repeated throughout the app
Currently my default eslint settings are clashing with project style, and I have to manually edit half of the file before commit
Right now, when fetching issues from github issues API, there are pull requests mixed in with the issues:
We want to add another filter here:
Such that we can filter by pull requests.
To do this, you must have some knowledge or react/redux. Look into here to see how filtering works. You would need to add another conditional there to see if an issue is a pull request or not. Here is where the filtering is activated from.
I've noticed that the issues list is handled with flex and margin and the values seem to be chosen in an arbitrary way.
While this is working perfectly, I think we can do better by making use of CSS Grid.
Basically, we just need to add this code into .issues-container
๐
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 2rem;
Currently they're same style
Example:
https://api.github.com/repos/facebook/react/issues?state=all&page=2
To get started, add a page
attribute to the state in the react component here
Then, you have to pass the page number as a function argument to this function called from here and here
Last step would be adding a pagination component at the bottom of the page so that on click, the page number increases/decreases
Maybe look into this component to help out
This is a very beginner friendly issue!
In the file Issues.js you will notice that an isLoading
prop is passed to the Component.
Your task will be to use that prop and display a loading spinner while isLoading
is true. Look into any spinner of your choice and be creative!
Hint: This might be a good library for spinners if you are stuck.
Add a simple transition effect between the landing page and the actual github issues page so it feels smoother.
This has to be done on the react router level. Most likely something in App.js
.
See this video for example
Can maybe look into this post for inspiration
In current scenario we don't have any back button to go landing page.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.