Arik Chakma
1 year ago
parent
13c55faa71
commit
8bf0b51065
8 changed files with 462 additions and 4 deletions
@ -0,0 +1,154 @@ |
||||
import Cookies from 'js-cookie'; |
||||
import { TOKEN_COOKIE_NAME } from '../lib/jwt.ts'; |
||||
import type { APIContext } from 'astro'; |
||||
|
||||
type HttpOptionsType = RequestInit | { headers: Record<string, any> }; |
||||
|
||||
type AppResponse = Record<string, any>; |
||||
|
||||
export type FetchError = { |
||||
status: number; |
||||
message: string; |
||||
}; |
||||
|
||||
export type AppError = { |
||||
status: number; |
||||
message: string; |
||||
errors?: { message: string; location: string }[]; |
||||
}; |
||||
|
||||
export type ApiReturn<ResponseType, ErrorType> = { |
||||
response?: ResponseType; |
||||
error?: ErrorType | FetchError; |
||||
}; |
||||
|
||||
export function api(context: APIContext) { |
||||
const token = context.cookies.get(TOKEN_COOKIE_NAME)?.value; |
||||
|
||||
async function apiCall<ResponseType = AppResponse, ErrorType = AppError>( |
||||
url: string, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType, ErrorType>> { |
||||
try { |
||||
const response = await fetch(url, { |
||||
credentials: 'include', |
||||
...options, |
||||
headers: new Headers({ |
||||
'Content-Type': 'application/json', |
||||
Accept: 'application/json', |
||||
...(token ? { Authorization: `Bearer ${token}` } : {}), |
||||
...(options?.headers ?? {}), |
||||
}), |
||||
}); |
||||
|
||||
// @ts-ignore
|
||||
const doesAcceptHtml = options?.headers?.['Accept'] === 'text/html'; |
||||
|
||||
const data = doesAcceptHtml |
||||
? await response.text() |
||||
: await response.json(); |
||||
|
||||
if (response.ok) { |
||||
return { |
||||
response: data as ResponseType, |
||||
error: undefined, |
||||
}; |
||||
} |
||||
|
||||
// Logout user if token is invalid
|
||||
if (data.status === 401) { |
||||
context.cookies.delete(TOKEN_COOKIE_NAME); |
||||
context.redirect(context.request.url); |
||||
|
||||
return { response: undefined, error: data as ErrorType }; |
||||
} |
||||
|
||||
if (data.status === 403) { |
||||
return { response: undefined, error: data as ErrorType }; |
||||
} |
||||
|
||||
return { |
||||
response: undefined, |
||||
error: data as ErrorType, |
||||
}; |
||||
} catch (error: any) { |
||||
return { |
||||
response: undefined, |
||||
error: { |
||||
status: 0, |
||||
message: error.message, |
||||
}, |
||||
}; |
||||
} |
||||
} |
||||
|
||||
return { |
||||
get: function apiGet<ResponseType = AppResponse, ErrorType = AppError>( |
||||
url: string, |
||||
queryParams?: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType, ErrorType>> { |
||||
const searchParams = new URLSearchParams(queryParams).toString(); |
||||
const queryUrl = searchParams ? `${url}?${searchParams}` : url; |
||||
|
||||
return apiCall<ResponseType, ErrorType>(queryUrl, { |
||||
...options, |
||||
method: 'GET', |
||||
}); |
||||
}, |
||||
post: async function apiPost< |
||||
ResponseType = AppResponse, |
||||
ErrorType = AppError, |
||||
>( |
||||
url: string, |
||||
body: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType, ErrorType>> { |
||||
return apiCall<ResponseType, ErrorType>(url, { |
||||
...options, |
||||
method: 'POST', |
||||
body: JSON.stringify(body), |
||||
}); |
||||
}, |
||||
patch: async function apiPatch< |
||||
ResponseType = AppResponse, |
||||
ErrorType = AppError, |
||||
>( |
||||
url: string, |
||||
body: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType, ErrorType>> { |
||||
return apiCall<ResponseType, ErrorType>(url, { |
||||
...options, |
||||
method: 'PATCH', |
||||
body: JSON.stringify(body), |
||||
}); |
||||
}, |
||||
put: async function apiPut< |
||||
ResponseType = AppResponse, |
||||
ErrorType = AppError, |
||||
>( |
||||
url: string, |
||||
body: Record<string, any>, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType, ErrorType>> { |
||||
return apiCall<ResponseType, ErrorType>(url, { |
||||
...options, |
||||
method: 'PUT', |
||||
body: JSON.stringify(body), |
||||
}); |
||||
}, |
||||
delete: async function apiDelete< |
||||
ResponseType = AppResponse, |
||||
ErrorType = AppError, |
||||
>( |
||||
url: string, |
||||
options?: HttpOptionsType, |
||||
): Promise<ApiReturn<ResponseType, ErrorType>> { |
||||
return apiCall<ResponseType, ErrorType>(url, { |
||||
...options, |
||||
method: 'DELETE', |
||||
}); |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
import { type APIContext } from 'astro'; |
||||
import { api } from './api.ts'; |
||||
|
||||
export interface UserDocument { |
||||
_id?: string; |
||||
name: string; |
||||
email: string; |
||||
username: string; |
||||
avatar?: string; |
||||
password: string; |
||||
isEnabled: boolean; |
||||
authProvider: 'github' | 'google' | 'email' | 'linkedin'; |
||||
metadata: Record<string, any>; |
||||
calculatedStats: { |
||||
activityCount: number; |
||||
totalVisitCount: number; |
||||
longestVisitStreak: number; |
||||
currentVisitStreak: number; |
||||
updatedAt: Date; |
||||
}; |
||||
verificationCode: string; |
||||
resetPasswordCode: string; |
||||
isSyncedWithSendy: boolean; |
||||
links?: { |
||||
github?: string; |
||||
linkedin?: string; |
||||
twitter?: string; |
||||
website?: string; |
||||
}; |
||||
resetPasswordCodeAt: Date; |
||||
verifiedAt: Date; |
||||
createdAt: Date; |
||||
updatedAt: Date; |
||||
} |
||||
|
||||
export type UserActivityCount = { |
||||
activityCount: Record<string, number>; |
||||
totalActivityCount: number; |
||||
}; |
||||
|
||||
export type GetUserByUsernameResponse = Omit< |
||||
UserDocument, |
||||
| 'password' |
||||
| 'verificationCode' |
||||
| 'resetPasswordCode' |
||||
| 'resetPasswordCodeAt' |
||||
| 'email' |
||||
> & { |
||||
activity: UserActivityCount; |
||||
}; |
||||
|
||||
export function userApi(context: APIContext) { |
||||
return { |
||||
getUserByUsername: async function (username: string) { |
||||
return api(context).get<GetUserByUsernameResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-by-username/${username}`, |
||||
); |
||||
}, |
||||
}; |
||||
} |
||||
@ -0,0 +1,71 @@ |
||||
import CalendarHeatmap from 'react-calendar-heatmap'; |
||||
import { Tooltip as ReactTooltip } from 'react-tooltip'; |
||||
import 'react-calendar-heatmap/dist/styles.css'; |
||||
import 'react-tooltip/dist/react-tooltip.css'; |
||||
import { formatActivityDate } from '../../lib/date'; |
||||
import type { UserActivityCount } from '../../api/user'; |
||||
import dayjs from 'dayjs'; |
||||
|
||||
type UserActivityHeatmapProps = { |
||||
activity: UserActivityCount; |
||||
}; |
||||
export function UserActivityHeatmap(props: UserActivityHeatmapProps) { |
||||
const { activity } = props; |
||||
const data = Object.entries(activity.activityCount).map(([date, count]) => ({ |
||||
date, |
||||
count, |
||||
})); |
||||
|
||||
const startDate = dayjs().subtract(1, 'year').toDate(); |
||||
const endDate = dayjs().toDate(); |
||||
|
||||
return ( |
||||
<> |
||||
<h2 className="mb-4 text-xl font-bold">Activity</h2> |
||||
<CalendarHeatmap |
||||
startDate={startDate} |
||||
endDate={endDate} |
||||
values={data} |
||||
onClick={(value) => { |
||||
console.log('-'.repeat(20)); |
||||
console.log('Clicked on value', value); |
||||
console.log('-'.repeat(20)); |
||||
}} |
||||
classForValue={(value) => { |
||||
if (!value) { |
||||
return 'fill-gray-100 rounded-md [rx:2px]'; |
||||
} |
||||
|
||||
const { count } = value; |
||||
if (count >= 20) { |
||||
return 'fill-gray-800 rounded-md [rx:2px]'; |
||||
} else if (count >= 10) { |
||||
return 'fill-gray-600 rounded-md [rx:2px]'; |
||||
} else if (count >= 5) { |
||||
return 'fill-gray-500 rounded-md [rx:2px]'; |
||||
} else if (count >= 3) { |
||||
return 'fill-gray-300 rounded-md [rx:2px]'; |
||||
} else { |
||||
return 'fill-gray-200 rounded-md [rx:2px]'; |
||||
} |
||||
}} |
||||
tooltipDataAttrs={(value: any) => { |
||||
if (!value || !value.date) { |
||||
return null; |
||||
} |
||||
|
||||
const formattedDate = formatActivityDate(value.date); |
||||
return { |
||||
'data-tooltip-id': 'user-activity-tip', |
||||
'data-tooltip-content': `${value.count} activities on ${formattedDate}`, |
||||
}; |
||||
}} |
||||
/> |
||||
|
||||
<ReactTooltip |
||||
id="user-activity-tip" |
||||
className="!rounded-lg !bg-gray-900 !p-1 !px-2 !text-sm" |
||||
/> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
import { Github, Globe, LinkedinIcon, Twitter } from 'lucide-react'; |
||||
import type { GetUserByUsernameResponse } from '../../api/user'; |
||||
|
||||
type UserDetailsProps = { |
||||
userDetails: GetUserByUsernameResponse; |
||||
}; |
||||
|
||||
export function UserDetails(props: UserDetailsProps) { |
||||
const { userDetails } = props; |
||||
const { name, username, links } = userDetails; |
||||
|
||||
return ( |
||||
<div> |
||||
<div className="flex items-center gap-4"> |
||||
<img |
||||
src="https://dodrc8eu8m09s.cloudfront.net/avatars/64ab82e214678473bb5d5ac2_1688961762495" |
||||
alt={name} |
||||
className="h-28 w-28 rounded-full" |
||||
/> |
||||
|
||||
<div> |
||||
<h1 className="text-2xl font-bold">{name}</h1> |
||||
<p className="text-gray-500">@{username}</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div className="mt-6 flex items-center gap-2 border-b pb-4"> |
||||
{links?.github && <UserLink href={links?.github} icon={Github} />} |
||||
{links?.linkedin && ( |
||||
<UserLink href={links?.linkedin} icon={LinkedinIcon} /> |
||||
)} |
||||
{links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />} |
||||
{links?.website && <UserLink href={links?.website} icon={Globe} />} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
type UserLinkProps = { |
||||
href: string; |
||||
icon: typeof Github; |
||||
}; |
||||
|
||||
export function UserLink(props: UserLinkProps) { |
||||
const { href, icon: Icon } = props; |
||||
|
||||
return ( |
||||
<a |
||||
target="_blank" |
||||
href={href} |
||||
className="flex items-center gap-0.5 text-blue-700" |
||||
> |
||||
<Icon className="h-3.5 shrink-0 stroke-2" /> |
||||
<span className="truncate text-sm">{href}</span> |
||||
</a> |
||||
); |
||||
} |
||||
@ -0,0 +1,28 @@ |
||||
--- |
||||
import { UserActivityHeatmap } from '../../../components/Account/UserActivityHeatmap'; |
||||
import { UserDetails } from '../../../components/Account/UserDetails'; |
||||
import { userApi } from '../../../api/user'; |
||||
import AccountLayout from '../../../layouts/AccountLayout.astro'; |
||||
|
||||
const { username } = Astro.params; |
||||
if (!username) { |
||||
return Astro.redirect('/404'); |
||||
} |
||||
|
||||
const userClient = userApi(Astro as any); |
||||
const { response: userDetails, error } = |
||||
await userClient.getUserByUsername(username); |
||||
|
||||
if (error || !userDetails) { |
||||
return Astro.redirect('/404'); |
||||
} |
||||
--- |
||||
|
||||
<AccountLayout title={userDetails?.name}> |
||||
<section class='container mt-5'> |
||||
<UserDetails userDetails={userDetails!} client:load /> |
||||
<div class='mt-6'> |
||||
<UserActivityHeatmap activity={userDetails?.activity!} client:load /> |
||||
</div> |
||||
</section> |
||||
</AccountLayout> |
||||
Loading…
Reference in new issue