-
-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* location component * fetching with @nanostores/query * layouts reorg * typescript plugins cleanup * location component unit test cases * fetch only when visible
- Loading branch information
1 parent
956e203
commit 3b25ae2
Showing
51 changed files
with
350 additions
and
861 deletions.
There are no files selected for viewing
Binary file removed
BIN
-834 KB
.../articles/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/coda-clips-icon-files.zip
Binary file not shown.
Binary file removed
BIN
-29.5 KB
...rticles/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/codaclips-hud.png
Binary file not shown.
Binary file removed
BIN
-17.3 KB
...les/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/codaclips-icon128.png
Binary file not shown.
Binary file removed
BIN
-3.03 KB
...2009-03-29-ultimate-coda-wordpress-share-link-bonanza/codaclips-placeholder.png
Binary file not shown.
Binary file removed
BIN
-49 KB
...cles/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/codaclips-teaser.png
Binary file not shown.
Binary file removed
BIN
-75.7 KB
...-29-ultimate-coda-wordpress-share-link-bonanza/coffee-cup-icon-kremalicious.png
Binary file not shown.
514 changes: 0 additions & 514 deletions
514
content/articles/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/index.md
This file was deleted.
Oops, something went wrong.
Binary file removed
BIN
-448 KB
...s/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/share-link-bonanza-coda-clips.zip
Binary file not shown.
Binary file removed
BIN
-101 KB
...rticles/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/share-link-bonanza-html.zip
Binary file not shown.
Binary file removed
BIN
-15.6 KB
...rticles/2009-03-29-ultimate-coda-wordpress-share-link-bonanza/tutorial-icon.png
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,7 @@ | ||
.networks { | ||
margin-top: calc(var(--spacer) / 2); | ||
} | ||
|
||
.link { | ||
text-align: center; | ||
width: 2rem; | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import styles from './index.module.css' | ||
|
||
type Props = { | ||
country: { | ||
name: string | ||
code: string | ||
} | ||
} | ||
|
||
export function Flag({ country }: Props) { | ||
// offset between uppercase ascii and regional indicator symbols | ||
const OFFSET = 127397 | ||
|
||
const emoji = country?.code.replace(/./g, (char) => | ||
String.fromCodePoint(char.charCodeAt(0) + OFFSET) | ||
) | ||
|
||
return ( | ||
<span role="img" aria-label={country?.name} className={styles.emoji}> | ||
{emoji} | ||
</span> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import type { ReactElement } from 'react' | ||
import { Flag } from './Flag' | ||
|
||
type LocationProps = { | ||
country: string | ||
countryCode: string | ||
city: string | ||
time: string | ||
showFlag?: boolean | ||
} | ||
|
||
export function LocationItem({ | ||
country, | ||
countryCode, | ||
city, | ||
time, | ||
showFlag = true | ||
}: LocationProps): ReactElement<LocationProps> { | ||
return ( | ||
<> | ||
{showFlag && ( | ||
<Flag | ||
country={{ | ||
code: countryCode, | ||
name: country | ||
}} | ||
/> | ||
)} | ||
{city} <span>{time}</span> | ||
</> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
.location { | ||
font-size: var(--font-size-mini); | ||
min-height: 36px; | ||
} | ||
|
||
.location span { | ||
font-style: italic; | ||
} | ||
|
||
.emoji { | ||
display: inline-block; | ||
font-size: 1em; | ||
line-height: 1em; | ||
vertical-align: 'middle'; | ||
margin-right: calc(var(--spacer) / 6); | ||
} | ||
|
||
.next { | ||
display: inline-block; | ||
margin-left: calc(var(--spacer) / 3); | ||
} | ||
|
||
.loading { | ||
display: inline-block; | ||
margin-left: calc(var(--spacer) / 3); | ||
animation: flicker 0.3s linear infinite; | ||
} | ||
|
||
@keyframes flicker { | ||
0% { | ||
opacity: 0; | ||
} | ||
|
||
50% { | ||
opacity: 1; | ||
} | ||
|
||
100% { | ||
opacity: 0; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import { | ||
describe, | ||
it, | ||
expect, | ||
beforeAll, | ||
afterAll, | ||
vi, | ||
type SpyInstance | ||
} from 'vitest' | ||
import { render, screen } from '@testing-library/react' | ||
import * as nanostores from '@nanostores/react' | ||
import Location from '.' | ||
|
||
const mockData = { | ||
now: { | ||
country: 'USA', | ||
country_code: 'US', | ||
city: 'New York' | ||
}, | ||
next: { | ||
country: 'Canada', | ||
country_code: 'CA', | ||
city: 'Toronto', | ||
date_start: '2023-10-05' | ||
} | ||
} | ||
|
||
describe('Location component', () => { | ||
let useStoreSpy: SpyInstance | ||
|
||
beforeAll(() => { | ||
vi.mock('@nanostores/react') | ||
useStoreSpy = vi.spyOn(nanostores, 'useStore') | ||
}) | ||
|
||
afterAll(() => { | ||
vi.restoreAllMocks() | ||
}) | ||
|
||
it('renders the location items correctly', () => { | ||
useStoreSpy.mockImplementationOnce(() => ({ | ||
data: mockData, | ||
loading: false, | ||
error: null | ||
})) | ||
|
||
render(<Location />) | ||
|
||
expect(screen.getByLabelText('USA')).toBeInTheDocument() | ||
expect(screen.getByText('New York')).toBeInTheDocument() | ||
expect(screen.getByLabelText('Canada')).toBeInTheDocument() | ||
expect(screen.getByText('Toronto')).toBeInTheDocument() | ||
}) | ||
|
||
it('renders the loading indicator', () => { | ||
useStoreSpy.mockImplementationOnce(() => ({ | ||
data: null, | ||
loading: true, | ||
error: null | ||
})) | ||
|
||
render(<Location />) | ||
|
||
expect(screen.getByText('...')).toBeInTheDocument() | ||
}) | ||
|
||
it('renders empty when there is no data', () => { | ||
useStoreSpy.mockImplementationOnce(() => ({ | ||
data: null, | ||
loading: false, | ||
error: null | ||
})) | ||
|
||
render(<Location />) | ||
|
||
expect(screen.queryByLabelText('Location')).toBeEmptyDOMElement() | ||
}) | ||
|
||
it('renders nothing and logs error when error is encountered', () => { | ||
const consoleErrorSpy = vi.spyOn(console, 'error') | ||
useStoreSpy.mockImplementationOnce(() => ({ | ||
data: null, | ||
loading: false, | ||
error: 'Error' | ||
})) | ||
|
||
render(<Location />) | ||
|
||
expect(screen.queryByLabelText('Location')).not.toBeInTheDocument() | ||
expect(consoleErrorSpy).toHaveBeenCalledWith( | ||
'Failed to fetch location: Error' | ||
) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { useStore } from '@nanostores/react' | ||
import { $location } from '@stores/location' | ||
import { formatDistanceToNowStrict } from 'date-fns' | ||
import { LocationItem } from './LocationItem' | ||
import styles from './index.module.css' | ||
|
||
export default function Location() { | ||
const { data, loading, error } = useStore($location) | ||
if (error) { | ||
console.error(`Failed to fetch location: ${error}`) | ||
return null | ||
} | ||
|
||
return ( | ||
<section aria-label="Location" className={styles.location}> | ||
{loading && !data ? ( | ||
<span className={styles.loading}>...</span> | ||
) : data?.now?.city ? ( | ||
<> | ||
<LocationItem | ||
country={data.now.country} | ||
countryCode={data.now.country_code} | ||
city={data.now.city} | ||
time="now" | ||
/> | ||
|
||
<div className={styles.next}> | ||
{data.next?.city && ( | ||
<LocationItem | ||
country={data.next.country} | ||
countryCode={data.next.country_code} | ||
city={data.next.city} | ||
time={formatDistanceToNowStrict( | ||
new Date(data.next.date_start), | ||
{ addSuffix: true } | ||
)} | ||
showFlag={data.now.country !== data.next.country} | ||
/> | ||
)} | ||
</div> | ||
</> | ||
) : null} | ||
</section> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
3b25ae2
There was a problem hiding this comment.
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:
blog – ./
blog-kremalicious.vercel.app
blog-git-main-kremalicious.vercel.app
kremalicious.vercel.app