From 66c96efad824aab98a8fc985dcc8c070ece7ce9b Mon Sep 17 00:00:00 2001 From: olya Date: Mon, 9 Sep 2024 12:49:46 +0300 Subject: [PATCH] Onboarding (#155) * onboarding layout * edit profile avatar * onboarding tasks --- web/app/(pages)/onboarding/page.tsx | 5 ++ .../(pages)/profile/_components/wrapper.tsx | 77 ++++------------ .../sidebar/partial/profile-section.tsx | 9 ++ web/components/routes/OnboardingRoute.tsx | 89 +++++++++++++++++++ 4 files changed, 122 insertions(+), 58 deletions(-) create mode 100644 web/app/(pages)/onboarding/page.tsx create mode 100644 web/components/routes/OnboardingRoute.tsx diff --git a/web/app/(pages)/onboarding/page.tsx b/web/app/(pages)/onboarding/page.tsx new file mode 100644 index 00000000..b286035c --- /dev/null +++ b/web/app/(pages)/onboarding/page.tsx @@ -0,0 +1,5 @@ +import OnboardingRoute from "@/components/routes/OnboardingRoute" + +export default function EditProfilePage() { + return +} diff --git a/web/app/(pages)/profile/_components/wrapper.tsx b/web/app/(pages)/profile/_components/wrapper.tsx index 725583d0..c1f2c445 100644 --- a/web/app/(pages)/profile/_components/wrapper.tsx +++ b/web/app/(pages)/profile/_components/wrapper.tsx @@ -1,12 +1,13 @@ "use client" import { useAccount } from "@/lib/providers/jazz-provider" +import { useUser } from "@clerk/nextjs" import { useState, useRef, useCallback } from "react" import { useParams } from "next/navigation" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import Link from "next/link" -import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar" +import { Avatar, AvatarImage } from "@/components/ui/avatar" interface ProfileStatsProps { number: number @@ -26,8 +27,20 @@ export const ProfileWrapper = () => { const account = useAccount() const params = useParams() const username = params.username as string + const { user, isSignedIn } = useUser() const avatarInputRef = useRef(null) + const editAvatar = (event: React.ChangeEvent) => { + const file = event.target.files?.[0] + if (file) { + console.log("File selected:", file) + const imageUrl = URL.createObjectURL(file) + if (account.me && account.me.profile) { + account.me.profile.avatarUrl = imageUrl + } + } + } + const [isEditing, setIsEditing] = useState(false) const [newName, setNewName] = useState(account.me?.profile?.name || "") const [error, setError] = useState("") @@ -72,13 +85,6 @@ export const ProfileWrapper = () => { setError("") } - const editAvatar = (event: React.ChangeEvent) => { - const file = event.target.files?.[0] - if (file) { - console.log("File selected:", file) - } - } - if (!account.me || !account.me.profile) { return (
@@ -107,14 +113,12 @@ export const ProfileWrapper = () => {

{username}

- - - avatarInputRef.current?.click()} className="cursor-pointer"> - {account.me?.profile?.name?.charAt(0)} - - + -
{isEditing ? ( <> @@ -161,46 +165,3 @@ export const ProfileWrapper = () => {
) } - -{ - // interface ProfileLinksProps { - // linklabel?: string - // link?: string - // topic?: string - // } - // interface ProfilePagesProps { - // topic?: string - // } - // const ProfileLinks: React.FC = ({ linklabel, link, topic }) => { - // return ( - //
- //
- //

{linklabel || "Untitled"}

- //
- // - //

{link || "#"}

- //
- //
- //
{topic || "Uncategorized"}
- //
- // ) - // } - // const ProfilePages: React.FC = ({ topic }) => { - // return ( - //
- //
{topic || "Uncategorized"}
- //
- // ) - // } - /* - -

{account.me.root?.website}

- */ - /* */ -} diff --git a/web/components/custom/sidebar/partial/profile-section.tsx b/web/components/custom/sidebar/partial/profile-section.tsx index 2f0809eb..76c8653e 100644 --- a/web/components/custom/sidebar/partial/profile-section.tsx +++ b/web/components/custom/sidebar/partial/profile-section.tsx @@ -66,6 +66,15 @@ export const ProfileSection: React.FC = () => { + + +
+ + Onboarding +
+ + + signOut()}>
diff --git a/web/components/routes/OnboardingRoute.tsx b/web/components/routes/OnboardingRoute.tsx new file mode 100644 index 00000000..017c856c --- /dev/null +++ b/web/components/routes/OnboardingRoute.tsx @@ -0,0 +1,89 @@ +"use client" + +import { LaIcon } from "../custom/la-icon" +import { useState } from "react" + +const steps = [ + { + number: 1, + title: "Create Link", + description: + "Links are essentially bookmarks of things from internet. You can create a link by pressing Links button in left sidebar. Then pressing + button on the bottom.", + task: "create any Link with any title or description (for example, you can add https://learn-anything.xyz as link)" + }, + { + number: 2, + title: "Create Page", + description: + "Pages are things with content inside (images, text, anything). You can think of them as Notion pages. To create page, press the + button next to pages, then create title and put some content.", + task: "create any Page with any content inside" + }, + { + number: 3, + title: "Start tracking Learning status of some Topic", + description: + "What makes Learn Anything different from Notion and other tools is notion of topics. A topic is anything after learn-anything.xyz/, for example learn-anything.xyz/typescript. You can go to the page, then on top right corner where it says add to my profile, press it and change the state of the topic to I want to learn, Learning or Learned.", + task: "go to any Topic, and mark it as I want to learn" + }, + { + number: 4, + title: "Add a Link from a Topic into personal link collection", + description: + "If you noticed, there are links attached to topics as a list. This is the topic's study guide. It will be improved greatly in future and we will allow any user to edit these study guides too (Reddit style). You can click on the circle to left of the links and add a link to your personal collection with learning status too.", + task: "add any Link from topic typescript into your personal collection" + } +] + +const StepItem = ({ + number, + title, + description, + task, + done +}: { + number: number + title: string + description: string + task: string + done: boolean +}) => ( +
+
+ {number} +
+
+

{title}

+

{description}

+
+ +

{task}

+
+
+
+) + +export default function OnboardingRoute() { + const [completedSteps, setCompletedSteps] = useState([]) + + const stepComplete = (stepNumber: number) => { + setCompletedSteps(prev => + prev.includes(stepNumber) ? prev.filter(num => num !== stepNumber) : [...prev, stepNumber] + ) + } + + return ( +
+
+

Onboarding

+
+
+

Complete the steps below to get started

+
+ {steps.map(step => ( + + ))} +
+
+
+ ) +}