Criando estrutura de modal para criação de consultas

vinniciusgomes · Nov 22, 2020 · a385021 · a385021
1 parent 484290e
commit a385021
Show file tree

Hide file tree

Showing 19 changed files with 468 additions and 146 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.3.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^11.1.2",
     "@testing-library/user-event": "^7.1.2",
@@ -24,7 +25,6 @@
     "react-lottie": "^1.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "react-toastify": "^6.1.0",
     "styled-components": "^5.1.1",
     "typescript": "~3.7.2"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,13 +3,11 @@ import { ThemeProvider } from 'styled-components';
 import { ConfigProvider } from 'antd';
 import ptBR from 'antd/es/locale/pt_BR';
 import 'antd/dist/antd.css';
-import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 import Routes from '@shared/routes';
 import GlobalStyle from '@shared/styles/global';
 import theme from '@shared/styles/Theme';
-import '@shared/styles/toast.css';
 
 import { Container } from '@shared/styles/app.styles';
 import AppProvider from '@shared/hooks';
@@ -21,17 +19,7 @@ const App: React.FC = () => (
         <Container>
           <Routes />
           <GlobalStyle />
-          <ToastContainer
-            position="top-right"
-            autoClose={5000}
-            hideProgressBar={false}
-            newestOnTop={false}
-            closeOnClick
-            rtl={false}
-            pauseOnFocusLoss
-            draggable
-            pauseOnHover
-          />
+
         </Container>
       </ConfigProvider>
     </ThemeProvider>

diff --git a/src/modules/doctor/pages/Dashboard/index.tsx b/src/modules/doctor/pages/Dashboard/index.tsx
@@ -2,8 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { FiArrowRight, FiCode } from 'react-icons/fi';
 import { format } from 'date-fns';
 import { Link } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { Empty, Skeleton } from 'antd';
+import { Empty, message, Skeleton } from 'antd';
 
 import welcomeImage from '@doctor/assets/images/dr-woman.svg';
 import Navbar from '@shared/components/Navbar';
@@ -47,10 +46,10 @@ const Home: React.FC = () => {
       setLoading(false);
 
       if (err.response) {
-        return toast.error(err.response.data.message);
+        return message.error(err.response.data.message);
       }
 
-      return toast.error('Ocorreu um erro interno. Tente novamente mais tarde');
+      return message.error('Ocorreu um erro interno. Tente novamente mais tarde');
     }
   }, [doctor]);
 

diff --git a/src/modules/doctor/pages/Patients/index.tsx b/src/modules/doctor/pages/Patients/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { Empty, Pagination, Skeleton } from 'antd';
+import { Empty, message, Pagination, Skeleton } from 'antd';
 
 import Navbar from '@shared/components/Navbar';
 import PatientItem from '@doctor/components/Patients/PatientItem';
@@ -28,10 +27,10 @@ const Patients: React.FC = () => {
       setLoading(false);
 
       if (err.response) {
-        return toast.error(err.response.data.message);
+        return message.error(err.response.data.message);
       }
 
-      return toast.error('Ocorreu um erro interno. Tente novamente mais tarde');
+      return message.error('Ocorreu um erro interno. Tente novamente mais tarde');
     }
   }, [pageNumber]);
 
@@ -47,10 +46,10 @@ const Patients: React.FC = () => {
     } catch (err) {
       setLoading(false);
       if (err.response) {
-        return toast.error(err.response.data.message);
+        return message.error(err.response.data.message);
       }
 
-      return toast.error('Ocorreu um erro interno. Tente novamente mais tarde');
+      return message.error('Ocorreu um erro interno. Tente novamente mais tarde');
     }
   }, [paginationProperties]);
 

