Skip to content

Commit

Permalink
More modular and profile code, UI/language improvements (#598)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Winston-Hsiao
Winston-Hsiao authored Nov 12, 2024
1 parent f73e513 commit 62c87a4
Show file tree
Hide file tree
Showing 6 changed files with 209 additions and 169 deletions.
4 changes: 2 additions & 2 deletions frontend/src/components/listings/MyListingGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,14 @@ const MyListingGrid = ({ userId }: MyListingGridProps) => {
};

fetchListings();
}, [userId]);
}, [userId, auth.currentUser?.username]);

return listingInfos === null ? (
<div className="flex justify-center items-center h-64">
<Spinner />
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-4 sm:gap-6">
{listingInfos.map((info) => (
<Link
to={ROUTES.BOT.buildPath({
Expand Down
17 changes: 13 additions & 4 deletions frontend/src/components/listings/UpvotedGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";

import ListingGridCard from "@/components/listings/ListingGridCard";
import Spinner from "@/components/ui/Spinner";
Expand All @@ -8,6 +8,8 @@ import { useAlertQueue } from "@/hooks/useAlertQueue";
import { useAuthentication } from "@/hooks/useAuth";
import ROUTES from "@/lib/types/routes";

import { Button } from "../ui/button";

type ListingInfo =
paths["/listings/upvotes"]["get"]["responses"][200]["content"]["application/json"]["listings"][number];

Expand All @@ -22,6 +24,7 @@ interface UpvotedGridProps {
const UpvotedGrid = ({ page, setPage }: UpvotedGridProps) => {
const auth = useAuthentication();
const { addErrorAlert } = useAlertQueue();
const navigate = useNavigate();

const [listingInfos, setListingInfos] = useState<ListingInfo[] | null>(null);
const [listingDetails, setListingDetails] = useState<Record<
Expand Down Expand Up @@ -132,9 +135,15 @@ const UpvotedGrid = ({ page, setPage }: UpvotedGridProps) => {
</div>
</div>
) : (
<p className="flex justify-center items-center h-64">
You have not upvoted any listings
</p>
<div className="flex flex-col justify-center items-center h-64 gap-4">
<p>You have not upvoted any bots</p>
<Button
variant="outline"
onClick={() => navigate(ROUTES.BOTS.BROWSE.path)}
>
Browse Robots
</Button>
</div>
);
};

Expand Down
174 changes: 41 additions & 133 deletions frontend/src/components/pages/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { useTypedParams } from "react-router-typesafe-routes/dom";

import MyListingGrid from "@/components/listings/MyListingGrid";
import UpvotedGrid from "@/components/listings/UpvotedGrid";
import EditProfileForm from "@/components/profile/EditProfileForm";
import { Card, CardContent, CardHeader } from "@/components/ui/Card";
import { Input, TextArea } from "@/components/ui/Input/Input";
import Spinner from "@/components/ui/Spinner";
import { Tooltip } from "@/components/ui/ToolTip";
import { Button } from "@/components/ui/button";
Expand Down Expand Up @@ -73,6 +73,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
console.error("Failed to update profile", error);
} finally {
setIsSubmitting(false);
auth.fetchCurrentUser();
}
};

Expand Down Expand Up @@ -195,18 +196,18 @@ export const RenderProfile = (props: RenderProfileProps) => {
? `${user.first_name || ""} ${user.last_name || ""}`
: "Anonymous Creator"}
</h1>
<div className="flex gap-2">
<p className="text-sm text-gray-1 bg-gray-10 px-3 py-1 rounded-md">
<div className="flex gap-2 text-sm">
<p className="text-gray-1 bg-gray-10 px-3 py-1 rounded-md">
<span className="font-semibold mr-0.5 select-none">@</span>
{user.username}
</p>
{user.permissions && (
<p className="text-sm text-primary-12 bg-gray-4 px-3 py-1 rounded-md">
<p className="text-primary-12 bg-gray-4 px-3 py-1 rounded-md">
{getRoleName(user.permissions)}
</p>
)}
</div>
<p className="text-sm text-gray-11">
<p className="text-sm text-gray-6">
Joined on{" "}
{user.created_at
? formatJoinDate(user.created_at)
Expand Down Expand Up @@ -243,128 +244,30 @@ export const RenderProfile = (props: RenderProfileProps) => {
</CardHeader>
<CardContent>
{isEditing ? (
<div className="flex justify-center space-y-4">
<form
onSubmit={handleSubmit}
className="w-full max-w-lg space-y-4"
>
<div>
<label
htmlFor="username"
className="block text-sm font-medium text-gray-700"
>
Username
</label>
<p className="text-xs text-gray-10 italic">
Changing your username will change the URL for all your
posted listings.
</p>
<Input
id="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="mt-1 block w-full"
/>
{isCheckingUsername && (
<p className="text-sm text-gray-500">
Checking username...
</p>
)}
{!isCheckingUsername && isUsernameChanged && (
<p
className={`text-sm ${
isUsernameAvailable && !usernameError
? "text-green-500"
: "text-red-500"
}`}
>
{usernameError ||
(isUsernameAvailable
? "Username is available"
: "Username is not available")}
</p>
)}
</div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label
htmlFor="first_name"
className="block text-lg font-medium"
>
First Name
</label>
<Input
id="first_name"
type="text"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
className="mt-1 block w-full"
/>
</div>

<div>
<label
htmlFor="last_name"
className="block text-lg font-medium"
>
Last Name
</label>
<Input
id="last_name"
type="text"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
className="mt-1 block w-full"
/>
</div>
</div>

<div>
<label htmlFor="bio" className="block text-lg font-medium">
Bio
</label>
<TextArea
id="bio"
value={bio}
onChange={(e) => setBio(e.target.value)}
className="mt-1 block w-full rounded-md border-gray-11 shadow-sm focus:border-primary-9 focus:ring focus:ring-primary-9 focus:ring-opacity-50"
rows={3}
/>
</div>

{isSubmitting ? (
<div className="mt-4 flex justify-center items-center">
<Spinner />
</div>
) : (
<div className="mt-4 flex justify-center space-x-2">
<Button
type="button"
variant="outline"
onClick={() => setIsEditing(false)}
>
Cancel
</Button>
<Button
type="submit"
variant="default"
disabled={isUsernameChanged && !isUsernameAvailable}
>
Save Changes
</Button>
</div>
)}
</form>
</div>
<EditProfileForm
username={username}
firstName={firstName}
lastName={lastName}
bio={bio}
isCheckingUsername={isCheckingUsername}
isUsernameChanged={isUsernameChanged}
isUsernameAvailable={isUsernameAvailable}
usernameError={usernameError}
isSubmitting={isSubmitting}
setUsername={setUsername}
setFirstName={setFirstName}
setLastName={setLastName}
setBio={setBio}
setIsEditing={setIsEditing}
handleSubmit={handleSubmit}
/>
) : (
<div className="space-y-6">
<div>
{user.bio ? (
<p>{user.bio}</p>
) : (
<p className="text-gray-11 text-sm">
<p className="text-gray-6 text-sm">
No bio set. Edit your profile to add a bio.
</p>
)}
Expand All @@ -382,14 +285,14 @@ export const RenderProfile = (props: RenderProfileProps) => {
<div className="mb-4">
{user.stripe_connect_account_id &&
!user.stripe_connect_onboarding_completed ? (
<p className="text-gray-11 text-sm">
<p className="text-gray-6 text-sm">
Your Stripe account setup is not complete. Please resolve
outstanding requirements to begin selling robots. It may take
some time for Stripe to process your info between submissions.
</p>
) : user.stripe_connect_onboarding_completed ? (
<p className="text-gray-11 text-sm">
Stripe account setup complete.
<p className="text-gray-6 text-sm">
You are set up to sell robots on K-Scale.
</p>
) : (
<p>You must complete seller onboarding to sell robots</p>
Expand Down Expand Up @@ -421,12 +324,17 @@ export const RenderProfile = (props: RenderProfileProps) => {
</Button>
</Tooltip>
) : (
<Button
onClick={() => navigate(ROUTES.SELL.DASHBOARD.path)}
variant="outline"
<Tooltip
content="Sell Robots or View Your Dashboard"
position="bottom"
>
Seller Dashboard
</Button>
<Button
onClick={() => navigate(ROUTES.SELL.DASHBOARD.path)}
variant="outline"
>
Seller Dashboard
</Button>
</Tooltip>
)}
</div>
<div className="flex flex-col items-center space-y-4">
Expand All @@ -438,15 +346,15 @@ export const RenderProfile = (props: RenderProfileProps) => {
<TabsList className="flex justify-center space-x-4 mb-4">
<TabsTrigger
value="own"
className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-9 hover:text-gray-1 data-[state=active]:bg-gray-12 data-[state=active]:text-gray-1"
className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-11 hover:text-gray-1 data-[state=active]:bg-gray-1 data-[state=active]:text-gray-12"
>
Your Listings
Your Bot Listings
</TabsTrigger>
<TabsTrigger
value="upvoted"
className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-9 hover:text-gray-1 data-[state=active]:bg-gray-12 data-[state=active]:text-gray-1"
className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-9 hover:text-gray-1 data-[state=active]:bg-gray-1 data-[state=active]:text-gray-12"
>
Upvoted
Upvoted Bots
</TabsTrigger>
</TabsList>
<TabsContent value="own">
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/pages/SellerDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ export default function SellerDashboard() {
<div className="max-w-2xl mx-auto p-8">
<h1 className="text-3xl font-bold my-4">Seller Dashboard</h1>

<h2 className="text-xl font-semibold mb-4">Account Status</h2>
<h2 className="text-lg font-semibold mb-2">Account Status</h2>
<div className="flex gap-2 bg-gray-11 text-gray-1 px-3 py-2 items-center rounded-lg">
<Check />
<p>
Your K-Scale seller account is active and ready to receive payments.
</p>
</div>

<div className="mt-6">
<div className="mt-8">
<div className="flex gap-2 items-center">
<Button
variant="outline"
Expand Down
Loading

0 comments on commit 62c87a4

Please sign in to comment.