merge final changes to main

backend/core/classroom/serializers.py

@@ -27,4 +27,4 @@ class Meta:
 
 class ClassroomStudentsSerializer(serializers.Serializer):
     classroom = serializers.IntegerField()
-    students = UserBriefSerializer(many=True)
+    students = UserBriefSerializer(many=True)

frontend-37/src/features/classroom/ClassroomItem.module.css

@@ -27,3 +27,13 @@
   padding: 0;
   margin-right: 7px;
 }
+
+.icon {
+  color: #c1c1c1;
+  transition: 0.2s;
+}
+
+.icon:hover {
+  cursor: pointer;
+  color: #a9a9ff;
+}

frontend-37/src/features/classroom/ClassroomItem.tsx

@@ -1,4 +1,3 @@
-import chooseClassroomImg from "@/assets/chooseClassroom.svg";
 import styles from "./ClassroomItem.module.css";
 import { Classroom } from "./types";
 
@@ -13,7 +12,24 @@ export function ClassroomItem({ classroom, onClick }: ClassroomItemProps) {
       <div className={styles.itemCol}>{classroom.title}</div>
       <div className={styles.itemCol}>{classroom.teacher.email}</div>
       <button className={styles.chooseButton}>
-        <img style={{ width: 25, height: 25 }} src={chooseClassroomImg} />
+        <svg
+          width="25"
+          height="25"
+          viewBox="0 0 25 25"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={styles.icon}
+        >
+          <path
+            d="M14.5 12.75L15.2071 12.0429L15.9142 12.75L15.2071 13.4571L14.5 12.75ZM4.5 13.75C3.94771 13.75 3.5 13.3023 3.5 12.75C3.5 12.1977 3.94771 11.75 4.5 11.75V13.75ZM8.5 6.75L9.20711 6.04289L15.2071 12.0429L14.5 12.75L13.7929 13.4571L7.79289 7.45711L8.5 6.75ZM14.5 12.75L15.2071 13.4571L9.20711 19.4571L8.5 18.75L7.79289 18.0429L13.7929 12.0429L14.5 12.75ZM14.5 12.75V13.75H4.5V12.75V11.75H14.5V12.75Z"
+            fill="currentColor"
+          />
+          <path
+            d="M20.5 5.75L20.5 19.75"
+            stroke="currentColor"
+            stroke-width="2"
+          />
+        </svg>
       </button>
     </div>
   );

frontend-37/src/features/classroom/ClassroomList.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@/shared/ui/Button";
 import { api } from "@/shared/utils/api";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
@@ -28,7 +27,6 @@
       try {
         const json = await api<ClassroomListResponse>({ path: "classroom/" });
         setClassrooms(json.classrooms);
-        console.log(json, "classroom list json");
       } catch {
         toast.error("Please log in first.");
         onClose();
@@ -36,7 +34,7 @@
     };
 
     run();
   }, []);
 
   const onClick = (classroom: Classroom) => {
     navigate(`/classroom/${classroom.id}`);

frontend-37/src/features/classroom/CreateClassroom.module.css

@@ -3,7 +3,7 @@
   border: 1px solid rgba(193, 193, 193, 1);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
   width: 416px;
-  height: 350px;
+  height: 370px;
   border-radius: 5px;
 }
 
@@ -61,8 +61,55 @@ textarea::placeholder {
   cursor: pointer;
 }
 
-.capacity::inner-spin-button,
-.capacity::outer-spin-button {
-  appearance: none;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
   margin: 0;
 }
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.capacityMegaWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.capacityWrapper {
+  background-color: #f1f1f1;
+  border: 1px solid #c1c1c1;
+  border-radius: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  width: 190px;
+  height: 40px;
+}
+
+.capacity {
+  padding: 10px 15px;
+  width: 80px;
+  font-size: 16px;
+  color: #666666;
+  border: none;
+}
+
+.incBtn {
+  color: #666666;
+  border: none;
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  border-left: 1px solid #c1c1c1;
+}
+
+.capacity:focus {
+  outline: none;
+}
+
+.capacityLabel {
+  margin: auto;
+  font-size: 16px;
+  color: #c1c1c1;
+}

frontend-37/src/features/classroom/CreateClassroom.tsx

@@ -1,5 +1,4 @@
 import crossImg from "@/assets/cross.svg";
-import { Button } from "@/shared/ui/Button";
 import { api } from "@/shared/utils/api";
 import { useState } from "react";
 import { useNavigate } from "react-router";
