Skip to content

Commit 18656f9

Browse files
GulajavaMinistudioGulajavaMinistudio
authored
Merge pull request #135 from kamranahmedse/master
Create a new pull request by comparing changes across two branches
2 parents 7d5dd45 + 8ab7f2c commit 18656f9

File tree

20 files changed

+346
-245
lines changed

20 files changed

+346
-245
lines changed

‎src/components/Activity/ActivityStream.tsx‎

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { getRelativeTimeString } from '../../lib/date';
33
import type { ResourceType } from '../../lib/resource-progress';
44
import { EmptyStream } from './EmptyStream';
55
import { ActivityTopicsModal } from './ActivityTopicsModal.tsx';
6-
import {Book, BookOpen, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown} from 'lucide-react';
6+
import { ChevronsDown, ChevronsUp } from 'lucide-react';
7+
import { ActivityTopicTitles } from './ActivityTopicTitles.tsx';
78

89
export const allowedActivityActionType = [
910
'in_progress',
@@ -21,7 +22,7 @@ export type UserStreamActivity = {
2122
resourceSlug?: string;
2223
isCustomResource?: boolean;
2324
actionType: AllowedActivityActionType;
24-
topicIds?: string[];
25+
topicTitles?: string[];
2526
createdAt: Date;
2627
updatedAt: Date;
2728
};
@@ -38,7 +39,9 @@ export function ActivityStream(props: ActivityStreamProps) {
3839
useState<UserStreamActivity | null>(null);
3940

4041
const sortedActivities = activities
41-
.filter((activity) => activity?.topicIds && activity.topicIds.length > 0)
42+
.filter(
43+
(activity) => activity?.topicTitles && activity.topicTitles.length > 0,
44+
)
4245
.sort((a, b) => {
4346
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
4447
})
@@ -57,8 +60,8 @@ export function ActivityStream(props: ActivityStreamProps) {
5760
resourceId={selectedActivity.resourceId}
5861
resourceType={selectedActivity.resourceType}
5962
isCustomResource={selectedActivity.isCustomResource}
60-
topicIds={selectedActivity.topicIds || []}
61-
topicCount={selectedActivity.topicIds?.length || 0}
63+
topicTitles={selectedActivity.topicTitles || []}
64+
topicCount={selectedActivity.topicTitles?.length || 0}
6265
actionType={selectedActivity.actionType}
6366
/>
6467
)}
@@ -73,7 +76,7 @@ export function ActivityStream(props: ActivityStreamProps) {
7376
resourceTitle,
7477
actionType,
7578
updatedAt,
76-
topicIds,
79+
topicTitles,
7780
isCustomResource,
7881
} = activity;
7982

@@ -96,7 +99,7 @@ export function ActivityStream(props: ActivityStreamProps) {
9699
</a>
97100
);
98101

99-
const topicCount = topicIds?.length || 0;
102+
const topicCount = topicTitles?.length || 0;
100103

101104
const timeAgo = (
102105
<span className="ml-1 text-xs text-gray-400">
@@ -108,32 +111,35 @@ export function ActivityStream(props: ActivityStreamProps) {
108111
<li key={_id} className="py-2 text-sm text-gray-600">
109112
{actionType === 'in_progress' && (
110113
<>
111-
Started{' '}
112-
<button
113-
className="font-medium underline underline-offset-2 hover:text-black"
114-
onClick={() => setSelectedActivity(activity)}
115-
>
116-
{topicCount} topic{topicCount > 1 ? 's' : ''}
117-
</button>{' '}
118-
in {resourceLinkComponent} {timeAgo}
114+
<p className="mb-1">
115+
Started&nbsp;{topicCount}&nbsp;topic
116+
{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
117+
{resourceLinkComponent}&nbsp;
118+
{timeAgo}
119+
</p>
120+
<ActivityTopicTitles topicTitles={topicTitles || []} />
119121
</>
120122
)}
121123
{actionType === 'done' && (
122124
<>
123-
Completed{' '}
124-
<button
125-
className="font-medium underline underline-offset-2 hover:text-black"
126-
onClick={() => setSelectedActivity(activity)}
127-
>
128-
{topicCount} topic{topicCount > 1 ? 's' : ''}
129-
</button>{' '}
130-
in {resourceLinkComponent} {timeAgo}
125+
<p className="mb-1">
126+
Completed&nbsp;{topicCount}&nbsp;topic
127+
{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
128+
{resourceLinkComponent}&nbsp;
129+
{timeAgo}
130+
</p>
131+
<ActivityTopicTitles topicTitles={topicTitles || []} />
131132
</>
132133
)}
133134
{actionType === 'answered' && (
134135
<>
135-
Answered {topicCount} question{topicCount > 1 ? 's' : ''} in{' '}
136-
{resourceLinkComponent} {timeAgo}
136+
<p className="mb-1">
137+
Answered&nbsp;{topicCount}&nbsp;question
138+
{topicCount > 1 ? 's' : ''}&nbsp;in&nbsp;
139+
{resourceLinkComponent}&nbsp;
140+
{timeAgo}
141+
</p>
142+
<ActivityTopicTitles topicTitles={topicTitles || []} />
137143
</>
138144
)}
139145
</li>
@@ -146,16 +152,20 @@ export function ActivityStream(props: ActivityStreamProps) {
146152

147153
{activities.length > 10 && (
148154
<button
149-
className="mt-3 gap-2 flex items-center rounded-md border border-black pl-1.5 pr-2 py-1 text-xs uppercase tracking-wide text-black transition-colors hover:border-black hover:bg-black hover:text-white"
155+
className="mt-3 flex items-center gap-2 rounded-md border border-black py-1 pl-1.5 pr-2 text-xs uppercase tracking-wide text-black transition-colors hover:border-black hover:bg-black hover:text-white"
150156
onClick={() => setShowAll(!showAll)}
151157
>
152-
{showAll ? <>
153-
<ChevronsUp size={14} />
154-
Show less
155-
</> : <>
156-
<ChevronsDown size={14} />
157-
Show more
158-
</>}
158+
{showAll ? (
159+
<>
160+
<ChevronsUp size={14} />
161+
Show less
162+
</>
163+
) : (
164+
<>
165+
<ChevronsDown size={14} />
166+
Show more
167+
</>
168+
)}
159169
</button>
160170
)}
161171
</div>

‎src/components/Activity/ActivityTopicTitles.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { useState } from 'react';
2+
import { cn } from '../../lib/classname';
3+
4+
type ActivityTopicTitlesProps = {
5+
topicTitles: string[];
6+
className?: string;
7+
onSelectActivity?: () => void;
8+
};
9+
10+
export function ActivityTopicTitles(props: ActivityTopicTitlesProps) {
11+
const { topicTitles, onSelectActivity, className } = props;
12+
13+
const [showAll, setShowAll] = useState(false);
14+
const filteredTopicTitles = topicTitles.slice(
15+
0,
16+
showAll ? topicTitles.length : 3,
17+
);
18+
19+
const shouldShowButton = topicTitles.length > 3;
20+
21+
return (
22+
<div
23+
className={cn(
24+
'flex flex-wrap gap-1 text-sm font-normal text-gray-600',
25+
className,
26+
)}
27+
>
28+
{filteredTopicTitles.map((topicTitle, index) => (
29+
<span key={index} className="rounded-md bg-gray-200 px-1">
30+
{topicTitle}
31+
</span>
32+
))}
33+
{shouldShowButton && (
34+
<button
35+
onClick={() => setShowAll(!showAll)}
36+
className="text-gray-600 underline underline-offset-2 hover:text-black"
37+
>
38+
{showAll ? '- Show less' : `+${topicTitles.length - 3} more`}
39+
</button>
40+
)}
41+
</div>
42+
);
43+
}

‎src/components/Activity/ActivityTopicsModal.tsx‎

Lines changed: 4 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type ActivityTopicDetailsProps = {
1111
resourceId: string;
1212
resourceType: ResourceType | 'question';
1313
isCustomResource?: boolean;
14-
topicIds: string[];
14+
topicTitles: string[];
1515
topicCount: number;
1616
actionType: AllowedActivityActionType;
1717
onClose: () => void;
@@ -22,56 +22,12 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
2222
resourceId,
2323
resourceType,
2424
isCustomResource,
25-
topicIds = [],
25+
topicTitles = [],
2626
topicCount,
2727
actionType,
2828
onClose,
2929
} = props;
3030

31-
const [isLoading, setIsLoading] = useState(true);
32-
const [topicTitles, setTopicTitles] = useState<Record<string, string>>({});
33-
const [error, setError] = useState<string | null>(null);
34-
35-
const loadTopicTitles = async () => {
36-
setIsLoading(true);
37-
setError(null);
38-
39-
const { response, error } = await httpPost(
40-
`${import.meta.env.PUBLIC_API_URL}/v1-get-topic-titles`,
41-
{
42-
resourceId,
43-
resourceType,
44-
isCustomResource,
45-
topicIds,
46-
},
47-
);
48-
49-
if (error || !response) {
50-
setError(error?.message || 'Failed to load topic titles');
51-
setIsLoading(false);
52-
return;
53-
}
54-
55-
setTopicTitles(response);
56-
setIsLoading(false);
57-
};
58-
59-
useEffect(() => {
60-
loadTopicTitles().finally(() => {
61-
setIsLoading(false);
62-
});
63-
}, []);
64-
65-
if (isLoading || error) {
66-
return (
67-
<ModalLoader
68-
error={error!}
69-
text={'Loading topics..'}
70-
isLoading={isLoading}
71-
/>
72-
);
73-
}
74-
7531
let pageUrl = '';
7632
if (resourceType === 'roadmap') {
7733
pageUrl = isCustomResource ? `/r/${resourceId}` : `/${resourceId}`;
@@ -85,8 +41,6 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
8541
<Modal
8642
onClose={() => {
8743
onClose();
88-
setError(null);
89-
setIsLoading(false);
9044
}}
9145
>
9246
<div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
@@ -108,9 +62,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
10862
</a>
10963
</span>
11064
<ul className="flex max-h-[50vh] flex-col gap-1 overflow-y-auto max-md:max-h-full">
111-
{topicIds.map((topicId) => {
112-
const topicTitle = topicTitles[topicId] || 'Unknown Topic';
113-
65+
{topicTitles.map((topicTitle) => {
11466
const ActivityIcon =
11567
actionType === 'done'
11668
? Check
@@ -119,7 +71,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
11971
: Check;
12072

12173
return (
122-
<li key={topicId} className="flex items-start gap-2">
74+
<li key={topicTitle} className="flex items-start gap-2">
12375
<ActivityIcon
12476
strokeWidth={3}
12577
className="relative top-[4px] text-green-500"

‎src/components/Activity/EmptyStream.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export function EmptyStream() {
44
return (
55
<div className="rounded-md">
66
<div className="flex flex-col items-center p-7 text-center">
7-
<List className="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]" />
7+
<List className="mb-4 h-[60px] w-[60px] opacity-10 sm:h-[60px] sm:w-[60px]" />
88

99
<h2 className="text-lg font-bold sm:text-xl">No Activities</h2>
1010
<p className="my-1 max-w-[400px] text-balance text-sm text-gray-500 sm:my-2 sm:text-base">

‎src/components/CreateTeam/CreateTeamForm.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { pageProgressMessage } from '../../stores/page';
99
import type { TeamResourceConfig } from './RoadmapSelector';
1010
import { Step3 } from './Step3';
1111
import { Step4 } from './Step4';
12-
import {useToast} from "../../hooks/use-toast";
12+
import { useToast } from '../../hooks/use-toast';
1313

1414
export interface TeamDocument {
1515
_id?: string;
@@ -22,6 +22,7 @@ export interface TeamDocument {
2222
linkedIn?: string;
2323
};
2424
type: ValidTeamType;
25+
personalProgressOnly?: boolean;
2526
canMemberSendInvite: boolean;
2627
teamSize?: ValidTeamSize;
2728
createdAt: Date;
@@ -40,10 +41,10 @@ export function CreateTeamForm() {
4041

4142
async function loadTeam(
4243
teamIdToFetch: string,
43-
requiredStepIndex: number | string
44+
requiredStepIndex: number | string,
4445
) {
4546
const { response, error } = await httpGet<TeamDocument>(
46-
`${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamIdToFetch}`
47+
`${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamIdToFetch}`,
4748
);
4849

4950
if (error || !response) {
@@ -70,7 +71,7 @@ export function CreateTeamForm() {
7071

7172
async function loadTeamResourceConfig(teamId: string) {
7273
const { error, response } = await httpGet<TeamResourceConfig>(
73-
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-resource-config/${teamId}`
74+
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-resource-config/${teamId}`,
7475
);
7576
if (error || !Array.isArray(response)) {
7677
console.error(error);
@@ -96,7 +97,7 @@ export function CreateTeamForm() {
9697
}, [teamId, queryStepIndex]);
9798

9899
const [selectedTeamType, setSelectedTeamType] = useState<ValidTeamType>(
99-
team?.type || 'company'
100+
team?.type || 'company',
100101
);
101102

102103
const [completedSteps, setCompletedSteps] = useState([0]);
@@ -191,13 +192,17 @@ export function CreateTeamForm() {
191192

192193
return (
193194
<div className={'mx-auto max-w-[700px] py-1 md:py-6'}>
194-
<div className={'mb-3 md:mb-8 pb-3 md:pb-0 border-b md:border-b-0 flex flex-col items-start md:items-center'}>
195-
<h1 className={'text-xl md:text-4xl font-bold'}>Create Team</h1>
196-
<p className={'mt-1 md:mt-2 text-sm md:text-base text-gray-500'}>
195+
<div
196+
className={
197+
'mb-3 flex flex-col items-start border-b pb-3 md:mb-8 md:items-center md:border-b-0 md:pb-0'
198+
}
199+
>
200+
<h1 className={'text-xl font-bold md:text-4xl'}>Create Team</h1>
201+
<p className={'mt-1 text-sm text-gray-500 md:mt-2 md:text-base'}>
197202
Complete the steps below to create your team
198203
</p>
199204
</div>
200-
<div className="mb-8 mt-8 hidden sm:flex w-full">
205+
<div className="mb-8 mt-8 hidden w-full sm:flex">
201206
<Stepper
202207
activeIndex={stepIndex}
203208
completeSteps={completedSteps}

0 commit comments

Comments
 (0)