Migrated ActionCard.js to TS

[hursittarcan]

Description

• Migrated ActionCard component to TypeScript.

Related Issue

• Related to [Epic: TypeScript rollout #6392]

[gatsby-cloud]

Gatsby Cloud Build Report

🚩 Your build failed. See the build logs here

Errors

"gatsby-transformer-json" threw an error while running the onCreateNode lifecycle:

Unable to parse JSON: file /usr/src/app/www/src/data/externalTutorials.json

  80 |   } catch {
  81 |     const hint = node.absolutePath ? `file ${node.absolutePath}` : `in node ${node.id}`;
> 82 |     throw new Error(`Unable to parse JSON: ${hint}`);
     |           ^
  83 |   }
  84 |
  85 |   if (_.isArray(parsedContent)) {

[pettinarip]

Awesome @hursittarcan thanks for the PR!

Please, check the comment I made.

Also, when I ran yarn type-check I found an error with the <ImageWrapper> component used here. To fix it, you will need to declare the extra props that we are using in this case.

// on line #20
const ImageWrapper = styled.div<{
  isRight: boolean | undefined
  isBottom: boolean | undefined
}>`

After doing that, run again yarn type-check to make sure that everything is good.

[pettinarip]

You made everything optional but there are some props that we do want to make them as required.
How about this?

export interface IProps {
  to: string
  alt?: string
  image: string
  title: string
  description: string
  className?: string
  isRight?: boolean
  isBottom?: boolean
}

[pettinarip]

Looking great! I noticed a misalignment in the format. Can you fix that?

The format should be covered by prettier. Try to do the next:

1. Make a small format change manually in the file
2. Make a new commit
3. prettier should format it automatically when you make a new commit

[hursittarcan]

Hey @pettinarip,
I believe the formatting is fixed now. I think the extra spaces were because of my IDE.

[pettinarip]

💪🏼

[pettinarip]

@all-contributors please add @hursittarcan for code

[allcontributors]

@pettinarip

I've put up a pull request to add @hursittarcan! 🎉