roadtoninja web site: create activity page. Better visibility on github activity

[blade-sensei]

draft sketch

notes about architecture pros cons

[blade-sensei]

archicture

[blade-sensei]

need to start mockups

[blade-sensei]

I was thinking about, what i really need and how. I need a overview of a progress in a day OR days. So i need to see clearly what are the comments of all REPOS/Projects in a same page (github doesnt prive a global overview dashboard).. Github provides an activity page "in profil" but there no details and you need to open PAGES and PAGES to see specific issus or comment... I need a page where i can see ALL. Groupy by projects and comments.

To allow a review and see a progress during x1 time to x20. I need that this page allows me to set a period time.

So: a repo while get a board. in this board we put issues. That we will comment.

Activity will fetch all the COMMENTS. ISSUES for each REPO. GRoup by repo of a specific TIME (today) or (from 2March to 2 April) example. !!!

I iwll create comments in a issue called "daily". This will allow me to organize my "tomorrow" todo list in a "reminder app" samsung.

[blade-sensei]

Mock

[blade-sensei]

query {

  viewer {
  issues(
    first: 5
    orderBy: { field: UPDATED_AT, direction: ASC},
    filterBy: { since: "2020-04-18T00:00:00Z"}
  ) {
      edges {
        node {
          repository {
            name
          }
          labels(first: 4) {
            edges {
              node {
                name
              }
            }
          }
          title,
          createdAt,
          updatedAt
          state
          comments(first:10) {
            edges {
              node {
                body
                createdAt,
                updatedAt
              }
            }
          }
        }
      }
    }
  }
}

[blade-sensei]

 const client = new HttpLink({
  uri: 'https://api.github.com/graphql',
  request: (operation) => {
    operation.setContext({
      headers: {
        authorization: `Bearer ${token}`
      }
    })
  }
});
`
``

[blade-sensei]

using apollo to get graphql data -> error wrap root element i tried to wrap the root with ApolloProvier but i didn't work.. i found another solution in this repo:

https://github.com/codebushi/gatsby-global-state

Create a global state to pass a client apollo instance.

[blade-sensei]

• P It seems that i cant get issue name in a single GET request issues/comments

• i need to do a request to each issues url...

• S: If we theory i only need comments for a specific ONE day.

• that means there will not be more than 30 comments per day. So it equals to do 30 request for issues information The solution maybe will be to: fetch /issues for only 1 repo (learning) for 1 day. then get all comments for 1 day of each issues

• P: since parameter returns only updated comments... bad for me.

• S: The solution would be to fetch all issues. Filter only issues that match with specific day/date, when create requests to get comments of issues.

• P: With Github RestAPI i can get issues of user ( i didnt tried but it seems you can) i can also get issues from specific repository.

• But in any case the response doesnt provide comments arrays. One solution could be to fetch comments directly with "issues/comments" route BUT the response doesnt provide "issue" information, so in both cases i need to do more requests for issues or comments.

• S: Github also provides GraphQL API i did some test this query works for me

• This query allow me to get issues of specific date. I will pick first 5 issues WHY ? As we cant request issues for 1 ONLY DAY, i can only get AFTER DATE issues. Solution: As the response is ASC the first objects are the closest to the date i don't need the latest objects. This is to match and only get the issues of the DAY.

Then i can get issues information like labels/name/number/state (without need extra request as like using rest API)

I can access comments directly, i assume that i will not comment more than 10 times an issue. so i set limit to first 10 comments per issue.

20/04 I can call GraphQL API Github with Apollo I pass client apollo instance. Works in browser

Now i need to refactor components

• Issue to display issue name, number, tags name, state (open/close)
• Comment display title, date, content.
• Issuing function components (not class)

Next: Primary

• toggle issues first DONE

• toggle comment DONE

• filter comment for specific date DONE

• graphql add parameter for date DONE

• Date picker doesnt work when we change it (no update), i think it beacause we set the state and after we call graphql but as setState is async grpaql has not the current date changed DONE Second

• Format dates done

• change size images done

• add icon to open/close done

• label colors done

• change style for code markdown https://medium.com/young-developer/react-markdown-code-and-syntax-highlighting-632d2f9b4ada done

• Now free style ...

• toggle only hidde content cards comment

• add comment url

• text when issues are empty

• icon for open/close

• add image url

• push to firebase or netlify (maybe both to test)

[blade-sensei]

Next steps

• Remove triangle toggle for comments and allow to close/open by clicking in title comment section
• Adapte to mobile (remove overlap space right side when comment has large text (width) ( i don't know how for the moment) DONE ✅

[blade-sensei]

Samsung internet (browser) doesnt handle input type date very well