page not rendering on first click

23
December 17, 2018, at 00:00 AM

simple program that grabs user information from an external API. Grabs user info and stores to database just fine, but unsure why click handler that submits username has to be clicked twice. Here's code:

frontend:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import Search from './components/Search.jsx';
import RepoList from './components/RepoList.jsx';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
repos: []
}
}
componentDidMount() {
$.ajax({
url: 'http://localhost:1128/repos',
method: 'GET',
success: data => { this.setState({repos: data}); },
error: () => console.log('GET error!')
});
}
search (term) {
$.ajax({
url: 'http://localhost:1128/repos',
method: 'POST',
contentType: 'text/plain',
data: term,
success: () => { this.componentDidMount() },
error: () => console.log('POST error!')
});
}
render () {
return (<div>
<h1>Github Fetcher</h1>
<RepoList repos={this.state.repos}/>
<Search onSearch={this.search.bind(this)}/>
</div>)
}
}
ReactDOM.render(<App />, document.getElementById('app'));

Search Component: unsure if this needs to have a state. Some clarification of when and when not to use state would be greatly appreciated as well.

import React from 'react';
class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
term: ''
}
this.onChange = this.onChange.bind(this);
this.search = this.search.bind(this);
}
onChange (e) {
this.setState({
term: e.target.value
});
}
search() {
this.props.onSearch(this.state.term);
}
render() {
return (<div>
<h4>Add more repos!</h4>
Enter a github username: <input value={this.state.terms}
onChange={this.onChange}/>
<button onClick={this.search}> Add Repos </button>
</div>)
}
}
export default Search;

List Component:

import React from 'react';
import RepoListEntry from './RepoListEntry.jsx';
const RepoList = (props) => (
<div>
<h4> Top {props.repos.length} Repos </h4>
<table>
  <tbody>
 <tr>
<th>username</th>
<th>repo_name</th>
 <th>html_url</th>
</tr>
{props.repos.map((repo, index) => <RepoListEntry repo={repo} key={index}/>)}
</tbody>
</table>
</div>
)
export default RepoList;

ListEntry Component:

import React from 'react';
const RepoListEntry = (props) => (
<tr>
<td>{props.repo.owner_login}</td>
<td>{props.repo.name}</td>
<td><a href={props.repo.html_url}>{props.repo.html_url}</a></td>
</tr>
)
export default RepoListEntry;

Backend, Server:

const db = require('../database/index.js');
const github = require('../helpers/github.js');
const parse = require('body-parser');
const express = require('express');
let app = express();
app.use(express.static(__dirname + '/../client/dist'));
app.use(parse.text());
app.post('/repos', function (req, res) {
  let saveRepos = repos => repos.forEach(db.save);
  github.getReposByUsername(req.body, saveRepos);
res.status(200).send('repos posted!');
});
app.get('/repos', function (req, res) {
//res.status(200);
console.log(res, 'RESSSSS');
db.fetch(res.send.bind(res));
});
let port = 1128;
app.listen(port, function() {
console.log(`listening on port ${port}`);
});

Database:

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/fetcher');
let repoSchema = mongoose.Schema({
_id: Number,
name: String,
owner_login: String,
html_url: String,
description: String,
stargazers_count: Number,
forks_count: Number,
archived_at: { type: Date, default: Date.now }
});
let Repo = mongoose.model('Repo', repoSchema);
let save = repo => {
var doc = new Repo({
_id: repo.id,
name: repo.name,
owner_login: repo.owner.login,
html_url: repo.html_url,
description: repo.description,
stargazers_count: repo.stargazers_count,
forks_count: repo.forks_count
})
doc.save(err => { if (err) return console.log(err) });
}
let fetch = callback => {
let cb = (err, repos) => { callback(repos) };
Repo.find(cb).sort('-stargazers_count').limit(25);
}
module.exports.save = save;
module.exports.fetch = fetch;

Helpers:

const request = require('request');
const config = require('../config.js');
let getReposByUsername = (username, callback) => {
let options = {
url: `https://api.github.com/users/${username}/repos`,
headers: {
'User-Agent': 'request',
'Authorization': `token ${config.TOKEN}`
}
};
request(options, (err, res, body) => {
callback(JSON.parse(body));
});
}
module.exports.getReposByUsername = getReposByUsername;
READ ALSO
Whats Wrong with LINK_TO , i use laravel V5.2

Whats Wrong with LINK_TO , i use laravel V5.2

this error enter image description here

26
Optimizing RabbitMQ consumers to consume in batch

Optimizing RabbitMQ consumers to consume in batch

I have an application where on every message consumption I need to query the MySQL database for some information and based on that process the consumed messageI would want to optimize this so as to prevent multiple queries on the database adding up to the load

43
Select specific column from specific row (Python - MySQL)

Select specific column from specific row (Python - MySQL)

So I'm not so experienced in Python, but I really enjoy making stuff with itI decided to start using Python to interact with MySQL in one of my projects

63
Weird error with NoClassDefFoundError in com.google.android.gms.ads.internal.util.aq.a

Weird error with NoClassDefFoundError in com.google.android.gms.ads.internal.util.aq.a

I have got a weird crash report on my google console which seems to be related with google ad moduleHere is a stack trace reported on Google Console

31