From 460d528ada8440abe608295e79e5bc87d2051900 Mon Sep 17 00:00:00 2001
From: Dergelyova <88082907+Dergelyova@users.noreply.github.com>
Date: Fri, 4 Feb 2022 11:52:57 +0200
Subject: [PATCH] Bugfix 467 author profile mobile adaptation (#710)

* Issue 467 created expert profile for mobile screen

* bugfix 467 adapted expert profile to mobile
---
 .../modules/experts/components/ExpertInfo.tsx |  36 ++-
 .../components/ExpertMaterialsContainer.tsx   | 244 ++++++++++--------
 .../components/ExpertMaterialsMobile.tsx      |  70 +++++
 .../experts/components/ExpertsViewMobile.tsx  |   2 +-
 .../experts/styles/ExpertInfo.styles.ts       |  39 ++-
 .../MaterialsView/MaterialsPublished.tsx      |   1 -
 6 files changed, 281 insertions(+), 111 deletions(-)
 create mode 100644 src/old/modules/experts/components/ExpertMaterialsMobile.tsx

diff --git a/src/old/modules/experts/components/ExpertInfo.tsx b/src/old/modules/experts/components/ExpertInfo.tsx
index 351f70336..c5dbc3526 100644
--- a/src/old/modules/experts/components/ExpertInfo.tsx
+++ b/src/old/modules/experts/components/ExpertInfo.tsx
@@ -1,8 +1,9 @@
-import { Avatar, Grid, Typography } from '@material-ui/core';
-import React from 'react';
+import { Avatar, Grid, Typography, Box, CardMedia } from '@material-ui/core';
+import React, { useContext } from 'react';
 import { IExpert } from '../../../lib/types';
 import { useStyles } from '../styles/ExpertInfo.styles';
 import Accordion from './Accordion';
+import { ScreenContext } from '../../../provider/MobileProvider/ScreenContext';
 
 export interface IExpertInfoProps {
   expert: IExpert;
@@ -11,6 +12,37 @@ export interface IExpertInfoProps {
 const ExpertInfo: React.FC<IExpertInfoProps> = ({ expert }) => {
   const classes = useStyles();
   const expertFullName = `${expert.firstName} ${expert.lastName}`;
+  const { mobile } = useContext(ScreenContext);
+
+  if (mobile) {
+    return (
+      <>
+        <Box className={classes.root}>
+          <Box className={classes.avatarSection}>
+            <Avatar
+              src={expert.avatar}
+              alt="Photo"
+              variant="circle"
+              className={classes.avatar}
+            />
+          </Box>
+          <Box>
+            <Typography variant="h3" className={classes.fullName}>
+              {expertFullName}
+            </Typography>
+            <Typography align="justify" className={classes.bio}>
+              {expert.bio}
+            </Typography>
+          </Box>
+        </Box>
+        <Grid container item className={classes.accordionWrapper}>
+          {expert.email || expert.socialNetwork ? (
+            <Accordion expert={expert} />
+          ) : null}
+        </Grid>
+      </>
+    );
+  }
 
   return (
     <>
diff --git a/src/old/modules/experts/components/ExpertMaterialsContainer.tsx b/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
index 6160acf2a..7ba195dd7 100644
--- a/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
+++ b/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@material-ui/core';
 import { isEmpty, uniq } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
@@ -58,6 +58,8 @@ import {
 } from '../../../../models/expertMaterials';
 import { updatePostTypes, updateDir } from '../../utilities/utilityFunctions';
 import { selectExpertPostsByIds } from '../../../../models/helpers/selectors';
+import { ScreenContext } from '../../../provider/MobileProvider/ScreenContext';
+import ExpertMaterialsMobile from './ExpertMaterialsMobile';
 
 export interface IExpertMaterialsContainerProps {
   expertId: number;
@@ -97,6 +99,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
     ActiveDirectionType[]
   >();
   const previous = usePrevious({ page });
+  const { mobile } = useContext(ScreenContext);
 
   const [boundResetMaterials, boundFetchExpertMaterials] = useActions([
     resetMaterials,
@@ -411,6 +414,138 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
       </Grid>
     );
   }
+  const FilterCheckboxes = propertiesLoaded && (
+    <>
+      <CheckboxLeftsideFilterForm
+        disabledPostTypes={disabledPostTypes}
+        expertId={expertId}
+        onFormChange={(checked, disabled) =>
+          setFilters(checked, FilterTypeEnum.POST_TYPES, disabled)
+        }
+        possibleFilters={postTypesInPlural}
+        selectedFilters={selectedPostTypes}
+        filterTitle={t(langTokens.common.byType).toLowerCase()}
+        allTitle={t(langTokens.common.allTypes)}
+        setTheOnlyAvailableFilter={(name) => {
+          handleChipsLogicTransform(name, FilterTypeEnum.POST_TYPES);
+        }}
+        filterType={QueryTypeEnum.POST_TYPES}
+      />
+      <CheckboxLeftsideFilterForm
+        disabledDirections={disabledDirections}
+        expertId={expertId}
+        onFormChange={(checked, disabled) =>
+          setFilters(checked, FilterTypeEnum.DIRECTIONS, disabled)
+        }
+        possibleFilters={directions}
+        selectedFilters={selectedDirections}
+        filterTitle={t(langTokens.common.byDirection).toLowerCase()}
+        allTitle={t(langTokens.common.allDirections)}
+        setTheOnlyAvailableFilter={(name) => {
+          handleChipsLogicTransform(name, FilterTypeEnum.DIRECTIONS);
+        }}
+        filterType={QueryTypeEnum.DIRECTIONS}
+      />
+    </>
+  );
+
+  const header = () => {
+    if (!mobile)
+      return (
+        <Typography
+          className={classes.chipsHeading}
+          component="div"
+          variant="subtitle2"
+        >
+          {`${t(langTokens.experts.selectedExpertMaterials)}:`}
+        </Typography>
+      );
+    return <></>;
+  };
+
+  const SelectedTypes = (
+    <Box className={classes.container}>
+      {header()}
+      {typeof selectedPostTypes === 'string' && !TheOnlyAvailablePostType ? (
+        <Typography
+          className={classes.selectedFilters}
+          component="div"
+          variant="subtitle2"
+        >
+          {t(langTokens.common.allTypes)}
+        </Typography>
+      ) : (
+        <ChipsList
+          TheOnlyAvailablePostType={TheOnlyAvailablePostType}
+          filtersPlural={postTypesInPlural}
+          checkedNames={getPostTypes()}
+          handleDelete={handleDeleteChip}
+          chipsListType={ChipFilterEnum.POST_TYPE}
+        />
+      )}
+      <Typography className={classes.divider} component="span">
+        |
+      </Typography>
+      {typeof selectedDirections === 'string' && !TheOnlyAvailableDirection ? (
+        <Typography
+          className={classes.selectedFilters}
+          component="div"
+          variant="subtitle2"
+        >
+          {t(langTokens.common.allDirections)}
+        </Typography>
+      ) : (
+        <ChipsList
+          TheOnlyAvailableDirection={TheOnlyAvailableDirection}
+          checkedNames={getDirections()}
+          handleDelete={handleDeleteChip}
+          chipsListType={ChipFilterEnum.DIRECTION}
+        />
+      )}
+      <Typography className={classes.divider} component="span">
+        |
+      </Typography>
+      <Typography
+        className={classes.totalFilters}
+        component="div"
+        variant="subtitle2"
+        color="textSecondary"
+      >
+        {totalElements}{' '}
+        {t(langTokens.materials.material, {
+          count: totalElements,
+        }).toLowerCase()}
+      </Typography>
+    </Box>
+  );
+
+  const LoadMoreButtonEl = (
+    <LoadMoreButton
+      clicked={loadMore}
+      isLastPage={isLastPage}
+      loading={loading}
+      totalPages={totalPages}
+      totalElements={totalElements}
+      pageNumber={pageNumber}
+      textType={LoadMoreButtonTextType.POST}
+    />
+  );
+
+  if (mobile) {
+    return (
+      <ExpertMaterialsMobile
+        expert={expert}
+        page={page}
+        loading={loading}
+        totalElements={totalElements}
+        materials={materials}
+        SelectedTypes={SelectedTypes}
+        FilterCheckboxes={FilterCheckboxes}
+        resetPage={loadMore}
+        LoadMoreButton={LoadMoreButtonEl}
+      />
+    );
+  }
 
   return (
     <>
@@ -428,40 +563,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
           >
             {t(langTokens.experts.selectExpertMaterials)}
           </Typography>
-          {propertiesLoaded && (
-            <>
-              <CheckboxLeftsideFilterForm
-                disabledPostTypes={disabledPostTypes}
-                expertId={expertId}
-                onFormChange={(checked, disabled) =>
-                  setFilters(checked, FilterTypeEnum.POST_TYPES, disabled)
-                }
-                possibleFilters={postTypesInPlural}
-                selectedFilters={selectedPostTypes}
-                filterTitle={t(langTokens.common.byType).toLowerCase()}
-                allTitle={t(langTokens.common.allTypes)}
-                setTheOnlyAvailableFilter={(name) => {
-                  handleChipsLogicTransform(name, FilterTypeEnum.POST_TYPES);
-                }}
-                filterType={QueryTypeEnum.POST_TYPES}
-              />
-              <CheckboxLeftsideFilterForm
-                disabledDirections={disabledDirections}
-                expertId={expertId}
-                onFormChange={(checked, disabled) =>
-                  setFilters(checked, FilterTypeEnum.DIRECTIONS, disabled)
-                }
-                possibleFilters={directions}
-                selectedFilters={selectedDirections}
-                filterTitle={t(langTokens.common.byDirection).toLowerCase()}
-                allTitle={t(langTokens.common.allDirections)}
-                setTheOnlyAvailableFilter={(name) => {
-                  handleChipsLogicTransform(name, FilterTypeEnum.DIRECTIONS);
-                }}
-                filterType={QueryTypeEnum.DIRECTIONS}
-              />
-            </>
-          )}
+          <div>{FilterCheckboxes}</div>
         </Grid>
         <Grid
           className={classes.materialsContainer}
@@ -472,67 +574,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
           md={9}
           direction="column"
         >
-          <Box className={classes.container}>
-            <Typography
-              className={classes.chipsHeading}
-              component="div"
-              variant="subtitle2"
-            >
-              {`${t(langTokens.experts.selectedExpertMaterials)}:`}
-            </Typography>
-            {typeof selectedPostTypes === 'string' &&
-            !TheOnlyAvailablePostType ? (
-              <Typography
-                className={classes.selectedFilters}
-                component="div"
-                variant="subtitle2"
-              >
-                {t(langTokens.common.allTypes)}
-              </Typography>
-            ) : (
-              <ChipsList
-                TheOnlyAvailablePostType={TheOnlyAvailablePostType}
-                filtersPlural={postTypesInPlural}
-                checkedNames={getPostTypes()}
-                handleDelete={handleDeleteChip}
-                chipsListType={ChipFilterEnum.POST_TYPE}
-              />
-            )}
-            <Typography className={classes.divider} component="span">
-              |
-            </Typography>
-            {typeof selectedDirections === 'string' &&
-            !TheOnlyAvailableDirection ? (
-              <Typography
-                className={classes.selectedFilters}
-                component="div"
-                variant="subtitle2"
-              >
-                {t(langTokens.common.allDirections)}
-              </Typography>
-            ) : (
-              <ChipsList
-                TheOnlyAvailableDirection={TheOnlyAvailableDirection}
-                checkedNames={getDirections()}
-                handleDelete={handleDeleteChip}
-                chipsListType={ChipFilterEnum.DIRECTION}
-              />
-            )}
-            <Typography className={classes.divider} component="span">
-              |
-            </Typography>
-            <Typography
-              className={classes.totalFilters}
-              component="div"
-              variant="subtitle2"
-              color="textSecondary"
-            >
-              {totalElements}{' '}
-              {t(langTokens.materials.material, {
-                count: totalElements,
-              }).toLowerCase()}
-            </Typography>
-          </Box>
+          <div className={classes.selectedFiltersWraper}>{SelectedTypes}</div>
           {page === 0 && loading === LoadingStatusEnum.pending ? (
             <LoadingContainer loading={LoadingStatusEnum.pending} expand />
           ) : (
@@ -545,15 +587,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
                   alignItems="center"
                   ref={gridRef}
                 >
-                  <LoadMoreButton
-                    clicked={loadMore}
-                    isLastPage={isLastPage}
-                    loading={loading}
-                    totalPages={totalPages}
-                    totalElements={totalElements}
-                    pageNumber={pageNumber}
-                    textType={LoadMoreButtonTextType.POST}
-                  />
+                  {LoadMoreButtonEl}
                 </Grid>
               ) : null}
             </>
diff --git a/src/old/modules/experts/components/ExpertMaterialsMobile.tsx b/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
new file mode 100644
index 000000000..2076c3e10
--- /dev/null
+++ b/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
@@ -0,0 +1,70 @@
+import React, { FC, useState } from 'react';
+import FiltersMenu from 'components/FiltersMenuMobile/FiltersMenu';
+import { PostsList } from 'old/lib/components/Posts/PostsList';
+import FiltersButton from 'old/lib/components/FiltersButton/FiltersButton';
+import { LoadingContainer } from 'old/lib/components/Loading/LoadingContainer';
+import UpButton from 'old/lib/components/UpButton/UpButton';
+import { Container, Grid } from '@material-ui/core';
+import {
+  IPost,
+  LoadingStatusType,
+  LoadingStatusEnum,
+  IExpert,
+} from 'old/lib/types';
+import ExpertInfo from './ExpertInfo';
+
+interface IExpertMaterialsMobileProps {
+  page: number;
+  loading: LoadingStatusType;
+  materials: IPost[];
+  totalElements: number;
+  SelectedTypes: JSX.Element;
+  FilterCheckboxes: JSX.Element | false;
+  LoadMoreButton: JSX.Element;
+  expert: IExpert;
+  resetPage: () => void;
+}
+const ExpertMaterialsMobile: FC<IExpertMaterialsMobileProps> = ({
+  expert,
+  totalElements,
+  FilterCheckboxes,
+  SelectedTypes,
+  page,
+  loading,
+  materials,
+  resetPage,
+  LoadMoreButton,
+}) => {
+  const [filtersMenuOpen, setFiltersMenuOpen] = useState(false);
+  return (
+    <Container>
+      <ExpertInfo expert={expert} />
+      <Grid item container alignItems="center" xs={12} direction="column">
+        {page === 0 && loading === LoadingStatusEnum.pending ? (
+          <LoadingContainer loading={LoadingStatusEnum.pending} expand />
+        ) : (
+          <>
+            <PostsList postsList={materials} resetPage={resetPage} mobile />
+            <Grid container justify="center">
+              {LoadMoreButton}
+            </Grid>
+          </>
+        )}
+      </Grid>
+      <UpButton />
+      <FiltersButton
+        filtersMenuOpen={filtersMenuOpen}
+        setFiltersMenuOpen={setFiltersMenuOpen}
+      />
+      <FiltersMenu
+        filtersMenuOpen={filtersMenuOpen}
+        setFiltersMenuOpen={setFiltersMenuOpen}
+        totalElements={totalElements}
+        SelectedTypes={SelectedTypes}
+        FilterCheckboxes={FilterCheckboxes}
+      />
+    </Container>
+  );
+};
+
+export default ExpertMaterialsMobile;
diff --git a/src/old/modules/experts/components/ExpertsViewMobile.tsx b/src/old/modules/experts/components/ExpertsViewMobile.tsx
index 4c58ea922..949d36608 100644
--- a/src/old/modules/experts/components/ExpertsViewMobile.tsx
+++ b/src/old/modules/experts/components/ExpertsViewMobile.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useRef, useEffect } from 'react';
+import React, { FC, useState } from 'react';
 import { Container, Grid, Box, Typography } from '@material-ui/core';
 import { LoadingContainer } from 'old/lib/components/Loading/LoadingContainer';
 import FiltersMenu from 'components/FiltersMenuMobile/FiltersMenu';
diff --git a/src/old/modules/experts/styles/ExpertInfo.styles.ts b/src/old/modules/experts/styles/ExpertInfo.styles.ts
index e7a661049..11037767e 100644
--- a/src/old/modules/experts/styles/ExpertInfo.styles.ts
+++ b/src/old/modules/experts/styles/ExpertInfo.styles.ts
@@ -1,20 +1,55 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    minHeight: '100px',
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.down('xs')]: {
+      marginTop: theme.spacing(2),
+      padding: '10px 0 0',
+      marginBottom: 0,
+    },
+  },
   personalInfo: {
     margin: '0 0 20px 0',
+    [theme.breakpoints.down('xs')]: {
+      // marginTop: theme.spacing(16),
+      padding: '10px 0 0',
+      marginBottom: 0,
+    },
+  },
+  avatarSection: {
+    [theme.breakpoints.down('xs')]: {
+      alignSelf: 'flex-start',
+    },
   },
   avatar: {
     margin: '0 0 40px 0',
     width: '100%	',
     height: '280px',
+    [theme.breakpoints.down('xs')]: {
+      width: 87,
+      height: 87,
+      marginRight: '20px',
+    },
   },
   fullName: {
     marginBottom: '20px',
+    [theme.breakpoints.down('xs')]: {
+      fontSize: '18px',
+      marginBottom: '5px',
+    },
   },
   bio: {
     marginBottom: '80px',
     textAlign: 'left',
+    [theme.breakpoints.down('xs')]: {
+      marginBottom: '40px',
+      fontSize: '14px',
+      fontStyle: 'italic',
+      lineHeight: '1.43',
+    },
   },
   accordionWrapper: {
     marginBottom: '50px',
diff --git a/src/views/Profile/MaterialsView/MaterialsPublished.tsx b/src/views/Profile/MaterialsView/MaterialsPublished.tsx
index daa148b47..c0337399b 100644
--- a/src/views/Profile/MaterialsView/MaterialsPublished.tsx
+++ b/src/views/Profile/MaterialsView/MaterialsPublished.tsx
@@ -47,7 +47,6 @@ export interface IMaterialsPublishedProps {
 
 const MaterialsPublished: React.FC<IMaterialsPublishedProps> = ({
   expertId,
-  expert,
 }) => {
   const { t } = useTranslation();
   const classes = useStyles();