Skip to content

Commit

Permalink
chore: update sidebar (heyxyz#4548)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bigint
bigint authored Jan 20, 2024
2 parents 2f4a45f + a36ed8b commit fb05e64
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 95 deletions.
82 changes: 33 additions & 49 deletions apps/web/src/components/Home/Sidebar/RecommendedProfiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ import type { FC } from 'react';
import DismissRecommendedProfile from '@components/Shared/DismissRecommendedProfile';
import UserProfileShimmer from '@components/Shared/Shimmer/UserProfileShimmer';
import UserProfile from '@components/Shared/UserProfile';
import {
EllipsisHorizontalCircleIcon,
UsersIcon
} from '@heroicons/react/24/outline';
import { SparklesIcon } from '@heroicons/react/24/solid';
import { UsersIcon } from '@heroicons/react/24/outline';
import { MISCELLANEOUS } from '@hey/data/tracking';
import { useProfileRecommendationsQuery } from '@hey/lens';
import { Card, EmptyState, ErrorMessage, Modal } from '@hey/ui';
Expand All @@ -20,15 +16,6 @@ import useProfileStore from 'src/store/persisted/useProfileStore';

import Suggested from '../Suggested';

const Title = () => {
return (
<div className="mb-2 flex items-center gap-2 px-5 sm:px-0">
<SparklesIcon className="size-4 text-yellow-500" />
<div>Who to follow</div>
</div>
);
};

const RecommendedProfiles: FC = () => {
const currentProfile = useProfileStore((state) => state.currentProfile);
const seeThroughProfile = useTimelineStore(
Expand All @@ -44,28 +31,28 @@ const RecommendedProfiles: FC = () => {

if (loading) {
return (
<>
<Title />
<Card className="space-y-4 p-5">
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
</Card>
</>
<Card className="space-y-3.5 p-5">
<div className="text-lg font-semibold">Who to follow</div>
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<UserProfileShimmer showFollow />
<div className="shimmer h-3 w-5/12 rounded-full" />
</Card>
);
}

if (data?.profileRecommendations.items.length === 0) {
return (
<>
<Title />
<Card className="p-5">
<div className="text-lg font-semibold">Who to follow</div>
<EmptyState
hideCard
icon={<UsersIcon className="text-brand-500 size-8" />}
message="No recommendations!"
/>
</>
</Card>
);
}

Expand All @@ -75,35 +62,32 @@ const RecommendedProfiles: FC = () => {

return (
<>
<Title />
<Card as="aside">
<div className="space-y-4 p-5">
<ErrorMessage error={error} title="Failed to load recommendations" />
{recommendedProfiles?.slice(0, 5)?.map((profile) => (
<motion.div
animate={{ opacity: 1 }}
className="flex items-center space-x-3 truncate"
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key={profile?.id}
>
<div className="w-full">
<UserProfile profile={profile as Profile} showFollow />
</div>
<DismissRecommendedProfile profile={profile as Profile} />
</motion.div>
))}
</div>
<Card as="aside" className="space-y-4 p-5">
<div className="text-lg font-semibold">Who to follow</div>
<ErrorMessage error={error} title="Failed to load recommendations" />
{recommendedProfiles?.slice(0, 5)?.map((profile) => (
<motion.div
animate={{ opacity: 1 }}
className="flex items-center space-x-3 truncate"
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key={profile?.id}
>
<div className="w-full">
<UserProfile profile={profile as Profile} showFollow />
</div>
<DismissRecommendedProfile profile={profile as Profile} />
</motion.div>
))}
<button
className="flex w-full items-center space-x-2 rounded-b-xl border-t bg-gray-50 px-5 py-3 text-left text-sm text-gray-600 hover:bg-gray-100 dark:border-t-gray-700 dark:bg-black dark:text-gray-300 dark:hover:bg-gray-900"
className="ld-text-gray-500 font-bold"
onClick={() => {
setShowSuggestedModal(true);
Leafwatch.track(MISCELLANEOUS.OPEN_RECOMMENDED_PROFILES);
}}
type="button"
>
<EllipsisHorizontalCircleIcon className="size-4" />
<span>Show more</span>
Show more
</button>
</Card>
<Modal
Expand Down
77 changes: 31 additions & 46 deletions apps/web/src/components/Home/Sidebar/StaffPicks/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type { FC } from 'react';
import GroupProfileShimmer from '@components/Shared/Shimmer/GroupProfileShimmer';
import UserProfileShimmer from '@components/Shared/Shimmer/UserProfileShimmer';
import { CursorArrowRippleIcon as CursorArrowRippleIconOutline } from '@heroicons/react/24/outline';
import { CursorArrowRippleIcon as CursorArrowRippleIconSolid } from '@heroicons/react/24/solid';
import { HEY_API_URL } from '@hey/data/constants';
import { Card, EmptyState, ErrorMessage } from '@hey/ui';
import { useQuery } from '@tanstack/react-query';
Expand All @@ -14,15 +13,6 @@ import { motion } from 'framer-motion';
import StaffPickedGroup from './StaffPickedGroup';
import StaffPickedProfile from './StaffPickedProfile';

const Title = () => {
return (
<div className="mb-2 flex items-center gap-2 px-5 sm:px-0">
<CursorArrowRippleIconSolid className="text-brand-500 size-4" />
<div>What's poppin'?</div>
</div>
);
};

const StaffPicks: FC = () => {
const fetchStaffPicks = async (): Promise<StaffPick[]> => {
const response: {
Expand All @@ -40,57 +30,52 @@ const StaffPicks: FC = () => {

if (isLoading) {
return (
<>
<Title />
<Card className="mb-4 space-y-4 p-5">
<UserProfileShimmer />
<GroupProfileShimmer />
<UserProfileShimmer />
<GroupProfileShimmer />
<UserProfileShimmer />
</Card>
</>
<Card className="mb-4 space-y-3.5 p-5">
<div className="text-lg font-semibold">What's poppin'?</div>
<UserProfileShimmer />
<GroupProfileShimmer />
<UserProfileShimmer />
<GroupProfileShimmer />
<UserProfileShimmer />
</Card>
);
}

if (picks?.length === 0) {
return (
<div className="mb-4">
<Title />
<Card className="mb-4 p-5">
<div className="text-lg font-semibold">What's poppin'?</div>
<EmptyState
hideCard
icon={
<CursorArrowRippleIconOutline className="text-brand-500 size-8" />
}
message="Nothing here!"
/>
</div>
</Card>
);
}

return (
<>
<Title />
<Card as="aside" className="mb-4">
<div className="space-y-4 p-5">
<ErrorMessage
error={error as Error}
title="Failed to load recommendations"
/>
{picks?.map((pick) => (
<motion.div
animate={{ opacity: 1 }}
className="flex items-center space-x-3 truncate"
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key={pick.id}
>
{pick.type === 'PROFILE' && <StaffPickedProfile id={pick.id} />}
{pick.type === 'GROUP' && <StaffPickedGroup id={pick.id} />}
</motion.div>
))}
</div>
</Card>
</>
<Card as="aside" className="mb-4 space-y-4 p-5">
<div className="text-lg font-semibold">What's poppin'?</div>
<ErrorMessage
error={error as Error}
title="Failed to load recommendations"
/>
{picks?.map((pick) => (
<motion.div
animate={{ opacity: 1 }}
className="flex items-center space-x-3 truncate"
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key={pick.id}
>
{pick.type === 'PROFILE' && <StaffPickedProfile id={pick.id} />}
{pick.type === 'GROUP' && <StaffPickedGroup id={pick.id} />}
</motion.div>
))}
</Card>
);
};

Expand Down

0 comments on commit fb05e64

Please sign in to comment.