Port breach-detail page to Next.js #3049

Vinnl · 2023-05-17T11:22:28Z

References:

Didn't change much after our pairing session; just fixed up the recommendation icons.

flozia

Looking good!

flozia · 2023-05-17T14:00:10Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+
+import Image, { StaticImageData } from "next/image";
+import BreachDetailScanImage from "../../../../../client/images/breach-detail-scan.svg";
+import "../../../../../client/css/partials/breachDetail.css";


Question: I see 404 errors from breachDetail.css since for the current Monitor site icons are being imported via background-image: url('/images/recommendation-icons/{iconName}.svg'); — not sure if we want to do anything with this right now?

Oops, had to check those in: 4cbfa34

I just copied them over to /public/, though I'm not super happy about the filenames having no indication of it being transitional (like /nextjs_migration/), but 🤷

Solid catch @flozia!

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

flozia · 2023-05-17T14:06:14Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+            <BreachLogo breach={breach} logos={breachLogos} />
+            {breach.Title}
+          </h1>
+          {getBreachCategory(breach) === "website-breach" ? (


Note (non-blocking and non-actionable for now): I know the task right now is only porting the current pages we have. For the next iteration, it would be great if we would define utilize enums more and minimize string comparisons.

I think I might actually push back a little on enums: I believe the TS team wouldn't have added those today, since they're a language-level feature added to JS, rather than just being annotations - and IIRC they're even incompatible with the enum proposal that's on the TC39 standardisation track.

That said, I do agree in spirit: I just think that string comparisons are fine, but would also like to tighten the type to a union of string literals.

@Vinnl To confirm your intent, it would only return one of three possible values?

"data-aggregator-breach" | "website-breach" | "sensitive-breach"

I scraped each breach (because of course I would) and used cheerio to extract .breach-detail-meta-more-info on each breach detail's page into a Set() and it says we only have 3 unique breach types:

Set(3) { 'Website Breach', 'Data Aggregator Breach', 'Sensitive Website Breach' }

Now that we're using TypeScript, I'd probably suggest moving those into an enum since it looks like they are hardcoded in a few places:

git grep -En "['\"](data-aggregator|website|sensitive)-breach['\"]" -- ':!*.ftl' | cat src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:72: {getBreachCategory(breach) === "website-breach" ? ( src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:194: if (categoryId === "data-aggregator-breach") { src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:199: } else if (categoryId === "sensitive-breach") { src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:234: return "data-aggregator-breach"; src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:237: return "sensitive-breach"; src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:240: return "website-breach"; src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx:242: return "data-aggregator-breach"; src/views/partials/breachDetail.js:11: return 'data-aggregator-breach' src/views/partials/breachDetail.js:14: return 'sensitive-breach' src/views/partials/breachDetail.js:17: return 'website-breach' src/views/partials/breachDetail.js:19: return 'data-aggregator-breach' src/views/partials/breachDetail.js:103: if (categoryId === 'data-aggregator-breach') { src/views/partials/breachDetail.js:109: } else if (categoryId === 'sensitive-breach') { src/views/partials/breachDetail.js:138: ${getBreachCategory(data.breach) === 'website-breach'

@maxxcrawford Yep exactly, and TS would flip us off if we tried to use any other!

pdehaan · 2023-05-17T15:34:28Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+import Glyph1 from "../../../../../client/images/social-security-numbers.svg";
+import Glyph3 from "../../../../../client/images/passwords.svg";


Heh, this was me trying to efficiently copy-paste the filenames from a different file and then converting that to these imports - the other file had the SSN file listed twice. Probably a good idea to update the numbers yeah, will take a look tomorrow 😅

suggestion: I would make these more logically named.

social-security-numbers: glyphSocialSecurityNumbers, etc.

Dammit Maxx, you know how much manual typing this was already? :P

But you're right and I'm lazy, of course, so fixed in ebd583e.

pdehaan · 2023-05-17T15:36:13Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import Image, { StaticImageData } from "next/image";


non-blocking: Interesting that we're using semicolons here but not in the .js files.
Makes me wonder if we're linting .ts|.tsx files yet. If not, we should probably set that up sooner rather than later so we don't accrue a lot of ESLint-tsx-tech-debt.

Yeah, we agreed to switch to Prettier for formatting (it's more complete, and doesn't show up as warnings before it's been formatting), since we're creating many new files anyway. So TS files are formatted by Prettier, while existing files are left as-is.

When the migration is complete, we might still want to do a mega-formatting commit for the remaining files.

Filed #3055

pdehaan · 2023-05-17T15:39:02Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+          <a
+            href="#what-is-this-breach"
+            className="breach-detail-meta-more-info"
+          >
+            {l10n.getString(getBreachCategory(breach))}
+          </a>


Re: internal page links, should we be using <a> or Next.js's <Link> component?

@Vinnl can add to this, but as this is just a port, and not a true React page, we're maintaining <a> for now.

Yeap, that's exactly it - we're reusing the existing code, which is expecting all client-side state to be thrown away on page navigations, so using <Link> here would be unsafe. We should definitely do so for new pages though, once we're going to actually use React.

@Vinnl Suggestion: We may want to document how we're using (not using?) <Link> for the porting pages task.

Added, thanks!

pdehaan · 2023-05-17T15:40:40Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+          </ul>
+          <p
+            className="breach-detail-attribution"
+            dangerouslySetInnerHTML={{


Are we 'dangerous' because the HIBP link has a nested <a> tag?

@pdehaan Yeah. The other thing to call out is that we're already doing this, but React surfaces this dangerous act better.

Note that we should be able to migrate away from this in the future, changing how we set up strings in React. (Similar to Relay) so there's no mockup/HTML content in the .ftl file

Also note that the danger lies in the source strings containing malicious code - but since those source strings are provided by the localisers, that should be fine.

pdehaan · 2023-05-17T15:45:53Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+    priority: [] as any[],
+    lowerPriority: [] as any[],
+  };
+
+  const dataClasses: any[] = breach.DataClasses;


nit: Not sure if we can use anything more specific than any here.
Not sure if they're all strings. 🤷

Yeah, ideally we wouldn't have to set a type for this value in the first place - #3011 will hopefully get us closer to that.

@Vinnl Good reminder. I'll get that merged in without checking anything, for future usage.

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

pdehaan · 2023-05-17T15:55:52Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+
+  return (
+    <>
+      {output} {lastOutputItem}


Q: Do we need to check if there are "More" items? Wondering if we have any risk of a trailing "+" icon without any data classes.

https://monitor.firefox.com/breach-details/126

In fact, I found 69/673 (10.25%) breaches without "more" data classes.

import CachedFetch from "@11ty/eleventy-fetch"; import * as cheerio from "cheerio"; const noMas = []; const breaches = await getBreaches(); for (const breach of breaches) { const $ = await getBreachPage(breach.Name); const more = $("ul.breach-detail-compromised-list li:last-of-type").text().trim(); if (!more) { noMas.push(breach.Name); } } console.log(`${noMas.length}/${breaches.length} breaches without "more" data classes`); console.log(noMas); async function getBreaches() { return CachedFetch("https://haveibeenpwned.com/api/v3/breaches", {type: "json", duration: "1d"}); } async function getBreachPage(breachName) { const res = await CachedFetch(`https://monitor.firefox.com/breach-details/${breachName}`, { type: "text", duration: "1d" }); return cheerio.load(res); }

Obviously, not a blocker since this is already in production.

Of course you did 😄 Well, might as well fix it now: d6367ef

pdehaan · 2023-05-17T18:24:20Z

Stylelint is having feelings:

353 problems (349 errors, 4 warnings)

Expected class selector to be camelCase selector-class-pattern

Looks like we're explicitly overriding this in our .stylelintrc at

blurts-server/.stylelintrc

Lines 27 to 32 in 4cbfa34

    
           "selector-class-pattern": [ 
        
             "^[a-z][a-zA-Z0-9]+$", 
        
             { 
        
               "message": "Expected class selector to be camelCase" 
        
             } 
        
           ]

Removing that rule gives us the following output:

10 problems (6 errors, 4 warnings)

pdehaan · 2023-05-17T18:34:16Z

As for the ESLint errors, they're a bit lost in the noise (although I reported this at #3035, so no point in rehashing here):

✖ 151 problems (5 errors, 146 warnings)

Here's the errors (and a pretty gross chain of greps):

npm run lint:js | grep -Ev "\d+:\d+\s+warning\s+" | grep -B1 -E "\serror\s"

/Volumes/Dev/github/mozilla/blurts-server/src/client/js/dialog.js
  64:7  error  Do not assign to the variable `module`. See: https://nextjs.org/docs/messages/no-assign-module-variable  @next/next/no-assign-module-variable
--
/Volumes/Dev/github/mozilla/blurts-server/src/client/js/partials/exposuresSetup.js
  58:15  error  Empty block statement  no-empty
--
/Volumes/Dev/github/mozilla/blurts-server/src/controllers/dialog.js
  17:5  error  Do not assign to the variable `module`. See: https://nextjs.org/docs/messages/no-assign-module-variable  @next/next/no-assign-module-variable
--
/Volumes/Dev/github/mozilla/blurts-server/src/e2e/utils/helpers.js
  91:11  error  Empty block statement  no-empty
--
/Volumes/Dev/github/mozilla/blurts-server/src/utils/email.test.js
  121:5   error    Definition for rule 'n/no-callback-literal' was not found                      n/no-callback-literal

Or if I manually disable a bunch of ESLint rules (re:JSDoc, etc):

> eslint .

/Volumes/Dev/github/mozilla/blurts-server/next-env.d.ts
  6:1  warning  header should be a block comment  header/header

/Volumes/Dev/github/mozilla/blurts-server/src/app/components/server/BreachLogo.tsx
  22:12  warning  Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

/Volumes/Dev/github/mozilla/blurts-server/src/client/js/dialog.js
  64:7  error  Do not assign to the variable `module`. See: https://nextjs.org/docs/messages/no-assign-module-variable  @next/next/no-assign-module-variable

/Volumes/Dev/github/mozilla/blurts-server/src/client/js/partials/exposuresSetup.js
  58:15  error  Empty block statement  no-empty

/Volumes/Dev/github/mozilla/blurts-server/src/controllers/dialog.js
  17:5  error  Do not assign to the variable `module`. See: https://nextjs.org/docs/messages/no-assign-module-variable  @next/next/no-assign-module-variable

/Volumes/Dev/github/mozilla/blurts-server/src/db/tables/subscribers_types.d.ts
  3:1  warning  header should be a block comment  header/header

/Volumes/Dev/github/mozilla/blurts-server/src/e2e/utils/helpers.js
  91:11  error  Empty block statement  no-empty

/Volumes/Dev/github/mozilla/blurts-server/src/utils/email.test.js
  121:5  error  Definition for rule 'n/no-callback-literal' was not found  n/no-callback-literal

✖ 8 problems (5 errors, 3 warnings)

Still a bit unclear on "n/no-callback-literal". ~~I'm fairly sure it's a typo, but not sure what it should be.~~

https://github.com/mysticatea/eslint-plugin-node/blob/master/docs/rules/no-callback-literal.md

Looks like this was always n/no-callback-literal, per https://github.com/mozilla/blurts-server/pull/2772/files#diff-194f5b8bcab785383c27f8c2e3208145849c76cffa742de5a76f8975fffd04c4R117
Spelunking a bit more, looks like it's coming from https://www.npmjs.com/package/eslint-plugin-n (via https://www.npmjs.com/package/eslint-config-standard).

maxxcrawford

Mostly questions/comments on the current code. Thanks again for walking us through this process, @Vinnl! 🎉

maxxcrawford · 2023-05-18T14:34:03Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import Image, { StaticImageData } from "next/image";


Filed #3055

maxxcrawford · 2023-05-18T14:34:21Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+
+import Image, { StaticImageData } from "next/image";
+import BreachDetailScanImage from "../../../../../client/images/breach-detail-scan.svg";
+import "../../../../../client/css/partials/breachDetail.css";


Solid catch @flozia!

maxxcrawford · 2023-05-18T14:36:11Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+import Glyph1 from "../../../../../client/images/social-security-numbers.svg";
+import Glyph3 from "../../../../../client/images/passwords.svg";


suggestion: I would make these more logically named.

social-security-numbers: glyphSocialSecurityNumbers, etc.

maxxcrawford · 2023-05-18T14:39:24Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+import Glyph1 from "../../../../../client/images/social-security-numbers.svg";
+import Glyph3 from "../../../../../client/images/passwords.svg";
+import Glyph4 from "../../../../../client/images/bank-account-numbers.svg";
+import Glyph5 from "../../../../../client/images/credit-cards.svg";
+import Glyph6 from "../../../../../client/images/credit-card-cvvs.svg";
+import Glyph7 from "../../../../../client/images/partial-credit-card-data.svg";
+import Glyph8 from "../../../../../client/images/ip-addresses.svg";
+import Glyph9 from "../../../../../client/images/historical-passwords.svg";
+import Glyph10 from "../../../../../client/images/security-questions-and-answers.svg";
+import Glyph11 from "../../../../../client/images/phone-numbers.svg";
+import Glyph12 from "../../../../../client/images/email-addresses.svg";
+import Glyph13 from "../../../../../client/images/dates-of-birth.svg";
+import Glyph14 from "../../../../../client/images/pins.svg";
+import Glyph15 from "../../../../../client/images/physical-addresses.svg";
+import MoreIcon from "../../../../../client/images/more.svg";
+
+const glyphs: Record<string, StaticImageData> = {
+  "social-security-numbers": Glyph1,
+  passwords: Glyph3,
+  "bank-account-numbers": Glyph4,
+  "credit-cards": Glyph5,
+  "credit-card-cvvs": Glyph6,
+  "partial-credit-card-data": Glyph7,
+  "ip-addresses": Glyph8,
+  "historical-passwords": Glyph9,
+  "security-questions-and-answers": Glyph10,
+  "phone-numbers": Glyph11,
+  "email-addresses": Glyph12,
+  "dates-of-birth": Glyph13,
+  pins: Glyph14,
+  "physical-addresses": Glyph15,
+};


Suggested from above comment:

I converted everything to camelCase with a leading glyph. Hopefully this helps?

Suggested change

import Glyph1 from "../../../../../client/images/social-security-numbers.svg";

import Glyph3 from "../../../../../client/images/passwords.svg";

import Glyph4 from "../../../../../client/images/bank-account-numbers.svg";

import Glyph5 from "../../../../../client/images/credit-cards.svg";

import Glyph6 from "../../../../../client/images/credit-card-cvvs.svg";

import Glyph7 from "../../../../../client/images/partial-credit-card-data.svg";

import Glyph8 from "../../../../../client/images/ip-addresses.svg";

import Glyph9 from "../../../../../client/images/historical-passwords.svg";

import Glyph10 from "../../../../../client/images/security-questions-and-answers.svg";

import Glyph11 from "../../../../../client/images/phone-numbers.svg";

import Glyph12 from "../../../../../client/images/email-addresses.svg";

import Glyph13 from "../../../../../client/images/dates-of-birth.svg";

import Glyph14 from "../../../../../client/images/pins.svg";

import Glyph15 from "../../../../../client/images/physical-addresses.svg";

import MoreIcon from "../../../../../client/images/more.svg";

const glyphs: Record<string, StaticImageData> = {

"social-security-numbers": Glyph1,

passwords: Glyph3,

"bank-account-numbers": Glyph4,

"credit-cards": Glyph5,

"credit-card-cvvs": Glyph6,

"partial-credit-card-data": Glyph7,

"ip-addresses": Glyph8,

"historical-passwords": Glyph9,

"security-questions-and-answers": Glyph10,

"phone-numbers": Glyph11,

"email-addresses": Glyph12,

"dates-of-birth": Glyph13,

pins: Glyph14,

"physical-addresses": Glyph15,

};

import glyphSocialSecurityNumbers from "../../../../../client/images/social-security-numbers.svg";

import glyphPasswords from "../../../../../client/images/passwords.svg";

import glyphBankAccountNumbers from "../../../../../client/images/bank-account-numbers.svg";

import glyphCreditCards from "../../../../../client/images/credit-cards.svg";

import glyphCreditCardCvvs from "../../../../../client/images/credit-card-cvvs.svg";

import glyphPartialCreditCardData from "../../../../../client/images/partial-credit-card-data.svg";

import glyphIpAddresses from "../../../../../client/images/ip-addresses.svg";

import glyphHistoricalPasswords from "../../../../../client/images/historical-passwords.svg";

import glyphSecurityQuestionsAndAnswers from "../../../../../client/images/security-questions-and-answers.svg";

import glyphPhoneNumbers from "../../../../../client/images/phone-numbers.svg";

import glyphEmailAddresses from "../../../../../client/images/email-addresses.svg";

import glyphDatesOfBirth from "../../../../../client/images/dates-of-birth.svg";

import glyphPins from "../../../../../client/images/pins.svg";

import glyphPhysicalAddresses from "../../../../../client/images/physical-addresses.svg";

import MoreIcon from "../../../../../client/images/more.svg";

const glyphs: Record<string, StaticImageData> = {

"social-security-numbers": glyphSocialSecurityNumbers,

passwords: glyphPasswords,

"bank-account-numbers": glyphBankAccountNumbers,

"credit-cards": glyphCreditCards,

"credit-card-cvvs": glyphCreditCardCvvs,

"partial-credit-card-data": glyphPartialCreditCardData,

"ip-addresses": glyphIpAddresses,

"historical-passwords": glyphHistoricalPasswords,

"security-questions-and-answers": glyphSecurityQuestionsAndAnswers,

"phone-numbers": glyphPhoneNumbers,

"email-addresses": glyphEmailAddresses,

"dates-of-birth": glyphDatesOfBirth,

pins: glyphPins,

"physical-addresses": glyphPhysicalAddresses

};

nit: re: @maxxcrawford's comment/suggestion above, change from "MoreIcon" to "glyphMore" for consistency?

-import MoreIcon from "../../../../../client/images/more.svg"; +import glyphMore from "../../../../../client/images/more.svg";

Aaargh, of course I only saw this after having done the rename myself 🤦

Although I'm OK with camelCase instead of PasacalCase: ebd583e. Also, I just realised I don't even really know what "glyph" means.

maxxcrawford · 2023-05-18T14:47:23Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+            <BreachLogo breach={breach} logos={breachLogos} />
+            {breach.Title}
+          </h1>
+          {getBreachCategory(breach) === "website-breach" ? (


@Vinnl To confirm your intent, it would only return one of three possible values?

"data-aggregator-breach" | "website-breach" | "sensitive-breach"

maxxcrawford · 2023-05-18T14:49:30Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+          <a
+            href="#what-is-this-breach"
+            className="breach-detail-meta-more-info"
+          >
+            {l10n.getString(getBreachCategory(breach))}
+          </a>


@Vinnl Suggestion: We may want to document how we're using (not using?) <Link> for the porting pages task.

maxxcrawford · 2023-05-18T14:53:09Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+        </div>
+      </div>
+
+      {/* Sign Up Banner */}


nit/random question: Do we want to use a different style of comments here?

Suggested change

{/* Sign Up Banner */}

{

// Sign Up Banner

}

I don't have a strong preference, just went with this style because that's what VSCode gives you if you press Ctrl+/ :) Switched in 18f213a

maxxcrawford · 2023-05-18T14:55:56Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+      "Exactis",
+      "Apollo",
+      "YouveBeenScraped",
+      "ElasticsearchSalesLeads",
+      "Estonia",
+      "MasterDeeds",
+      "PDL",


nit/suggestion: Move this to a variable for legibility. Right now, it's a loose array of breach names where the context is only inferred by the if statement logic.

const dataAggregatorBreach = ["Exactis", "Apollo", "YouveBeenScraped", "ElasticsearchSalesLeads", "Estonia", "MasterDeeds", "PDL"]

Good suggestion: 1b3818c

maxxcrawford · 2023-05-18T14:56:57Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+    priority: [] as any[],
+    lowerPriority: [] as any[],
+  };
+
+  const dataClasses: any[] = breach.DataClasses;


@Vinnl Good reminder. I'll get that merged in without checking anything, for future usage.

maxxcrawford · 2023-05-18T14:58:52Z

src/app/(nextjs_migration)/(guest)/breach-details/[breachName]/page.tsx

+        <dt>{l10n.getString(r.recommendationCopy.subhead)}</dt>
+        <dd>
+          <p>{l10n.getString(r.recommendationCopy.body)}</p>
+          {r.recommendationCopy.cta ? (
+            <a
+              href={r.ctaHref}
+              target={r.ctaShouldOpenInNewTab ? "_blank" : "_self"}
+            >
+              {l10n.getString(r.recommendationCopy.cta)}
+            </a>
+          ) : null}
+        </dd>


nit/question: Should there be an encapsulating <dl> for these?

There absolutely should be. And there was, but it's hard to find with all the indirection going on; I moved it closer in ea5d8dc.

Vinnl added the Review: S Code review time: 30 mins to 1 hour label May 17, 2023

Vinnl requested review from maxxcrawford, codemist and flozia May 17, 2023 11:22

Vinnl self-assigned this May 17, 2023

flozia approved these changes May 17, 2023

View reviewed changes

pdehaan reviewed May 17, 2023

View reviewed changes

maxxcrawford mentioned this pull request May 18, 2023

Prettier Formatting / Cleanup All TS/JS files #3055

Closed

maxxcrawford approved these changes May 18, 2023

View reviewed changes

Port breach-detail page to Next.js

2c4e58f

Vinnl force-pushed the MNTOR-1637-port-breach-detail branch from ea5d8dc to 2c4e58f Compare May 23, 2023 11:12

Vinnl merged commit a8557aa into nextjs May 23, 2023

Vinnl deleted the MNTOR-1637-port-breach-detail branch May 23, 2023 11:12

		import Glyph1 from "../../../../../client/images/social-security-numbers.svg";
		import Glyph3 from "../../../../../client/images/passwords.svg";

Port breach-detail page to Next.js #3049

Port breach-detail page to Next.js #3049

Conversation

Vinnl commented May 17, 2023

References:

flozia left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vinnl May 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pdehaan May 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pdehaan commented May 17, 2023

pdehaan commented May 17, 2023 • edited Loading

maxxcrawford left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vinnl May 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vinnl May 17, 2023 •

edited

Loading

pdehaan May 18, 2023 •

edited

Loading

pdehaan commented May 17, 2023 •

edited

Loading

Vinnl May 19, 2023 •

edited

Loading