diff --git a/src/modules/secretary/components/Schedule/CreateAppointmentModal/index.tsx b/src/modules/secretary/components/Schedule/CreateAppointmentModal/index.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+import { Container, NameTextField } from './styles';
+
+const CreateAppointmentModal: React.FC = () => {
+  const mockVal = (str: string, repeat: number = 1) => {
+    return {
+      value: str.repeat(repeat),
+    };
+  };
+
+  const [value, setValue] = useState('');
+  const [options, setOptions] = useState<{ value: string }[]>([]);
+  const onSearch = (searchText: string) => {
+    setOptions(
+      !searchText
+        ? []
+        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
+    );
+  };
+  const onSelect = (data: string) => {
+    console.log('onSelect', data);
+  };
+  const onChange = (data: string) => {
+    setValue(data);
+  };
+
+  return (
+    <Container>
+      <NameTextField
+        value={value}
+        options={options}
+        style={{ width: 200 }}
+        onSelect={onSelect}
+        onSearch={onSearch}
+        onChange={onChange}
+        placeholder="control mode"
+      />
+    </Container>
+  );
+};
+
+export default CreateAppointmentModal;
diff --git a/src/modules/secretary/components/Schedule/CreateAppointmentModal/styles.ts b/src/modules/secretary/components/Schedule/CreateAppointmentModal/styles.ts
@@ -0,0 +1,13 @@
+import { AutoComplete } from 'antd';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 40px;
+
+  > .ant-select {
+    width: 100% !important;
+  }
+`;
+
+export const NameTextField = styled(AutoComplete)``;
diff --git a/src/modules/secretary/components/Schedule/DropdownMenu/index.tsx b/src/modules/secretary/components/Schedule/DropdownMenu/index.tsx
@@ -0,0 +1,40 @@
+import { Menu } from 'antd';
+import React from 'react';
+
+// import { Container } from './styles';
+
+const DropdownMenu = () => {
+  return (
+    <Menu>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://www.alipay.com/"
+        >
+          1st menu item
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://www.taobao.com/"
+        >
+          2nd menu item
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="http://www.tmall.com/"
+        >
+          3rd menu item
+        </a>
+      </Menu.Item>
+    </Menu>
+  );
+};
+
+export default DropdownMenu;
diff --git a/src/modules/secretary/components/Schedule/DropdownMenu/styles.ts b/src/modules/secretary/components/Schedule/DropdownMenu/styles.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;
diff --git a/src/modules/secretary/pages/Dashboard/index.tsx b/src/modules/secretary/pages/Dashboard/index.tsx
@@ -2,8 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { FiArrowRight, FiCode } from 'react-icons/fi';
 import { format } from 'date-fns';
 import { Link } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { Empty, Skeleton } from 'antd';
+import { Empty, message, Skeleton } from 'antd';
 
 import welcomeImage from '@secretary/assets/images/secretary.svg';
 import Navbar from '@shared/components/Navbar';
@@ -47,10 +46,10 @@ const Home: React.FC = () => {
       setLoading(false);
 
       if (err.response) {
-        return toast.error(err.response.data.message);
+        return message.error(err.response.data.message);
       }
 
-      return toast.error('Ocorreu um erro interno. Tente novamente mais tarde');
+      return message.error('Ocorreu um erro interno. Tente novamente mais tarde');
     }
   }, [doctor]);
 

diff --git a/src/modules/secretary/pages/Patients/index.tsx b/src/modules/secretary/pages/Patients/index.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { Empty, Pagination, Skeleton } from 'antd';
+import { Empty, message, Pagination, Skeleton } from 'antd';
 
 import Navbar from '@shared/components/Navbar';
 import PatientItem from '@doctor/components/Patients/PatientItem';
@@ -28,10 +27,10 @@ const Patients: React.FC = () => {
       setLoading(false);
 
       if (err.response) {
-        return toast.error(err.response.data.message);
+        return message.error(err.response.data.message);
       }
 
-      return toast.error('Ocorreu um erro interno. Tente novamente mais tarde');
+      return message.error('Ocorreu um erro interno. Tente novamente mais tarde');
     }
   }, [pageNumber]);
 
@@ -47,10 +46,10 @@ const Patients: React.FC = () => {
     } catch (err) {
       setLoading(false);
       if (err.response) {
-        return toast.error(err.response.data.message);
+        return message.error(err.response.data.message);
       }
 
-      return toast.error('Ocorreu um erro interno. Tente novamente mais tarde');
+      return message.error('Ocorreu um erro interno. Tente novamente mais tarde');
     }
   }, [paginationProperties]);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import styled from 'styled-components';

		export const Container = styled.div``;