amodinho / formulaone-graphql-client

The front-end for 'FanBoost', powered by React-Apollo! 🏎🏂

Amo Moloko - @AmoDinho 🧜‍♂️

---

Yo 🤙 ! I'm Amogelang, usually people call me Amo. I love using JavaScript to build whatever I can imagine.

😎 What I do currently?

I'm a fullstack engineer at Tripplo, helping to shape the movement of road freight across Sub-Saharan Africa. 🚚

I'm big on learning how to integrate bleedging edge tech that improves my developer experince into my production workflows, in the fastest way possible.

Big believer in learning how to do difficult things and then replicating them at speed in a simple and sustainable manner. 🧁 As well as putting everything I learn on the job out in the open for the community to benefit from.

🧨 What do I use to get the job done ?

• React
• Vue
• GraphQL
• Jest
• Testing library
• AWS (Lambda, DynamoDB, Cognito, SES, SNS, SQS,S3)
• Netlify
• Seed
• Design Systems
• My brain to think about problems deeply
• A positive mindset
• Hunger/desire (helps to ship small iterative chunks of work 🐐).

const opinion = "If you can't read and understand other programming languages you're a suspect dev"
const unpopularOpinion = () => console.log(opinion)

unpopularOpinion()

formulaone-graphql-client's Issues

Post Mutation: Submission

After trying to Create a new driver this is the error message:

GraphQLError: Variable "$name" of required type "String!" was not provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
GraphQLError: Variable "$team" of required type "String!" was not provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
GraphQLError: Variable "$points" of required type "Int!" was not provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
GraphQLError: Variable "$pictureURL" of required type "String!" was not provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
GraphQLError: Variable "$country" of required type "String!" was not
provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
GraphQLError: Variable "$podiums" of required type "Int!" was not provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
GraphQLError: Variable "$championshipWins" of required type "Int!" was not provided.
    at getVariableValues (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\values.js:69:23)    at buildExecutionContext (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:246:63)
    at executeImpl (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:140:17)
    at Object.execute (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\graphql\execution\execute.js:131:229)    at doRunQuery (C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:124:42)
    at C:\Users\Sindile Xulu\Documents\GitHub\formulaone-graphql\server\node_modules\apollo-server-core\dist\runQuery.js:21:56
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Loading States Non Existant

Need to supply better UX for the loading states when mutations and queries take place through out the app

Uncontrolled/Controlled Components

index.js:2178 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
    in input (at CreateDriver.js:85)
    in div (at CreateDriver.js:70)
    in div (at CreateDriver.js:69)
    in CreateDriver (at App.js:9)
    in App (at src/index.js:22)
    in ApolloProvider (at src/index.js:21)

Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (at CreateDriver.js:85)
    in div (at CreateDriver.js:70)
    in div (at CreateDriver.js:69)
    in CreateDriver (at App.js:9)
    in App (at src/index.js:22)
    in ApolloProvider (at src/index.js:21)

React-Select Styling

React-Select is not meeting the requirements from our style guide

onChange Event Handler Upgrade

Currently the following event handler does not show user input in the components :

  /*
    onChange = event => {
        this.setState({
            [event.target.id]: event.target.value
        });
    } */

Pagination For Circuits not Working

When running const page = parseInt(this.props.match.params.page, 10) on the CircuitList.js it returns NaN

Update Driver UI Issues

Issue 1: When you updated a driver the default values do not get submitted with the form

Issue 2: After updating the driver I need better Updates from the UI.

Handling negative coordinates

When submitting negative coordinates the map displays a false location.

Cannot Update the cache

I am struggling to update the cache after deleting the driver. The user has to manually refresh the browser!

Unaligned Form in CreateDriver.js

The form for creating the driver is poorly aligned. The number inputs are not inline the text inputs.

Subscription Error

The console is spitting out this error : GraphQL error: Cannot query field "driver" on type "Driver"

This happen while trying to implementing this subscription:

