Skip to content

Commit

Permalink
History cards #751 (#954)
Browse files Browse the repository at this point in the history 
* Updated cards on edit page and one GQL query to pass more data in fullDocument. Also changed styling slightly, there were some weird margin diffs
  • Loading branch information
@andrew-jp
andrew-jp authored Aug 2, 2023
1 parent 8837d6e commit d73b620
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 19 deletions.
57 changes: 38 additions & 19 deletions src/components/edit/RecentChangeHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ChangesetRow = ({ changeset }: ChangsetRowProps): JSX.Element => {
return (
<div className='card card-compact w-full bg-base-100 shadow-xl'>
<div className='card-body'>
<div className='card-actions justify-between items-center align-middle'>
<div className='mx-4 card-actions justify-between items-center align-middle'>
{op?.icon}
{op?.badge}
<div className='text-xs text-base-300'>
Expand Down Expand Up @@ -58,7 +58,6 @@ const ClimbChange = ({ changeId, fullDocument, updateDescription, dbOp }: Change
if (fullDocument.__typename !== DocumentTypeName.Climb) {
return null
}
const { name, id } = fullDocument as ClimbType
// @ts-expect-error
const icon = dbOpIcon[dbOp]
return (
Expand All @@ -68,11 +67,11 @@ const ClimbChange = ({ changeId, fullDocument, updateDescription, dbOp }: Change
<div className=''>
<div className=''>
{dbOp === 'delete'
? <span>{name}</span>
: (<Link href={`/climbs/${id}`}><a className='link link-hover'>{name}</a></Link>)}
? <span>{(fullDocument as ClimbType).name}</span>
: (<Link href={`/climbs/${(fullDocument as ClimbType).id}`}><a className='link link-hover'>{(fullDocument as ClimbType).name}</a></Link>)}
</div>
<div className='text-xs text-base-300'>
<UpdatedFields fields={updateDescription?.updatedFields} />
<UpdatedFields fields={updateDescription?.updatedFields} doc={fullDocument as ClimbType} />
</div>
</div>
{/* <div className='row-span-2 col-span-2'>{JSON.stringify(updateDescription?.updatedFields)}</div> */}
Expand All @@ -84,24 +83,21 @@ const AreaChange = ({ changeId, fullDocument, updateDescription, dbOp }: ChangeT
if (fullDocument.__typename !== DocumentTypeName.Area) {
return null
}
const { areaName, uuid } = fullDocument as AreaType

const url = `/crag/${uuid}`

const url = `/crag/${(fullDocument as AreaType).uuid}`
// @ts-expect-error
const icon = dbOpIcon[dbOp]
return (
<div className='ml-2 flex gap-x-2'>
<div className='py-2 ml-2 flex gap-x-2'>
<div className='flex gap-2'>{icon} <span className='badge badge-sm badge-warning'>Area</span></div>

<div className=''>
<div className=''>
{dbOp === 'delete'
? <span>{areaName}</span>
: (<Link href={url}><a className='link link-hover'>{areaName}</a></Link>)}
? <span>{(fullDocument as AreaType).areaName}</span>
: (<Link href={url}><a className='link link-hover'>{(fullDocument as AreaType).areaName}</a></Link>)}
</div>
<div className='text-xs text-base-300'>
<UpdatedFields fields={updateDescription?.updatedFields} />
<UpdatedFields fields={updateDescription?.updatedFields} doc={fullDocument as AreaType} />
</div>
</div>
</div>
Expand All @@ -112,19 +108,18 @@ const OrganizationChange = ({ changeId, fullDocument, updateDescription, dbOp }:
if (fullDocument.__typename !== DocumentTypeName.Organization) {
return null
}
const { displayName } = fullDocument as OrganizationType
// @ts-expect-error
const icon = dbOpIcon[dbOp]
return (
<div className='ml-2 flex gap-x-2'>
<div className='py-2 ml-2 flex gap-x-2'>
<div className='flex gap-2'>{icon} <span className='badge badge-sm badge-warning'>Organization</span></div>

<div className=''>
<div className=''>
<span>{displayName}</span>
<span>{(fullDocument as OrganizationType).displayName}</span>
</div>
<div className='text-xs text-base-300'>
<UpdatedFields fields={updateDescription?.updatedFields} />
<UpdatedFields fields={updateDescription?.updatedFields} doc={fullDocument as OrganizationType} />
</div>
</div>
</div>
Expand All @@ -133,14 +128,38 @@ const OrganizationChange = ({ changeId, fullDocument, updateDescription, dbOp }:

interface UpdatedFieldsProps {
fields: string[] | undefined
doc: any
}
const UpdatedFields = ({ fields }: UpdatedFieldsProps): JSX.Element | null => {
const UpdatedFields = ({ fields, doc }: UpdatedFieldsProps): JSX.Element | null => {
if (fields == null) return null
return (
<div>{fields.map(field => {
if (field.startsWith('_change')) return null
if (field.startsWith('updatedAt')) return null
return (<div key={field}>{field}</div>)
if (field.startsWith('updatedBy')) return null
if (field.startsWith('_deleting')) return null
if (field.includes('children')) return null

// single access - doc[attr]
if (field in doc) {
const value = JSON.stringify(doc[field])
return (<div key={field}>{field} -&gt; {value}{field.includes('length') ? 'm' : ''}</div>)
}

// double access - doc[parent][child]
if (field.includes('.')) {
var [parent, child] = field.split('.')
if (parent === 'content' && doc.__typename === DocumentTypeName.Area) {
parent = 'areaContent' // I had to alias this in the query bc of the overlap with ClimbType
}
if (parent in doc && child in doc[parent]) {
const value = JSON.stringify(doc[parent][child])
return (<div key={field}>{child} -&gt; {value}</div>)
}
return (<div key={field}>{child}</div>)
}

return null
})}
</div>
)
Expand Down
38 changes: 38 additions & 0 deletions src/js/graphql/gql/contribs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,15 +114,53 @@ export const FRAGMENT_CHANGE_HISTORY = gql`
... on Area {
areaName
uuid
areaContent: content {
description
}
metadata {
leaf
areaId
isDestination
leaf
isBoulder
lat
lng
leftRightIndex
}
shortCode
}
... on Climb {
id
name
uuid
content {
description
location
protection
}
grades {
vscale
yds
ewbank
french
font
uiaa
}
type {
aid
alpine
bouldering
deepwatersolo
ice
mixed
snow
sport
tr
trad
}
boltsCount
fa
length
}
... on Organization {
displayName
Expand Down

1 comment on commit d73b620

@vercel
Copy link

@vercel vercel bot commented on d73b620 Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

open-tacos – ./

open-tacos-openbeta-dev.vercel.app
www.openbeta.io
open-tacos-git-develop-openbeta-dev.vercel.app
tacos.openbeta.io
openbeta.io
openclimbmap.com

Please sign in to comment.