In this post:
- Inline Links
- Deciding to use hooks from the blog's early stages
- Problems setting-up routing and a CRUD api.
Linking to Headers
I'm trying something new here for clarity and organization: a table of contents. My thinking its that it'll provide a quick preview of what's in each post - which can be helpful for posts like these that cover different topics. Maybe that itself is a signal that I should decompose the multi-topic posts and make this blog more tweet-like.
Anyway, it took way too long to figure out how to link to headers (two minutes is too long for something simple like that) but I eventually found this link.
But to spare you a click, all you've got to do is link in the normal way (brackets and parentheses) but the link itself should be:
- a reference to a heading (h1, h1, etc)
- lower-case
- hyphenated
Hooks Decision
Slow progress is still progress.
After doing some set-up for the back-end, my thoughts shifted toward putting some front-end into place and that brought me to juncture.
Simply put, it's time I've learned hooks. I've decided to not refactor my FEC project with hooks - it's too state-heavy of a project and too important of a project to get right. Besides, there's plenty of other work yet to do - completing features and styling - to undertake a project that's sort-of a lateral move.
The blog project, being essentially a blank canvas, feels like a really good opportunity to apply hooks as I learn them. This process is also a really good vindication of my theory about this sort of project. Yes it's about actually making a product/service, but it's a tremendous vehicle for learning.
CRUD API
I made a silly mistake when I was setting up the initial routing for the blog.
Essentially, I wasn't distinguishing data API endpoints from user endpoints. So when typing the Read ('get data') endpoint into the browser, I was mystified as to why I was only getting raw JSON data back, and not a user-friendly html page that rendered that data. Not my brightest and proudest moment.
But eventually I realized what was going on and adjusted by creating /api/ routes for interacting with my back-end server. Those routes are to be used by the other routes that the users directly access.
Here's a bit of a breakdown:
These express routes match up to the users endpoint ('/:user/feed') and the CRUD api endpoint ('/api/:user/feed') that it accesses:
app.get('/:user/feed', (req, res) => {
res.sendFile(path.join(__dirname, '/../client/dist/index.html'));
});
app.get('/api/:user/feed', (req, res) => {
const user = req.params['user']
var userPosts = fetch.fetchAllbyUser(user, (err, data) => {
if(err){
throw(err)
} else{
res.json(data)
console.log(data)
}
})
});
Express routes are reflected here. This React code relies on React-Router to select which components to render:
const App = () => {
return (
<div className="App">
<Router>
{/* <Navigation /> */}
<Switch>
<Route path="/all" exact component={(props) => <Feed {...props} feedView={'all'}/>} />
<Route path="/:user/feed" exact component={(props) => <Feed {...props} feedView={'user'}/>} />
<Route path="/:user/post/:post_id " exact component={(props) => <Post {...props}/>} />
</Switch>
{/* <Footer /> */}
</Router>
</div>
);
// <RepoList/>
}
ReactDOM.render(<App />, document.getElementById('app'));
The call to the the api endpoint. This performs a cRud read:
const getFeedOneUser = (user = 'Zach', callback) => {
const instance = axios.create({
baseURL: 'http://localhost:8000',
});
instance.get(`/api/${user}/feed`)
.then(response => {
console.log(response.data);
callback(null,response.data)
})
.catch(function (err) {
console.log(err);
callback(err, null)
})
.then(function () {
//
});
}
Finally, the component that is routed to by React-Router and that calls the api:
class Feed extends React.Component{
//...
componentDidMount(){
//...
if(this.props.feedView === 'all'){
httpHandler.getFeedAllUsers((err, data)=>{
this.setState({postData:data})
console.log(data)
})
} else {
httpHandler.getFeedOneUser(user, (err, data)=>{
this.setState({postData:data})
})
}
}
Top comments (0)