@@ -13,7 +12,7 @@ interface CreateClassroomProps {
 export function CreateClassroom({ onClose }: CreateClassroomProps) {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
-  const [capacity, setCapacity] = useState(10);
+  const [capacity, setCapacity] = useState(40);
   const navigate = useNavigate();
 
   const onClick = async () => {
@@ -54,12 +53,29 @@ export function CreateClassroom({ onClose }: CreateClassroomProps) {
           placeholder="Description"
           required
         />
-        <input
-          value={capacity}
-          onChange={(e) => setCapacity(+e.target.value)}
-          type="number"
-          className={styles.capacity}
-        />
+        <div className={styles.capacityMegaWrapper}>
+          <div className={styles.capacityWrapper}>
+            <input
+              value={capacity}
+              onChange={(e) => setCapacity(+e.target.value)}
+              type="number"
+              className={styles.capacity}
+            />
+            <button
+              className={styles.incBtn}
+              onClick={() => setCapacity((prev) => prev + 1)}
+            >
+              +
+            </button>
+            <button
+              className={styles.incBtn}
+              onClick={() => setCapacity((prev) => prev - 1)}
+            >
+              -
+            </button>
+          </div>
+          <div className={styles.capacityLabel}>Number of students</div>
+        </div>
         <button className={styles.createButton} onClick={onClick}>
           Create
         </button>

frontend-37/src/features/main/Login.tsx

@@ -38,7 +38,6 @@ export function Login({ onClose, onSwitch }: LoginProps) {
     } else {
       toast.error(Object.values(json)[0]);
     }
-    console.log(json, "login json");
   };
 
   return (

frontend-37/src/features/main/Register.tsx

@@ -44,8 +44,6 @@ export function Register({ onClose, onSwitch }: RegisterProps) {
     } else {
       toast.error(Object.values(json)[0]);
     }
-
-    console.log(json, "register json");
   };
 
   return (

frontend-37/src/features/main/index.tsx

@@ -28,28 +28,20 @@ export function Main() {
   useEffect(() => {
     const run = async () => {
       if (!localStorage.getItem("session_id")) {
-        console.log("no session_id");
-
         const { session_id } = await api<SessionResponse>({
           path: "session/",
           useSession: false,
           useJwt: false,
         });
 
         localStorage.setItem("session_id", session_id);
-        console.log("new session_id:", session_id);
       } else {
-        console.log("session_id already present");
-        console.log("session_id:", localStorage.getItem("session_id"));
-
         const { valid } = await api<ValidResponse>({
           path: "session/valid/",
           useJwt: false,
         });
 
-        console.log("session_id is valid?", valid);
         if (!valid) {
-          console.log("invalid session_id, regenerating");
           localStorage.removeItem("session_id");
           await run();
         }

frontend-37/src/features/playground/TopBar.tsx

@@ -1,4 +1,3 @@
-import saveImg from "@/assets/save.svg";
 import uploadImg from "@/assets/upload.svg";
 import { templateStore } from "@/shared/store/templateStore";
 import { Button } from "@/shared/ui/Button";

frontend-37/src/features/playground/index.tsx

@@ -40,23 +40,20 @@
     const run = async () => {
       setLoading(true);
       const schema = await api<SchemaResponse>({ path: "db/schema/" });
-      console.log(schema, "schema json");
       updateSchemas(schema.tables);
 
       const sessionInfo = await api<SessionResponse>({ path: "session/info/" });
-      console.log(sessionInfo, "session info");
 
       const template = await api<Template>({
         path: `template/${sessionInfo.template}`,
       });
-      console.log(template, "template info");
 
       updateTemplate(template.name);
       setTemplateType(template.type);
       setLoading(false);
     };
     run();
   }, [template]);
 
   if (loading) return;
 
@@ -151,7 +148,7 @@
 
       <ModalWindow isOpen={showUpload} setIsOpen={setShowUpload}>
         <Upload
-          onUpload={(data) => {
+          onUpload={() => {
             setShowUpload(false);
           }}
           setShow={setShowUpload}

frontend-37/src/features/playground/query-input/index.tsx

@@ -35,10 +35,6 @@ export function QueryInput({ templateType }: QueryInputProps) {
   const [selected, setSelected] = useState("");
   const [numberColumnValues, changeNumberColumnValues] = useState(["1"]);
 
-  useEffect(() => {
-    console.log(query);
-  }, [query]);
-
   const { updateError, updateResults } = queryResultsStore();
   const { updateSchemas } = schemasStore();
   const { template } = templateStore();
@@ -77,10 +73,8 @@ export function QueryInput({ templateType }: QueryInputProps) {
     });
 
     if (json.results) {
-      console.log("succesful, results:", json.results);
       updateResults(json.results);
     } else {
-      console.log("unsuccessful, error:", json["detail"]);
       updateError(json.detail!);
     }
 
@@ -198,12 +192,23 @@ export function QueryInput({ templateType }: QueryInputProps) {
               shiftDown.current = false;
             }
           }}
-          placeholder="WHITE YOUR QUERY HERE"
+          placeholder="Type your query here"
           ref={textareaRef}
         ></textarea>
       </div>
       <div className={styles.buttonsWrapper}>
-        <HelpButton handleClick={() => {}} />
+        <HelpButton
+          handleClick={() => {
+            if (templateType == "MGDB") {
+              window.open(
+                "https://www.mongodb.com/docs/mongodb-shell/reference/methods/",
+                "_blank"
+              );
+            } else {
+              window.open("https://www.postgresql.org/docs/current/", "_blank");
+            }
+          }}
+        />
         <RunButton handleClick={onRunClicked} />
       </div>
     </div>

frontend-37/src/features/template-choice/index.tsx

@@ -28,11 +28,9 @@ export function TemplateChoice({
   const { updateSchemas } = schemasStore();
 
   useEffect(() => {
-    console.log("fetching templates from server...");
     const run = async () => {
       const json = await api<Template[]>({ path: "template/" });
       setTemplates(json);
-      console.log(json, "templates json");
     };
 
     run();

frontend-37/src/shared/utils/api.ts

@@ -59,19 +59,14 @@ export async function api<T>({
     options.body = useJson ? JSON.stringify(body) : body;
   }
 
-  console.log(`New API request to ${API_URL}/${path}, options:`);
-  console.log(options);
-
   const res = await fetch(`${API_URL}/${path}`, options);
 
   if (res.status === 401) {
     if (!access_token) {
       throw new Error("Unauthorized.");
     }
-    console.log("API request got 401 response, generating new tokens");
     const ok = await refreshTokens();
     if (ok) {
-      console.log("Regenerated tokens successfully, trying again");
       return api({ path, method, body, useSession, useJwt });
     } else {
       throw new Error("Authentication failed: could not refresh token.");
@@ -83,6 +78,5 @@ export async function api<T>({
     return JSON.parse(err) as T;
   }
 
-  console.log("API request successful.");
   return res.json() as T;
 }