Skip to content

Commit 7175729

Browse files
bpalomino5bpalomino5
committed
Project Page fix up
 * removed size me * code refactoring * extra checks for project props
1 parent 539b89b commit 7175729

File tree

7 files changed

+88
-145
lines changed

7 files changed

+88
-145
lines changed

‎src/components/project-page/ProjectPage.jsx

Lines changed: 44 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,83 @@
11
import React, { useState, useEffect } from 'react';
2-
import { SizeMe } from 'react-sizeme';
2+
import styled from 'styled-components';
33
import some from 'lodash/some';
44
import { withRouter } from 'react-router-dom';
55

66
import { Row } from 'reactstrap';
7-
import { auth } from '../../firebase';
8-
import { Project } from '../../firebase/models';
7+
import { auth, db } from '../../firebase';
98

109
import Dashboard from './components/dashboard';
11-
// import EditProjectButton from './components/edit-project-button';
1210
import BannerContent from './components/banner-content';
1311
import ProjectInfoContent from './components/project-info-content';
1412
import SocialContentSection from './components/social-content-section';
15-
import Button from '../shared/button';
13+
import EditProjectBanner from './components/edit-project-banner';
1614

17-
const LoadingView = () => (
18-
<div
19-
style={{
20-
display: 'flex',
21-
height: '70vh',
22-
flex: 1,
23-
justifyContent: 'center',
24-
alignItems: 'center',
25-
}}
26-
>
27-
Loading ...
28-
</div>
29-
);
15+
const LoadingView = styled.div`
16+
display: flex;
17+
height: 70vh;
18+
flex: 1;
19+
justify-content: center;
20+
align-items: center;
21+
`;
3022

