diff color for clicked btn

david-yz-liu · Apr 2, 2024 · fa86d9c · fa86d9c
1 parent 0335cdf
commit fa86d9c
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/demo/src/MemoryModelsSample.tsx b/demo/src/MemoryModelsSample.tsx
@@ -12,11 +12,15 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
     const [fileContents, setFileContents] = useState<{
         [key: string]: [string, Object];
     }>({});
+    const [clickedBtnIndex, setClickedBtnIndex] = useState<Number>(null);
 
     useEffect(() => {
         const samples = ["automation", "blankspace", "manual", "simple"];
         const tempFileContents = {};
         for (const sample of samples) {
+            //TODO: better way to read plain text of the object json files?
+            // - fs doesn't work. This is client side, not server side, and not node env
+            // - fileReader doesn't work. Not with this set up at least, fileReader needs Blob
             tempFileContents[sample] = [
                 JSON.stringify(
                     require(`./sample/${sample}/${sample}.json`),
@@ -33,10 +37,11 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
     }, []);
 
     const handleButtonClick = (
-        name: string,
+        index: Number,
         content: string,
         config: Object
     ) => {
+        setClickedBtnIndex(index);
         props.setTextData(content);
         props.setConfigData({
             ...props.configData,
@@ -54,11 +59,16 @@ export default function MemoryModelsSample(props: MemoryModelsSamplePropTypes) {
                                 variant="contained"
                                 onClick={() =>
                                     handleButtonClick(
-                                        file[0],
+                                        index,
                                         file[1][0],
                                         file[1][1]
                                     )
                                 }
+                                color={
+                                    index === clickedBtnIndex
+                                        ? "success"
+                                        : "primary"
+                                }
                             >
                                 {file[0]}
                             </Button>