Skip to content

Commit

Permalink
Restore anchor element name, also add UserProfile bit
Browse files Browse the repository at this point in the history
  • Loading branch information
@wbazant
wbazant committed Dec 1, 2024
1 parent 0bd75e7 commit dc54da2
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 97 deletions.
215 changes: 119 additions & 96 deletions src/components/activity/ChangesList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { Map } from '@styled-icons/boxicons-regular'
import React from 'react'
import { useDispatch } from 'react-redux'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

import { setAnchorElementId } from '../../redux/activitySlice'

const formatCoordinate = (coord: number): string =>
Number(coord.toPrecision(6)).toString()

Expand Down Expand Up @@ -79,108 +82,128 @@ interface LocationTypes {

const LocationTypesList: React.FC<{
locations: LocationTypes[]
}> = ({ locations }) => (
<>
{locations.map((loc, idx) => (
<React.Fragment key={`${loc.locationId}-${idx}`}>
<LocationLink to={`/locations/${loc.locationId}`}>
{loc.types
.map(
(type, typeIdx) =>
(type.commonName ? (
<CommonName key={`common-${typeIdx}`}>
{type.commonName}
</CommonName>
) : null) ||
(type.scientificName ? (
<ScientificName key={`scientific-${typeIdx}`}>
{type.scientificName}
</ScientificName>
) : null),
)
.filter(Boolean)
.reduce(
(prev, curr, idx) =>
prev.length
? [...prev, <span key={`separator-${idx}`}>, </span>, curr]
: [curr],
[] as React.ReactNode[],
)}
</LocationLink>
{idx < locations.length - 1 && <span> · </span>}
</React.Fragment>
))}
</>
)
periodName: string
}> = ({ locations, periodName }) => {
const dispatch = useDispatch()
return (
<>
{locations.map((loc, idx) => (
<React.Fragment key={`${loc.locationId}-${idx}`}>
<LocationLink
to={`/locations/${loc.locationId}`}
onClick={() => dispatch(setAnchorElementId(periodName))}
>
{loc.types
.map(
(type, typeIdx) =>
(type.commonName ? (
<CommonName key={`common-${typeIdx}`}>
{type.commonName}
</CommonName>
) : null) ||
(type.scientificName ? (
<ScientificName key={`scientific-${typeIdx}`}>
{type.scientificName}
</ScientificName>
) : null),
)
.filter(Boolean)
.reduce(
(prev, curr, idx) =>
prev.length
? [...prev, <span key={`separator-${idx}`}>, </span>, curr]
: [curr],
[] as React.ReactNode[],
)}
</LocationLink>
{idx < locations.length - 1 && <span> · </span>}
</React.Fragment>
))}
</>
)
}

const ChangesList: React.FC<{ groupedData: TimePeriodGroup[] }> = ({
groupedData,
}) => (
<>
{groupedData.map((period) => (
<div key={period.periodName}>
<h3>{period.periodName}</h3>
<ListChanges>
{period.activities.map((activity, index) => (
<ListItem key={index}>
{['added', 'edited', 'visited'].map((type) => {
const locations =
activity[
type as keyof Pick<
ActivityGroup,
'added' | 'edited' | 'visited'
>
]
return (
locations.length > 0 && (
<p key={type}>
<LocationTypesList locations={locations} />
<ActivityText>
{' '}
{type} in{' '}
{[
activity.location.city,
activity.location.state,
activity.location.country,
].filter(Boolean).length > 0 ? (
[
}) => {
const dispatch = useDispatch()
return (
<>
{groupedData.map((period) => (
<div key={period.periodName} id={period.periodName}>
<h3>{period.periodName}</h3>
<ListChanges>
{period.activities.map((activity, index) => (
<ListItem key={index}>
{['added', 'edited', 'visited'].map((type) => {
const locations =
activity[
type as keyof Pick<
ActivityGroup,
'added' | 'edited' | 'visited'
>
]
return (
locations.length > 0 && (
<p key={type}>
<LocationTypesList
locations={locations}
periodName={period.periodName}
/>
<ActivityText>
{' '}
{type} in{' '}
{[
activity.location.city,
activity.location.state,
activity.location.country,
]
.filter(Boolean)
.join(', ')
) : (
<>
<Map size={'1em'} />
{` ${formatCoordinate(activity.coordinates.latitude)}, ${formatCoordinate(
activity.coordinates.longitude,
)}`}
</>
)}
{activity.author && ' — '}
{activity.author && (
<>
{activity.userId ? (
<AuthorLink to={`/users/${activity.userId}`}>
{activity.author}
</AuthorLink>
) : (
activity.author
)}
</>
)}
</ActivityText>
</p>
].filter(Boolean).length > 0 ? (
[
activity.location.city,
activity.location.state,
activity.location.country,
]
.filter(Boolean)
.join(', ')
) : (
<>
<Map size={'1em'} />
{` ${formatCoordinate(activity.coordinates.latitude)}, ${formatCoordinate(
activity.coordinates.longitude,
)}`}
</>
)}
{activity.author && ' — '}
{activity.author && (
<>
{activity.userId ? (
<AuthorLink
to={`/users/${activity.userId}`}
onClick={() =>
dispatch(
setAnchorElementId(period.periodName),
)
}
>
{activity.author}
</AuthorLink>
) : (
activity.author
)}
</>
)}
</ActivityText>
</p>
)
)
)
})}
</ListItem>
))}
</ListChanges>
</div>
))}
</>
)
})}
</ListItem>
))}
</ListChanges>
</div>
))}
</>
)
}

export default ChangesList
4 changes: 3 additions & 1 deletion src/components/profile/UserProfile.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ArrowBack, Calendar, User } from '@styled-icons/boxicons-regular'
import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'
import styled from 'styled-components/macro'

Expand All @@ -25,6 +26,7 @@ const UserProfile = () => {
const { t, i18n } = useTranslation()
const [userData, setUserData] = useState({})
const [isLoading, setIsLoading] = useState(true)
const { anchorElementId } = useSelector((state) => state.activity)

useEffect(() => {
async function fetchUserData() {
Expand Down Expand Up @@ -52,7 +54,7 @@ const UserProfile = () => {
<BackButton
onClick={(event) => {
event.stopPropagation()
history.goBack()
anchorElementId ? history.push('/changes') : history.goBack()
}}
>
<ArrowBack />
Expand Down

0 comments on commit dc54da2

Please sign in to comment.