Using my restudy to add back to my projects

This week I used what I have re-learned from my curriculum to go over alternate ways to do my previous projects. I had done them two ways initially so I have added my code back, which was less efficient, in order to study how it worked and how condensing it helped. Of course, it is all commented out.

constructor(props) {
        super(props);
        this.state = {
                this.state = {
          error: null,
          isLoaded: false,
          // characters: [] does not do anything in my current itteration of code 
        };
      }
      componentDidMount() {
        this.props.fetchCharacters();
        // fetch(URL)
        //   .then(res => res.json())
        //   .then(
        //     (result) => {
        //       this.props.setAllCharacters(
        //         result.data
        //       );
        //     },
        //     (error) => {
        //       this.setState({
        //         isLoaded: true,
        //         error
        //       });
        //     }
        //   )
      }
      render() {
        const { error } = this.state;
        const { characters } = this.props;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else {
          return (
 class CharacterList extends Component {
            <ul>
              {characters.map(character => (
                <LinkToCharacters character= {character} />
                // <li key={character.id}>
                //     <Link to= {`/characters/${character.id}`}>
                //         {character.attributes.name}
                //     </Link>
                // </li>
              ))}
            </ul>
          );
        }
        // return (
        //   <div>
//   </div>
        // )
      }
}
const mapStateToProps = state => {
  // console.log(state)
  return {
    // characters: state.allCharacters
    characters: state.characters
  }
}
export default connect(mapStateToProps, {fetchCharacters})(CharacterList) 
// const mapDispatchToProps = dispatch => {
//   return {
//     setAllCharacters:(characters) => dispatch(setAllCharacters(characters))
//   }
// }
// export default connect(mapStateToProps, mapDispatchToProps)(CharacterList)
export default connect(mapStateToProps, {fetchCharacters})(CharacterList)

This is the code for the Character List portion of my React League project, with the // being the commented out portion. It was fun to go over it again and see how the “less efficient” code worked. I luckily had the documentation from earlier on so I could reread this and see what my initial thought processes were in this project. I had help from a friend who is a React Engineer for a local company, and she was an amazing help when it came to refactoring my code, as well as helping me write the initial lower level portion. This time I get to go through it myself without anyone clarifying, so I can do the research myself and hope to ingrain more of this mentally.

headers: {
                "Content-Type": "application/json",
                Accept: "application/json"
            },
                        },
            body: JSON.stringify(character)
        };
        console.log("c")
        fetch("http://localhost:3001/characters", configObj) 
        // number of p rq
        .then((res) => res.json())
        .then((newCharacter) => {
            console.log("d")
            dispatch(addCharacter(newCharacter))});
    }
}
const addCharacter = (character) => ({type: "ADDED_CHARACTER", payload: character})

With this bit of code, all I did was add back the console.log ("c") and console.log("d") to my project so I can track the order in which my fetches are happening, so I can visualize and conceptualize the inner workings more efficiently.

I also added my previous version of my reducer which I need to re study, because to be quite frank I was somewhat lost in what my idea was here, granted I am not the best with reducers in the first place. This will be my next step this week to further advance my learning.

// const initialState = {
//     allCharacters: [],
// }
// export default (state = initialState, action) => {
//     switch(action.type) {
//         case "SET_ALL_CHARACTERS":
//             return {
//                 ...state,
//                 // allCharacters: action.allCharacters
//                 allCharacters: action.payload
//             }
//         default:
//             return state
//     }
// }
// export const setAllCharacters = allCharacters => {
//     return {
//         type: "SET_ALL_CHARACTERS",
//         allCharacters
//     }
// }

That was it for this week, but it was a lot of fun seeing how I progressed through the life of my time at Flatiron School.