Ninja Space Content Blog

1. After I've created a new react app with the "create-react-app" command. I created a 'component' folder under the 'src' folder. Then inside the 'component' folder, I created two files: 'Posts.js' and 'Postform.js'.
2. Shortcuts >>> You can type rcc and then the 'tab' button to quickly get a class component set up or rfc and then the 'tab' button to get a function set-up quickly.
3. React Legacy Update >>> The video said to use "componentWillMount" but that is now legacy.
4. When you are ready to maintain state, implement redux and install their libraries so "npm i redux react-redux redux-thunk"
5. To use redux, I created 2 new folders: actions and reducers. Then, I created the following 5 new files: postActions.js and types.js for 'actions' folder, index.js and postReducer.js for 'reducers' folder and a store.js file! 
6. Extra Important Notes:

• You will need to use Provider in this, which is a react component. It allows us to use redux and react together. You'll wrap <Provider> around the entire app.
• To see the state in the redux extension tools, remember to add the following: + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() to the createStore function. You will need to import "compose" as well. Here is how my entire store.js file looks like with this implementation.

It really seems like I had to create a lot of additional files to just to use redux instead of just using react hooks, but I know the developing world demands it, especially for state management.

I also want to note that other functions had to be imported because you have to create the store and make sure you connect react to redux.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
const initialState = {};

const store = createStore(
  rootReducer, 
  initialState, 
  composedEnhancer
);

export default store;

server.all('*', (req, res, next) => {
 res.header("Access-Control-Allow-Origin", "*");
 next();
});

1. Use onInit method to call http services and constructor should not call http services. Oninit is a lifestyle hook. When we use the ng onInit method, we tell the compiler about it.
2. We want to implement Separate of Concerns. For example, don't include delete responsibility in the same class or service of a new post because it is hard to maintain and test.
3. To create a new service: ng g s post
4. Handling Errors Types:
5. 1. Server is offline
   2. Network is down
   3. Unhandled exceptions
   4. "Not found" errors (404) -- expected error
   5. "Bad request" errors (400) -- expected error

import {HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';

import {Observable, throwError} from 'rxjs';
import {catchError} from 'rxjs/operators';
import { AppError } from '../common/app-error';
import { NotFoundError } from '../common/not-found-error';

@Injectable({
 providedIn: 'root'
})
export class PostService {
 private url = 'http://jsonplaceholder.typicode.com/posts'

 constructor(private http: HttpClient) { }
 getPost() {
  return this.http.get(this.url);
 }

 createPost(post: any) {
  return this.http.post(this.url, JSON.stringify(post))
 }

 updatePost(post: any) {
  return this.http.patch(this.url + '/' + post.id, JSON.stringify({isRead: true}))
 }

 deletePost(id: number) {
  return this.http.delete(this.url + '/' + id)
  .pipe(catchError(error => {
   if (error.status === 404) 
    return throwError(new NotFoundError());
    
   return throwError(new AppError(error));
  })) 
 }
}

1. Go to "Settings" of your working site. Then, go to "Publishing" on the left side bar. At the bottom of the page, click on "Connect with Facebook". 
2. Select the Facebook page you'd like to use for this particular Yola site. If you've configured a facebook publishing feature for a different Yola site for a Facebook page before, hit "Edit Settings" instead of "Continue as..." of your account (this will open a new tab or window). Select the exact Facebook page you'd like to use for your particular account (this is for those who have many Facebook pages under one Facebook account), then toggle "Yes" to allow Yola Website Builder to manage your Facebook page. 
3. Then go back to the original tab of your "Publishing" settings. You'll see a radio button to select that exact Facebook page to allow the "Website" tab to show up on your Facebook page. You'll notice that before you did this, a "Website" tab was not seen from your list of tabs on your Facebook page. After a few minutes, you should see it as Yola has done this for you automatically since you've allowed them to publish it on your behalf. It is pretty cool.