From 0663b2190ce461a8ccc9fd9e26a6bbebbbe943ba Mon Sep 17 00:00:00 2001
From: rlacko <rlacko@sch.bme.hu>
Date: Sat, 29 Aug 2020 14:12:18 +0200
Subject: [PATCH] Profile modal skeleton
---
src/core/components/ProfileButton.tsx | 10 ++--------
src/core/components/ProfileModal.tsx | 24 ++++++++++++++++++++++++
2 files changed, 26 insertions(+), 8 deletions(-)
create mode 100644 src/core/components/ProfileModal.tsx
diff --git a/src/core/components/ProfileButton.tsx b/src/core/components/ProfileButton.tsx
index 7de7a16..65ac9a3 100644
--- a/src/core/components/ProfileButton.tsx
+++ b/src/core/components/ProfileButton.tsx
@@ -1,6 +1,6 @@
import { Button } from '@material-ui/core';
import React, { useState } from 'react';
-import { CustomModal } from './CustomModal';
+import { ProfileModal } from './ProfileModal';
export const ProfileButton = () => {
const [isProfileModalOpen, setIsProfileModalOpen] = useState<boolean>(false);
@@ -14,13 +14,7 @@ export const ProfileButton = () => {
<Button variant="contained" color="primary" onClick={handleProfileModalOpen}>
Open Profile
</Button>
- <CustomModal
- isOpen={isProfileModalOpen}
- setIsOpen={setIsProfileModalOpen}
- customStyle={{ backgroundColor: 'white', padding: '10px' }}
- >
- Modal content
- </CustomModal>
+ <ProfileModal isOpen={isProfileModalOpen} setIsOpen={setIsProfileModalOpen} />
</div>
);
};
diff --git a/src/core/components/ProfileModal.tsx b/src/core/components/ProfileModal.tsx
new file mode 100644
index 0000000..26edd64
--- /dev/null
+++ b/src/core/components/ProfileModal.tsx
@@ -0,0 +1,24 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { CustomModal } from './CustomModal';
+
+type Dispatcher<S> = Dispatch<SetStateAction<S>>;
+
+interface IProfileModalProps {
+ isOpen: boolean;
+ setIsOpen: Dispatcher<boolean>;
+}
+
+export const ProfileModal = ({ isOpen, setIsOpen }: IProfileModalProps) => {
+ const placeHolder = 'test text';
+ return (
+ <CustomModal
+ isOpen={isOpen}
+ setIsOpen={setIsOpen}
+ customStyle={{ backgroundColor: 'white', padding: '10px' }}
+ >
+ {placeHolder}
+ </CustomModal>
+ );
+};
+
+export default ProfileModal;
--
GitLab