Slides Content UpdatedHEADmaster

* Adds useContext
* Adds useReducer

1 files changed, 346 insertions, 7 deletions

diff --git a/src/slides.svelte b/src/slides.svelte
index fe5582b..3be07cd 100644
--- a/src/slides.svelte
+++ b/src/slides.svelte
@@ -10,6 +10,7 @@
 	} from '@components'
 	import { signal } from '@motion'
 	import StateNotes from "./notes/state.notes.svelte"
+	import useReducerImg from "@assets/useReducer.png";
 
 	const circle = signal(
 		{ x: 0, y: 200, r: 80, fill: '#00ffff' },
@@ -171,6 +172,9 @@
 	</Slide>
 	<Slide on:in={animate} animate>
 		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js">
 				{`
@@ -182,7 +186,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="3-4">
 				{`
@@ -195,7 +199,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="3-4">
 				{`
@@ -208,7 +212,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="3-4">
 				{`
@@ -220,7 +224,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="3-4">
 				{`
@@ -232,7 +236,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="3-4">
 				{`
@@ -244,7 +248,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="3-4">
 				{`
@@ -257,7 +261,7 @@
 		</div>
 	</Slide>
 	<Slide on:in={animate} animate>
-		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>		
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useEffect</p>
 		<div class="mx-auto">
 			<Code lang="js" lines="4-6">
 				{`
@@ -282,4 +286,339 @@
 			</ul>
 		</Notes>
 	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="3-4">
+				{`
+				import { createContext, useContext, useState } from 'react';
+
+				const AppContext = createContext(null);
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="5-18">
+				{`
+				import React, { createContext, useContext, useState } from 'react';
+
+				export const AppContext = createContext(null);
+
+				export default function MyApp() {
+					const [someState, setSomeState] = useState('hello');
+					return (
+						<>
+						<AppContext.Provider value={someState}>
+							<MyComponent />
+						</AppContext.Provider>
+						<Button onClick={() => {
+							setTheme(someState === 'hello' ? 'World' : 'Blah');
+						}}>
+						</Button>
+						</>
+					)
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="6">
+				{`
+				import React, { useContext, useState } from 'react';
+				
+				import {AppContext} from "./MyApp";
+
+				export default function MyComponent() {
+					const appContext = useContext(AppContext)
+					return (
+						<div>{appContext}</div>
+					)
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useContext</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="8">
+				{`
+				import React, { useContext, useState } from 'react';
+				
+				import {AppContext} from "./MyApp";
+
+				export default function MyComponent() {
+					const appContext = useContext(AppContext)
+					return (
+						<div>{appContext}</div>
+					)
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<Media
+			class="h-[501px] w-[891px]"
+			src={useReducerImg}
+			type="iframe"
+		/>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="1">
+				{`
+				import {useReducer} from "react";
+
+				function myReducer(state, action) {
+					if(action.type === "on") {
+						return {
+							data: "Switch on"
+						}
+					} else if(action.type === "of") {
+						return {
+							data: "Switch Off"
+						}
+					}
+				}
+
+				export function MyComponent(props) {
+					const [state, dispatch] = useReducer(myReducer, {});
+
+					function onSwitchToggle(status) {
+						dispatch({
+							type: status
+						})
+					}
+
+					return(
+						<div>
+							<button onClick={onSwitchToggle("on")}>ON</button>
+							<button onClick={onSwitchToggle("off")}>Off</button>
+						</div>
+					)
+
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="15-31">
+				{`
+				import {useReducer} from "react";
+
+				function myReducer(state, action) {
+					if(action.type === "on") {
+						return {
+							data: "Switch on"
+						}
+					} else if(action.type === "of") {
+						return {
+							data: "Switch Off"
+						}
+					}
+				}
+
+				export function MyComponent(props) {
+					const [state, dispatch] = useReducer(myReducer, {});
+
+					function onSwitchToggle(status) {
+						dispatch({
+							type: status
+						})
+					}
+
+					return(
+						<div>
+							<button onClick={onSwitchToggle("on")}>ON</button>
+							<button onClick={onSwitchToggle("off")}>Off</button>
+						</div>
+					)
+
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="3-13">
+				{`
+				import {useReducer} from "react";
+
+				function myReducer(state, action) {
+					if(action.type === "on") {
+						return {
+							data: "Switch on"
+						}
+					} else if(action.type === "of") {
+						return {
+							data: "Switch Off"
+						}
+					}
+				}
+
+				export function MyComponent(props) {
+					const [state, dispatch] = useReducer(myReducer, {});
+
+					function onSwitchToggle(status) {
+						dispatch({
+							type: status
+						})
+					}
+
+					return(
+						<div>
+							<button onClick={onSwitchToggle("on")}>ON</button>
+							<button onClick={onSwitchToggle("off")}>Off</button>
+						</div>
+					)
+
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<div class="mx-auto">
+			<Code lang="js" >
+				{`
+				import {useReducer} from "react";
+
+				function myReducer(state, action) {
+					if(action.type === "on") {
+						return {
+							data: "Switch on"
+						}
+					} else if(action.type === "of") {
+						return {
+							data: "Switch Off"
+						}
+					}
+				}
+
+				export function MyComponent(props) {
+					const [state, dispatch] = useReducer(myReducer, {});
+
+					function onSwitchToggle(status) {
+						dispatch({
+							type: status
+						})
+					}
+
+					return(
+						<div>
+							<button onClick={onSwitchToggle("on")}>ON</button>
+							<button onClick={onSwitchToggle("off")}>Off</button>
+						</div>
+					)
+
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="4-14">
+				{`
+				import {useReducer} from "react";
+
+				function myReducer(state, action) {
+					if(action.type === "on") {
+						return {
+							...state,
+							data: "Switch on",
+						}
+					} else if(action.type === "of") {
+						return {
+							...state,
+							data: "Switch Off"
+						}
+					}
+				}
+
+				export function MyComponent(props) {
+					const [state, dispatch] = useReducer(myReducer, {});
+
+					function onSwitchToggle(status) {
+						dispatch({
+							type: status
+						})
+					}
+
+					return(
+						<div>
+							<button onClick={onSwitchToggle("on")}>ON</button>
+							<button onClick={onSwitchToggle("off")}>Off</button>
+						</div>
+					)
+
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
+	<Slide on:in={animate} animate>
+		<p class="font-bold text-6xl mb-4 text-yellow-500">useReducer</p>
+		<div class="mx-auto">
+			<Code lang="js" lines="6|11">
+				{`
+				import {useReducer} from "react";
+
+				function myReducer(state, action) {
+					if(action.type === "on") {
+						return {
+							...state,
+							data: "Switch on",
+						}
+					} else if(action.type === "of") {
+						return {
+							...state,
+							data: "Switch Off"
+						}
+					}
+				}
+
+				export function MyComponent(props) {
+					const [state, dispatch] = useReducer(myReducer, {});
+
+					function onSwitchToggle(status) {
+						dispatch({
+							type: status
+						})
+					}
+
+					return(
+						<div>
+							<button onClick={onSwitchToggle("on")}>ON</button>
+							<button onClick={onSwitchToggle("off")}>Off</button>
+						</div>
+					)
+
+				}
+				`}
+			</Code>
+		</div>
+	</Slide>
 </Presentation>