Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#305 Active tab highlighting #323

Merged
merged 10 commits into from
Nov 29, 2023
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions FrontEnd/src/components/ProfileDetail/DetailedInfo/Company.jsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
import { PropTypes } from 'prop-types';
import { useEffect } from 'react';
import classes from './Company.module.css';
import ReadMore from './ReadMore';
import { useContext } from 'react';
import { DataContext } from '../../../context/DataContext';

function Company ({ data }) {
const { setDataInComponents } = useContext(DataContext);

// TODO: implement logic for getting data from db when it's added on server side

const competitiveEdge = '';
const slogan = '';
const companyData = data.common_info || competitiveEdge || slogan;

useEffect(() => {
if (companyData) {
setDataInComponents(prevData => [
...prevData,
'about-company',
]);
}
}, [setDataInComponents, companyData]);

return (
companyData ? (
<div id="about-company" className={classes['about-company']}>
Expand Down
12 changes: 12 additions & 0 deletions FrontEnd/src/components/ProfileDetail/DetailedInfo/Cooperation.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
import { useEffect } from 'react';
import { useContext } from 'react';
import { DataContext } from '../../../context/DataContext';
import classes from './Cooperation.module.css';
import ReadMore from './ReadMore';

function Cooperation () {
const { setDataInComponents } = useContext(DataContext);
const cooperationData = '';

useEffect(() => {
if (cooperationData) {
setDataInComponents(prevData => [
...prevData,
'cooperation']);
}
}, [cooperationData, setDataInComponents]);

// TODO: implement logic for getting data from db when it's added on server side

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@
}

.cooperation__content--description {
display: flex;
padding: 12px;
align-items: flex-start;
gap: 10px;
width: 776px;
color: var(--main-grey-90, #25292C);
font-feature-settings: 'calt' off;
Expand Down
12 changes: 12 additions & 0 deletions FrontEnd/src/components/ProfileDetail/DetailedInfo/Logistics.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
import { useEffect } from 'react';
import { useContext } from 'react';
import { DataContext } from '../../../context/DataContext';
import classes from './Logistics.module.css';
import ReadMore from './ReadMore';

function Logistics () {
const { setDataInComponents } = useContext(DataContext);
const logisticsData = '';

useEffect(() => {
if (logisticsData) {
setDataInComponents(prevData => [
...prevData,
'logistics']);
}
}, [logisticsData, setDataInComponents]);

// TODO: implement logic for getting data from db when it's added on server side

return (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@
}

.logistics__content--description {
display: flex;
padding: 12px;
align-items: flex-start;
gap: 10px;
width: 776px;
color: var(--main-grey-90, #25292C);
font-feature-settings: 'calt' off;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
import { useMemo } from 'react';
import { PropTypes } from 'prop-types';
import { useEffect } from 'react';
import { useContext } from 'react';
import { DataContext } from '../../../context/DataContext';
import classes from './ProductsServices.module.css';
import ReadMore from './ReadMore';

function ProductsServices ({ data }) {
const { setDataInComponents } = useContext(DataContext);
const profile = useMemo(() => {
return {
products: data.product_info,
services: data.service_info
};
}, [data]);

useEffect(() => {
if (profile.products || profile.services) {
setDataInComponents(prevData => [
...prevData,
'products-services']);
}
}, [setDataInComponents, profile.products, profile.services]);

return (
(profile.products || profile.services) ? (
<div id="products-services" className={classes['products-services']}>
Expand Down
12 changes: 12 additions & 0 deletions FrontEnd/src/components/ProfileDetail/DetailedInfo/Startup.jsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import { useMemo } from 'react';
import { PropTypes } from 'prop-types';
import { useEffect } from 'react';
import { useContext } from 'react';
import { DataContext } from '../../../context/DataContext';
import classes from './Startup.module.css';
import ReadMore from './ReadMore';

function Startup ({ data }) {
const { setDataInComponents } = useContext(DataContext);
const profile = useMemo(() => {
return {
startup_idea: data.startup_idea,
Expand Down Expand Up @@ -38,6 +42,14 @@ function Startup ({ data }) {

const hasSections = renderedSections.some((section) => section !== null);

useEffect(() => {
if (hasSections) {
setDataInComponents(prevData => [
...prevData,
'startup']);
}
}, [hasSections, setDataInComponents]);

return (
hasSections ? (
<div id="startup" className={classes['startup-wrapper']}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function MainInfoSection({ isAuthorized, data, containsNotRequiredData }) {
return (
<div className={classes['basic-info-content']}>
<TitleInfo isAuthorized={isAuthorized} data={data} />
{containsNotRequiredData ? <ProfileDetailNavBar /> : null}
{containsNotRequiredData ? <ProfileDetailNavBar data={data}/> : null}
</div>
);
}
Expand Down Expand Up @@ -35,6 +35,8 @@ MainInfoSection.propTypes = {
),
common_info: PropTypes.string,
is_saved: PropTypes.bool.isRequired,
is_registered: PropTypes.bool.isRequired,
is_startup: PropTypes.bool.isRequired,
}).isRequired,
containsNotRequiredData: PropTypes.bool.isRequired,
};
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { HashLink } from 'react-router-hash-link';
import { useLocation } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { PropTypes } from 'prop-types';
import { useContext } from 'react';
import { DataContext } from '../../../context/DataContext';
import classes from './ProfileDetailNavBar.module.css';

const MENU_LINKS = {
Expand All @@ -10,38 +14,66 @@ const MENU_LINKS = {
'cooperation': 'Формат співпраці',
};

function ProfileDetailNavBar() {

function ProfileDetailNavBar({ data }) {
const { hash } = useLocation ();
const navigate = useNavigate ();
const { dataInComponents } = useContext(DataContext);
const [activeLink, setActiveLink] = useState('');

useEffect(() => {
if (hash) {
setActiveLink(hash.substring(1));
} else {
setActiveLink(
data.is_registered && dataInComponents.includes('about-company') ? 'about-company' :
data.is_startup && dataInComponents.includes('startup') ? 'startup' : ''
);
}
}, [hash, data.is_registered, data.is_startup, dataInComponents]);

useEffect(() => {
navigate(hash.pathname, {replace: true});
}, [navigate, hash.pathname]);

return (
<div className={classes['navbar-menu']}>
{Object.entries(MENU_LINKS).map(([link, label]) => (
<div key={link} className={classes['navbar-menu__block']}>
<div className={classes['navbar-menu__item']}>
<HashLink
smooth
to={`#${link}`}
className={
`#${link}` === hash
? `${classes['active-link']}`
: `${classes['inactive-link']}`
}
>
{label}
</HashLink>
</div>
<div
className={
`#${link}` === hash
? `${classes['active-devider']}`
: `${classes['inactive-devider']}`
}
/>
</div>
))}
return (
<div>
<div className={classes['navbar-menu']}>
{Object.entries(MENU_LINKS).map(
([link, label]) =>
dataInComponents.includes(link) && (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we store links could we provide a better name for the context that describes it? Like activeTabs or activeLinks. Same for the context provider

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

<div key={link} className={classes['navbar-menu__block']}>
<div className={classes['navbar-menu__item']}>
<HashLink
smooth
to={`#${link}`}
className={
link === activeLink
? `${classes['active-link']}`
: `${classes['inactive-link']}`
}
>
{label}
</HashLink>
</div>
<div
className={
link === activeLink ? `${classes['active-devider']}` : null
}
/>
</div>
)
)}
</div>
<div className={classes['devider']}></div>
</div>
);
}

export default ProfileDetailNavBar;

ProfileDetailNavBar.propTypes = {
data: PropTypes.shape({
is_registered: PropTypes.bool.isRequired,
is_startup: PropTypes.bool.isRequired,
}).isRequired,
};
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@
letter-spacing: -0.16px;
}

.devider {
width: 795px;
height: 1px;
background: var(--main-grey-20, #DEE1E8);
}

.inactive-devider {
height: 1px;
align-self: stretch;
Expand Down
27 changes: 16 additions & 11 deletions FrontEnd/src/components/ProfileDetail/ProfileDetailPage.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import useSWR from 'swr';
import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { PropTypes } from 'prop-types';

Expand All @@ -7,9 +8,11 @@ import ErrorPage404 from '../errorPages/ErrorPage404';
import MainInfoSection from './MainInfo/MainInfoSection';
import DetailedInfoSection from './DetailedInfo/DetailedInfoSection';
import BannerImage from './BannerImage';
import { DataContext } from '../../context/DataContext';
import classes from './ProfileDetailPage.module.css';

function ProfileDetailPage({ isAuthorized }) {
const [dataInComponents, setDataInComponents] = useState([]);
const authToken = localStorage.getItem('Token');
const { id } = useParams();
const urlProfile = `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${id}`;
Expand Down Expand Up @@ -42,19 +45,21 @@ function ProfileDetailPage({ isAuthorized }) {
isLoading ? (
<Loader />
) : ( <>
<DataContext.Provider value={{ dataInComponents, setDataInComponents }}>
<BannerImage data={fetchedProfile}/>
<div className={classes['profile-page']}>
<MainInfoSection
containsNotRequiredData={containsNotRequiredData}
isAuthorized={isAuthorized}
data={fetchedProfile}
/>
<DetailedInfoSection
containsNotRequiredData ={containsNotRequiredData }
isAuthorized={isAuthorized}
data={fetchedProfile}
<div className={classes['profile-page']}>
<MainInfoSection
containsNotRequiredData={containsNotRequiredData}
isAuthorized={isAuthorized}
data={fetchedProfile}
/>
</div>
<DetailedInfoSection
containsNotRequiredData ={containsNotRequiredData }
isAuthorized={isAuthorized}
data={fetchedProfile}
/>
</div>
</DataContext.Provider>
</>
)
);
Expand Down
8 changes: 7 additions & 1 deletion FrontEnd/src/components/profileList/ProfileCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,20 @@ import { PropTypes } from 'prop-types';
import { useSWRConfig } from 'swr';
import useSWRMutation from 'swr/mutation';

import { useUser } from '../../hooks';
import css from './ProfileCard.module.css';

const { Paragraph } = Typography;


export default function ProfileCard({ isAuthorized, data }) {
const { mutate } = useSWRConfig();
const { user } = useUser();
const [isSaved, setIsSaved] = useState(data.is_saved);
const profile = useMemo(() => {
return {
id: data.id,
personId: data.person,
name: data.name,
activities: !data.activities.length
? null
Expand All @@ -34,6 +37,8 @@ export default function ProfileCard({ isAuthorized, data }) {
};
}, [data]);

const ownProfile = user && user.id === profile.personId;

async function sendRequest(url, { arg: data }) {
const authToken = localStorage.getItem('Token');
return fetch(url, {
Expand Down Expand Up @@ -133,7 +138,7 @@ export default function ProfileCard({ isAuthorized, data }) {
</div>
</div>
</Link>
{isAuthorized ? (isSaved ? filledStar : outlinedStar) : null}
{isAuthorized && !ownProfile ? (isSaved ? filledStar : outlinedStar) : null}
</div>
);
}
Expand All @@ -142,6 +147,7 @@ ProfileCard.propTypes = {
isAuthorized: PropTypes.bool,
data: PropTypes.shape({
id: PropTypes.number.isRequired,
person: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
address: PropTypes.string,
region_display: PropTypes.string,
Expand Down
Loading
Loading