+
+
+
+ {user ? (
+ <>
+ Welcome, {user.username}!
+
+
+ ) : (
+ Not logged in
+ )}
+
+ + {error.status} {error.statusText} +
+{error.data}
+ + ); + } else if (error instanceof Error) { + return ( +
+
+ );
+ } else {
+ return Error
+{error.message}
+The stack trace is:
+{error.stack}
+ Unknown Error
; + } +} diff --git a/basics/react-react-router-7-data/app/routes.tsx b/basics/react-react-router-7-data/app/routes.tsx new file mode 100644 index 0000000..110fdc9 --- /dev/null +++ b/basics/react-react-router-7-data/app/routes.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import type { RouteObject } from "react-router"; +import Root, { RootErrorBoundary } from "./root"; +import Home from "./routes/home"; +import Burrito from "./routes/burrito"; +import Profile from "./routes/profile"; + +export const routes: RouteObject[] = [ + { + path: "/", + element:
+
+ );
+ }
+
+ return (
+ Welcome back, {user.username}!
+You are now logged in. Feel free to explore:
+-
+
- Consider the potential of burritos +
- View your profile and statistics +
+
+ );
+}
diff --git a/basics/react-react-router-7-data/app/routes/profile.tsx b/basics/react-react-router-7-data/app/routes/profile.tsx
new file mode 100644
index 0000000..0835299
--- /dev/null
+++ b/basics/react-react-router-7-data/app/routes/profile.tsx
@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { useAuth } from '../contexts/AuthContext';
+import { usePostHog } from '@posthog/react';
+
+export default function ProfilePage() {
+ const { user } = useAuth();
+ const navigate = useNavigate();
+ const posthog = usePostHog();
+
+ useEffect(() => {
+ if (!user) {
+ navigate('/');
+ }
+ }, [user, navigate]);
+
+ if (!user) {
+ return null;
+ }
+
+ const triggerTestError = () => {
+ try {
+ throw new Error('Test error for PostHog error tracking');
+ } catch (err) {
+ posthog?.captureException(err);
+ console.error('Captured error:', err);
+ alert('Error captured and sent to PostHog!');
+ }
+ };
+
+ return (
+ Welcome to Burrito Consideration App
+Please sign in to begin your burrito journey
+ + + ++ Note: This is a demo app. Use any username and password to sign in. +
+
+
+ );
+}
diff --git a/basics/react-react-router-7-data/index.html b/basics/react-react-router-7-data/index.html
new file mode 100644
index 0000000..fd9d61d
--- /dev/null
+++ b/basics/react-react-router-7-data/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ User Profile
+ +
+
+
+ Your Information
+Username: {user.username}
+Burrito Considerations: {user.burritoConsiderations}
+
+
+
+
+
+
+ Your Burrito Journey
+ {user.burritoConsiderations === 0 ? ( +You haven't considered any burritos yet. Visit the Burrito Consideration page to start!
+ ) : user.burritoConsiderations === 1 ? ( +You've considered the burrito potential once. Keep going!
+ ) : user.burritoConsiderations < 5 ? ( +You're getting the hang of burrito consideration!
+ ) : user.burritoConsiderations < 10 ? ( +You're becoming a burrito consideration expert!
+ ) : ( +You are a true burrito consideration master! 🌯
+ )} +Vite + React
+
+
+
+
+ Edit src/App.tsx and save to test HMR
+
+ Click on the Vite and React logos to learn more +
+ + ) +} + +export default App diff --git a/basics/react-react-router-7-declarative/src/assets/react.svg b/basics/react-react-router-7-declarative/src/assets/react.svg new file mode 100644 index 0000000..6c87de9 --- /dev/null +++ b/basics/react-react-router-7-declarative/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/basics/react-react-router/src/components/Header.tsx b/basics/react-react-router-7-declarative/src/components/Header.tsx similarity index 78% rename from basics/react-react-router/src/components/Header.tsx rename to basics/react-react-router-7-declarative/src/components/Header.tsx index ef59909..8e76b41 100644 --- a/basics/react-react-router/src/components/Header.tsx +++ b/basics/react-react-router-7-declarative/src/components/Header.tsx @@ -1,8 +1,15 @@ import { Link } from 'react-router'; import { useAuth } from '../contexts/AuthContext'; +import { usePostHog } from '@posthog/react'; export default function Header() { const { user, logout } = useAuth(); + const posthog = usePostHog(); + + const handleLogout = () => { + posthog?.reset(); + logout(); + }; return (
+
+ );
+}
+
diff --git a/basics/react-react-router-7-declarative/src/routes/Home.tsx b/basics/react-react-router-7-declarative/src/routes/Home.tsx
new file mode 100644
index 0000000..727f94d
--- /dev/null
+++ b/basics/react-react-router-7-declarative/src/routes/Home.tsx
@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function Home() {
+ const { user, login } = useAuth();
+ const [username, setUsername] = useState('');
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+ setError('');
+
+ const success = await login(username, password);
+ if (success) {
+ setUsername('');
+ setPassword('');
+ } else {
+ setError('Please provide both username and password');
+ }
+ };
+
+ if (user) {
+ return (
+ Burrito consideration zone
+Take a moment to truly consider the potential of burritos.
+ +
+
+
+ {hasConsidered && (
+
+
+ + Thank you for your consideration! Count: {user.burritoConsiderations} +
+ )} +
+
+ Consideration stats
+Total considerations: {user.burritoConsiderations}
+
+
+ );
+ }
+
+ return (
+ Welcome back, {user.username}!
+You are now logged in. Feel free to explore:
+-
+
- Consider the potential of burritos +
- View your profile and statistics +
+
+ );
+}
+
diff --git a/basics/react-react-router-7-declarative/src/routes/Profile.tsx b/basics/react-react-router-7-declarative/src/routes/Profile.tsx
new file mode 100644
index 0000000..f3e6029
--- /dev/null
+++ b/basics/react-react-router-7-declarative/src/routes/Profile.tsx
@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function ProfilePage() {
+ const { user } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!user) {
+ navigate('/');
+ }
+ }, [user, navigate]);
+
+ if (!user) {
+ return null;
+ }
+
+ return (
+ Welcome to Burrito Consideration App
+Please sign in to begin your burrito journey
+ + + ++ Note: This is a demo app. Use any username and password to sign in. +
+
+
+ );
+}
+
diff --git a/basics/react-react-router-7-declarative/src/routes/Root.tsx b/basics/react-react-router-7-declarative/src/routes/Root.tsx
new file mode 100644
index 0000000..a884ffc
--- /dev/null
+++ b/basics/react-react-router-7-declarative/src/routes/Root.tsx
@@ -0,0 +1,14 @@
+import { Outlet } from "react-router";
+import Header from "../components/Header";
+import { AuthProvider } from "../contexts/AuthContext";
+
+export default function Root() {
+ return (
+ User Profile
+ +
+
+
+ Your Information
+Username: {user.username}
+Burrito Considerations: {user.burritoConsiderations}
+
+
+ Your Burrito Journey
+ {user.burritoConsiderations === 0 ? ( +You haven't considered any burritos yet. Visit the Burrito Consideration page to start!
+ ) : user.burritoConsiderations === 1 ? ( +You've considered the burrito potential once. Keep going!
+ ) : user.burritoConsiderations < 5 ? ( +You're getting the hang of burrito consideration!
+ ) : user.burritoConsiderations < 10 ? ( +You're becoming a burrito consideration expert!
+ ) : ( +You are a true burrito consideration master! 🌯
+ )} +
+
+
+
+ {user ? (
+ <>
+ Welcome, {user.username}!
+
+
+ ) : (
+ Not logged in
+ )}
+
+
+
+ );
+}
+
diff --git a/basics/react-react-router-7-framework/app/routes/error.tsx b/basics/react-react-router-7-framework/app/routes/error.tsx
new file mode 100644
index 0000000..1d01403
--- /dev/null
+++ b/basics/react-react-router-7-framework/app/routes/error.tsx
@@ -0,0 +1,14 @@
+import type { Route } from "./+types/error";
+
+export function meta({}: Route.MetaArgs) {
+ return [
+ { title: "Error Test - Burrito Consideration App" },
+ { name: "description", content: "Test error boundary" },
+ ];
+}
+
+export default function ErrorPage() {
+ // This will throw an error during render, which will be caught by ErrorBoundary
+ throw new Error('Test error for ErrorBoundary - this is a render-time error');
+}
+
diff --git a/basics/react-react-router/src/routes/home.tsx b/basics/react-react-router-7-framework/app/routes/home.tsx
similarity index 89%
rename from basics/react-react-router/src/routes/home.tsx
rename to basics/react-react-router-7-framework/app/routes/home.tsx
index 19e948b..3d1da3d 100644
--- a/basics/react-react-router/src/routes/home.tsx
+++ b/basics/react-react-router-7-framework/app/routes/home.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react';
import type { Route } from "./+types/home";
import { useAuth } from '../contexts/AuthContext';
+import { usePostHog } from '@posthog/react';
export function meta({}: Route.MetaArgs) {
return [
@@ -11,6 +12,7 @@ export function meta({}: Route.MetaArgs) {
export default function Home() {
const { user, login } = useAuth();
+ const posthog = usePostHog();
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
@@ -22,6 +24,12 @@ export default function Home() {
try {
const success = await login(username, password);
if (success) {
+ // Identifying the user once on login/sign up is enough.
+ posthog?.identify(username);
+
+ // Capture login event
+ posthog?.capture('user_logged_in');
+
setUsername('');
setPassword('');
} else {
diff --git a/basics/react-react-router/src/routes/profile.tsx b/basics/react-react-router-7-framework/app/routes/profile.tsx
similarity index 68%
rename from basics/react-react-router/src/routes/profile.tsx
rename to basics/react-react-router-7-framework/app/routes/profile.tsx
index 01d481c..87ec175 100644
--- a/basics/react-react-router/src/routes/profile.tsx
+++ b/basics/react-react-router-7-framework/app/routes/profile.tsx
@@ -1,12 +1,14 @@
+import { useEffect } from 'react';
import { useNavigate } from 'react-router';
-import { usePostHog } from 'posthog-js/react';
import type { Route } from "./+types/profile";
import { useAuth } from '../contexts/AuthContext';
+import posthog from 'posthog-js';
+import { usePostHog } from '@posthog/react';
export function meta({}: Route.MetaArgs) {
return [
- { title: "Profile - Burrito Consideration App" },
- { name: "description", content: "Your burrito consideration profile" },
+ { title: "User Profile - Burrito Consideration App" },
+ { name: "description", content: "View your profile and burrito consideration stats" },
];
}
@@ -14,10 +16,15 @@ export default function ProfilePage() {
const { user } = useAuth();
const navigate = useNavigate();
const posthog = usePostHog();
+
+
+ useEffect(() => {
+ if (!user) {
+ navigate('/');
+ }
+ }, [user, navigate]);
- // Redirect to home if not logged in
if (!user) {
- navigate('/');
return null;
}
@@ -25,9 +32,8 @@ export default function ProfilePage() {
try {
throw new Error('Test error for PostHog error tracking');
} catch (err) {
- posthog.captureException(err);
console.error('Captured error:', err);
- alert('Error captured and sent to PostHog!');
+ posthog.captureException(err);
}
};
@@ -50,13 +56,13 @@ export default function ProfilePage() {
Burrito consideration zone
+Take a moment to truly consider the potential of burritos.
+ +
+
+
+ {hasConsidered && (
+
+
+ + Thank you for your consideration! Count: {user.burritoConsiderations} +
+ )} +
+
+ Consideration stats
+Total considerations: {user.burritoConsiderations}
+Your Burrito Journey
{user.burritoConsiderations === 0 ? ( -You haven't considered any burritos yet. Visit the Burrito Consideration page to start!
+You haven't considered any burritos yet. Visit the Burrito Consideration page to start!
) : user.burritoConsiderations === 1 ? ( -You've considered the burrito potential once. Keep going!
+You've considered the burrito potential once. Keep going!
) : user.burritoConsiderations < 5 ? ( -You're getting the hang of burrito consideration!
+You're getting the hang of burrito consideration!
) : user.burritoConsiderations < 10 ? ( -You're becoming a burrito consideration expert!
+You're becoming a burrito consideration expert!
) : (You are a true burrito consideration master! 🌯
)} @@ -64,3 +70,4 @@ export default function ProfilePage() {
+
+
+
+
+ 
+ 
+
+
+
+
+