elephantgraveyard.txt

notes:

How I originally fetched recipes using get static props.
This is server side rendering.
I moved away from this on Monday 2/15 or Tuesday

// MUST USE ABSOLUTE PATH FOR THIS TO WORK
// export async function getStaticProps(context) {
//   const res = await fetch('http://localhost:5000/api/recipes')
//   const recipeData24 = await res.json()

//   if (!recipeData24) {
//     return {
//       notFound: true,
//     }
//   }

//   return {
//     props: {recipeData24,}, // will be passed to the page component as props
//   }
// }


Tried this but couldn't get it to work, gave up on it earlier this wee
Thursday 2/18
  // Split title on the word if awkward 2 liner
  let recipeTitle = props.title;
  if (recipeTitle.length > 31 && recipeTitle.length < 43) {
    let titleSplit = recipeTitle.split(" ");
    let count = 0;
    let spliceIndex = 0;
    for (let i=0; i< titleSplit.length; i++) {
      count += titleSplit[i].length;
      if (count>20) {
        spliceIndex = i;
        break;
      }
    }
    titleSplit.splice(spliceIndex, 0, '{"\n"}');
    recipeTitle = titleSplit.join(" ");
  }



// MUST USE ABSOLUTE PATH FOR THIS TO WORK
// fetch returns a promise to get the data
// data is an http Response object promise <> Response
// await is keyword to allow you to await a promise
// This is the static way to fetch data, Today is Day 9 on this project
// Need to evolve.
// export async function getStaticProps(context) {
//   const res = await fetch('http://localhost:5000/api/recipes')
//   const recipeData24 = await res.json()

//   if (!recipeData24) {
//     return {
//       notFound: true,
//     }
//   }

//   return {
//     props: {recipeData24} // will be passed to the page component as props
//   }
// }


// Resource: Codecademy.com React
// const options = ["Bell Pepper", "Sausage", "Pepperoni", "Pineapple"];

// export default function PersonalPizza() {
//   const [selected, setSelected] = useState([]);
 
//   const toggleTopping = ({target}) => {
//     const clickedTopping = target.value;
//     setSelected((prev) => {
//      // check if clicked topping is already selected
//       if (prev.includes(clickedTopping)) {
//         // filter the clicked topping out of state
//         return prev.filter(t => t !== clickedTopping);
//       } else {
//         // add the clicked topping to our state
//         return [clickedTopping, ...prev];
//       }
//     });
//   };
 
//   return (
//     <div>
//       {options.map(option => (
//         <button value={option} onClick={toggleTopping} key={option}>
//           {selected.includes(option) ? "Remove " : "Add "}
//           {option}
//         </button>
//       ))}
//       <p>Order a {selected.join(", ")} pizza</p>
//     </div>
//   );
// }


//fetch('/recipes_data') -> Promise<response>
//  This is going to fetch the data and it's going to wait until it's fetched.




export default function Home(props) {
  // best place to fetch data because it's called right away

  const fetcher3 = url => fetch(url).then(r => r.json())

  let user_id = 1;
  // useSWR takes 2 parameters: the URL, and how to fetch it (.then promise)
  // beneath the hood useSWR has 1 object with 2 keys returned, data and error
  // we call this destructuring :)
  const { data, error } = useSWR(`/api/users/${user_id}/recipes`, fetcher3)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  // DON'T EVEN NEED THIS
  // // return object with key props and value recipe data so you can just use props. from now on
  // return {
  //   props: {recipeData24}
  // };
  // // I self called this so I won't have to call it right afterward. :)

// MUST USE ABSOLUTE PATH FOR THIS TO WORK
// EVOLVED MY CODE 2/17/21 11:00 PM
// export async function getStaticProps(context) {
//   const res = await fetch('http://localhost:5000/api/recipes')
//   const recipeData24 = await res.json()

//   if (!recipeData24) {
//     return {
//       notFound: true,
//     }
//   }

//   return {
//     props: {recipeData24,}, // will be passed to the page component as props
//   }
// }

        // OLD CODE THAT DIDN'T TALK TO BACKEND
        // this sets the state for my selected recipes (adds/ removes)
        // setFavorite((favorite) => {
        //   if (favorite == true) {
        //     console.log("This was a favorited recipe, but now it isnt!")
        //     console.log(props)
                

        //   }
        //   if (favorite == false) {
        //     console.log("This was not a favorited recipe. Now it is!")
          
        //   }


    # Bring to my server post request
    # Make sure my component renders that post request
    # Build a component that will be redirected to that holds the results

    # Do this first then get text message going
    # Then get venmo modal going
    # Last week thing: Security before deployment
    # OAuth - Google, not easy or straight forward

    # search_variable = '%{}%'.format(search_phrase)
    # print("This is my search variable:", search_variable)

    #https://stackoverflow.com/questions/3325467/sqlalchemy-equivalent-to-sql-like-statement

    

Replaced this with map method on array 3/7 [tag_id].js
  // const recipeCards = [];

  // for (const recipe of props.recipeData24) {
  //   recipeCards.push(
  //     <RecipeCard
  //     title={recipe.title}
  //     directions={recipe.directions}
  //     img={recipe.img}
  //     recipe_id={recipe.recipe_id}
  //     />
  //   );
  // }

Replaced this with map method on array 3/7 index.js
    const recipeCards = [];

  for (const recipe of props.recipeData48) {
    recipeCards.push(
      <RecipeTile
      title={recipe.title}
      directions={recipe.directions}
      recipe_id={recipe.recipe_id}
      img={recipe.img}
      />
    );
  }

Replaced this with map metho 3/7 personalizedgrocerylist.js

    // let options = [];

    // for (const recipe of props.userRecipesData) {
    //     options.push(recipe.title);
    // }

Replaced Nav Bar with bootstrap Nav Bar 3/9

      {/* THIS IS WITHOUT BOOTSTRAP!!! - CHANGED 3/9/21
      <nav id="top-nav">
        <div className={styles['nav-left']}>
          <Link href="/"><a><img src="http://localhost:5000/static/img/logo.png" alt="My TJ's Run Logo" height="40px" /></a></Link>
          <button className={styles['left']} id={styles['get-started-button']} type="button" onClick={(e) => { e.preventDefault(); router.push('/myrecipes'); }}>
            {bookicon} My Recipes
          </button>
          <button className={styles['left']} id={styles['get-started-button']} type="button" onClick={(e) => { e.preventDefault(); router.push('/mygrocerylist'); }}>
            { basketicon } { smsicon } My Grocery List
          </button>
        </div>
        <div className={styles['nav-right']}>
          <form onSubmit={handleSearch} className={styles['search-form']}>
            <input type="text"
              placeholder="Search"
              name="search_string"
              autoComplete="off"
              required />
            <button className={styles['search-button']} type="submit">
              {searchicon}
            </button>
          </form>
          <button
            className={styles['right']}
            type="button"
            title="Find a Trader Joe's"
            onClick={(e) => { e.preventDefault(); router.push('/storelocator');
          }}>
            { searchlocationicon }
          </button>
          { welcome }
          { logInOrOut }
          
        </div>
    </nav> */}