From a922d836276b0375dbe8d06ff0ece13ad431ba4e Mon Sep 17 00:00:00 2001
From: paulrpg <mullenpaul90@gmail.com>
Date: Sun, 21 Jan 2024 18:07:32 +0000
Subject: [PATCH] fix tech memories data tab

---
 .../{TechMemories.jsx => TechMemories.tsx}    | 46 +++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)
 rename tgui/packages/tgui/interfaces/{TechMemories.jsx => TechMemories.tsx} (78%)

diff --git a/tgui/packages/tgui/interfaces/TechMemories.jsx b/tgui/packages/tgui/interfaces/TechMemories.tsx
similarity index 78%
rename from tgui/packages/tgui/interfaces/TechMemories.jsx
rename to tgui/packages/tgui/interfaces/TechMemories.tsx
index 74cfe2581971..09d536936d5e 100644
--- a/tgui/packages/tgui/interfaces/TechMemories.jsx
+++ b/tgui/packages/tgui/interfaces/TechMemories.tsx
@@ -1,11 +1,41 @@
 import { useBackend, useLocalState } from '../backend';
-import { Button, Flex, Section, Box, Tabs, Fragment, LabeledList } from '../components';
+import { Button, Flex, Section, Box, Tabs, LabeledList } from '../components';
 import { Window } from '../layouts';
 
-export const TechMemories = (props) => {
-  const { act, data } = useBackend();
-  const [clueCategory, setClueCategory] = useLocalState('clueCategory', 0);
+type Clue = {
+  text: string;
+  itemID: string;
+  location: string;
+  color?: string;
+  color_name?: string;
+  key?: string;
+  key_text?: string;
+};
 
+type ClueCategory = {
+  name: string;
+  icon: string;
+  clues: Array<Clue>;
+};
+
+type ObjectiveData = {
+  label: string;
+  content_credits: string;
+  content: string;
+  content_color: string;
+};
+
+type TechProps = {
+  clue_categories: Array<ClueCategory>;
+  tech_points: number;
+  total_tech_points: number;
+  objectives: Array<ObjectiveData>;
+  theme: string;
+};
+
+export const TechMemories = () => {
+  const { config, data } = useBackend<TechProps>();
+  const [clueCategory, setClueCategory] = useLocalState('clueCategory', 0);
   const { tech_points, theme, clue_categories } = data;
 
   return (
@@ -42,7 +72,7 @@ export const TechMemories = (props) => {
   );
 };
 
-const CluesAdvanced = (props) => {
+const CluesAdvanced = (props: { readonly clues: Array<Clue> }) => {
   const { clues } = props;
 
   return (
@@ -69,12 +99,12 @@ const CluesAdvanced = (props) => {
                   </Box>
                 )}
                 {!!clue.key && (
-                  <Fragment>
+                  <>
                     {clue.key_text}
                     <Box inline bold>
                       {clue.key}
                     </Box>
-                  </Fragment>
+                  </>
                 )}
               </Flex.Item>
               <Flex.Item>{clue.location}</Flex.Item>
@@ -87,7 +117,7 @@ const CluesAdvanced = (props) => {
 };
 
 const Objectives = (props) => {
-  const { data } = useBackend();
+  const { data } = useBackend<TechProps>();
 
   return (
     <Section