fix: Pass program to createSketch

Thumbnail is an int in JSON, not a string
uclaacm · Apr 24, 2024 · 246ae19 · 246ae19
1 parent 7790db1
commit 246ae19
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 32 deletions.
diff --git a/...Sketches/components/CreateSketchModal.jsx → ...Sketches/components/CreateSketchModal.tsx b/...Sketches/components/CreateSketchModal.jsx → ...Sketches/components/CreateSketchModal.tsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
 import ReactModal from 'react-modal';
 import { Navigate } from 'react-router-dom';
-import {
-  Button, Container, Row, Col, FormGroup, Label, Input,
-} from 'reactstrap';
+import { Button, Container, Row, Col, FormGroup, Label, Input } from 'reactstrap';
 import { ThumbnailArray } from '../../../constants';
 import * as fetch from '../../../lib/fetch';
 import DropdownButton from '../../common/DropdownButton';
@@ -12,15 +10,13 @@ import { LanguageDropdownValues, LanguageDropdownDefault } from '../constants';
 import '../../../styles/SketchesModal.scss';
 
 const CreateSketchModal = (props) => {
-  const {
-    onClose, uid, isOpen, addProgram, setMostRecentProgram, wid,
-  } = props;
+  const { onClose, uid, isOpen, addProgram, setMostRecentProgram, wid } = props;
   const toggleProps = { className: '', color: 'primary', size: 'lg' };
 
   const [language, setLanguage] = useState(LanguageDropdownDefault);
   const [name, setName] = useState('');
   const [next, setNext] = useState(false);
-  const [thumbnail, setThumbnail] = useState(-1);
+  const [thumbnailIdx, setThumbnailIdx] = useState(-1);
   const [disableSubmit, setDisableSubmit] = useState(false);
   const [error, setError] = useState('');
   const [redirect, setRedirect] = useState(false);
@@ -33,7 +29,7 @@ const CreateSketchModal = (props) => {
     setNext(false);
     setLanguage(LanguageDropdownDefault);
     setName('');
-    setThumbnail(-1);
+    setThumbnailIdx(-1);
     setError('');
     setDisableSubmit(false);
   };
@@ -47,12 +43,7 @@ const CreateSketchModal = (props) => {
   const onBack = () => setNextHelper(false);
 
   const isBadThumbnailInput = () => {
-    if (
-      thumbnail === undefined
-      || thumbnail === ''
-      || thumbnail >= ThumbnailArray.length
-      || thumbnail < 0
-    ) {
+    if (thumbnailIdx === undefined || thumbnailIdx >= ThumbnailArray.length || thumbnailIdx < 0) {
       // setError('Please select a thumbnail')
       return true;
     }
@@ -85,8 +76,8 @@ const CreateSketchModal = (props) => {
 
     for (let i = 0; i < LanguageDropdownValues.length; i++) {
       if (
-        language.display === LanguageDropdownValues[i].display
-        && language.value === LanguageDropdownValues[i].value
+        language.display === LanguageDropdownValues[i].display &&
+        language.value === LanguageDropdownValues[i].value
       ) {
         return false;
       }
@@ -109,18 +100,17 @@ const CreateSketchModal = (props) => {
 
     if (isBadThumbnailInput()) return;
 
-    const data = {
+    const p: fetch.Program = {
       uid,
-      thumbnail,
+      thumbnail: thumbnailIdx,
       language: language.value,
       name,
       code: '',
-      wid,
     };
 
     try {
       fetch
-        .createSketch(data)
+        .createSketch({ uid, wid, program: p })
         .then((res) => {
           if (!res.ok) throw new Error(`Failed to create user! Got status ${res.status}`);
           return res.json();
@@ -150,24 +140,25 @@ const CreateSketchModal = (props) => {
         type="input"
         className="sketches-gallery-item"
         key={val}
-        onClick={() => setThumbnail(index)}
-        onKeyPress={() => setThumbnail(index)}
+        onClick={() => setThumbnailIdx(index)}
+        onKeyPress={() => setThumbnailIdx(index)}
       >
         <img
           src={`/img/sketch-thumbnails/${val}.svg`}
-          className={`sketches-gallery-img${thumbnail === index ? '-selected' : ''}`}
+          className={`sketches-gallery-img${thumbnailIdx === index ? '-selected' : ''}`}
           alt="icon"
         />
       </figure>
     ));
 
-    const thumbnailPreview = thumbnail !== -1 ? (
-      <img
-        src={`/img/sketch-thumbnails/${ThumbnailArray[thumbnail]}.svg`}
-        className="sketches-modal-header-thumbnail"
-        alt="icon"
-      />
-    ) : null;
+    const thumbnailPreview =
+      thumbnailIdx !== -1 ? (
+        <img
+          src={`/img/sketch-thumbnails/${ThumbnailArray[thumbnailIdx]}.svg`}
+          className="sketches-modal-header-thumbnail"
+          alt="icon"
+        />
+      ) : null;
     return (
       <ImageSelector
         isOpen={isOpen}

diff --git a/src/lib/fetch.ts b/src/lib/fetch.ts
@@ -112,9 +112,9 @@ export const updateUserData = (uid: string = '', userData: object) => {
  * @param {Object} data required data to create program - might eventually become enumerated
  */
 
-interface Program {
+export interface Program {
   uid: string;
-  thumbnail: string;
+  thumbnail: number;
   language: string;
   name: string;
   code: string;