Blog Project Progress

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})
      })

    }

  }