Skip to content

Commit

Permalink
fix: user pages where loaded incorrectly
Browse files Browse the repository at this point in the history
  • Loading branch information
TheNuclearNexus committed Sep 6, 2024
1 parent 93a270c commit 7d9ea44
Show file tree
Hide file tree
Showing 5 changed files with 269 additions and 236 deletions.
5 changes: 3 additions & 2 deletions apps/client/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -325,12 +325,13 @@ import ArticlePage from "./pages/article.js"
import UserBrowsePage from "./pages/users/index.js"
import loadUserBrowseData from "./pages/users/index.loader.js"

import loadUserData from "./pages/users/id/index.loader.js"

import {
loadArticleData,
loadPackBrowseData,
loadHomePageData,
loadRootData,
loadUserPageData,
} from "./loaders.js"
import SummitPage from "./pages/summit"

Expand Down Expand Up @@ -366,7 +367,7 @@ export const subRoutes: RouteObject[] = [
{
path: ":owner",
element: <User />,
loader: loadUserPageData,
loader: loadUserData,
},
{
path: "packs/:id",
Expand Down
108 changes: 1 addition & 107 deletions apps/client/src/loaders.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,113 +13,7 @@ import Cookie from "cookie"
import User from "./pages/users/id"
import { sanitize } from "formatters"

async function getUserData(id: string) {
const userDataResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/users/${id}`
)
if (!userDataResponse.ok) return undefined
return await userDataResponse.json()
}

async function getUserPacks(requestingUser: UserData|undefined, id: string) {
const userPacksResponse = await fetch(
import.meta.env.VITE_API_SERVER +
`/users/${id}/packs?&hidden=${requestingUser && (requestingUser.uid === id || sanitize(requestingUser.displayName) === sanitize(id))}` +
`&scope=` + BROWSE_SCOPES.join("&scope=")
)
const packs: {
id: string
data: PackData
meta: PackMetaData
owner: UserData
}[] = userPacksResponse.ok ? await userPacksResponse.json() : []

return packs
}
async function getBundles(id: string) {
const userBundlesResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/users/${id}/bundles`
)
const bundleIds: string[] = userBundlesResponse.ok
? await userBundlesResponse.json()
: []

return bundleIds
}

async function getBundleData(id: string): Promise<PackBundle | undefined> {
const bundleDataResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/bundles/${id}`
)
return bundleDataResponse.ok ? await bundleDataResponse.json() : undefined
}

async function getPackData(
id: string
): Promise<{ id: string; pack: PackData; meta: PackMetaData }> {
const packDataResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/packs/${id}`
)
const packMetaResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/packs/${id}/meta`
)

return {
id: id,
pack: await packDataResponse.json(),
meta: await packMetaResponse.json(),
}
}

async function getDownloads(id: string, packs: { meta: PackMetaData }[]) {
let total = 0
let daily = 0

for (let pack of packs) {
try {
total += pack.meta.stats.downloads.total
daily += pack.meta.stats.downloads.today ?? 0
} catch {
console.log(`Pack ${pack}`)
}
}
return [total, daily]
}

export interface UserStats {
totalDownloads: number
dailyDownloads: number
packs: { id: string; data: PackData; meta: PackMetaData; owner: UserData }[]
bundles: string[]
id: string
}

export async function loadUserPageData({ request, params }: any) {
const id: string = params.owner

const cookie = Cookie.parse(request.headers.get("cookie") ?? "")
const userData =
"smithedUser" in cookie ? JSON.parse(cookie["smithedUser"]) : undefined

const [user, packs, bundles] = await Promise.all([
getUserData(id),
getUserPacks(userData, id),
getBundles(id),
])
// console.log(packIds)

const [totalDownloads, dailyDownloads] = await getDownloads(id ?? "", packs)

const userStats: UserStats = {
packs: packs,
bundles: bundles,
id: id ?? "",
totalDownloads: totalDownloads,
dailyDownloads: dailyDownloads,
}

return { user, userStats }
}

export interface HomePageData {
trendingPacks: DataForPackCards[]
Expand Down Expand Up @@ -189,7 +83,7 @@ async function getTotalCount(params: URLSearchParams): Promise<number> {

export const PACKS_PER_PAGE = 20

const BROWSE_SCOPES = [
export const BROWSE_SCOPES = [
"data.display.name",
"data.display.description",
"data.display.gallery",
Expand Down
112 changes: 112 additions & 0 deletions apps/client/src/pages/users/id/index.loader.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@

import Cookie from "cookie"
import { UserData, PackData, PackMetaData, PackBundle } from "data-types"
import { sanitize } from "formatters"
import { BROWSE_SCOPES } from "../../../loaders"

async function getUserData(id: string) {
const userDataResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/users/${id}`
)
if (!userDataResponse.ok) return undefined
return await userDataResponse.json()
}

