init editSubmission design and profile data and manage research

src/components/generic/PopUp.js

@@ -9,7 +9,8 @@ const PopUpStyle = styled(FlexColumn)`
   z-index: 100;
   width: 100%;
   height: 100vh;
-  background-color: ${({ theme }) => theme.colors.dark01};
+  background-color: ${({ theme, backgroundColor }) =>
+    backgroundColor ? backgroundColor : theme.colors.dark01};
 
   .PopUpStyle__body {
     width: ${({ width }) => (width ? width : '60%')};
@@ -31,6 +32,7 @@ const PopUp = (props) => {
 
   return (
     <PopUpStyle
+      backgroundColor={props.backgroundColor}
       padding={props.padding}
       width={props.width}
       height={props.height}

src/components/generic/Table/Table.js

@@ -6,10 +6,11 @@ import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
 import TableRowFooter from './components/TableRowFooter';
 import deleteSubmission from '../../../api/deleteSubmission';
 import theme from '../../../utils/theme';
-import DeletePopUp from './components/DeletePopUp/DeletePopUp';
+import DeletePopUp from './components/DeletePopUp';
-import MobileTable from './components/MobileTable/MobileTable';
+import MobileTable from './components/MobileTable';
 import Media from 'react-media';
 import editSubmission from '../../../api/editSubmission';
+import EditPopUp from './components/EditPopUp';
 
 const Table = ({
   items,
@@ -22,6 +23,8 @@ const Table = ({
   const tableUpdate = React.useCallback(() => updateState({}), []);
   const [deletedItems, setDeletedItems] = React.useState([]);
   const [deletePopUp, setDeletePopUp] = React.useState(false);
+  const [editPopUp, setEditPopUp] = React.useState(false);
+
   const itemsToRender = items.filter((item) => !deletedItems.includes(item));
 
   const deleteItem = async (item) => {
@@ -34,6 +37,10 @@ const Table = ({
     );
   };
 
+  const editItem = async (item) => {
+    editSubmission(7355, '1,2,3', 'ssiema siema');
+  };
+
   const desktopRender = () => {
     return (
       <TableStyle rowFooter={rowFooter}>
@@ -49,11 +56,18 @@ const Table = ({
                 item={item}
                 setDeletePopUp={setDeletePopUp}
                 deletePopUp={deletePopUp}
-                deleteItem={() => editSubmission(7355, '1,2,3', 'ssiema siema')}
+                deleteItem={deleteItem}
+              />
+              <EditPopUp
+                item={item}
+                setEditPopUp={setEditPopUp}
+                editPopUp={editPopUp}
+                editItem={editItem}
               />
               <TableRowItems orderedKeys={orderedKeys} item={item} i={i} />
               <TableRowFooter
                 deleteItem={() => setDeletePopUp(true)}
+                editItem={() => setEditPopUp(true)}
                 rowFooter={rowFooter}
                 item={item}
                 i={i}

src/components/generic/Table/components/DeletePopUp/DeletePopUp.js

@@ -12,6 +12,7 @@ const DeletePopUp = ({ deletePopUp, setDeletePopUp, deleteItem, item }) => {
         width="30%"
         height="30vh"
         padding="32px"
+        backgroundColor={theme.colors.dark003}
         closeHandler={() => setDeletePopUp(false)}
       >
         <FlexColumn width="100%" height="100%" gap="48px">

src/components/generic/Table/components/EditPopUp/EditPopUp.js

@@ -0,0 +1,61 @@
+import { createPortal } from 'react-dom';
+import PopUp from '../../../PopUp';
+import Button from '../../../Button';
+import { H3 } from '../../../../../utils/fonts';
+import { FlexColumn, FlexRow } from '../../../../../utils/containers';
+import theme from '../../../../../utils/theme';
+import SubmitInput from '../../../SubmitInput';
+import TagsChoose from '../../../../../pages/Submit/components/TagsChoose/TagsChoose';
+
+const EditPopUp = ({ editPopUp, setEditPopUp, editItem, item }) => {
+  if (editPopUp) {
+    return createPortal(
+      <PopUp
+        width="30%"
+        height="50vh"
+        padding="32px"
+        backgroundColor={theme.colors.dark003}
+        closeHandler={() => setEditPopUp(false)}
+      >
+        <FlexColumn width="100%" height="100%" gap="48px">
+          <H3>Editing submission</H3>
+          <SubmitInput
+            label="Description"
+            handler={(value) => {
+              console.log(value);
+            }}
+          />
+          <TagsChoose
+            label="Submission tags"
+            updateTags={() => console.log('siema')}
+            tags={[]}
+            submissionTags={[]}
+          />
+          <FlexRow gap="48px">
+            <Button
+              width="100px"
+              height="32px"
+              handler={() => {
+                setEditPopUp(false);
+                editItem(item);
+              }}
+            >
+              Confirm
+            </Button>
+            <Button
+              width="100px"
+              height="32px"
+              handler={() => setEditPopUp(false)}
+              backgroundColor={theme.colors.dark}
+            >
+              Cancel
+            </Button>
+          </FlexRow>
+        </FlexColumn>
+      </PopUp>,
+      document.body
+    );
+  }
+};
+
+export default EditPopUp;

src/components/generic/Table/components/EditPopUp/index.js

@@ -0,0 +1 @@
+export { default } from './EditPopUp';

src/components/generic/Table/components/TableRowFooter/TableRowFooter.js

@@ -5,14 +5,14 @@ import TableRowButtons from '../TableRowButtons/TableRowButtons';
 import pensilIco from '../../../../../assets/pencil_ico.svg';
 import deleteIco from '../../../../../assets/delete_ico.svg';
 
-const TableRowFooter = ({ rowFooter, item, i, deleteItem }) => {
+const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
   if (rowFooter) {
     return (
       <FlexRow className="TableStyle__row-footer">
         <TableRowTags item={item} i={i} />
         <TableRowButtons
           buttons={[
-            { icon: pensilIco, handler: () => console.log('edit') },
+            { icon: pensilIco, handler: () => editItem(item) },
             { icon: deleteIco, handler: () => deleteItem(item) },
           ]}
         />

src/components/navigation/LoggedBar.js

@@ -1,6 +1,12 @@
 import React from 'react';
-import {Container, FlexColumn, FlexRow, Svg, TransBack} from '../../utils/containers';
+import {
-import {Body, Medium} from '../../utils/fonts';
+  Container,
+  FlexColumn,
+  FlexRow,
+  Svg,
+  TransBack,
+} from '../../utils/containers';
+import { Body, Medium } from '../../utils/fonts';
 import theme from '../../utils/theme';
 import userIco from '../../assets/user_ico.svg';
 import KeyCloakService from '../../services/KeyCloakService';
@@ -15,8 +21,8 @@ const LoggedBarStyle = styled(FlexColumn)`
   right: 0;
   align-items: flex-start;
   justify-content: flex-start;