31-
const EditProjectBanner = ({ onEdit }) => (
32-
<div
33-
style={{
34-
backgroundColor: '#ff6e6e',
35-
color: 'white',
36-
padding: 40,
37-
fontWeight: 'bold',
38-
display: 'flex',
39-
justifyContent: 'space-around',
40-
}}
41-
>
42-
<h5 style={{ marginTop: 10 }}>You are viewing the live version of your project.</h5>
43-
<Button variant="outlined" onClick={onEdit}>
44-
Edit Project
45-
</Button>
46-
</div>
47-
);
48-
49-
const ProjectPage = (props) => {
23+
const ProjectPage = ({ match, location }) => {
5024
const [ loadingState, setLoadingState ] = useState(false);
5125
const [ showDashboardState, setShowDashboardState ] = useState(false);
5226
const [ projectDataState, setProjectDataState ] = useState({});
5327
const [ editableState, setEditableState ] = useState(false);
54-
const [ pidState, setPidState ] = useState(undefined);
28+
const [ pidState, setPidState ] = useState(null);
5529

56-
const handleMount = async () => {
57-
setLoadingState(true);
30+
useEffect(() => {
31+
const init = async () => {
32+
setLoadingState(true);
5833

59-
const { shortname } = props.match.params;
60-
const projects = await db.getAllByFilter('projects')(
61-
db.where('shortname')('==')(shortname.trim()),
62-
);
34+
const { shortname } = match.params;
35+
const projects = await db.getAllByFilter('projects')(
36+
db.where('shortname')('==')(shortname.trim()),
37+
);
6338

64-
if (projects !== undefined && projects.length === 1) {
65-
const project = projects[0];
66-
setProjectDataState(project);
67-
setPidState(project.id);
68-
// a project is editable if the user either belongs to the team or the admin
69-
if (auth.isLoggedIn()) {
70-
const { uid: currentUserId } = auth.getUserInfo();
71-
if (currentUserId) {
72-
const editable = some(project.team, id => id === currentUserId)
73-
|| some(project.admin, id => id === currentUserId)
74-
|| project.owner === currentUserId;
75-
// set whether or not editable
76-
setEditableState(editable);
39+
if (projects !== undefined && projects.length === 1) {
40+
const project = projects[0];
41+
setProjectDataState(project);
42+
setPidState(project.id);
43+
// a project is editable if the user either belongs to the team or the admin
44+
if (auth.isLoggedIn()) {
45+
const { uid: currentUserId } = auth.getUserInfo();
46+
if (currentUserId) {
47+
const editable = some(project.team, id => id === currentUserId)
48+
|| some(project.admin, id => id === currentUserId)
49+
|| project.owner === currentUserId;
50+
// set whether or not editable
51+
setEditableState(editable);
52+
}
7753
}
7854
}
79-
}
80-
setLoadingState(false);
81-
};
55+
setLoadingState(false);
56+
};
8257

83-
useEffect(() => {
84-
handleMount();
58+
init();
8559
}, []);
8660

87-
const handleCloseDashboard = async () => {
88-
window.location.reload();
89-
};
90-
91-
const handleShowDashboard = async () => {
92-
setShowDashboardState(true);
93-
};
94-
95-
/**
96-
* programmatic display of content
97-
*/
98-
const render = () => {
99-
if (loadingState) {
100-
return <LoadingView />;
101-
}
102-
if (pidState && showDashboardState) {
103-
return <Dashboard pid={pidState} handleCloseDashboard={handleCloseDashboard} />;
104-
}
105-
return (
106-
<>
107-
{editableState ? <EditProjectBanner onEdit={handleShowDashboard} /> : <div />}
108-
<SizeMe>
109-
{({ size }) => (
110-
<Row>
111-
<BannerContent
112-
width={size.width}
113-
name={projectDataState.name}
114-
images={projectDataState.images}
115-
/>
116-
<ProjectInfoContent project={projectDataState} />
117-
</Row>
118-
)}
119-
</SizeMe>
120-
</>
121-
);
122-
};
61+
const toggleDashboard = toggle => () => setShowDashboardState(toggle);
12362

12463
if (loadingState) {
125-
return <LoadingView />;
64+
return <LoadingView>Loading ...</LoadingView>;
12665
}
12766
if (pidState && showDashboardState) {
12867
return <Dashboard pid={pidState} handleCloseDashboard={toggleDashboard(false)} />;
12968
}
13069
return (
13170
<>
132-
<EditProjectButton isOwner={editableState} onEdit={toggleDashboard(true)} />
133-
<SizeMe>
134-
{({ size }) => (
135-
<Row>
136-
<BannerContent
137-
width={size.width}
138-
name={projectDataState.name}
139-
images={projectDataState.images}
140-
/>
141-
<ProjectInfoContent project={projectDataState} />
142-
</Row>
143-
)}
144-
</SizeMe>
71+
{editableState ? <EditProjectBanner onEdit={toggleDashboard(true)} /> : <div />}
72+
<Row>
73+
<BannerContent name={projectDataState.name} images={projectDataState.images} />
74+
<ProjectInfoContent project={projectDataState} />
75+
</Row>
14576
<SocialContentSection
14677
isOwner={editableState}
14778
projectId={pidState}
14879
ourstory={projectDataState.about ? projectDataState.about : ''}
149-
selected={hash}
80+
selected={location.hash}
15081
/>
15182
</>
15283
);

‎src/components/project-page/components/banner-content/BannerContent.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ const BannerImageCarousel = ({ images }) => (
2020
</div>
2121
);
2222

23-
const BannerContent = ({ width, name, images }) => (
24-
<Col style={{ flexBasis: width < 720 ? 'auto' : 0 }}>
23+
const BannerContent = ({ name, images }) => (
24+
<Col>
2525
<BannerTitle name={name} />
2626
<BannerImageCarousel images={images} />
2727
</Col>

‎src/components/project-page/components/edit-project-banner/EditProjectBanner.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Button from '../../../shared/button';
4+
5+
const Container = styled.div`
6+
background-color: #ff6e6e;
7+
color: white;
8+
padding: 40px;
9+
font-weight: bold;
10+
display: flex;
11+
justify-content: space-around;
12+
13+
h5 {
14+
margin-top: 10px;
15+
}
16+
`;
17+
18+
const EditProjectBanner = ({ onEdit }) => (
19+
<Container>
20+
<h5>You are viewing the live version of your project.</h5>
21+
<Button variant="outlined" onClick={onEdit}>
22+
Edit Project
23+
</Button>
24+
</Container>
25+
);
26+
27+
export default EditProjectBanner;

‎src/components/project-page/components/edit-project-banner/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './EditProjectBanner';

‎src/components/project-page/components/edit-project-button/EditProjectButton.jsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/project-page/components/edit-project-button/index.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/project-page/components/project-info-content/ProjectInfoContent.jsx

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
TwitterIcon,
1010
} from 'react-share';
1111

12-
// import idx from 'idx';
1312
import ViewProfileButton from '../view-profile-button';
1413
import ContactModal from '../../../shared/contact-modal';
1514
import { Project } from '../../../../firebase';
@@ -63,13 +62,12 @@ const SocialSection = ({ shortname }) => (
6362
const TeamSection = ({ pid }) => {
6463
const [ teamState, setTeamState ] = useState([]);
6564

66-
const handleMount = async () => {
67-
const team = await Project.getMembersFromFieldArray('team')('users')(pid);
68-
setTeamState(team);
69-
};
70-
7165
useEffect(() => {
72-
handleMount();
66+
const init = async () => {
67+
const team = await Project.getMembersFromFieldArray('team')('users')(pid);
68+
setTeamState(team);
69+
};
70+
init();
7371
}, [ pid ]);
7472

7573
return (
@@ -100,11 +98,11 @@ const AboutSection = ({ about }) => (
10098
);
10199

102100
// TODO: need section not yet in database
103-
const NeedSection = ({ need }) => (
104-
<InfoView title="Who we need">
105-
<div>{need}</div>
106-
</InfoView>
107-
);
101+
// const NeedSection = ({ need }) => (
102+
// <InfoView title="Who we need">
103+
// <div>{need}</div>
104+
// </InfoView>
105+
// );
108106

109107
const InfoView = ({ title, children }) => (
110108
<Row style={{ marginBottom: 20 }}>
@@ -115,17 +113,18 @@ const InfoView = ({ title, children }) => (
115113
</Row>
116114
);
117115

118-
const ProjectInfoContent = ({ project: { name, shortname, contact, id, links, description } }) => (
116+
const ProjectInfoContent = ({
117+
project: { name, shortname, contact, id, links, description, team },
118+
}) => (
119119
<Col>
120120
<div style={{ marginTop: 150 }} />
121121
{shortname && <SocialSection shortname={shortname} />}
122122
{contact && <ModalSection name={name} contact={contact} projectId={id} />}
123-
<TeamSection pid={id} />
123+
{team && <TeamSection pid={id} />}
124124
{links && <ContactSection links={links} />}
125125
{description && <AboutSection about={description} />}
126126
{/* {need && <NeedSection need={need} />} */}
127127
</Col>
128128
);
129-
// return <div>Loading...</div>;
130129

131130
export default memo(ProjectInfoContent);

0 commit comments

Comments
 (0)