Harrison Malone harrisonmalone

i have an image uploads implementation finished for my bookmarks app https://harrisonsbookmarks.netlify.app

i can write full docs for it as well but here is a quick summary:

from the client side you need to change your form to encType="multipart/form-data" to allow for the form to deal with files
you add the file to state via an onChange handler
when the form is submitted you create a form data object that is sent in the body of the POST
all of this code can be found here https://github.com/CoderAcademy-MEL/ft-bookmarks-client/blob/master/src/components/CreateBookmark.jsx
the create action then receives the params and creates the bookmark
rails has active storage tables setup and a bookmark has_one_attached image

MongDB

Just like Postgres before we can start using MongoDB we need to install it on our machines and have it running.

MacOS using Hombrew

brew update
brew install mongodb

Mini Project

This is a chance to implement a Rails / React full stack app, and get some practice with all the pieces of technology we have used to date.

We are again going to base the app around recipes. I'm also happy for you to continue to build upon the countries travel app that you started earlier this week if you want. If you are feeling confident, you are welcome to take this project off in any direction that you like, and start building something that you are interested in, as long as you use React, Rails and a relational database.

But if you are keen on some direction, please follow these steps.

If you don't understand what is going on in any of these steps, please ask. It is important to understand why you are taking these steps as you go.

	# aliases

	# this clears the screen in a nice way than command k
	alias c='clear'

	# this cds to icloud drive
	alias ic='cd ~/Library/Mobile\ Documents/com~apple~CloudDocs/ && code .'

	import React, { useState, useEffect } from "react";
	import UserOutput from './UserOutput'
	import UserInput from "./UserInput";

	// challenge 1
	function App() {
	const [user, setUser] = useState(null)

	useEffect(() => {
	const getUserData = async () => {

	# this gets rid of annoying bash warning
	export BASH_SILENCE_DEPRECATION_WARNING=1

	# this adds variable to bash_profile
	export NVM_DIR="$HOME/.nvm"

	# this loads nvm
	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

	# this loads nvm bash_completion

	class Dog {
	present() {
	}
	static myMethod() {
	}
	}

	console.dir(Dog)

	// you can see that myMethod is on the class, it's a static method

	#1 Random user challenge

	1. Create a new react app
	2. Make the App component a class component that returns "hello world"
	3. Fetch data from the random user api https://randomuser.me/, what lifecycle method should you fetch data from

	e.g

	fetch("https://randomuser.me/api/")
	.then((res) => res.json())

	<header>
	<h1 id="hello-world">Hello world</h1>
	<p>This is some text.</p>
	</header>
	<section class="tasks">
	<h3 id="tasks">Tasks</h3>
	<ol>
	<li>Teach class</li>
	<li>Complete challenges</li>
	</ol>

	<body>
	<header>
	<h1>Welcome To Sandras Profile Page</h1>
	<nav>
	<ul>
	<li><a href="#about-me">About Me</a></li>
	<li><a href="#fav-foods">Favourite Foods</a></li>
	<li><a href="#contact">Contact Details</a></li>
	</ul>
	</nav>