From 1a54474a4a0377110e29d9d42b5cfd021d453a16 Mon Sep 17 00:00:00 2001 From: Martin Sosic Date: Fri, 7 Jul 2023 21:14:45 +0200 Subject: [PATCH] Updated example ideas. --- wasp-ai/src/client/components/ExampleCard.jsx | 8 ++-- wasp-ai/src/client/examples.ts | 42 +++++++++++-------- wasp-ai/src/client/pages/MainPage.jsx | 11 +---- wasp-ai/src/client/pages/StatsPage.jsx | 4 +- 4 files changed, 32 insertions(+), 33 deletions(-) diff --git a/wasp-ai/src/client/components/ExampleCard.jsx b/wasp-ai/src/client/components/ExampleCard.jsx index 97721a102..a616be0db 100644 --- a/wasp-ai/src/client/components/ExampleCard.jsx +++ b/wasp-ai/src/client/components/ExampleCard.jsx @@ -13,7 +13,7 @@ export function ExampleCard({ idea, useIdea }) { className="bg-slate-50 p-8 rounded-xl mt-2 flex flex-col items-center cursor-pointer hover:shadow-lg transition-all" onClick={() => useIdea(idea)} > -
+

-

- {idea.description} -

+
+ {idea.description.split('\n').map(str =>

{str}

)} +
diff --git a/wasp-ai/src/client/examples.ts b/wasp-ai/src/client/examples.ts index eff260b83..bea270b86 100644 --- a/wasp-ai/src/client/examples.ts +++ b/wasp-ai/src/client/examples.ts @@ -1,30 +1,36 @@ import { availableColors } from "./components/Color"; -export const poolOfExampleIdeas = [ +export const exampleIdeas = [ { name: "TodoApp", description: - "A simple todo app with one main page that lists all the tasks. I can create new tasks, or toggle existing ones. " + - "User owns tasks. User can only see and edit their own tasks. Tasks are saved in the database.", + "A simple todo app with one main page that lists all the tasks." + + " User can create new tasks by providing their description, toggle existing ones, or edit their description." + + " User owns tasks. User can only see and edit their own tasks. Tasks are saved in the database.", color: availableColors.find((color) => color.name === "rose"), }, + { + name: "MyPlants", + description: + "A simple app where user can track their plants and their watering schedule." + + "\nHome page should list all of the users plants, and show for each one how many days are left until it needs to be watered." + + "\nFor each plant, there should also be a 'Water' button, that resets the watering schedule for that plant." + + "\nHome page should also have a 'Create new plant' button, that takes you to a new page where you can create a new plant." + + "\nWhen creating a new plant, user should give it a name, and specify how often it needs to be watered (in the number of days)." + + "Plants are saved in the database. User can access only their own plants. User needs to be logged in to access the app.", + color: availableColors.find((color) => color.name === "green"), + }, { name: "Blog", description: - "A blog with posts and comments. Posts can be created, edited and deleted. Comments can be created and deleted. Posts and comments are saved in the database.", + "A blog with posts and post comments. Posts can be created, edited and deleted. Comments can be created. Posts and comments are saved in the database." + + "\nUser owns posts and comments. Everybody can see all posts and comments, but only the owner can edit or delete them." + + "\nHome page lists all posts (their titles and authors) and is accessible by anybody. It also has a 'Create new post' button, that only logged in users can see." + + " It has a 'Log in' button, that only logged out users can see." + + "\nThere is a second page, to which 'Create new post' button takes you, for creating / editing a post. Only post author can access it." + + "\nFinally, there is a third page, for viewing individual post in details, to which you are taken by clicking on the post on the home page." + + "\nAnybody can access this page. It also lists all post comments, and logged-in users can add new comments." + , color: availableColors.find((color) => color.name === "amber"), - }, - { - name: "FlowerShop", - description: - "A flower shop with a main page that lists all the flowers. I can create new flowers, or 'water' existing ones. " + - "User owns flowers. User can only see and edit their own flowers. Flowers are saved in the database.", - color: availableColors.find((color) => color.name === "emerald"), - }, - { - name: "WeatherApp", - description: - "Build a simple app that uses the browser to get the current user's location. It then fetches the current weather. It uses the Open Weather API on the backend", - color: availableColors.find((color) => color.name === "sky"), - }, + } ]; diff --git a/wasp-ai/src/client/pages/MainPage.jsx b/wasp-ai/src/client/pages/MainPage.jsx index 5b42d9b43..93e28a624 100644 --- a/wasp-ai/src/client/pages/MainPage.jsx +++ b/wasp-ai/src/client/pages/MainPage.jsx @@ -5,7 +5,7 @@ import { MyDropdown } from "../components/Dropdown"; import { ExampleCard } from "../components/ExampleCard"; import { Header } from "../components/Header"; import { availableColors } from "../components/Color"; -import { poolOfExampleIdeas } from "../examples"; +import { exampleIdeas } from "../examples"; import { PiMagicWandDuotone } from "react-icons/pi"; const MainPage = () => { @@ -69,13 +69,6 @@ const MainPage = () => { } } - // Pick random 3 ideas - const ideasToDisplay = useMemo( - () => - poolOfExampleIdeas.sort(() => Math.random() - Math.random()).slice(0, 3), - [] - ); - function useIdea(idea) { setAppName(idea.name); setAppDesc(idea.description); @@ -166,7 +159,7 @@ Based on it, our AI code agent will then generate a full stack web app in Wasp, Some example ideas
- {ideasToDisplay.map((idea) => ( + {exampleIdeas.map((idea) => ( ))}
diff --git a/wasp-ai/src/client/pages/StatsPage.jsx b/wasp-ai/src/client/pages/StatsPage.jsx index 42616d7cd..0b9ab3915 100644 --- a/wasp-ai/src/client/pages/StatsPage.jsx +++ b/wasp-ai/src/client/pages/StatsPage.jsx @@ -7,7 +7,7 @@ import { format } from "timeago.js"; import { StatusPill } from "../components/StatusPill"; import { BarChart } from "../components/BarChart"; import ParentSize from "@visx/responsive/lib/components/ParentSize"; -import { poolOfExampleIdeas } from "../examples"; +import { exampleIdeas } from "../examples"; import logout from "@wasp/auth/logout"; import { WaspIcon } from "../components/WaspIcon"; import { Header } from "../components/Header"; @@ -59,7 +59,7 @@ export function Stats() { if (filterOutExampleApps) { filters.push( (stat) => - !poolOfExampleIdeas.some( + !exampleIdeas.some( (example) => example.name === stat.name && example.description === stat.description