jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 19:21:18 -04:00
Code Issues Activity

re-render tweet embeds on theme change

Browse Source
This commit is contained in:
Jake Jarvis
2022-07-01 11:05:11 -04:00
parent 887c24d317
commit 8595542db1
3 changed files with 78 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/TweetEmbed/TweetEmbed.tsx
View File

@@ -1,25 +1,42 @@
import { useState } from "react";
import { TwitterTweetEmbed } from "react-twitter-embed"; import { TwitterTweetEmbed } from "react-twitter-embed";
import { useUpdateEffect } from "react-use";
import { useTheme } from "../../hooks/use-theme"; import { useTheme } from "../../hooks/use-theme";
import { styled } from "../../lib/styles/stitches.config";
const Wrapper = styled("div", {
// reserve a moderate amount of space for the widget, it takes a while to load...
minHeight: "300px",
});
export type TweetEmbedProps = { export type TweetEmbedProps = {
id: string; id: string;
options?: object; options?: Record<string, unknown>;
className?: string; className?: string;
}; };
const TweetEmbed = ({ id, options }: TweetEmbedProps) => { const TweetEmbed = ({ id, options, className }: TweetEmbedProps) => {
const { activeTheme } = useTheme(); const { activeTheme } = useTheme();
const [widgetTheme, setWidgetTheme] = useState(activeTheme);
useUpdateEffect(() => {
setWidgetTheme(activeTheme === "dark" ? activeTheme : "light");
}, [activeTheme]);
return ( return (
<Wrapper className={className}>
<TwitterTweetEmbed <TwitterTweetEmbed
tweetId={id} tweetId={id}
options={{ options={{
dnt: true, dnt: true,
align: "center", align: "center",
theme: activeTheme === "dark" ? activeTheme : "light", theme: widgetTheme,
...options, ...options,
}} }}
// changing this key forces the iframe URL to reformulate itself and update the theme:
key={`tweet-${id}-${widgetTheme}`}
/> />
</Wrapper>
); );
}; };

6
package.json
View File

@@ -29,8 +29,8 @@
"@primer/octicons": "^17.3.0", "@primer/octicons": "^17.3.0",
"@prisma/client": "^4.0.0", "@prisma/client": "^4.0.0",
"@react-spring/web": "^9.4.5", "@react-spring/web": "^9.4.5",
"@sentry/node": "^7.3.1", "@sentry/node": "^7.4.1",
"@sentry/tracing": "^7.3.1", "@sentry/tracing": "^7.4.1",
"@stitches/react": "^1.2.8", "@stitches/react": "^1.2.8",
"comma-number": "^2.1.0", "comma-number": "^2.1.0",
"copy-to-clipboard": "^3.3.1", "copy-to-clipboard": "^3.3.1",
@@ -57,7 +57,7 @@
"react-fast-marquee": "^1.3.2", "react-fast-marquee": "^1.3.2",
"react-gist": "^1.2.4", "react-gist": "^1.2.4",
"react-innertext": "^1.1.5", "react-innertext": "^1.1.5",
"react-intersection-observer": "^9.3.4", "react-intersection-observer": "^9.3.5",
"react-is": "18.2.0", "react-is": "18.2.0",
"react-player": "^2.10.1", "react-player": "^2.10.1",
"react-textarea-autosize": "^8.3.4", "react-textarea-autosize": "^8.3.4",

94
yarn.lock
View File

