Skip to content

Commit

Permalink
Merge pull request #981 from hackclub/links_from_latest
Browse files Browse the repository at this point in the history 
Fixed updates affecting only root + updating ship without going through matchups
  • Loading branch information
@malted
malted authored Dec 25, 2024
2 parents 3904bab + d2cd940 commit 6362288
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 137 deletions.
8 changes: 5 additions & 3 deletions src/app/harbor/shipyard/edit-ship-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ export default function EditShipForm({
const formData = new FormData(e.target)
const formValues = Object.fromEntries(formData.entries())

const editableFieldsForRootShipUpdate: EditableShipFields = {
const latestShip = shipChain.at(-1) || ship

const editableFieldsForLatestShipUpdate: EditableShipFields = {
title: formValues.title as string,
repoUrl: formValues.repoUrl as string,
deploymentUrl: formValues.deploymentUrl as string,
Expand Down Expand Up @@ -71,8 +73,8 @@ export default function EditShipForm({
}

const newShip: Ship = {
...shipChain[0],
...editableFieldsForRootShipUpdate,
...latestShip,
...editableFieldsForLatestShipUpdate,
}
// If we're editing the root ship, update the desc with the new one from the form
if (!ship.reshippedFromId && ship.shipType === 'update') {
Expand Down
274 changes: 140 additions & 134 deletions src/app/harbor/shipyard/ships.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,129 +171,135 @@ export default function Ships({
s: Ship
id: string
setNewShipVisible: any
}) => (
<div
key={s.id}
id={id}
onClick={() => setSelectedShip(s)}
className="cursor-pointer"
>
<Card className="flex flex-col sm:gap-2 sm:flex-row items-start sm:items-center p-4 hover:bg-gray-100 transition-colors duration-200">
<div className="flex gap-4 items-center">
<div className="w-16 h-16 relative mb-4 sm:mb-0 sm:mr-4 flex-shrink-0">
<img
src={s.screenshotUrl}
alt={`Screenshot of ${s.title}`}
className="object-cover w-full h-full absolute top-0 left-0 rounded"
onError={({ target }) => {
target.src = NoImgDino.src
}}
/>
}) => {
const latestShip = getChainFromAnyId(s.id)?.at(-1) || s

return (
<div
key={s.id}
id={id}
onClick={() => setSelectedShip(s)}
className="cursor-pointer"
>
<Card className="flex flex-col sm:gap-2 sm:flex-row items-start sm:items-center p-4 hover:bg-gray-100 transition-colors duration-200">
<div className="flex gap-4 items-center">
<div className="w-16 h-16 relative mb-4 sm:mb-0 sm:mr-4 flex-shrink-0">
<img
src={latestShip.screenshotUrl}
alt={`Screenshot of ${latestShip.title}`}
className="object-cover w-full h-full absolute top-0 left-0 rounded"
onError={({ target }) => {
target.src = NoImgDino.src
}}
/>
</div>
<h2 className="text-xl font-semibold text-left mb-2 sm:hidden block">
{s.title}
</h2>
</div>
<h2 className="text-xl font-semibold text-left mb-2 sm:hidden block">
{s.title}
</h2>
</div>
<div className="flex-grow">
<h2 className="text-xl font-semibold text-left mb-2 sm:block hidden">
{s.title}
</h2>

<div className="flex flex-wrap items-start gap-2 text-sm">
<ShipPillCluster
chain={s.shipType === 'project' ? getChainFromAnyId(s.id) : [s]}
/>
<div className="flex-grow">
<h2 className="text-xl font-semibold text-left mb-2 sm:block hidden">
{latestShip.title}
</h2>

<div className="flex flex-wrap items-start gap-2 text-sm">
<ShipPillCluster
chain={s.shipType === 'project' ? getChainFromAnyId(s.id) : [s]}
/>
</div>
</div>
</div>

{bareShips ? null : (
<div className="mt-4 sm:mt-0 sm:ml-auto">
{s.shipStatus === 'staged' ? (
<>
<Button
id="ship-ship"
onClick={async (e) => {
e.stopPropagation()
if (sessionStorage.getItem('tutorial') === 'true') {
await tryToShip(s)
} else {
setShipToShip(s)
setShipModal(true)
}
}}
disabled={isShipping}
>
{isShipping
? 'Shipping...'
: s.shipType === 'project'
? 'SHIP SHIP!'
: 'SHIP UPDATE!'}
</Button>

<Modal isOpen={shipModal} close={() => setShipModal(false)}>
<div className="p-4 max-h-96 overflow-y-auto">
<h2 className="text-3xl font-bold text-center">
Confirm Shipping
</h2>
<p className="text-xl mt-5 text-center">
Are you sure you want to ship {s.title}?
</p>
<p className="mt-3 text-center">
Keep in mind that this can't be reverted! <br /> Your ship
will start getting into matchups.
</p>
<div className="flex justify-center">
<Image src={ThinkingDino} alt="Thinking Dino" />
</div>
<div className="flex justify-end mt-5">
<Button
onClick={() => setShipModal(false)}
className="mr-5"
>
Go back
</Button>

<Button
onClick={async () => {
if (shipToShip) {
await tryToShip(shipToShip)
}
setShipModal(false)
}}
disabled={isShipping}
>
{isShipping ? 'Shipping...' : 'Yes, ship it'}
</Button>
{bareShips ? null : (
<div className="mt-4 sm:mt-0 sm:ml-auto">
{s.shipStatus === 'staged' ? (
<>
<Button
id="ship-ship"
onClick={async (e) => {
e.stopPropagation()
if (sessionStorage.getItem('tutorial') === 'true') {
await tryToShip(s)
} else {
setShipToShip(s)
setShipModal(true)
}
}}
disabled={isShipping}
>
{isShipping
? 'Shipping...'
: s.shipType === 'project'
? 'SHIP SHIP!'
: 'SHIP UPDATE!'}
</Button>

<Modal isOpen={shipModal} close={() => setShipModal(false)}>
<div className="p-4 max-h-96 overflow-y-auto">
<h2 className="text-3xl font-bold text-center">
Confirm Shipping
</h2>
<p className="text-xl mt-5 text-center">
Are you sure you want to ship {latestShip.title}?
</p>
<p className="mt-3 text-center">
Keep in mind that this can't be reverted! <br /> Your
ship will start getting into matchups.
</p>
<div className="flex justify-center">
<Image src={ThinkingDino} alt="Thinking Dino" />
</div>
<div className="flex justify-end mt-5">
<Button
onClick={() => setShipModal(false)}
className="mr-5"
>
Go back
</Button>

<Button
onClick={async () => {
if (shipToShip) {
await tryToShip(shipToShip)
}
setShipModal(false)
}}
disabled={isShipping}
>
{isShipping ? 'Shipping...' : 'Yes, ship it'}
</Button>
</div>
</div>
</div>
</Modal>
</>
) : s.paidOut ? (
!stagedShips.find(
(stagedShip) =>
stagedShip.wakatimeProjectNames.join(',') ===
s.wakatimeProjectNames.join(','),
) ? (
<Button
onClick={async (e) => {
e.stopPropagation()
console.log('Shipping an update...', s)
setNewUpdateShip(s)
}}
>
Ship an update!
</Button>
</Modal>
</>
) : latestShip.paidOut ? (
!stagedShips.find(
(stagedShip) =>
stagedShip.wakatimeProjectNames.join(',') ===
s.wakatimeProjectNames.join(','),
) ? (
<Button
onClick={async (e) => {
e.stopPropagation()
console.log('Shipping an update...', s)
setNewUpdateShip(s)
}}
>
Ship an update!
</Button>
) : (
<p className="opacity-50 text-sm">Pending draft update!</p>
)
) : (
<p className="opacity-50 text-sm">Pending draft update!</p>
)
) : (
<p>Awaiting payout</p>
)}
</div>
)}
</Card>
</div>
)
<p>Awaiting payout</p>
)}
</div>
)}
</Card>
</div>
)
}

const latestShip = getChainFromAnyId(selectedShip?.id)?.at(-1) || selectedShip

return (
<>
Expand Down Expand Up @@ -330,11 +336,11 @@ export default function Ships({
const stagedShipParent = getChainFromAnyId(ship.id)

const editableFields: EditableShipFields = {
title: stagedShipParent?.[0].title,
repoUrl: stagedShipParent?.[0].repoUrl,
deploymentUrl: stagedShipParent?.[0].deploymentUrl,
readmeUrl: stagedShipParent?.[0].readmeUrl,
screenshotUrl: stagedShipParent?.[0].screenshotUrl,
title: latestShip?.title,
repoUrl: latestShip?.repoUrl,
deploymentUrl: latestShip?.deploymentUrl,
readmeUrl: latestShip?.readmeUrl,
screenshotUrl: latestShip?.screenshotUrl,
}

return (
Expand Down Expand Up @@ -433,12 +439,12 @@ export default function Ships({
>
<div className="absolute top-0 left-0 right-0 h-48">
<Image
src={selectedShip?.screenshotUrl}
src={latestShip?.screenshotUrl}
style={{
maskImage:
'linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0))',
}}
alt={`Screenshot of ${selectedShip?.title}`}
alt={`Screenshot of ${latestShip?.title}`}
className="object-cover max-w-full rounded"
fill={true}
priority
Expand All @@ -452,10 +458,10 @@ export default function Ships({

<div className=" flex-grow pt-32" id="selected-ship-card">
<div className="relative">
<h2 className="text-3xl font-bold">{selectedShip?.title}</h2>
<h2 className="text-3xl font-bold">{latestShip?.title}</h2>
<p className="opacity-75">
{selectedShip?.wakatimeProjectNames ? (
`Wakatime project name: ${selectedShip?.wakatimeProjectNames}`
{latestShip?.wakatimeProjectNames ? (
`Wakatime project name: ${latestShip?.wakatimeProjectNames}`
) : (
<div className="flex items-center gap-1">
<Icon glyph="important" />
Expand All @@ -472,18 +478,18 @@ export default function Ships({
id="selected-ship-play-button"
className="flex items-center flex-grow"
target="_blank"
href={selectedShip?.deploymentUrl || '#'}
href={latestShip?.deploymentUrl || '#'}
prefetch={false}
>
<Button
className="w-full h-full text-lg"
disabled={!selectedShip?.deploymentUrl}
disabled={!latestShip?.deploymentUrl}
>
Play
<Icon glyph="view-forward" />
</Button>
</Link>
<RepoLink repo={selectedShip?.repoUrl} />
<RepoLink repo={latestShip?.repoUrl} />

<Button
id="selected-ship-edit-button"
Expand Down Expand Up @@ -515,7 +521,7 @@ export default function Ships({
>
<Card className="p-2 mt-2 text-white !bg-white/15">
<EditShipForm
ship={selectedShip}
ship={latestShip}
shipChain={getChainFromAnyId(selectedShip.id)}
closeForm={() => setIsEditingShip(false)}
setShips={setShips}
Expand Down Expand Up @@ -650,12 +656,12 @@ export default function Ships({
height={11}
/>

{selectedShip?.feedback && (
{latestShip?.feedback && (
<>
<Card className="p-4 m-5">
<h5 className="text-xl font-bold mb-2">Feedback</h5>
<p className="text-base whitespace-pre-line">
{selectedShip.feedback}
{latestShip.feedback}
</p>
<p className="text-xs text-gray-500 mt-3 italic">
This summary is auto-generated from the votes on this
Expand Down

0 comments on commit 6362288

Please sign in to comment.