async function getPacks(requestingUser: UserData|undefined, id: string) {
const userPacksResponse = await fetch(
import.meta.env.VITE_API_SERVER +
`/users/${id}/packs?&hidden=${requestingUser !== undefined && (requestingUser.uid === id || sanitize(requestingUser.displayName) === sanitize(id))}` +
`&scope=` + BROWSE_SCOPES.join("&scope=")
)
const packs: {
id: string
data: PackData
meta: PackMetaData
owner: UserData
}[] = userPacksResponse.ok ? await userPacksResponse.json() : []

return packs
}
async function getBundles(id: string) {
const userBundlesResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/users/${id}/bundles`
)
const bundleIds: string[] = userBundlesResponse.ok
? await userBundlesResponse.json()
: []

return bundleIds
}

async function getBundleData(id: string): Promise<PackBundle | undefined> {
const bundleDataResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/bundles/${id}`
)
return bundleDataResponse.ok ? await bundleDataResponse.json() : undefined
}

async function getPackData(
id: string
): Promise<{ id: string; pack: PackData; meta: PackMetaData }> {
const packDataResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/packs/${id}`
)
const packMetaResponse = await fetch(
import.meta.env.VITE_API_SERVER + `/packs/${id}/meta`
)

return {
id: id,
pack: await packDataResponse.json(),
meta: await packMetaResponse.json(),
}
}

async function getDownloads(id: string, packs: { meta: PackMetaData }[]) {
let total = 0
let daily = 0

for (let pack of packs) {
try {
total += pack.meta.stats.downloads.total
daily += pack.meta.stats.downloads.today ?? 0
} catch {
console.log(`Pack ${pack}`)
}
}
return [total, daily]
}

export interface UserStats {
totalDownloads: number
dailyDownloads: number
packs: { id: string; data: PackData; meta: PackMetaData; owner: UserData }[]
bundles: string[]
id: string
}
export default async function loader({ request, params }: any) {
const id: string = params.owner

const cookie = Cookie.parse(request.headers.get("cookie") ?? "")
const userData =
"smithedUser" in cookie ? JSON.parse(cookie["smithedUser"]) : undefined

const [user, packs, bundles] = await Promise.all([
getUserData(id),
getPacks(userData, id),
getBundles(id),
])
// console.log(packIds)

const [totalDownloads, dailyDownloads] = await getDownloads(id ?? "", packs)

const userStats: UserStats = {
packs: packs,
bundles: bundles,
id: id ?? "",
totalDownloads: totalDownloads,
dailyDownloads: dailyDownloads,
}

return { user, userStats }
}
26 changes: 11 additions & 15 deletions apps/client/src/pages/users/id/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ import { User as FirebaseUser } from "firebase/auth"
import { prettyTimeDifference } from "formatters"
import { CreateBundle } from "../../../widget/bundle"
import { BundleCard } from "components/BundleCard"
import { UserStats } from "../../../loaders"
import { selectUserData } from "store"
import Smithie from "../../../widget/Smithie"
import { ClientContext } from "../../../context"
import { UserStats } from "./index.loader"

interface UserTabComponent {
editable: boolean
Expand Down Expand Up @@ -369,7 +369,6 @@ export default function User() {
useState(false)
const [showFallbackPFP, setShowFallbackPFP] = useState(false)

const dispatch = useAppDispatch()
const viewingUser = useAppSelector(selectUserData)

const pfpUploadRef = useRef<HTMLInputElement>(null)
Expand Down Expand Up @@ -600,20 +599,17 @@ export default function User() {
src={
typeof pfp === "string"
? pfp
: null ??
import.meta.env
: import.meta.env
.VITE_API_SERVER +
"/users/" +
userId +
"/pfp"
"/users/" +
userId +
"/pfp"
}
style={{
width: 64,
height: 64,
width: "4rem",
height: "4rem",
margin: 0,
}}
width={64}
height={64}
onError={(e) =>
setShowFallbackPFP(true)
}
Expand All @@ -622,7 +618,7 @@ export default function User() {
{showFallbackPFP && (
<div className="userFallbackPFP">
<Account
style={{ width: 32, height: 32 }}
style={{ width: "2rem", height: "2rem" }}
/>
</div>
)}
Expand All @@ -631,8 +627,8 @@ export default function User() {
<button
className="uploadPfpButton"
style={{
width: 64,
height: 64,
width: "4rem",
height: "4rem",
position: "absolute",
}}
onClick={() => {
Expand All @@ -641,7 +637,7 @@ export default function User() {
>
<Upload
fill="var(--foreground)"
style={{ width: 32, height: 32 }}
style={{ width: "2rem", height: "2rem" }}
/>
<input
ref={pfpUploadRef}
Expand Down
Loading

0 comments on commit 7d9ea44

Please sign in to comment.