const NEW_BOOSTS_SUBCRIPTION = gql`
 subscription{
    newBoost{
          node {
              id
             driver{
            id
              createdAt
              name
              team
              points
              pictureURL
              country
              podiums
              championshipWins
              postedBy {
                  id
                  name
            
              }
              boosts {
                  id
                  user{
                      id
                  }
              }
             }
            user{
                id

            }
          }
        }
     }

I suspect I am not adhering to a constraint on the schema.

Navigation Bar Not responsive

Expected behavior: I need the navigation bar to be able to collapse when the screen size is below 1000px. Then I should be able to toogle a button to open the nav bar.

here is the css:

.menu ul {
    
    display: grid;
    grid-template-columns: repeat(8, minmax(10px,1fr));
    list-style: none;
    justify-content: space-around;
    margin-left: 200px;
    grid-column-gap: 20px;
    margin-bottom:-20px;
  }
  

 
  
  [aria-controls="menu-list"] {
    visibility: hidden;

}


  @media (max-width: 1000px) {

    .menu {
      order: -1;
      perspective: 800px;
    }
    [aria-controls="menu-list"] {
      display: block;
      margin-bottom: 10px;
      visibility: visible;

      
    }
  
    .menu ul {
      max-height: 0;
      overflow: hidden;
      transform: rotateX(90deg);
      grid-template-rows: repeat(7,1fr);
      transition: all 0.5s;
    }
  
    [aria-expanded="true"] ~ ul {
      display: grid;
      max-height: 500px;
      transform: rotateX(0);
    }
  
    [aria-expanded="false"] .close {
      display: none;
    }
  
    [aria-expanded="true"] .close {
      display: inline-block;
    }
  
    [aria-expanded="true"] .open {
      display: none;
    }
  
  }

Here is the JSX:

class Header extends Component{

     toggleNav = ({ target })  => {
        const navButton = document.querySelector('button[aria-expanded]');
        const expanded = target.getAttribute('aria-expanded') === 'true' || false;
        navButton.setAttribute('aria-expanded', !expanded);
      }

   render(){
    const authToken = localStorage.getItem(AUTH_TOKEN)

       return (
        <nav className="menu bb red">
        
        <div className="flex flex-fixed white">

        <div className="fw7 mr1 ml4 white"><h1>Forumla One</h1>
        <button aria-expanded="false"  onClick={this.toggleNav} aria-controls="menu-list">
          <span className="open">☰</span>
          <span className="close">×</span>
          Menu
        </button>
        </div>
        <ul id="menu-list">
          <li>
          <Link to="/" 
          className="ml5  grow dtc no-underline black">
           <h3>New</h3>
           </Link>
          </li>

          <li>
          <Link to="/top" className=" grow dtc no-underline black">
           <h3>Top</h3>
           </Link>          
           </li>

          <li>
          <Link to="/search" className=" grow  dtc no-underline black">
           <h3>Search</h3>
           </Link>
          </li>

          <li>
          <Link to="/Circuits" className=" ml7 grow  dtc no-underline black">
           <h3>Circuits</h3>
           </Link>          
           </li>

          <li>
          <Link to="/theatre" className=" grow  dtc no-underline black">
           <h3>Theatre</h3>
           </Link>          
           </li>

           <li>
             
           {authToken &&(
              
               <Link to="/create" className="ml3 grow  no-underline white">
               <h3>Submit</h3>
               </Link>
               
           )}
           </li>
           <li>
           {authToken ? (
                 <div 
                 className="ml1 mt2 grow pointer red"
                 onClick={() => {
                     localStorage.removeItem(AUTH_TOKEN)
                     this.props.history.push(`/`)
                 }}>
                 <h3>Logout</h3>
                 </div>
             ): (
             <Link to="/login" className=" login ml7 grow dtc grow no-underline white">
             <h3>Login</h3>
             </Link>
                
             )}
                
               </li>
         
        </ul>
        
          </div>


         
      </nav>
       )
   }
}

Dropdown Menu Not visible

When you view the page for the circuit and try to access the dropdown menu, it does not allow you to access its items