From 59622be3fefe17136a9aa2c808557d623f358894 Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 3 Nov 2020 20:15:54 +0100 Subject: [PATCH 01/14] add content to person page --- src/components/molecules/PanelArticles.js | 6 +-- src/pages/people/ContentItemMap.js | 51 +++++++++++++++++++++++ src/pages/people/person.js | 24 ++++------- 3 files changed, 63 insertions(+), 18 deletions(-) create mode 100644 src/pages/people/ContentItemMap.js diff --git a/src/components/molecules/PanelArticles.js b/src/components/molecules/PanelArticles.js index 02cf267..d4b5368 100644 --- a/src/components/molecules/PanelArticles.js +++ b/src/components/molecules/PanelArticles.js @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import { Typography } from 'components/atoms/Typography'; import { Tag } from 'components/atoms/Tag'; -const SquarePicture = styled('div')` +const SquarePicture = styled('img')` height: 80px; width: 80px; border-radius: ${(props) => props.theme.spacing(1) + 'px'}; @@ -71,10 +71,10 @@ const COLOR_FACTORS = [ textColor: '#F15D23', }, ]; -export const PanelArticles = ({ title, colorTag }) => { +export const PanelArticles = ({ title, cover, alt, colorTag }) => { return ( - + {title} diff --git a/src/pages/people/ContentItemMap.js b/src/pages/people/ContentItemMap.js new file mode 100644 index 0000000..dd39fc6 --- /dev/null +++ b/src/pages/people/ContentItemMap.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { Typography } from 'components/atoms/Typography'; +import { PanelArticles } from 'components/molecules/PanelArticles'; + +export const ContentItemWrapper = (props) => { + const { title, children, component } = props; + const Component = component; + return ( +
+ {title.en} + {children} +
+ ); +}; + +ContentItemWrapper.defaultProps = { + component: 'ul', +}; + +export const ContentItemMap = (props) => { + const { contentItem } = props; + const { type } = contentItem; + if (type === 'list-item') { + return ( + + {contentItem.items.map((item) => ( +
  • + {item.title} +
    • + ))} +     + ); + } + if (type === 'list-item-full') { + return ( + + {contentItem.items.map((item) => ( +
  • + +
    • + ))} +     + ); + } + return 'Error: there is no such type'; +}; diff --git a/src/pages/people/person.js b/src/pages/people/person.js index 4735d02..ae3fb43 100644 --- a/src/pages/people/person.js +++ b/src/pages/people/person.js @@ -6,6 +6,9 @@ import Box from 'components/atoms/Box'; import styled from 'styled-components'; import { LinkIcon } from 'components/atoms/LinkIcon'; import { UserTop } from 'components/molecules/UserTop'; +import { Text } from 'components/atoms/Text'; +import { Typography } from 'components/atoms/Typography'; +import { ContentItemMap, ContentItemWrapper } from './ContentItemMap'; export const Person = () => { const { name } = useParams(); @@ -27,21 +30,12 @@ export const Person = () => { {value.docs.map((doc) => ( -

    About

    -

    - I am a front-end developer with 10 years experience in web - development: from responsive web-sites to SPA and - micro-frontends. I strive to write pure, maintainable and well - documented code. Also I have got design skills and have been - working as a part-time UI/UX designer for 4 years and have a - passion to implement smooth animations to apps. Since 2019 I - have been conducting to several pet projects as an architect - and a full-stack developer. -

    -

    Highlights

    - - {data.map(rendererLambda)} - + + + + {doc.get('content').map((contentItem) => ( + + ))}     ))} From 28ae2ed05110c4c3948b9503cf0a3bd291ecdabc Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 3 Nov 2020 20:21:07 +0100 Subject: [PATCH 02/14] implement test json --- src/pages/people/person.js | 1 + src/pages/tempData.json | 28 ++++++++++++++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/pages/tempData.json diff --git a/src/pages/people/person.js b/src/pages/people/person.js index ae3fb43..b6352a6 100644 --- a/src/pages/people/person.js +++ b/src/pages/people/person.js @@ -29,6 +29,7 @@ export const Person = () => {
    {value.docs.map((doc) => ( + {console.log(doc.data())} diff --git a/src/pages/tempData.json b/src/pages/tempData.json new file mode 100644 index 0000000..e290e67 --- /dev/null +++ b/src/pages/tempData.json @@ -0,0 +1,28 @@ +{ + "about": { + "en": "I am a newbie front-end developer. I don't have much experience, but a lot of desire and diligence. Soon, there will be many projects and activities. So stay tuned." + }, + "content": [ + { + "items": [ + { "title": "HTML Academy Javascript" }, + { "title": "Basic React" } + ], + "title": { "en": "Courses" }, + "type": "list-item" + }, + { + "items": [ + { + "title": "Russian Presidential Academy of National Economy And Public Administration (RANEPA)" + } + ], + "title": { "en": "Education" }, + "type": "list-item-full" + } + ], + "firstName": { "en": "Nikolay", "ru": "Николай" }, + "lastName": { "en": "Nelidov" }, + "name": "NikolayNelidov", + "profession": { "en": "Junior Front-end Developer" } +} From 21b333a74ea42dff7377070921991849e6bb241c Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 3 Nov 2020 20:23:52 +0100 Subject: [PATCH 03/14] add mocked jsons --- src/pages/anna_s.json | 1 + src/pages/ekaterina.json | 1 + src/pages/{tempData.json => nikolay.json} | 0 3 files changed, 2 insertions(+) create mode 100644 src/pages/anna_s.json create mode 100644 src/pages/ekaterina.json rename src/pages/{tempData.json => nikolay.json} (100%) diff --git a/src/pages/anna_s.json b/src/pages/anna_s.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/src/pages/anna_s.json @@ -0,0 +1 @@ +{} diff --git a/src/pages/ekaterina.json b/src/pages/ekaterina.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/src/pages/ekaterina.json @@ -0,0 +1 @@ +{} diff --git a/src/pages/tempData.json b/src/pages/nikolay.json similarity index 100% rename from src/pages/tempData.json rename to src/pages/nikolay.json From 76afbf4bf8fd346c39604e3c6c46b04a64646a98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=B6=D0=BE=D0=BF=D0=B0=20=D0=B6=D0=BE=D0=BF=D0=B0?= Date: Thu, 5 Nov 2020 16:06:16 +0300 Subject: [PATCH 04/14] add ContentPanel and Nickolay's data --- src/components/molecules/ContentPanel.js | 109 ++++++++++++++++++ .../molecules/ContentPanel.stories.js | 15 +++ src/pages/nikolay.json | 16 +-- 3 files changed, 133 insertions(+), 7 deletions(-) create mode 100644 src/components/molecules/ContentPanel.js create mode 100644 src/components/molecules/ContentPanel.stories.js diff --git a/src/components/molecules/ContentPanel.js b/src/components/molecules/ContentPanel.js new file mode 100644 index 0000000..fb31767 --- /dev/null +++ b/src/components/molecules/ContentPanel.js @@ -0,0 +1,109 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { Tag } from 'components/atoms/Tag'; + +const SquarePicture = styled('img')` + height: 80px; + width: 80px; + border-radius: ${(props) => props.theme.spacing(1) + 'px'}; + background: ${(props) => props.theme.palette.action.selected}; +`; + +const PanelContainer = styled('div')` + display: flex; + height: auto; + width: 752px; + border-radius: ${(props) => props.theme.spacing(2) + 'px'}; + padding-left: ${(props) => props.theme.spacing(1) + 'px'}; + padding-right: ${(props) => props.theme.spacing(1) + 'px'}; + padding-top: ${(props) => props.theme.spacing(1) + 'px'}; + padding-bottom: ${(props) => props.theme.spacing(1) + 'px'}; + justify-content: space-around; + align-items: center; + background: ${(props) => props.theme.palette.action.hover}; +`; + +const TextContainer = styled('div')` + height: 80px; + width: 616px; + flex-direction: row; +`; + +const StyledTitle = styled('div')` + display: flex; + justify-content: flex-start; + color: ${(props) => props.theme.palette.text.primary}; + line-height: ${(props) => props.theme.typography.h6}; +`; + +const StyledLink = styled('a')` + text-decoration: none; +`; + +const TagsContainer = styled('div')` + display: flex; + justify-content: space-between; + padding-top: ${(props) => props.theme.spacing(1) + 'px'}; +`; + +const SecondLineContainer = styled('div')` + display: flex; + justify-content: space-between; +`; + +const COLOR_FACTORS = [ + { + color: 'blue', + label: 'Front-end', + tagColor: '#D8E5FB', + textColor: '#3C7EEC', + }, + { + color: 'pink', + label: 'JavaScript', + tagColor: '#FCDFD3', + textColor: '#F15D23', + }, +]; +export const ContentPanel = ({ title, link, tags }) => { + return ( + + + + {title} + + + + {tags.map((tagItem) => ( + + ))} + + + + + ); +}; + +ContentPanel.propTypes = { + title: PropTypes.string, + tags: PropTypes.arrayOf( + PropTypes.shape({ + color: PropTypes.string, + label: PropTypes.string, + tagColor: PropTypes.string, + textColor: PropTypes.string, + }) + ), +}; + +ContentPanel.defaultProps = { + title: 'HTML Academy Javascript ', + tags: COLOR_FACTORS, + link: 'https://htmlacademy.ru/courses', +}; diff --git a/src/components/molecules/ContentPanel.stories.js b/src/components/molecules/ContentPanel.stories.js new file mode 100644 index 0000000..034303c --- /dev/null +++ b/src/components/molecules/ContentPanel.stories.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { ContentPanel } from './ContentPanel'; + +export default { + title: 'Molecules/ContentPanel', + component: ContentPanel, + parameters: { + figma: + 'https://www.figma.com/file/oW95CY1Vcnb7PYICpP4By3/Gorazdo?node-id=129%3A2', + }, +}; + +const Template = (args) => ; + +export const Default = Template.bind({}); diff --git a/src/pages/nikolay.json b/src/pages/nikolay.json index e290e67..3ebda39 100644 --- a/src/pages/nikolay.json +++ b/src/pages/nikolay.json @@ -5,24 +5,26 @@ "content": [ { "items": [ - { "title": "HTML Academy Javascript" }, - { "title": "Basic React" } + { "title": "HTML Academy Javascript", "link": "https://htmlacademy.ru/courses"}, + { "title": "CSS+HTML", "link": "https://htmlacademy.ru/courses" }, + { "title": "Fundamentals of programming", "link": "https://www.udemy.com/course/ittensive-programmer-basic/" }, + { "title": "Basic React", "link": "https://reactjs.org/community/courses.html" } ], - "title": { "en": "Courses" }, + "title": { "en": "Courses", "ru": "Курсы" }, "type": "list-item" }, { "items": [ { - "title": "Russian Presidential Academy of National Economy And Public Administration (RANEPA)" + "title": { "en": "Russian Presidential Academy of National Economy And Public Administration (RANEPA)", "ru": "Российская Академия Народного Хозяйства и Государственной Службы (РАНХиГС)"} } ], - "title": { "en": "Education" }, + "title": { "en": "Education", "ru": "Образование" }, "type": "list-item-full" } ], "firstName": { "en": "Nikolay", "ru": "Николай" }, - "lastName": { "en": "Nelidov" }, + "lastName": { "en": "Nelidov", "ru": "Нелидов" }, "name": "NikolayNelidov", - "profession": { "en": "Junior Front-end Developer" } + "profession": { "en": "Junior Front-end Developer", "ru": "Junior Front-end Разработчик" } } From a77af52aa97179a84165752db00e189bb5422cd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=BD=D0=B0=20=D0=A1=D0=B8=D1=82=D0=BD=D0=B8?= =?UTF-8?q?=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Thu, 5 Nov 2020 20:41:49 +0300 Subject: [PATCH 05/14] add personal data to json page people --- src/pages/anna_s.json | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/pages/anna_s.json b/src/pages/anna_s.json index 0967ef4..d54dae7 100644 --- a/src/pages/anna_s.json +++ b/src/pages/anna_s.json @@ -1 +1,29 @@ -{} +{ + "about": { + "en": "I’m a 27-year-old girl with a sociological degree and experience in banking analytics. For two years I had been helping to sell bank products, hire people and prevent fraud in the best online Russian bank." + }, + "content": [ + { + "items": [ + { "title": "Построение аналитической платформы (Tinkoff Fintech)", "link": "https://fintech.tinkoff.ru/study/fintech/dwh/"}, + { "title": "Learn Python 2 (Codeacademy)", "link": "https://www.codecademy.com/learn/learn-python" } + ], + "title": { "en": "Courses", "ru": "Курсы" }, + "type": "list-item" + }, + { + "items": [ + { + "title": { "en": "Moscow State University", "ru": "МГУ им М.В.Ломоносова"} + } + ], + "title": { "en": "Education", "ru": "Образование" }, + "type": "list-item-full" + } + ], + "firstName": { "en": "Anna", "ru": "Анна" }, + "lastName": { "en": "Sitnikova", "ru": "Ситникова" }, + "name": "Anna Sitnikova", + "profession": { "en": "Data Analyst", "ru": "Аналитик данных" } + } + \ No newline at end of file From c87f83e1b7e82a2b52e31055c5152c10b1316250 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=BD=D0=B0=20=D0=A1=D0=B8=D1=82=D0=BD=D0=B8?= =?UTF-8?q?=D0=BA=D0=BE=D0=B2=D0=B0?= Date: Thu, 5 Nov 2020 21:03:46 +0300 Subject: [PATCH 06/14] fixing en and ru on people page --- src/pages/anna_s.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/anna_s.json b/src/pages/anna_s.json index d54dae7..957b04c 100644 --- a/src/pages/anna_s.json +++ b/src/pages/anna_s.json @@ -1,12 +1,14 @@ { "about": { - "en": "I’m a 27-year-old girl with a sociological degree and experience in banking analytics. For two years I had been helping to sell bank products, hire people and prevent fraud in the best online Russian bank." + "en": "I’m a 27-year-old girl with a sociological degree and experience in banking analytics. + For two years I had been helping to sell bank products, hire people and prevent fraud in the best online Russian bank.", + "ru": "Лолкекчебурек" }, "content": [ { "items": [ - { "title": "Построение аналитической платформы (Tinkoff Fintech)", "link": "https://fintech.tinkoff.ru/study/fintech/dwh/"}, - { "title": "Learn Python 2 (Codeacademy)", "link": "https://www.codecademy.com/learn/learn-python" } + { "title": {"ru": "Построение аналитической платформы (Tinkoff Fintech)"}, "link": "https://fintech.tinkoff.ru/study/fintech/dwh/"}, + { "title": {"ru": "Learn Python 2 (Codeacademy)"}, "link": "https://www.codecademy.com/learn/learn-python" } ], "title": { "en": "Courses", "ru": "Курсы" }, "type": "list-item" From 48297f3a35e75e2d67ad81d3a284143ab1960794 Mon Sep 17 00:00:00 2001 From: Pavel Date: Thu, 5 Nov 2020 19:59:53 +0100 Subject: [PATCH 07/14] add CousreLink, enhance Look&Feel, minor changes --- src/components/atoms/Typography.js | 2 + src/components/molecules/ContentPanel.js | 109 ------------------ src/components/molecules/CourseLink.js | 39 +++++++ ...Panel.stories.js => CourseLink.stories.js} | 8 +- src/components/molecules/UserTop.js | 15 +-- src/pages/people/ContentItemMap.js | 36 +++--- src/pages/people/person.js | 7 +- 7 files changed, 80 insertions(+), 136 deletions(-) delete mode 100644 src/components/molecules/ContentPanel.js create mode 100644 src/components/molecules/CourseLink.js rename src/components/molecules/{ContentPanel.stories.js => CourseLink.stories.js} (55%) diff --git a/src/components/atoms/Typography.js b/src/components/atoms/Typography.js index 6400b03..a1f01d3 100644 --- a/src/components/atoms/Typography.js +++ b/src/components/atoms/Typography.js @@ -5,6 +5,7 @@ import styled from 'styled-components'; const StyledComponent = styled('span')` display: block; margin: 0; + margin-bottom: ${(props) => (props.gutterBottom ? '0.5em' : 0)}; padding: 0; color: ${(props) => props.theme.palette.text.primary}; font-size: ${(props) => props.theme.typography[props.variant].fontSize}; @@ -28,6 +29,7 @@ Typography.propTypes = { 'h5', 'h6', ]), + gutterBottom: PropTypes.bool, }; Typography.defaultProps = {}; diff --git a/src/components/molecules/ContentPanel.js b/src/components/molecules/ContentPanel.js deleted file mode 100644 index fb31767..0000000 --- a/src/components/molecules/ContentPanel.js +++ /dev/null @@ -1,109 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; -import { Tag } from 'components/atoms/Tag'; - -const SquarePicture = styled('img')` - height: 80px; - width: 80px; - border-radius: ${(props) => props.theme.spacing(1) + 'px'}; - background: ${(props) => props.theme.palette.action.selected}; -`; - -const PanelContainer = styled('div')` - display: flex; - height: auto; - width: 752px; - border-radius: ${(props) => props.theme.spacing(2) + 'px'}; - padding-left: ${(props) => props.theme.spacing(1) + 'px'}; - padding-right: ${(props) => props.theme.spacing(1) + 'px'}; - padding-top: ${(props) => props.theme.spacing(1) + 'px'}; - padding-bottom: ${(props) => props.theme.spacing(1) + 'px'}; - justify-content: space-around; - align-items: center; - background: ${(props) => props.theme.palette.action.hover}; -`; - -const TextContainer = styled('div')` - height: 80px; - width: 616px; - flex-direction: row; -`; - -const StyledTitle = styled('div')` - display: flex; - justify-content: flex-start; - color: ${(props) => props.theme.palette.text.primary}; - line-height: ${(props) => props.theme.typography.h6}; -`; - -const StyledLink = styled('a')` - text-decoration: none; -`; - -const TagsContainer = styled('div')` - display: flex; - justify-content: space-between; - padding-top: ${(props) => props.theme.spacing(1) + 'px'}; -`; - -const SecondLineContainer = styled('div')` - display: flex; - justify-content: space-between; -`; - -const COLOR_FACTORS = [ - { - color: 'blue', - label: 'Front-end', - tagColor: '#D8E5FB', - textColor: '#3C7EEC', - }, - { - color: 'pink', - label: 'JavaScript', - tagColor: '#FCDFD3', - textColor: '#F15D23', - }, -]; -export const ContentPanel = ({ title, link, tags }) => { - return ( - - - - {title} - - - - {tags.map((tagItem) => ( - - ))} - - - - - ); -}; - -ContentPanel.propTypes = { - title: PropTypes.string, - tags: PropTypes.arrayOf( - PropTypes.shape({ - color: PropTypes.string, - label: PropTypes.string, - tagColor: PropTypes.string, - textColor: PropTypes.string, - }) - ), -}; - -ContentPanel.defaultProps = { - title: 'HTML Academy Javascript ', - tags: COLOR_FACTORS, - link: 'https://htmlacademy.ru/courses', -}; diff --git a/src/components/molecules/CourseLink.js b/src/components/molecules/CourseLink.js new file mode 100644 index 0000000..fb845b0 --- /dev/null +++ b/src/components/molecules/CourseLink.js @@ -0,0 +1,39 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { MdOpenInNew } from 'react-icons/md'; + +const StyledAnchor = styled('a')` + margin: ${(props) => props.theme.spacing(1)}px; + display: inline-block; + position: relative; + & > svg { + opacity: 0; + position: absolute; + bottom: 0; + transition: opacity 100ms; + margin-left: 0.3em; + } + &:hover > svg { + opacity: 0.6c; + } +`; + +export const CourseLink = ({ title, link }) => { + return ( + + {title} + + + ); +}; + +CourseLink.propTypes = { + title: PropTypes.string, + link: PropTypes.string, +}; + +CourseLink.defaultProps = { + title: 'HTML Academy Javascript ', + link: 'https://htmlacademy.ru/courses', +}; diff --git a/src/components/molecules/ContentPanel.stories.js b/src/components/molecules/CourseLink.stories.js similarity index 55% rename from src/components/molecules/ContentPanel.stories.js rename to src/components/molecules/CourseLink.stories.js index 034303c..c1b7363 100644 --- a/src/components/molecules/ContentPanel.stories.js +++ b/src/components/molecules/CourseLink.stories.js @@ -1,15 +1,15 @@ import React from 'react'; -import { ContentPanel } from './ContentPanel'; +import { CourseLink } from './CourseLink'; export default { - title: 'Molecules/ContentPanel', - component: ContentPanel, + title: 'Molecules/CourseLink', + component: CourseLink, parameters: { figma: 'https://www.figma.com/file/oW95CY1Vcnb7PYICpP4By3/Gorazdo?node-id=129%3A2', }, }; -const Template = (args) => ; +const Template = (args) => ; export const Default = Template.bind({}); diff --git a/src/components/molecules/UserTop.js b/src/components/molecules/UserTop.js index 08b93c2..e2d10ba 100644 --- a/src/components/molecules/UserTop.js +++ b/src/components/molecules/UserTop.js @@ -1,31 +1,32 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import styled from 'styled-components'; - import Box from 'components/atoms/Box'; import { Avatar } from 'components/atoms/Avatar'; import { Typography } from 'components/atoms/Typography'; import { Text } from 'components/atoms/Text'; const StyledBox = styled(Box)` - padding: ${(props) => props.theme.spacing(2)}; - padding-top: ${(props) => props.theme.spacing(6)}; + padding: ${(props) => props.theme.spacing(6)}px; `; const Hgroup = styled('hgroup')` - margin-left: ${(props) => props.theme.spacing(2)}; + margin-left: ${(props) => props.theme.spacing(2)}px; `; export const UserTop = ({ doc }) => { + // useEffect(() => { + // doc.ref.update(kolyaJson); + // }, []); return (
    - +   - +
    diff --git a/src/pages/people/ContentItemMap.js b/src/pages/people/ContentItemMap.js index dd39fc6..eacab06 100644 --- a/src/pages/people/ContentItemMap.js +++ b/src/pages/people/ContentItemMap.js @@ -1,20 +1,32 @@ import React from 'react'; import { Typography } from 'components/atoms/Typography'; import { PanelArticles } from 'components/molecules/PanelArticles'; +import { Text } from 'components/atoms/Text'; +import { CourseLink } from 'components/molecules/CourseLink'; +import styled from 'styled-components'; + +const StyledSection = styled('section')` + margin-top: ${(props) => props.theme.spacing(5)}px; + margin-bottom: ${(props) => props.theme.spacing(5)}px; + padding-left: ${(props) => props.theme.spacing(6)}px; + padding-right: ${(props) => props.theme.spacing(6)}px; +`; export const ContentItemWrapper = (props) => { const { title, children, component } = props; const Component = component; return ( -
    - {title.en} + + + {title.en} + {children} -
    + ); }; ContentItemWrapper.defaultProps = { - component: 'ul', + component: 'div', }; export const ContentItemMap = (props) => { @@ -25,7 +37,7 @@ export const ContentItemMap = (props) => { {contentItem.items.map((item) => (
  • - {item.title} +
    • ))}     @@ -35,14 +47,12 @@ export const ContentItemMap = (props) => { return ( {contentItem.items.map((item) => ( -
  • - -
    • + } + colorTag={[]} + cover={item.cover ? item.cover : 'http://placekitten.com/50/50'} + alt={item.cover ? 'Cover' : 'No cover'} + /> ))}     ); diff --git a/src/pages/people/person.js b/src/pages/people/person.js index b6352a6..10a59c7 100644 --- a/src/pages/people/person.js +++ b/src/pages/people/person.js @@ -29,10 +29,11 @@ export const Person = () => {
    {value.docs.map((doc) => ( - {console.log(doc.data())} - - + + + + {doc.get('content').map((contentItem) => ( From 886526a05f411d5ef1ebcbb3994dfeb87ed67dc1 Mon Sep 17 00:00:00 2001 From: Pavel Date: Thu, 5 Nov 2020 20:08:47 +0100 Subject: [PATCH 08/14] fix errors --- src/components/molecules/CourseLink.js | 3 +- src/pages/anna_s.json | 65 +++++++++++++++----------- src/pages/people/person.js | 2 +- 3 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/components/molecules/CourseLink.js b/src/components/molecules/CourseLink.js index fb845b0..803c162 100644 --- a/src/components/molecules/CourseLink.js +++ b/src/components/molecules/CourseLink.js @@ -2,6 +2,7 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import { MdOpenInNew } from 'react-icons/md'; +import { Text } from 'components/atoms/Text'; const StyledAnchor = styled('a')` margin: ${(props) => props.theme.spacing(1)}px; @@ -22,7 +23,7 @@ const StyledAnchor = styled('a')` export const CourseLink = ({ title, link }) => { return ( - {title} + ); diff --git a/src/pages/anna_s.json b/src/pages/anna_s.json index 957b04c..b8d964e 100644 --- a/src/pages/anna_s.json +++ b/src/pages/anna_s.json @@ -1,31 +1,40 @@ { - "about": { - "en": "I’m a 27-year-old girl with a sociological degree and experience in banking analytics. - For two years I had been helping to sell bank products, hire people and prevent fraud in the best online Russian bank.", - "ru": "Лолкекчебурек" + "about": { + "en": "I’m a 27-year-old girl with a sociological degree and experience in banking analytics.\nFor two years I had been helping to sell bank products, hire people and prevent fraud in the best online Russian bank.", + "ru": "Лолкекчебурек" + }, + "content": [ + { + "items": [ + { + "title": { + "ru": "Построение аналитической платформы (Tinkoff Fintech)" + }, + "link": "https://fintech.tinkoff.ru/study/fintech/dwh/" + }, + { + "title": { "ru": "Learn Python 2 (Codeacademy)" }, + "link": "https://www.codecademy.com/learn/learn-python" + } + ], + "title": { "en": "Courses", "ru": "Курсы" }, + "type": "list-item" }, - "content": [ - { - "items": [ - { "title": {"ru": "Построение аналитической платформы (Tinkoff Fintech)"}, "link": "https://fintech.tinkoff.ru/study/fintech/dwh/"}, - { "title": {"ru": "Learn Python 2 (Codeacademy)"}, "link": "https://www.codecademy.com/learn/learn-python" } - ], - "title": { "en": "Courses", "ru": "Курсы" }, - "type": "list-item" - }, - { - "items": [ - { - "title": { "en": "Moscow State University", "ru": "МГУ им М.В.Ломоносова"} + { + "items": [ + { + "title": { + "en": "Moscow State University", + "ru": "МГУ им М.В.Ломоносова" } - ], - "title": { "en": "Education", "ru": "Образование" }, - "type": "list-item-full" - } - ], - "firstName": { "en": "Anna", "ru": "Анна" }, - "lastName": { "en": "Sitnikova", "ru": "Ситникова" }, - "name": "Anna Sitnikova", - "profession": { "en": "Data Analyst", "ru": "Аналитик данных" } - } - \ No newline at end of file + } + ], + "title": { "en": "Education", "ru": "Образование" }, + "type": "list-item-full" + } + ], + "firstName": { "en": "Anna", "ru": "Анна" }, + "lastName": { "en": "Sitnikova", "ru": "Ситникова" }, + "name": "Anna Sitnikova", + "profession": { "en": "Data Analyst", "ru": "Аналитик данных" } +} diff --git a/src/pages/people/person.js b/src/pages/people/person.js index 10a59c7..a42792f 100644 --- a/src/pages/people/person.js +++ b/src/pages/people/person.js @@ -35,7 +35,7 @@ export const Person = () => { - {doc.get('content').map((contentItem) => ( + {doc.get('content')?.map((contentItem) => ( ))} From b1ec434f529d8defa1aa64af770e6a5a8a043cc1 Mon Sep 17 00:00:00 2001 From: Pavel Date: Thu, 5 Nov 2020 20:13:38 +0100 Subject: [PATCH 09/14] fix locale if en is not presented --- src/components/atoms/Text.js | 9 ++++++++- src/components/molecules/UserTop.js | 3 ++- src/contexts/Locale.js | 1 + src/pages/anna_s.json | 2 +- 4 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/atoms/Text.js b/src/components/atoms/Text.js index d686d4f..1367833 100644 --- a/src/components/atoms/Text.js +++ b/src/components/atoms/Text.js @@ -5,7 +5,11 @@ import React, { useEffect, useLayoutEffect, } from 'react'; -import { LocaleContext, FALLBACK_LOCALE } from 'contexts/Locale'; +import { + LocaleContext, + FALLBACK_LOCALE, + FALLBACK_LOCALE_2, +} from 'contexts/Locale'; const extractLocale = (value, locale) => { if (typeof value === 'object') { @@ -15,6 +19,9 @@ const extractLocale = (value, locale) => { if (FALLBACK_LOCALE in value) { return value[FALLBACK_LOCALE]; } + if (FALLBACK_LOCALE_2 in value) { + return `[${FALLBACK_LOCALE_2}] ${value[FALLBACK_LOCALE_2]}`; + } return JSON.stringify(value); } return value; diff --git a/src/components/molecules/UserTop.js b/src/components/molecules/UserTop.js index e2d10ba..d58f77b 100644 --- a/src/components/molecules/UserTop.js +++ b/src/components/molecules/UserTop.js @@ -1,5 +1,6 @@ import React, { useEffect } from 'react'; import styled from 'styled-components'; +import anna from '../../pages/anna_s.json'; import Box from 'components/atoms/Box'; import { Avatar } from 'components/atoms/Avatar'; import { Typography } from 'components/atoms/Typography'; @@ -15,7 +16,7 @@ const Hgroup = styled('hgroup')` export const UserTop = ({ doc }) => { // useEffect(() => { - // doc.ref.update(kolyaJson); + // doc.ref.update(anna); // }, []); return ( diff --git a/src/contexts/Locale.js b/src/contexts/Locale.js index b20d81d..48842cd 100644 --- a/src/contexts/Locale.js +++ b/src/contexts/Locale.js @@ -2,6 +2,7 @@ import React, { createContext } from 'react'; import { useSessionStorageState } from 'hooks/useSessionStorageState'; export const FALLBACK_LOCALE = 'en'; +export const FALLBACK_LOCALE_2 = 'ru'; export const AVAILABLE_LOCALES = ['en', 'ru']; export const LocaleContext = createContext(null); diff --git a/src/pages/anna_s.json b/src/pages/anna_s.json index b8d964e..3c79b28 100644 --- a/src/pages/anna_s.json +++ b/src/pages/anna_s.json @@ -35,6 +35,6 @@ ], "firstName": { "en": "Anna", "ru": "Анна" }, "lastName": { "en": "Sitnikova", "ru": "Ситникова" }, - "name": "Anna Sitnikova", + "name": "AnnaSitnikova", "profession": { "en": "Data Analyst", "ru": "Аналитик данных" } } From f554ecb1ca37b15c7921e379d26aaa8108e81e44 Mon Sep 17 00:00:00 2001 From: Pichuek Date: Tue, 10 Nov 2020 20:32:26 +0300 Subject: [PATCH 10/14] fill in information about ekaterina pichugina --- src/pages/ekaterina.json | 59 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/src/pages/ekaterina.json b/src/pages/ekaterina.json index 0967ef4..4f48f83 100644 --- a/src/pages/ekaterina.json +++ b/src/pages/ekaterina.json @@ -1 +1,58 @@ -{} +{ + "about": { + "en": "", + "ru": "Последние несколько лет работаю аналитиком в бэкенде. Пришло время освоить фронт ;)" + }, + "content": [ + { + "items": [ + { + "title": { "en": "System Analyst", "ru": "Системный аналитик" } + }, + { + "title": { "en": "Data Analyst", "ru": "Аналитик данных" } + }], + "title": { "en": "Experience", "ru": "Опыт работы" }, + "type": "list-item" + }, + { + "items": [ + { + "title": { "en": "Russian Technological University (MIREA)", "ru": "Российский технологический университет (МИРЭА)"}, + "qualification": {"en": "Master’s Degree in Computer science", "ru": "Специалет по направлению 'Информационные системы и технологии'"} + } + ], + "title": { "en": "Education", "ru": "Образование" }, + "type": "list-item-full" + }, + { + "items": [ + { + "title": { "en": "Attention to details", "ru": "Внимание к деталям"} + }, + { + "title": { "en": "Perseverance", "ru": "Настойчивость"} + }, + { + "title": { "en": "Patience", "ru": "Терпение"} + } + ], + "title": { "en": "Personal qualities", "ru": "Личные качества" }, + "type": "list-item-full" + }, + {"items": [ + { "title": ""}, + { "title": ""}, + { "title": ""} + ] + , + "title": { "en": "Hard skills", "ru": "Профессиональные навыки" }, + "type": "list-item-full" + } + ], + "firstName": { "en": "Ekaterina", "ru": "Екатерина" }, + "lastName": { "en": "Pichugina", "ru": "Пичугина" }, + "name": "EkaterinaPichugina", + "profession": { "en": "Junior Front-end Developer", "ru": "Junior Front-end Разработчик" } + } + \ No newline at end of file From 0527ba527386fecf924916fbc1fad94bca21a130 Mon Sep 17 00:00:00 2001 From: Pavel Date: Tue, 10 Nov 2020 20:35:45 +0100 Subject: [PATCH 11/14] add material-ui and use new data format --- package-lock.json | 6 +- package.json | 2 +- src/components/atoms/Avatar.js | 4 +- src/components/atoms/Badge.js | 4 +- src/components/atoms/Button.js | 15 +-- src/components/atoms/Tag.js | 10 +- src/components/molecules/CourseLink.js | 2 +- src/components/molecules/PanelArticles.js | 13 +-- src/components/molecules/UserTop.js | 10 +- src/contexts/Theme.js | 13 ++- src/hooks/index.js | 22 ++-- src/pages/admin/index.js | 2 +- src/pages/people/ContentItemMap.js | 15 +-- src/pages/people/MainPortfolio.js | 117 ++++++++++++++++++++++ src/pages/people/index.js | 1 - src/pages/people/person.js | 99 +++++------------- src/styles/themes/dark.js | 4 +- src/styles/themes/light.js | 4 +- src/styles/themes/proto.js | 4 +- 19 files changed, 212 insertions(+), 135 deletions(-) create mode 100644 src/pages/people/MainPortfolio.js diff --git a/package-lock.json b/package-lock.json index 75fbc8c..21885b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13633,9 +13633,9 @@ }, "dependencies": { "@babel/runtime": { - "version": "7.11.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz", - "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==", + "version": "7.12.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", + "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", "requires": { "regenerator-runtime": "^0.13.4" } diff --git a/package.json b/package.json index 946fdaf..a8e943e 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "scripts": { "start": "run-p --race dev:firebase dev:react", "dev:firebase": "firebase serve -p 4000", - "dev:react": "set PORT=3006 && react-scripts start", + "dev:react": "set PORT=3005 && react-scripts start", "build": "react-scripts build", "predeploy": "npm run build", "deploy": "cd functions && firebase deploy --only hosting:gorazdo", diff --git a/src/components/atoms/Avatar.js b/src/components/atoms/Avatar.js index 4b0d371..7de2b25 100644 --- a/src/components/atoms/Avatar.js +++ b/src/components/atoms/Avatar.js @@ -3,8 +3,8 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; const StyledDiv = styled('div')` - width: ${(props) => props.theme.spacing(props.size)}px; - height: ${(props) => props.theme.spacing(props.size)}px; + width: ${(props) => props.theme.spacing(props.size)}; + height: ${(props) => props.theme.spacing(props.size)}; border-radius: 50%; border: 1px solid #000; background-size: cover; diff --git a/src/components/atoms/Badge.js b/src/components/atoms/Badge.js index 6989550..601ce98 100644 --- a/src/components/atoms/Badge.js +++ b/src/components/atoms/Badge.js @@ -14,8 +14,8 @@ const FONT_SIZES_DICTIONARY = { big: '18px', }; -const getHeight = (props) => SIZES_FACTORS[props.$size] * 8 + 'px'; -const getHalfHeight = (props) => SIZES_FACTORS[props.$size] * 4 + 'px'; +const getHeight = (props) => SIZES_FACTORS[props.$size] * 8; +const getHalfHeight = (props) => SIZES_FACTORS[props.$size] * 4; const BadgeBack = styled('div')` height: ${getHeight}; diff --git a/src/components/atoms/Button.js b/src/components/atoms/Button.js index 8f41bfe..8a5f33d 100644 --- a/src/components/atoms/Button.js +++ b/src/components/atoms/Button.js @@ -1,19 +1,12 @@ import React from 'react'; import styled from 'styled-components'; -const getButtonColor = (buttonThemeProperty, key = 'palette') => { - console.log(getButtonColor, buttonThemeProperty); - return (props) => { - console.log(props); - return props.theme.buttons[props[key]][buttonThemeProperty]; - }; -}; - const StyledButton = styled.button` border: 2px solid black; - padding: ${(props) => props.theme.spacing(1)} 0; + padding: ${(props) => props.theme.spacing(1, 3)}; + border-radius: ${(props) => props.theme.spacing(1)}; cursor: pointer; - background: transparent; + background: ${(props) => props.theme.palette.primary.main}; border: none; color: white; min-width: ${(props) => props.theme.spacing(4)}; @@ -33,9 +26,9 @@ const StyledButton = styled.button` props.theme.color('primary', 'main', (color) => color.lighten(0.2))}; } `; + export default StyledButton; export const Button = (props) => { - console.log(props); return ; }; diff --git a/src/components/atoms/Tag.js b/src/components/atoms/Tag.js index 668ea93..be08aae 100644 --- a/src/components/atoms/Tag.js +++ b/src/components/atoms/Tag.js @@ -7,15 +7,15 @@ import PropTypes from 'prop-types'; */ const TagBack = styled('div')` - height: ${(props) => props.theme.spacing(3) + 'px'}; - border-radius: ${(props) => props.theme.spacing(2) + 'px'}; + height: ${(props) => props.theme.spacing(3)}; + border-radius: ${(props) => props.theme.spacing(2)}; background: ${(props) => props.tagColor}; - padding-left: ${(props) => props.theme.spacing(1.5) + 'px'}; - padding-right: ${(props) => props.theme.spacing(1.5) + 'px'}; + padding-left: ${(props) => props.theme.spacing(1.5)}; + padding-right: ${(props) => props.theme.spacing(1.5)}; display: flex; justify-content: center; align-items: center; - margin-right: ${(props) => props.theme.spacing(1) + 'px'}; + margin-right: ${(props) => props.theme.spacing(1)}; `; const TagText = styled('span')` diff --git a/src/components/molecules/CourseLink.js b/src/components/molecules/CourseLink.js index 803c162..c6d4f5c 100644 --- a/src/components/molecules/CourseLink.js +++ b/src/components/molecules/CourseLink.js @@ -5,7 +5,7 @@ import { MdOpenInNew } from 'react-icons/md'; import { Text } from 'components/atoms/Text'; const StyledAnchor = styled('a')` - margin: ${(props) => props.theme.spacing(1)}px; + margin: ${(props) => props.theme.spacing(1)}; display: inline-block; position: relative; & > svg { diff --git a/src/components/molecules/PanelArticles.js b/src/components/molecules/PanelArticles.js index d4b5368..0686251 100644 --- a/src/components/molecules/PanelArticles.js +++ b/src/components/molecules/PanelArticles.js @@ -1,13 +1,12 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { Typography } from 'components/atoms/Typography'; import { Tag } from 'components/atoms/Tag'; const SquarePicture = styled('img')` height: 80px; width: 80px; - border-radius: ${(props) => props.theme.spacing(1) + 'px'}; + border-radius: ${(props) => props.theme.spacing(1)}; background: ${(props) => props.theme.palette.action.selected}; `; @@ -15,9 +14,9 @@ const PanelContainer = styled('div')` display: flex; height: 112px; width: 752px; - border-radius: ${(props) => props.theme.spacing(2) + 'px'}; - padding-left: ${(props) => props.theme.spacing(1) + 'px'}; - padding-right: ${(props) => props.theme.spacing(1) + 'px'}; + border-radius: ${(props) => props.theme.spacing(2)}; + padding-left: ${(props) => props.theme.spacing(1)}; + padding-right: ${(props) => props.theme.spacing(1)}; justify-content: space-around; align-items: center; background: ${(props) => props.theme.palette.action.hover}; @@ -39,7 +38,7 @@ const StyledTitle = styled('div')` const TagsContainer = styled('div')` display: flex; justify-content: space-between; - padding-top: ${(props) => props.theme.spacing(1) + 'px'}; + padding-top: ${(props) => props.theme.spacing(1)}; `; const Date = styled('span')` @@ -96,7 +95,6 @@ export const PanelArticles = ({ title, cover, alt, colorTag }) => { }; PanelArticles.propTypes = { - title: PropTypes.string, colorTag: PropTypes.arrayOf( PropTypes.shape({ color: PropTypes.string, @@ -108,6 +106,5 @@ PanelArticles.propTypes = { }; PanelArticles.defaultProps = { - title: 'Анонс новой версии Styled Components v5: Звериный оскал', colorTag: COLOR_FACTORS, }; diff --git a/src/components/molecules/UserTop.js b/src/components/molecules/UserTop.js index d58f77b..c9490e1 100644 --- a/src/components/molecules/UserTop.js +++ b/src/components/molecules/UserTop.js @@ -1,26 +1,26 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import styled from 'styled-components'; -import anna from '../../pages/anna_s.json'; import Box from 'components/atoms/Box'; import { Avatar } from 'components/atoms/Avatar'; import { Typography } from 'components/atoms/Typography'; import { Text } from 'components/atoms/Text'; const StyledBox = styled(Box)` - padding: ${(props) => props.theme.spacing(6)}px; + padding: ${(props) => props.theme.spacing(6)}; `; const Hgroup = styled('hgroup')` - margin-left: ${(props) => props.theme.spacing(2)}px; + margin-left: ${(props) => props.theme.spacing(2)}; `; export const UserTop = ({ doc }) => { // useEffect(() => { // doc.ref.update(anna); // }, []); + console.log(doc); return ( - +
    diff --git a/src/contexts/Theme.js b/src/contexts/Theme.js index 8a011ef..7218a6d 100644 --- a/src/contexts/Theme.js +++ b/src/contexts/Theme.js @@ -1,9 +1,13 @@ -import React, { createContext, useState } from 'react'; +import React, { createContext } from 'react'; import { ThemeProvider as StyledThemeProvider } from 'styled-components'; import dark from 'styles/themes/dark'; import light from 'styles/themes/light'; import { useSessionStorageState } from 'hooks/useSessionStorageState'; +import { + CssBaseline, + ThemeProvider as MUIThemeProvider, +} from '@material-ui/core'; const themes = { dark, light }; @@ -36,7 +40,12 @@ export const ThemeProvider = ({ children }) => { return ( - {children} + + + + {children} + + ); }; diff --git a/src/hooks/index.js b/src/hooks/index.js index edaf4af..6b82ddc 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,13 +1,5 @@ import { useEffect, useState, useReducer, useMemo } from 'react'; -const getFirebase = () => { - const isFirebaseAvailable = typeof firebase !== 'undefined'; - if (isFirebaseAvailable) { - return window.firebase; - } - return null; -}; - const getFirebaseAppInstance = () => { try { const isFirebaseAvailable = typeof firebase !== 'undefined'; @@ -18,7 +10,9 @@ const getFirebaseAppInstance = () => { } return null; } catch (error) { - console.error(error.message); + if (!error.message.includes('app/no-app')) { + console.error(error); + } return null; } }; @@ -36,7 +30,11 @@ export const useFirebaseApp = () => { const app = getFirebaseAppInstance(); const features = Array.from(app.container.providers.keys()); setFirebaseInstance(app); - console.log(`Firebase SDK loaded with ${features.join(', ')}`); + console.groupCollapsed( + `Firebase SDK loaded with ${features.length} modules` + ); + console.log(features); + console.groupEnd(); } catch (error) { console.error(error); setFirebaseInstance(null); @@ -157,3 +155,7 @@ const fetchData = async ({ aborted, dispatch, ref }) => { } } }; + +export const useCurrentUser = () => { + return useFirebase()?.auth()?.currentUser ?? null; +}; diff --git a/src/pages/admin/index.js b/src/pages/admin/index.js index 2d38e85..1555f81 100644 --- a/src/pages/admin/index.js +++ b/src/pages/admin/index.js @@ -13,7 +13,7 @@ export const Admin = () => { ); }; -export const FirebaseAuthContent = ({}) => { +export const FirebaseAuthContent = () => { const auth = window.firebase.auth; const user = window.firebase.auth().currentUser; const ref = useRef(); diff --git a/src/pages/people/ContentItemMap.js b/src/pages/people/ContentItemMap.js index eacab06..6cc9cc6 100644 --- a/src/pages/people/ContentItemMap.js +++ b/src/pages/people/ContentItemMap.js @@ -6,10 +6,10 @@ import { CourseLink } from 'components/molecules/CourseLink'; import styled from 'styled-components'; const StyledSection = styled('section')` - margin-top: ${(props) => props.theme.spacing(5)}px; - margin-bottom: ${(props) => props.theme.spacing(5)}px; - padding-left: ${(props) => props.theme.spacing(6)}px; - padding-right: ${(props) => props.theme.spacing(6)}px; + margin-top: ${(props) => props.theme.spacing(5)}; + margin-bottom: ${(props) => props.theme.spacing(5)}; + padding-left: ${(props) => props.theme.spacing(6)}; + padding-right: ${(props) => props.theme.spacing(6)}; `; export const ContentItemWrapper = (props) => { @@ -35,8 +35,8 @@ export const ContentItemMap = (props) => { if (type === 'list-item') { return ( - {contentItem.items.map((item) => ( -
  • + {contentItem.items.map((item, index) => ( +
    • ))} @@ -46,8 +46,9 @@ export const ContentItemMap = (props) => { if (type === 'list-item-full') { return ( - {contentItem.items.map((item) => ( + {contentItem.items.map((item, index) => ( } colorTag={[]} cover={item.cover ? item.cover : 'http://placekitten.com/50/50'} diff --git a/src/pages/people/MainPortfolio.js b/src/pages/people/MainPortfolio.js new file mode 100644 index 0000000..6cf1a17 --- /dev/null +++ b/src/pages/people/MainPortfolio.js @@ -0,0 +1,117 @@ +import React, { useState } from 'react'; +import { useCurrentUser, useFirestoreRef } from 'hooks'; +import { UserTop } from 'components/molecules/UserTop'; +import { ContentItemWrapper, ContentItemMap } from './ContentItemMap'; +import { + Typography, + Card, + CardContent, + InputAdornment, + List, + ListItem, + ListItemText, + ListItemSecondaryAction, +} from '@material-ui/core'; +import { Text } from 'components/atoms/Text'; +import { TextField, IconButton, Paper } from '@material-ui/core'; +import { MdSave, MdDelete } from 'react-icons/md'; +import { useCollection } from 'react-firebase-hooks/firestore'; + +export const MainPortfolio = ({ doc }) => { + const me = useCurrentUser(); + console.log({ doc, me }); + return ( + + + {doc + .get('content') + ?.map((contentItem, index) => ( + + )) ?? 'No content'} + + {me?.uid === doc.get('uid') && } + + ); +}; + +const ContentSections = ({ doc }) => { + const ref = useFirestoreRef(() => doc.ref.collection('sections')); + const [collection, loading, error] = useCollection(ref); + if (collection) { + return ( + + {collection.docs.map((doc) => ( + + } + /> + + { + doc.ref + .delete() + .then(function () { + console.log('Document successfully deleted!'); + }) + .catch(function (error) { + console.error('Error removing document: ', error); + }); + }} + > + + + + + ))} + + ); + } + return null; +}; + +const AddSection = ({ doc }) => { + const [value, setValue] = useState('Hi!'); + const handleAdd = (event) => { + event.preventDefault(); + doc.ref + .collection('sections') + .doc(value) + .set({ + title: { + en: `A section ${Math.random()}`, + ru: 'Название секции', + }, + }) + .then(function () { + console.log('Document successfully written!'); + }) + .catch(function (error) { + console.error('Error writing document: ', error); + }); + }; + + return ( + + + setValue(event.target.value)} + variant="outlined" + label="Добавить новую секцию" + InputProps={{ + endAdornment: ( + + + + + + ), + }} + /> + + + ); +}; diff --git a/src/pages/people/index.js b/src/pages/people/index.js index 0db928e..90e15c7 100644 --- a/src/pages/people/index.js +++ b/src/pages/people/index.js @@ -3,7 +3,6 @@ import { useCollection } from 'react-firebase-hooks/firestore'; import { useFirestoreRef } from 'hooks'; import { Text } from 'components/atoms/Text'; import { Link } from 'react-router-dom'; -import { useWhyDidYouUpdate } from 'hooks/useWhyDidYouUpdate'; export const People = () => { const ref = useFirestoreRef((db) => db.collection('people')); diff --git a/src/pages/people/person.js b/src/pages/people/person.js index a42792f..f47e5c0 100644 --- a/src/pages/people/person.js +++ b/src/pages/people/person.js @@ -2,13 +2,9 @@ import React from 'react'; import { useParams } from 'react-router'; import { useFirestoreRef } from 'hooks'; import { useCollection } from 'react-firebase-hooks/firestore'; -import Box from 'components/atoms/Box'; import styled from 'styled-components'; -import { LinkIcon } from 'components/atoms/LinkIcon'; -import { UserTop } from 'components/molecules/UserTop'; -import { Text } from 'components/atoms/Text'; -import { Typography } from 'components/atoms/Typography'; -import { ContentItemMap, ContentItemWrapper } from './ContentItemMap'; +import { MainPortfolio } from './MainPortfolio'; +import { Typography } from '@material-ui/core'; export const Person = () => { const { name } = useParams(); @@ -16,75 +12,34 @@ export const Person = () => { const ref = useFirestoreRef((db) => db.collection('people').where('name', '==', name) ); - const [value, loading, error] = useCollection(ref); - + const [collection, loading, error] = useCollection(ref); + console.log(collection); return ( - - -
    - {error && Error: {JSON.stringify(error)}} - {loading && Collection: Loading...} - {value && value.docs.length === 0 && Collection: Empty...} - {value && ( -
    - {value.docs.map((doc) => ( - - - - - - - - {doc.get('content')?.map((contentItem) => ( - - ))} - - ))} -
    - )} -
    -     + // + // +
    + {error && Error: {JSON.stringify(error)}} + {loading && Collection: Loading...} + {collection && collection.docs.length === 0 && ( + User 404 not found + )} + {collection && ( +
    + {collection.docs.map((doc) => ( + + + + ))} +
    + )} +
    + //     ); }; -const rendererLambda = (item) => ( - -); - -const data = [ - { - id: '123', - name: 'Game marketplace', - href: 'https://gm-trade.ru', - }, - { - id: 'asd', - name: 'Miro contest', - href: 'https://miro.com', - }, -]; - -const HightlightItem = (props) => ( - -

    {props.name}

    - -     -); - -const HighlightContainer = styled('div')` - width: 336px; - height: 216px; - border-radius: 32px; - padding: 24px 40px; - margin-right: 24px; - background: #ccc; - display: flex; - flex-direction: column; - justify-content: space-between; -`; - -const HighlightsContainer = styled('div')` - display: flex; +const StyledGrid = styled('div')` + display: grid; + grid-template-columns: ${(props) => props.theme.spacing(50)} auto; `; const StyledBackground = styled('div')` @@ -92,8 +47,6 @@ const StyledBackground = styled('div')` border-top-right-radius: ${(props) => props.theme.spacing(6)}; border-bottom-right-radius: ${(props) => props.theme.spacing(6)}; min-height: 40vh; - width: 40%; - flex-shrink: 0; margin-right: ${(props) => props.theme.spacing(5)}; margin-top: ${(props) => props.theme.spacing(3)}; `; diff --git a/src/styles/themes/dark.js b/src/styles/themes/dark.js index cb5b532..924b8b5 100644 --- a/src/styles/themes/dark.js +++ b/src/styles/themes/dark.js @@ -1,7 +1,9 @@ import { color } from '../color'; -import { createMuiTheme } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; +import protoTheme from './proto'; const dark = createMuiTheme({ + ...protoTheme, name: 'dark', type: 'dark', palette: { diff --git a/src/styles/themes/light.js b/src/styles/themes/light.js index 40f83be..c8106f4 100644 --- a/src/styles/themes/light.js +++ b/src/styles/themes/light.js @@ -1,7 +1,9 @@ import { color } from '../color'; -import { createMuiTheme } from '@material-ui/core'; +import { createMuiTheme } from '@material-ui/core/styles'; +import protoTheme from './proto'; const light = createMuiTheme({ + ...protoTheme, name: 'light', type: 'light', palette: { diff --git a/src/styles/themes/proto.js b/src/styles/themes/proto.js index 986680c..062e9ad 100644 --- a/src/styles/themes/proto.js +++ b/src/styles/themes/proto.js @@ -1,5 +1,7 @@ import { createMuiTheme } from '@material-ui/core/styles'; -const MuiTheme = createMuiTheme(); +const MuiTheme = createMuiTheme({ + spacing: (gridSize) => gridSize * 8 + 'px', +}); export default MuiTheme; From 82e596e5c352c468de65ad9dff7e49f5de54e895 Mon Sep 17 00:00:00 2001 From: Pavel Date: Wed, 25 Nov 2020 18:36:57 +0100 Subject: [PATCH 12/14] refactoring --- src/pages/people/AddContent.js | 48 ++++++++++++++++++++++++++ src/pages/people/MainPortfolio.js | 56 +++---------------------------- 2 files changed, 53 insertions(+), 51 deletions(-) create mode 100644 src/pages/people/AddContent.js diff --git a/src/pages/people/AddContent.js b/src/pages/people/AddContent.js new file mode 100644 index 0000000..da452e8 --- /dev/null +++ b/src/pages/people/AddContent.js @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { Card, CardContent, InputAdornment } from '@material-ui/core'; +import { TextField, IconButton } from '@material-ui/core'; +import { MdSave } from 'react-icons/md'; + +export const AddSection = ({ doc }) => { + const [value, setValue] = useState('Hi!'); + const handleAdd = (event) => { + event.preventDefault(); + doc.ref + .collection('sections') + .doc(value) + .set({ + title: { + en: `A section ${Math.random()}`, + ru: 'Название секции', + }, + }) + .then(function () { + console.log('Document successfully written!'); + }) + .catch(function (error) { + console.error('Error writing document: ', error); + }); + }; + + return ( + + + setValue(event.target.value)} + variant="outlined" + label="Добавить новую секцию" + InputProps={{ + endAdornment: ( + + + + + + ), + }} + /> + + + ); +}; diff --git a/src/pages/people/MainPortfolio.js b/src/pages/people/MainPortfolio.js index 6cf1a17..15c8693 100644 --- a/src/pages/people/MainPortfolio.js +++ b/src/pages/people/MainPortfolio.js @@ -1,21 +1,19 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useCurrentUser, useFirestoreRef } from 'hooks'; import { UserTop } from 'components/molecules/UserTop'; -import { ContentItemWrapper, ContentItemMap } from './ContentItemMap'; +import { ContentItemMap } from './ContentItemMap'; import { - Typography, - Card, CardContent, - InputAdornment, List, ListItem, ListItemText, ListItemSecondaryAction, } from '@material-ui/core'; import { Text } from 'components/atoms/Text'; -import { TextField, IconButton, Paper } from '@material-ui/core'; -import { MdSave, MdDelete } from 'react-icons/md'; +import { IconButton } from '@material-ui/core'; +import { MdDelete } from 'react-icons/md'; import { useCollection } from 'react-firebase-hooks/firestore'; +import { AddSection } from './AddContent'; export const MainPortfolio = ({ doc }) => { const me = useCurrentUser(); @@ -71,47 +69,3 @@ const ContentSections = ({ doc }) => { } return null; }; - -const AddSection = ({ doc }) => { - const [value, setValue] = useState('Hi!'); - const handleAdd = (event) => { - event.preventDefault(); - doc.ref - .collection('sections') - .doc(value) - .set({ - title: { - en: `A section ${Math.random()}`, - ru: 'Название секции', - }, - }) - .then(function () { - console.log('Document successfully written!'); - }) - .catch(function (error) { - console.error('Error writing document: ', error); - }); - }; - - return ( - - - setValue(event.target.value)} - variant="outlined" - label="Добавить новую секцию" - InputProps={{ - endAdornment: ( - - - - - - ), - }} - /> - - - ); -}; From 36db28ba6e8e18a6f477c0941ffece0a71274f9b Mon Sep 17 00:00:00 2001 From: Pavel Date: Wed, 25 Nov 2020 19:57:22 +0100 Subject: [PATCH 13/14] implement items and refactoring --- src/pages/people/AddItemDrawer.js | 80 +++++++++++++++++++ .../people/{AddContent.js => AddSection.js} | 7 +- src/pages/people/ContentSections.js | 31 +++++++ src/pages/people/DeleteDocumentButton.js | 30 +++++++ src/pages/people/MainPortfolio.js | 58 ++------------ src/pages/people/Section.js | 33 ++++++++ src/pages/people/SectionContent.js | 19 +++++ 7 files changed, 202 insertions(+), 56 deletions(-) create mode 100644 src/pages/people/AddItemDrawer.js rename src/pages/people/{AddContent.js => AddSection.js} (90%) create mode 100644 src/pages/people/ContentSections.js create mode 100644 src/pages/people/DeleteDocumentButton.js create mode 100644 src/pages/people/Section.js create mode 100644 src/pages/people/SectionContent.js diff --git a/src/pages/people/AddItemDrawer.js b/src/pages/people/AddItemDrawer.js new file mode 100644 index 0000000..238ac66 --- /dev/null +++ b/src/pages/people/AddItemDrawer.js @@ -0,0 +1,80 @@ +import React, { useState } from 'react'; +import { + CardContent, + Typography, + Button, + Drawer, + Card, + TextField, + FormGroup, +} from '@material-ui/core'; + +import { useCurrentUser } from 'hooks'; +export const AddItemDrawer = ({ userDoc, doc }) => { + const [open, setOpen] = useState(false); + const me = useCurrentUser(); + const isMine = me?.uid === userDoc.get('uid'); + + const handleAdd = (event) => { + event.preventDefault(); + doc.ref + .collection('sections') + .doc() + .set({ + title: { + en: 'en', + ru: 'ru', + }, + }) + .then(function () { + console.log('Document successfully written!'); + }) + .catch(function (error) { + console.error('Error writing document: ', error); + }); + }; + + if (!isMine) { + return null; + } + return ( + <> + + setOpen(false)}> + + Edit section + {doc.id} + + + + + + + + + + + + + ); +}; diff --git a/src/pages/people/AddContent.js b/src/pages/people/AddSection.js similarity index 90% rename from src/pages/people/AddContent.js rename to src/pages/people/AddSection.js index da452e8..196cbb2 100644 --- a/src/pages/people/AddContent.js +++ b/src/pages/people/AddSection.js @@ -9,11 +9,11 @@ export const AddSection = ({ doc }) => { event.preventDefault(); doc.ref .collection('sections') - .doc(value) + .doc() .set({ title: { - en: `A section ${Math.random()}`, - ru: 'Название секции', + en: value, + ru: `ru: ${value}`, }, }) .then(function () { @@ -32,6 +32,7 @@ export const AddSection = ({ doc }) => { onChange={(event) => setValue(event.target.value)} variant="outlined" label="Добавить новую секцию" + helperText="Ввести название секции" InputProps={{ endAdornment: ( diff --git a/src/pages/people/ContentSections.js b/src/pages/people/ContentSections.js new file mode 100644 index 0000000..9e1f330 --- /dev/null +++ b/src/pages/people/ContentSections.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { useCurrentUser, useFirestoreRef } from 'hooks'; +import { + List, + ListItem, + ListItemText, + ListItemSecondaryAction, + Typography, +} from '@material-ui/core'; +import { Text } from 'components/atoms/Text'; +import { IconButton } from '@material-ui/core'; +import { MdDelete } from 'react-icons/md'; +import { useCollection } from 'react-firebase-hooks/firestore'; +import { DeleteDocumentButton } from './DeleteDocumentButton'; +import { Section } from './Section'; + +export const ContentSections = ({ userDoc }) => { + const me = useCurrentUser(); + const ref = useFirestoreRef(() => userDoc.ref.collection('sections')); + const [collection, loading, error] = useCollection(ref); + if (collection) { + return ( + + {collection.docs.map((doc) => ( +
    + ))} + + ); + } + return null; +}; diff --git a/src/pages/people/DeleteDocumentButton.js b/src/pages/people/DeleteDocumentButton.js new file mode 100644 index 0000000..56ab3cc --- /dev/null +++ b/src/pages/people/DeleteDocumentButton.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { useCurrentUser } from 'hooks'; +import { IconButton } from '@material-ui/core'; +import { MdDelete } from 'react-icons/md'; + +export const DeleteDocumentButton = ({ userDoc, targetDoc }) => { + const me = useCurrentUser(); + if (me?.uid !== userDoc.get('uid')) { + return null; + } + + return ( + { + targetDoc.ref + .delete() + .then(function () { + console.log('Document successfully deleted!'); + }) + .catch(function (error) { + console.error('Error removing document: ', error); + }); + }} + > + + + ); +}; diff --git a/src/pages/people/MainPortfolio.js b/src/pages/people/MainPortfolio.js index 15c8693..cfefd9f 100644 --- a/src/pages/people/MainPortfolio.js +++ b/src/pages/people/MainPortfolio.js @@ -1,23 +1,13 @@ import React from 'react'; -import { useCurrentUser, useFirestoreRef } from 'hooks'; +import { useCurrentUser } from 'hooks'; import { UserTop } from 'components/molecules/UserTop'; import { ContentItemMap } from './ContentItemMap'; -import { - CardContent, - List, - ListItem, - ListItemText, - ListItemSecondaryAction, -} from '@material-ui/core'; -import { Text } from 'components/atoms/Text'; -import { IconButton } from '@material-ui/core'; -import { MdDelete } from 'react-icons/md'; -import { useCollection } from 'react-firebase-hooks/firestore'; -import { AddSection } from './AddContent'; +import { CardContent } from '@material-ui/core'; +import { AddSection } from './AddSection'; +import { ContentSections } from './ContentSections'; export const MainPortfolio = ({ doc }) => { const me = useCurrentUser(); - console.log({ doc, me }); return ( @@ -26,46 +16,8 @@ export const MainPortfolio = ({ doc }) => { ?.map((contentItem, index) => ( )) ?? 'No content'} - + {me?.uid === doc.get('uid') && } ); }; - -const ContentSections = ({ doc }) => { - const ref = useFirestoreRef(() => doc.ref.collection('sections')); - const [collection, loading, error] = useCollection(ref); - if (collection) { - return ( - - {collection.docs.map((doc) => ( - - } - /> - - { - doc.ref - .delete() - .then(function () { - console.log('Document successfully deleted!'); - }) - .catch(function (error) { - console.error('Error removing document: ', error); - }); - }} - > - - - - - ))} - - ); - } - return null; -}; diff --git a/src/pages/people/Section.js b/src/pages/people/Section.js new file mode 100644 index 0000000..8493a19 --- /dev/null +++ b/src/pages/people/Section.js @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import { + Card, + CardContent, + Typography, + Divider, + Button, + Drawer, +} from '@material-ui/core'; +import { Text } from 'components/atoms/Text'; +import { DeleteDocumentButton } from './DeleteDocumentButton'; +import { SectionContent } from './SectionContent'; +import { AddItemDrawer } from './AddItemDrawer'; + +export const Section = ({ doc, userDoc }) => { + return ( + <> + + + + + + + + + + +
    + +
    + + ); +}; diff --git a/src/pages/people/SectionContent.js b/src/pages/people/SectionContent.js new file mode 100644 index 0000000..ac6af59 --- /dev/null +++ b/src/pages/people/SectionContent.js @@ -0,0 +1,19 @@ +import { useFirestoreRef } from 'hooks'; +import { useCollection } from 'react-firebase-hooks/firestore'; + +export const SectionContent = ({ doc, userDoc }) => { + const ref = useFirestoreRef(() => doc.ref.collection('items')); + const [collection, loading, error] = useCollection(ref); + console.log({ collection, loading, error }); + + if (loading) { + return 'loading'; + } + if (error) { + return error.message; + } + if (collection.empty) { + return 'no data'; + } + return `Element count is ${collection.docs.length}`; +}; From 69f16e24b39cf1d8f9c523b8a3dea77d2f7cd6e4 Mon Sep 17 00:00:00 2001 From: Pavel Date: Thu, 26 Nov 2020 19:56:16 +0100 Subject: [PATCH 14/14] add everything here and prepare for home work --- src/components/molecules/UserTop.js | 2 +- src/pages/people/AddItemDrawer.js | 169 ++++++++++++++++++++++---- src/pages/people/ContentSections.js | 17 +-- src/pages/people/Section.js | 11 +- src/pages/people/SectionContent.js | 1 - src/pages/people/person.js | 19 --- src/pages/people/utils/postProcess.js | 31 +++++ 7 files changed, 179 insertions(+), 71 deletions(-) create mode 100644 src/pages/people/utils/postProcess.js diff --git a/src/components/molecules/UserTop.js b/src/components/molecules/UserTop.js index c9490e1..e6d9bef 100644 --- a/src/components/molecules/UserTop.js +++ b/src/components/molecules/UserTop.js @@ -17,7 +17,7 @@ export const UserTop = ({ doc }) => { // useEffect(() => { // doc.ref.update(anna); // }, []); - console.log(doc); + console.log({ userDocument: doc }); return ( diff --git a/src/pages/people/AddItemDrawer.js b/src/pages/people/AddItemDrawer.js index 238ac66..e9264c8 100644 --- a/src/pages/people/AddItemDrawer.js +++ b/src/pages/people/AddItemDrawer.js @@ -4,27 +4,49 @@ import { Typography, Button, Drawer, - Card, TextField, FormGroup, + MenuItem, } from '@material-ui/core'; import { useCurrentUser } from 'hooks'; +import { postProcess } from './utils/postProcess'; + +const FORM_FIELDS_DICTIONARY = { + jobs: ['title', 'subtitle', 'cover', 'dateStart', 'dateEnd', 'description'], + education: [ + 'title', + 'subtitle', + 'cover', + 'dateStart', + 'dateEnd', + 'description', + ], + about: ['title', 'description'], + courses: ['title', 'subtitle', 'cover', 'description', 'dateEnd'], +}; + +// Anna Cover, Description +// Kolya поле для Tags (array) https://material-ui.com/components/autocomplete/ freeSolo creatable +// Katya зарендерить внутри секции эти items (используем готовые компоненты) + export const AddItemDrawer = ({ userDoc, doc }) => { + const [type, setType] = useState('jobs'); const [open, setOpen] = useState(false); const me = useCurrentUser(); const isMine = me?.uid === userDoc.get('uid'); + const [formData, setFormData] = useState({}); + const handleAdd = (event) => { event.preventDefault(); + console.log('test'); doc.ref - .collection('sections') + .collection('items') .doc() .set({ - title: { - en: 'en', - ru: 'ru', - }, + type: type, + ...postProcess(formData), }) .then(function () { console.log('Document successfully written!'); @@ -45,32 +67,36 @@ export const AddItemDrawer = ({ userDoc, doc }) => { Edit section {doc.id} - - - - - + + setType(event.target.value)} + select helperText="Название объекта item" + > + {Object.keys(FORM_FIELDS_DICTIONARY).map((key) => ( + + {key} + + ))} + + + @@ -78,3 +104,92 @@ export const AddItemDrawer = ({ userDoc, doc }) => { ); }; + +const Fields = ({ type, formData, setFormData }) => { + console.log(formData); + console.log(FORM_FIELDS_DICTIONARY[type]); + return FORM_FIELDS_DICTIONARY[type].map((fieldName) => ( + + )); +}; + +const Field = ({ name, formData, setFormData }) => { + if (name === 'title') { + return ( + { + setFormData({ ...formData, title: event.target.value }); + }} + variant="outlined" + label="Заголовок" + helperText="Название объекта item" + /> + ); + } + + if (name === 'subtitle') { + return ( + { + setFormData({ ...formData, subtitle: event.target.value }); + }} + label="Подзаголовок" + helperText="Название объекта item" + /> + ); + } + + if (name === 'dateStart') { + return ( + { + setFormData({ ...formData, dateStart: event.target.value }); + }} + label="Дата" + type="date" + helperText="Название объекта item" + /> + ); + } + + if (name === 'dateEnd') { + return ( + { + setFormData({ ...formData, dateEnd: event.target.value }); + }} + label="Дата" + type="date" + helperText="Название объекта item" + /> + ); + } + + return ( + + ); +}; diff --git a/src/pages/people/ContentSections.js b/src/pages/people/ContentSections.js index 9e1f330..bb1a386 100644 --- a/src/pages/people/ContentSections.js +++ b/src/pages/people/ContentSections.js @@ -1,23 +1,12 @@ import React from 'react'; -import { useCurrentUser, useFirestoreRef } from 'hooks'; -import { - List, - ListItem, - ListItemText, - ListItemSecondaryAction, - Typography, -} from '@material-ui/core'; -import { Text } from 'components/atoms/Text'; -import { IconButton } from '@material-ui/core'; -import { MdDelete } from 'react-icons/md'; +import { useFirestoreRef } from 'hooks'; +import { List } from '@material-ui/core'; import { useCollection } from 'react-firebase-hooks/firestore'; -import { DeleteDocumentButton } from './DeleteDocumentButton'; import { Section } from './Section'; export const ContentSections = ({ userDoc }) => { - const me = useCurrentUser(); const ref = useFirestoreRef(() => userDoc.ref.collection('sections')); - const [collection, loading, error] = useCollection(ref); + const [collection] = useCollection(ref); if (collection) { return ( diff --git a/src/pages/people/Section.js b/src/pages/people/Section.js index 8493a19..6a89289 100644 --- a/src/pages/people/Section.js +++ b/src/pages/people/Section.js @@ -1,12 +1,5 @@ -import React, { useState } from 'react'; -import { - Card, - CardContent, - Typography, - Divider, - Button, - Drawer, -} from '@material-ui/core'; +import React from 'react'; +import { Card, CardContent, Typography, Divider } from '@material-ui/core'; import { Text } from 'components/atoms/Text'; import { DeleteDocumentButton } from './DeleteDocumentButton'; import { SectionContent } from './SectionContent'; diff --git a/src/pages/people/SectionContent.js b/src/pages/people/SectionContent.js index ac6af59..65d66d9 100644 --- a/src/pages/people/SectionContent.js +++ b/src/pages/people/SectionContent.js @@ -4,7 +4,6 @@ import { useCollection } from 'react-firebase-hooks/firestore'; export const SectionContent = ({ doc, userDoc }) => { const ref = useFirestoreRef(() => doc.ref.collection('items')); const [collection, loading, error] = useCollection(ref); - console.log({ collection, loading, error }); if (loading) { return 'loading'; diff --git a/src/pages/people/person.js b/src/pages/people/person.js index f47e5c0..bb57115 100644 --- a/src/pages/people/person.js +++ b/src/pages/people/person.js @@ -2,7 +2,6 @@ import React from 'react'; import { useParams } from 'react-router'; import { useFirestoreRef } from 'hooks'; import { useCollection } from 'react-firebase-hooks/firestore'; -import styled from 'styled-components'; import { MainPortfolio } from './MainPortfolio'; import { Typography } from '@material-ui/core'; @@ -13,10 +12,7 @@ export const Person = () => { db.collection('people').where('name', '==', name) ); const [collection, loading, error] = useCollection(ref); - console.log(collection); return ( - // - //
    {error && Error: {JSON.stringify(error)}} {loading && Collection: Loading...} @@ -33,20 +29,5 @@ export const Person = () => {
    )} - // ); }; - -const StyledGrid = styled('div')` - display: grid; - grid-template-columns: ${(props) => props.theme.spacing(50)} auto; -`; - -const StyledBackground = styled('div')` - background-color: #5f75ee; - border-top-right-radius: ${(props) => props.theme.spacing(6)}; - border-bottom-right-radius: ${(props) => props.theme.spacing(6)}; - min-height: 40vh; - margin-right: ${(props) => props.theme.spacing(5)}; - margin-top: ${(props) => props.theme.spacing(3)}; -`; diff --git a/src/pages/people/utils/postProcess.js b/src/pages/people/utils/postProcess.js new file mode 100644 index 0000000..57b7249 --- /dev/null +++ b/src/pages/people/utils/postProcess.js @@ -0,0 +1,31 @@ +export const postProcessNullify = (formData) => { + // { a: 1, b: 2 } => [['a', 1], ['b', 2]] + const processedEntries = Object.entries(formData).map((pair) => { + const [key, value] = pair; + if (value === '') { + console.log('Поле', key, 'было заменено на', null); + return [key, null]; + } + return pair; + }); + + // [['a', 1], ['b', 2]] => { a: 1, b: 2 } + return Object.fromEntries(processedEntries); +}; + +export const postProcess = (formData) => { + // { a: 1, b: 2 }, => [['a', 1], ['b', 2]] + + const processedEntries = Object.entries(formData).filter((pair) => { + const [key, value] = pair; + if (value === '' || value === undefined) { + console.log( + `Поле ${key} не было сохранено на сервере из-за значения:`, + JSON.stringify(value) + ); + return false; + } + return true; + }); + return Object.fromEntries(processedEntries); +};