From c4532e364257bd96484670a562550f326a1b9667 Mon Sep 17 00:00:00 2001
From: Niek Palm <niek.palm@philips.com>
Date: Tue, 10 Sep 2024 15:59:23 +0200
Subject: [PATCH] docs: part 3 and cleanup

---
 docs/appendix/part-3-code.md | 59 ++++++++++++++++++++++++++++++++++++
 docs/clean-up.md             | 31 +++++++++++++++++++
 docs/part-1.md               |  2 ++
 docs/part-3.md               |  4 ++-
 mkdocs.yml                   |  2 ++
 5 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 docs/appendix/part-3-code.md
 create mode 100644 docs/clean-up.md

diff --git a/docs/appendix/part-3-code.md b/docs/appendix/part-3-code.md
new file mode 100644
index 0000000..9c6c7b6
--- /dev/null
+++ b/docs/appendix/part-3-code.md
@@ -0,0 +1,59 @@
+# Part 3: Code - React Cat Preview Field Extension
+
+Below is the code for the React component that we will be creating in this exercise. This component will display a random cat picture from the Cat API.
+
+```typescript
+import React, { useEffect, useState } from 'react';
+import { FieldExtensionComponentProps } from '@backstage/plugin-scaffolder-react';
+import FormControl from '@material-ui/core/FormControl';
+import { Button, FormHelperText, FormLabel } from '@material-ui/core';
+
+export interface CatResult {
+  id: string;
+  url: string;
+  width: number;
+  height: number;
+}
+
+/*
+ This is the actual component that will get rendered in the form
+*/
+export const RandomCatPixExtension = ({
+  onChange,
+  rawErrors,
+  required,
+  formData,
+}: FieldExtensionComponentProps<string>) => {
+  const [catPic, setCatPic] = useState('');
+
+  const refreshPic = async () => {
+    const catResult = await fetch('https://api.thecatapi.com/v1/images/search');
+    const catData: Record<string, CatResult> = await catResult.json();
+    setCatPic(catData[0].url);
+    onChange(catData[0].url);
+  };
+
+  useEffect(() => {
+    refreshPic();
+  }, []);
+
+  return (
+    <FormControl
+      margin="normal"
+      required={required}
+      error={rawErrors?.length > 0 && !formData}
+    >
+      <FormLabel>Random Cat Picture</FormLabel>
+      <Button variant="contained" color="primary" onClick={() => refreshPic()}>
+        Refresh 😻
+      </Button>
+
+      <img src={catPic} alt="Random Cat" width={'500px'} />
+
+      <FormHelperText id="entityName">
+        Giving you a random cat picture, all day, every day.
+      </FormHelperText>
+    </FormControl>
+  );
+};
+```
\ No newline at end of file
diff --git a/docs/clean-up.md b/docs/clean-up.md
new file mode 100644
index 0000000..7cd93c4
--- /dev/null
+++ b/docs/clean-up.md
@@ -0,0 +1,31 @@
+# Clean up
+
+??? Info "Pro tip"
+
+    You can delete via the `gh cli` as well. Run the following command to delete the repository:
+
+    ```bash
+    gh repo delete <repo-name> --confirm
+    ```
+
+    The same you can do with the Codespaces. Run the following command to delete the Codespace:
+
+    ```bash
+    gh codespace list
+    gh codespace delete -c <codespace-id>
+    ```
+
+    Be-careful with the `gh cli` as it can delete things without asking for confirmation.
+
+## Codespaces
+
+During the workshop we used GitHub Codespaces. The Codespace will be automatically stopped after 30 minutes of inactivity. But now the workshop is over, you can delete the Codespace to avoid any burning down your free tier or generate costs depending on your payment plan.
+
+Go to the [Codespace overview page](https://github.com/codespaces) and delete the Codespace created for this workshops.
+
+## Repositories
+
+During the workshops you have created several repositories. You can delete the repositories now safely as they are not needed anymore.
+
+Go to the the your user page, select the repositories tab. Next select the repository you want to delete and go to the settings. Scroll down to the danger zone and delete the repository.
+
diff --git a/docs/part-1.md b/docs/part-1.md
index 2afab7a..562757e 100644
--- a/docs/part-1.md
+++ b/docs/part-1.md
@@ -123,6 +123,8 @@ in GitHub for you. Use for "owner" your GitHub handle and choose a name for the
 
 ![Cat scanner repo](./assets/part_1_cat_scanner_repo.png)
 
+After this point we do not need the newly created repository anymore, so you can delete it in GitHub.
+
 ??? Warning "Authentication"
 
     Authentication is needed to enable your backstage to log into GitHub and
diff --git a/docs/part-3.md b/docs/part-3.md
index d364f56..1ed5859 100644
--- a/docs/part-3.md
+++ b/docs/part-3.md
@@ -190,13 +190,15 @@ scaffolder.
     ```
 
 Now we need to export the component from the plugin by modifying the `index.ts`
-in the `RandomCatPix` folder and in the components folder.
+in the `RandomCatPix` folder.
 
 ```typescript
 // plugins/catscanner-react/src/components/RandomCatPix/index.ts
 export { RandomCatPixFieldExtension } from "./extensions";
 ```
 
+Next we do the same in the `components` folder to export the `RandomCatPix`.
+
 ```typescript
 // plugins/catscanner-react/src/components/index.ts
 export * from "./RandomCatPix";
diff --git a/mkdocs.yml b/mkdocs.yml
index 878fccf..6614b25 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -35,8 +35,10 @@ nav:
       - Part 1 - Creating a template: "part-1.md"
       - Part 2 - Creating a new action: "part-2.md"
       - Part 3 - Customize the UI: "part-3.md"
+  - Clean up: "clean-up.md"
   - Appendix:
       - Part 2 - Code: "appendix/part-2-code.md"
+      - Part 3 - Code: "appendix/part-3-code.md"
 markdown_extensions:
   - admonition
   - pymdownx.details