start to add data fetching

Author: Ankcorn

src/app/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Auth from '@aws-amplify/auth';
+import useTodos from '../hooks/useTodos';
 
 function usePrivate() {
 	const [state, setState] = useState();
@@ -22,7 +23,8 @@ function usePrivate() {
 
 function App() {
 	const user = usePrivate();
-
+	const stuff = useTodos();
+	console.log(stuff)
 	if (!user) {
 		return (<div>
 			... Please Wait
@@ -50,40 +52,6 @@ function App() {
 				</div>
 			</header>
 
-
-			<section class="text-gray-700 body-font">
-				<div class="container px-5 py-24 mx-auto flex flex-wrap flex-col">
-					<div class="flex mx-auto flex-wrap mb-20">
-						<a class="sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium bg-gray-100 inline-flex items-center leading-none border-teal-500 text-teal-500 tracking-wider rounded-t" href="#home">
-							<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5 mr-3" viewBox="0 0 24 24">
-								<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
-							</svg>STEP 1
-      					</a>
-						<a class="sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium inline-flex items-center leading-none border-gray-200 hover:text-gray-900 tracking-wider" href="#home">
-							<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5 mr-3" viewBox="0 0 24 24">
-								<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
-							</svg>STEP 2
-      					</a>
-						<a class="sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium inline-flex items-center leading-none border-gray-200 hover:text-gray-900 tracking-wider" href="#home">
-							<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5 mr-3" viewBox="0 0 24 24">
-								<circle cx="12" cy="5" r="3"></circle>
-								<path d="M12 22V8M5 12H2a10 10 0 0020 0h-3"></path>
-							</svg>STEP 3
-     					 </a>
-						<a class="sm:px-6 py-3 w-1/2 sm:w-auto justify-center sm:justify-start border-b-2 title-font font-medium inline-flex items-center leading-none border-gray-200 hover:text-gray-900 tracking-wider" href="#home">
-							<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5 mr-3" viewBox="0 0 24 24">
-								<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
-								<circle cx="12" cy="7" r="4"></circle>
-							</svg>STEP 4
-      					</a>
-					</div>
-					<img class="xl:w-1/4 lg:w-1/3 md:w-1/2 w-2/3 block mx-auto mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600" />
-					<div class="flex flex-col text-center w-full">
-						<h1 class="text-xl font-medium title-font mb-4 text-gray-900">Master Cleanse Reliac Heirloom</h1>
-						<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them man bun deep jianbing selfies heirloom prism food truck ugh squid celiac humblebrag.</p>
-					</div>
-				</div>
-			</section>
 		</div>
 	)
 }

src/hooks/useTodos.js

@@ -0,0 +1,27 @@
+import useSWR from 'swr';
+import axios from 'axios';
+import Auth from '@aws-amplify/auth';
+
+async function get(url) {
+	return axios.get(url, {
+		headers: {
+			authorization: (await Auth.currentSession()).getIdToken().getJwtToken()
+		}
+	})
+}
+
+async function post(url, body) {
+	return axios.get(url, body, {
+		headers: {
+			authorization: (await Auth.currentSession()).getIdToken().getJwtToken()
+		}
+	})
+}
+
+export default function useTodos() {
+	const { data, loading } = useSWR('/api/todo', get);
+
+
+
+	return { loading, todos: data, create: (body) => post('api/todo', body) }
+}