modal setup

src/components/Transfer.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { ChangeEvent, useContext, useEffect, useState } from 'react';
 import Modal from '@material-ui/core/Modal';
 import Fade from '@material-ui/core/Fade';
-import Input from '@material-ui/core/Input';
 import { makeStyles } from '@material-ui/core/styles';
 import styled from 'styled-components';
+import { FormControl, MenuItem, Select, useControlled, useEventCallback } from '@material-ui/core';
+import { axiosInstance } from '../utils/axiosInstance';
+import { Group } from '../types';
+import { coursesContext } from '../contexts/CoursesProvider';
+import { Dropdown } from './Dropdown';
+import { DropdownModal } from './DropdownModal';
 
 interface TransferProps {
   handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -19,6 +24,20 @@ const useStyles = makeStyles({
   },
 });
 
+const Input = styled.input`
+  font-family: 'Roboto', sans-serif;
+  font-size: 18px;
+  background-color: #f1f2f5;
+  height: 40px;
+  max-height: 40px;
+  width: 100%;
+  border: none;
+  margin-left: 5px;
+  &:focus {
+    outline: none;
+  }
+`;
+
 const TransferStyled = styled.div`
   display: flex;
   flex-direction: row;
@@ -66,8 +85,66 @@ const TransferInputStyled = styled.div`
   }
 `;
 
+const deleteExchange = async (id: number) => {
+  try {
+    const response = await axiosInstance.delete(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/${id}`);
+    console.log('delete exchange response: ', response);
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+const createExchange = async (groupsIds: Array<number>) => {
+  console.log('groups ids are: ', groupsIds);
+  try {
+    const response = await axiosInstance.post(
+      `${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange`,
+      JSON.stringify(groupsIds),
+    );
+    console.log('create exchange response is: ', response);
+  } catch (e) {
+    console.log(e);
+  }
+};
+
 export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
+  const { selectGroups } = useContext(coursesContext)!;
   const classes = useStyles();
+  const groups = selectGroups();
+  const [input, setInput] = useState('');
+  const [open, setOpen] = useState(false);
+
+  const [assignmentsGroups, setAssignmentsGroups] = useState<Array<any>>([]);
+  const [selectedAssignmentsGroup, setSelectedAssignmentsGroup] = useState<any>('');
+  const [selectedGroup, setSelectedGroup] = useState<any>('');
+  const [exchanges, setExchanges] = useState<any>(null);
+  // const allGroups
+  const handleSelectedAssignmentsGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    console.log('it is: ', event.target.value);
+    setSelectedAssignmentsGroup(event.target.value);
+  };
+
+  const handleSelectedGroupChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+    setSelectedGroup(event.target.value as any);
+  };
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => setInput(event.target.value);
+  const handleShowDropdown = () => setOpen(true);
+
+  const handleCloseDropdown = () => setOpen(false);
+  useEffect(() => {
+    const getExchanges = async () => {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/exchanges/exchange/all`);
+      console.log('exchanges: ', data);
+      setExchanges(data);
+    };
+    const getAssignmentsGroups = async () => {
+      const { data } = await axiosInstance.get(`${process.env.REACT_APP_API_URL}/api/v1/commisions/user/assignments`);
+      console.log('assignments: ', data);
+      setAssignmentsGroups(data);
+    };
+    getExchanges();
+    getAssignmentsGroups();
+  }, []);
 
   return (
     <div>
@@ -83,22 +160,60 @@ export const Transfer = ({ handleClose, isOpen }: TransferProps) => {
             <TransferGiveStyled>
               <TransferTextStyled>Oddam</TransferTextStyled>
               <TransferInputStyled>
-                {' '}
-                <Input
-                  placeholder="Wyszukaj..."
-                  inputProps={{ 'aria-label': 'description' }}
-                  className="top-bar__input-field"
-                />
+                <FormControl>
+                  <Select
+                    labelId="demo-simple-select-label"
+                    id="assignments-groups"
+                    value={selectedAssignmentsGroup}
+                    onChange={handleSelectedAssignmentsGroupChange}
+                    placeholder="Wyszukaj..."
+                    style={{ width: '200px' }}
+                  >
+                    {assignmentsGroups.map((el) => {
+                      return (
+                        <MenuItem key={el.id} value={el}>
+                          {el.name}
+                        </MenuItem>
+                      );
+                    })}
+                  </Select>
+                </FormControl>
               </TransferInputStyled>
             </TransferGiveStyled>
             <TransferReceiveStyled>
               <TransferTextStyled>Przyjmę</TransferTextStyled>
               <TransferInputStyled>
-                {' '}
-                <Input
+                {/* <Select
+                  multiple
+                  labelId="demo-simple-select-label"
+                  id="assignments-groups"
+                  value={selectedGroups}
+                  onChange={handleSelectedGroupsChange}
                   placeholder="Wyszukaj..."
-                  inputProps={{ 'aria-label': 'description' }}
-                  className="top-bar__input-field"
+                  style={{ width: '200px' }}
+                >
+                  {assignmentsGroups.map((el) => {
+                    return (
+                      <MenuItem key={el.id} value={el}>
+                        {el.name}
+                      </MenuItem>
+                    );
+                  })}
+                </Select> */}
+                <Input
+                  placeholder={`Wyszukaj przedmioty...`}
+                  onChange={handleChange}
+                  value={input}
+                  onFocus={() => {
+                    handleShowDropdown();
+                  }}
+                />
+                <DropdownModal
+                  handleSelectedGroupChange={handleSelectedGroupChange}
+                  open={open}
+                  input={input}
+                  handleCloseDropdown={handleCloseDropdown}
+                  selectedOption={'przedmioty'}
                 />
               </TransferInputStyled>
             </TransferReceiveStyled>