github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: update activity stream design (#5615)

Browse Source
pull/5616/head
Arik Chakma 7 months ago committed by GitHub
parent 89c6b36090
commit e1c35d299d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 113 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 35
      src/components/Activity/ActivityStream.tsx
  2. 64
      src/components/Activity/ActivityTopicTitles.tsx
  3. 2
      src/components/Activity/EmptyStream.tsx
  4. 89
      src/components/TeamActivity/TeamActivityItem.tsx
  5. 2
      src/components/TeamActivity/TeamEmptyStream.tsx

35
src/components/Activity/ActivityStream.tsx
Unescape View File

@ -111,28 +111,35 @@ export function ActivityStream(props: ActivityStreamProps) {
<li key={_id} className="py-2 text-sm text-gray-600"> <li key={_id} className="py-2 text-sm text-gray-600">
{actionType === 'in_progress' && ( {actionType === 'in_progress' && (
<> <>
Started{' '} <p className="mb-1">
<ActivityTopicTitles Started&nbsp;{topicCount}&nbsp;topic
topicTitles={topicTitles || []} {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
onSelectActivity={() => setSelectedActivity(activity)} {resourceLinkComponent}&nbsp;
/>{' '} {timeAgo}
in {resourceLinkComponent} {timeAgo} </p>
<ActivityTopicTitles topicTitles={topicTitles || []} />
</> </>
)} )}
{actionType === 'done' && ( {actionType === 'done' && (
<> <>
Completed{' '} <p className="mb-1">
<ActivityTopicTitles Completed&nbsp;{topicCount}&nbsp;topic
topicTitles={topicTitles || []} {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
onSelectActivity={() => setSelectedActivity(activity)} {resourceLinkComponent}&nbsp;
/>{' '} {timeAgo}
in {resourceLinkComponent} {timeAgo} </p>
<ActivityTopicTitles topicTitles={topicTitles || []} />
</> </>
)} )}
{actionType === 'answered' && ( {actionType === 'answered' && (
<> <>
Answered {topicCount} question{topicCount > 1 ? 's' : ''} in{' '} <p className="mb-1">
{resourceLinkComponent} {timeAgo} Answered&nbsp;{topicCount}&nbsp;question
{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
{resourceLinkComponent}&nbsp;
{timeAgo}
</p>
<ActivityTopicTitles topicTitles={topicTitles || []} />
</> </>
)} )}
</li> </li>

64
src/components/Activity/ActivityTopicTitles.tsx
Unescape View File

@ -1,43 +1,43 @@
import { useState } from 'react';
import { cn } from '../../lib/classname';
type ActivityTopicTitlesProps = { type ActivityTopicTitlesProps = {
topicTitles: string[]; topicTitles: string[];
className?: string;
onSelectActivity?: () => void; onSelectActivity?: () => void;
}; };
export function ActivityTopicTitles(props: ActivityTopicTitlesProps) { export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
const { topicTitles, onSelectActivity } = props; const { topicTitles, onSelectActivity, className } = props;
const firstThreeTopics = topicTitles?.slice(0, 3);
const remainingTopics = topicTitles?.slice(3);
return ( const [showAll, setShowAll] = useState(false);
<> const filteredTopicTitles = topicTitles.slice(
{firstThreeTopics.map((topicTitle, index) => { 0,
return ( showAll ? topicTitles.length : 3,
<span className="font-medium" key={`topic-${topicTitle}-${index}`}> );
<>
{index > 0 && ', '}
{index === firstThreeTopics.length - 1 &&
remainingTopics?.length === 0 &&
firstThreeTopics.length > 1
? 'and '
: ''}
{topicTitle}
</>
</span>
);
})}
{remainingTopics?.length > 0 && ( const shouldShowButton = topicTitles.length > 3;
<>
, and&nbsp; return (
<button <div
className="font-medium underline underline-offset-2 hover:text-black" className={cn(
onClick={onSelectActivity} 'flex flex-wrap gap-1 text-sm font-normal text-gray-600',
> className,
{remainingTopics.length} more topic )}
{remainingTopics.length > 1 ? 's' : ''} >
</button> {filteredTopicTitles.map((topicTitle, index) => (
</> <span key={index} className="rounded-md bg-gray-200 px-1">
{topicTitle}
</span>
))}
{shouldShowButton && (
<button
onClick={() => setShowAll(!showAll)}
className="text-gray-600 underline underline-offset-2 hover:text-black"
>
{showAll ? '- Show less' : `+${topicTitles.length - 3} more`}
</button>
)} )}
</> </div>
); );
} }

2
src/components/Activity/EmptyStream.tsx
Unescape View File

@ -4,7 +4,7 @@ export function EmptyStream() {
return ( return (
<div className="rounded-md"> <div className="rounded-md">
<div className="flex flex-col items-center p-7 text-center"> <div className="flex flex-col items-center p-7 text-center">
<List className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" /> <List className="mb-4 h-[60px] w-[60px] opacity-10 sm:h-[60px] sm:w-[60px]" />
<h2 className="text-lg font-bold sm:text-xl">No Activities</h2> <h2 className="text-lg font-bold sm:text-xl">No Activities</h2>
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base"> <p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">

89
src/components/TeamActivity/TeamActivityItem.tsx
Unescape View File

@ -3,6 +3,7 @@ import { getRelativeTimeString } from '../../lib/date';
import type { TeamStreamActivity } from './TeamActivityPage'; import type { TeamStreamActivity } from './TeamActivityPage';
import { ChevronsDown, ChevronsUp } from 'lucide-react'; import { ChevronsDown, ChevronsUp } from 'lucide-react';
import { ActivityTopicTitles } from '../Activity/ActivityTopicTitles'; import { ActivityTopicTitles } from '../Activity/ActivityTopicTitles';
import { cn } from '../../lib/classname';
type TeamActivityItemProps = { type TeamActivityItemProps = {
onTopicClick?: (activity: TeamStreamActivity) => void; onTopicClick?: (activity: TeamStreamActivity) => void;
@ -79,36 +80,49 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
return ( return (
<li <li
key={user._id} key={user._id}
className="flex flex-wrap items-center gap-y-1 rounded-md border px-2 py-2.5 text-sm" className="flex flex-wrap items-center rounded-md border px-2 py-2.5 text-sm"
> >
{actionType === 'in_progress' && ( {actionType === 'in_progress' && (
<> <>
{username}&nbsp;started&nbsp; <p className="mb-1">
{username}&nbsp;started&nbsp;
{topicCount}&nbsp;topic{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
{resourceLink(activity)}&nbsp;
{timeAgo(activity.updatedAt)}
</p>
<ActivityTopicTitles <ActivityTopicTitles
className="pl-5"
topicTitles={topicTitles || []} topicTitles={topicTitles || []}
onSelectActivity={() => onTopicClick?.(activity)}
/> />
&nbsp;in&nbsp;{resourceLink(activity)}&nbsp;
{timeAgo(activity.updatedAt)}
</> </>
)} )}
{actionType === 'done' && ( {actionType === 'done' && (
<> <>
{username}&nbsp;completed&nbsp; <p className="mb-1">
{username}&nbsp;completed&nbsp;
{topicCount}&nbsp;topic{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
{resourceLink(activity)}&nbsp;
{timeAgo(activity.updatedAt)}
</p>
<ActivityTopicTitles <ActivityTopicTitles
className="pl-5"
topicTitles={topicTitles || []} topicTitles={topicTitles || []}
onSelectActivity={() => onTopicClick?.(activity)}
/> />
&nbsp;in&nbsp;{resourceLink(activity)}&nbsp;
{timeAgo(activity.updatedAt)}
</> </>
)} )}
{actionType === 'answered' && ( {actionType === 'answered' && (
<> <>
{username}&nbsp;answered {topicCount} question <p className="mb-1">
{topicCount > 1 ? 's' : ''} in&nbsp;{resourceLink(activity)}&nbsp; {username}&nbsp;answered&nbsp;
{timeAgo(activity.updatedAt)} {topicCount}&nbsp;question{topicCount > 1 ? 's' : ''}
&nbsp;in&nbsp;
{resourceLink(activity)}&nbsp;
{timeAgo(activity.updatedAt)}
</p>
<ActivityTopicTitles
className="pl-5"
topicTitles={topicTitles || []}
/>
</> </>
)} )}
</li> </li>
@ -128,38 +142,51 @@ export function TeamActivityItem(props: TeamActivityItemProps) {
resource(s) resource(s)
</h3> </h3>
<div className="py-3"> <div className="py-3">
<ul className="ml-2 flex flex-col gap-2 sm:ml-[36px]"> <ul className="ml-2 flex flex-col divide-y pr-2 sm:ml-[36px]">
{activities.slice(0, activityLimit).map((activity) => { {activities.slice(0, activityLimit).map((activity, counter) => {
const { actionType, topicTitles } = activity; const { actionType, topicTitles } = activity;
const topicCount = topicTitles?.length || 0; const topicCount = topicTitles?.length || 0;
return ( return (
<li key={activity._id} className="text-sm text-gray-600"> <li
key={activity._id}
className={cn(
'text-sm text-gray-600',
counter === 0 ? 'pb-2.5' : 'py-2.5',
counter === activities.length - 1 ? 'pb-0' : '',
)}
>
{actionType === 'in_progress' && ( {actionType === 'in_progress' && (
<> <>
Started{' '} <p className="mb-1">
<ActivityTopicTitles Started&nbsp;{topicCount}&nbsp;topic
topicTitles={topicTitles || []} {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
onSelectActivity={() => onTopicClick?.(activity)} {resourceLink(activity)}&nbsp;
/>{' '} {timeAgo(activity.updatedAt)}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} </p>
<ActivityTopicTitles topicTitles={topicTitles || []} />
</> </>
)} )}
{actionType === 'done' && ( {actionType === 'done' && (
<> <>
Completed{' '} <p className="mb-1">
<ActivityTopicTitles Completed&nbsp;{topicCount}&nbsp;topic
topicTitles={topicTitles || []} {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
onSelectActivity={() => onTopicClick?.(activity)} {resourceLink(activity)}&nbsp;
/>{' '} {timeAgo(activity.updatedAt)}
in {resourceLink(activity)} {timeAgo(activity.updatedAt)} </p>
<ActivityTopicTitles topicTitles={topicTitles || []} />
</> </>
)} )}
{actionType === 'answered' && ( {actionType === 'answered' && (
<> <>
Answered {topicCount} question <p className="mb-1">
{topicCount > 1 ? 's' : ''} in {resourceLink(activity)}{' '} Answered&nbsp;{topicCount}&nbsp;question
{timeAgo(activity.updatedAt)} {topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
{resourceLink(activity)}&nbsp;
{timeAgo(activity.updatedAt)}
</p>
<ActivityTopicTitles topicTitles={topicTitles || []} />
</> </>
)} )}
</li> </li>

2
src/components/TeamActivity/TeamEmptyStream.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Activity, List, ListTodo } from 'lucide-react'; import { ListTodo } from 'lucide-react';
type TeamActivityItemProps = { type TeamActivityItemProps = {
teamId: string; teamId: string;

Write Preview
Loading…
Cancel
Save