@@ -1266,9 +1266,9 @@
universal-user-agent "^6.0.0" universal-user-agent "^6.0.0"
"@octokit/openapi-types@^12.5.0": "@octokit/openapi-types@^12.5.0":
version "12.5.0" version "12.6.0"
resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-12.5.0.tgz#e10b256237c877fa6f0a21922151dc03d9c57510" resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-12.6.0.tgz#87489027e7089c039eb0ee4f807f7b52294fd8c3"
integrity sha512-VatvE5wtRkJq6hAWGTBZ62WkrdlCiy0G0u27cVOYTfAWVZi7QqTurVcjpsyc5+9hXLPRP5O/DaNEs4TgAp4Mqg== integrity sha512-7uS/1woIC7FvIxNSTcY4BLnNFbPtv/iteW041u7EfrZxFrUzB6C402sLyCEezl89HPHRjQet9Q1SHLMe0StITg==
"@octokit/request-error@^2.1.0": "@octokit/request-error@^2.1.0":
version "2.1.0" version "2.1.0"
@@ -1378,60 +1378,60 @@
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA== integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
"@sentry/core@7.3.1": "@sentry/core@7.4.1":
version "7.3.1" version "7.4.1"
resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.3.1.tgz#69a0cbb8678e44516f8faae0b13aaaa086183c96" resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.4.1.tgz#a18441f2da328f170cd7c78f4f1040e39a0dabcb"
integrity sha512-UYPNDluFtj5w6alh+SjSm9p6kxReKVcKEE+EPE4o44pdowjZ1BFTUY6ipMJhtIiDPr/51eeP8TuYdOAbo0Z9Pg== integrity sha512-YHx6CCds6ZqyCXAYX8ZpBKZLcFsGWbXZwofIfdILxO1PoToKXOLMPY4XFcI4NNhNg1gM3efleVdcyHKfBLDNyw==
dependencies: dependencies:
"@sentry/hub" "7.3.1" "@sentry/hub" "7.4.1"
"@sentry/types" "7.3.1" "@sentry/types" "7.4.1"
"@sentry/utils" "7.3.1" "@sentry/utils" "7.4.1"
tslib "^1.9.3" tslib "^1.9.3"
"@sentry/hub@7.3.1": "@sentry/hub@7.4.1":
version "7.3.1" version "7.4.1"
resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.3.1.tgz#9a0e0570631997b58484a97b6a1d3aa7368121ec" resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-7.4.1.tgz#3fa188d85a272e26ffbf94bf38b5b8369b7692e7"
integrity sha512-TFewt7zDvVLLrCfKkmvJEO4GPw3oPvR2t+606Z4S2gKiekGXKFGX4YC5u0ytoPfi+NMadXz4HivfrPuxrMy1JQ== integrity sha512-VSeaMgn5sbAJ+TCk0NpQbyV5zI3YeuLZgQogQF1YLtNdW9kW9vRDjawNnKEqu7aX18s8bdVbnwjK1oUHUXDKdg==
dependencies: dependencies:
"@sentry/types" "7.3.1" "@sentry/types" "7.4.1"
"@sentry/utils" "7.3.1" "@sentry/utils" "7.4.1"
tslib "^1.9.3" tslib "^1.9.3"
"@sentry/node@^7.3.1": "@sentry/node@^7.4.1":
version "7.3.1" version "7.4.1"
resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.3.1.tgz#4c6a9ed35a7113530fe2a53dfb1ed97aaf67729a" resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.4.1.tgz#7cef7d0f714a5efe46f2a89cda2a3e1dc41f90ef"
integrity sha512-nuv/TZToJgRAIR4o/cpxhd3zYN5cSbXgctygDlaPSZmAdJeuuivy8Qy2ZJn37COA60yoAKRhGFBr38YBw8GQ6Q== integrity sha512-EkN+aIDesLukeIrJSmxeg/mxmoAFNCYuC49T5eNcKYD57K4xtdJFI72FcgZ8QKdiAtUea6y8z2grCA73My31BQ==
dependencies: dependencies:
"@sentry/core" "7.3.1" "@sentry/core" "7.4.1"
"@sentry/hub" "7.3.1" "@sentry/hub" "7.4.1"
"@sentry/types" "7.3.1" "@sentry/types" "7.4.1"
"@sentry/utils" "7.3.1" "@sentry/utils" "7.4.1"
cookie "^0.4.1" cookie "^0.4.1"
https-proxy-agent "^5.0.0" https-proxy-agent "^5.0.0"
lru_map "^0.3.3" lru_map "^0.3.3"
tslib "^1.9.3" tslib "^1.9.3"
"@sentry/tracing@^7.3.1": "@sentry/tracing@^7.4.1":
version "7.3.1" version "7.4.1"
resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.3.1.tgz#bbc8493dc49553089bd1eed0bf27f1344f389e29" resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.4.1.tgz#2fd242f01f9ef550182124adbd6d426c5505b98c"
integrity sha512-7WXIw9JiCqs3fYr2+ZwSpDQaCt64VfzjeDBo+YzPR+FmPDboo4ECHFSie4d7nZXgpVkC45iOeWE1Y1Fd0vkjgA== integrity sha512-Te/1GwQmy+D/USOd1bXjyrstnXnArW+5ufxgHlX7LfcQlCcfVEO2PNJkxSPG5fouLZdEjlRc8Yv+wVz5iCwDaQ==
dependencies: dependencies:
"@sentry/hub" "7.3.1" "@sentry/hub" "7.4.1"
"@sentry/types" "7.3.1" "@sentry/types" "7.4.1"
"@sentry/utils" "7.3.1" "@sentry/utils" "7.4.1"
tslib "^1.9.3" tslib "^1.9.3"
"@sentry/types@7.3.1": "@sentry/types@7.4.1":
version "7.3.1" version "7.4.1"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.3.1.tgz#c6eaabf0ab2cc778474ba68d3d8331ec839cda6f" resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.4.1.tgz#bc6e782084db0860e4e93ef1b2c2793f9bea9958"
integrity sha512-EZaRLJ8G2aSb7Vlpe1TR9LRZKY5gNpufuu8OXVrnTHiEMLHNUv1NrLQevy2m1SQUkg43oLdTyMKdM+nTESIC+A== integrity sha512-PXzoTwdR5qAoZGdDromiE1JuIJE43ItDVpmMQYA+L40BdlrmvKh1nAP13e8tTCOKxMJ+4TulTLnysumo0NDTlw==
"@sentry/utils@7.3.1": "@sentry/utils@7.4.1":
version "7.3.1" version "7.4.1"
resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.3.1.tgz#f0d3644e9040d8654c452b01c3ba76df448d27f2" resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.4.1.tgz#9a1a052129f0846a7b700578531b85b531b43734"
integrity sha512-lrwbyajioWeG/CTFCzRh0Pu+zd/P+A+ASToEy2WIQsRbUORZrOmHSVzP0KR+TSZE0TMNrwxUwjSYZoyWCfZ1wQ== integrity sha512-fJnMPKrM9/fGr43aNCiAJG5F1W6Scpu7TV5MTvHDx7XPVfJhvlW70XBOtrpF1kD7xD9QJw5t+50WX6HctAACjA==
dependencies: dependencies:
"@sentry/types" "7.3.1" "@sentry/types" "7.4.1"
tslib "^1.9.3" tslib "^1.9.3"
"@stitches/react@^1.2.8": "@stitches/react@^1.2.8":
@@ -2490,9 +2490,9 @@ eastasianwidth@^0.2.0:
integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA== integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
electron-to-chromium@^1.4.172: electron-to-chromium@^1.4.172:
version "1.4.174" version "1.4.176"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.174.tgz#ffdf57f26dd4558c5aabdb4b190c47af1c4e443b" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.176.tgz#61ab2a1de3b5072ee31881a937c08ac6780d1cfa"
integrity sha512-JER+w+9MV2MBVFOXxP036bLlNOnzbYAWrWU8sNUwoOO69T3w4564WhM5H5atd8VVS8U4vpi0i0kdoYzm1NPQgQ== integrity sha512-92JdgyRlcNDwuy75MjuFSb3clt6DGJ2IXSpg0MCjKd3JV9eSmuUAIyWiGAp/EtT0z2D4rqbYqThQLV90maH3Zw==
emoji-regex@^8.0.0: emoji-regex@^8.0.0:
version "8.0.0" version "8.0.0"
@@ -4899,10 +4899,10 @@ react-innertext@^1.1.5:
resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0" resolved "https://registry.yarnpkg.com/react-innertext/-/react-innertext-1.1.5.tgz#8147ac54db3f7067d95f49e2d2c05a720d27d8d0"
integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q== integrity sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==
react-intersection-observer@^9.3.4: react-intersection-observer@^9.3.5:
version "9.3.4" version "9.3.5"
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.3.4.tgz#b38a346887f938a2e44bbf4c82a907fb4add675d" resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.3.5.tgz#df97584c1ef1549a47d4af6380db2fb4b76d7bba"
integrity sha512-8L0NpqldlILWE9qurRvPJDx3fgwj5gPUJbtZq860wDdHyR1IU52DhhAVN6rmo3TqHF0CgCA50mIT4SHtBSbKLw== integrity sha512-TiJXVUapzAaIrZCAMBLjyWvwGYNGm0Xpkcwm3NY23b9PsJEBavul0hRFmrwc/LOmBUA/8TlkjCj7lCvjM0q1Hg==
react-is@18.2.0: react-is@18.2.0:
version "18.2.0" version "18.2.0"