-  background-color: ${({theme}) => theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.white};
-  box-shadow: ${({theme}) => theme.shadow};
+  box-shadow: ${({ theme }) => theme.shadow};
   z-index: 3;
 
   button {
@@ -32,11 +38,11 @@ const LoggedBarStyle = styled(FlexColumn)`
 
     &:hover {
       li {
-        color: ${({theme}) => theme.colors.green};
+        color: ${({ theme }) => theme.colors.green};
       }
 
       div {
-        background-color: ${({theme}) => theme.colors.green};
+        background-color: ${({ theme }) => theme.colors.green};
       }
     }
 
@@ -48,31 +54,55 @@ const LoggedBarStyle = styled(FlexColumn)`
 
 const LoggedBar = (props) => {
   return (
-        <TransBack transition='transform' translateX={props.visible}
+    <TransBack
-                   onClick={props.loggedBarVisibleHandler} animTime='0.2s'>
+      transition="transform"
-            <LoggedBarStyle onMouseEnter={props.loggedBarHoverTrue}
+      translateX={props.visible}
-                            onMouseLeave={props.loggedBarHoverFalse}>
+      onClick={props.loggedBarVisibleHandler}
-                <FlexRow alignmentX='flex-start' alignmentY='flex-end'
+      animTime="0.2s"
-                         gap='16px' width='100%' padding='12px 16px'>
+    >
-                    <Svg src={userIco} width='32px' height='32px' backgroundColor={theme.colors.dark} size='cover'/>
+      <LoggedBarStyle
-                    <Medium as='p'>
+        onMouseEnter={props.loggedBarHoverTrue}
-                        {props.username}
+        onMouseLeave={props.loggedBarHoverFalse}
-                    </Medium>
+      >
+        <FlexRow
+          alignmentX="flex-start"
+          alignmentY="flex-end"
+          gap="16px"
+          width="100%"
+          padding="12px 16px"
+        >
+          <Svg
+            src={userIco}
+            width="32px"
+            height="32px"
+            backgroundColor={theme.colors.dark}
+            size="cover"
+          />
+          <Medium as="p">{props.username}</Medium>
         </FlexRow>
-                <Container width='90%' backgroundColor={theme.colors.dark05} height='1px'/>
+        <Container
-                <FlexColumn as='ul' onClick={() => console.log('profile click')}
+          width="90%"
-                            gap='24px' padding='32px 24px' alignmentX='flex-start'>
+          backgroundColor={theme.colors.dark05}
-                    <FlexRow as='button' gap='16px'>
+          height="1px"
-                        <Svg width='16px' height='16px' src={userIco} size='cover'/>
+        />
-                        <Body as='li'>
+        <FlexColumn
-                            Profile
+          as="ul"
-                        </Body>
+          onClick={KeyCloakService.goToProfile}
+          gap="24px"
+          padding="32px 24px"
+          alignmentX="flex-start"
+        >
+          <FlexRow as="button" gap="16px">
+            <Svg width="16px" height="16px" src={userIco} size="cover" />
+            <Body as="li">Profile</Body>
           </FlexRow>
-                    <FlexRow as='button' onClick={props.visible === '0' ? KeyCloakService.doLogout : null} gap='16px'>
+          <FlexRow
-                        <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
+            as="button"
-                        <Body as='li'>
+            onClick={props.visible === '0' ? KeyCloakService.doLogout : null}
-                            Sign out
+            gap="16px"
-                        </Body>
+          >
+            <Svg width="16px" height="16px" src={loginIco} rotate="180deg" />
+            <Body as="li">Sign out</Body>
           </FlexRow>
         </FlexColumn>
       </LoggedBarStyle>

src/services/KeyCloakService.js

@@ -61,6 +61,11 @@ const getUsername = () => _kc.tokenParsed?.preferred_username;
 
 const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));
 
+const goToProfile = () => {
+  console.log(_kc.loadUserProfile());
+  _kc.accountManagement();
+};
+
 const KeyCloakService = {
   initKeycloak,
   doLogin,
@@ -71,6 +76,7 @@ const KeyCloakService = {
   getUsername,
   hasRole,
   doRegister,
+  goToProfile,
 };
 
 export default KeyCloakService;

src/utils/colors.js

@@ -7,6 +7,8 @@ const colors = {
   green05: 'rgba(27, 153, 139, 0.5)',
   green08: 'rgba(27, 153, 139, 0.8)',
   dark: '#343434',
+  dark003: 'rgba(52, 52, 52, 0.03)',
+  dark005: 'rgba(52, 52, 52, 0.05)',
   dark01: 'rgba(52, 52, 52, 0.1)',
   dark03: 'rgba(52, 52, 52, 0.3)',
   dark04: 'rgba(52, 52, 52, 0.4)',