From c0dd5cf6aed9acb4bdf011a5b7862e8c4e756ef3 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 14:26:09 +0300 Subject: [PATCH 01/13] move footer props to config --- src/components/App/AppFooter.tsx | 20 ++++++++++++ src/components/App/index.tsx | 52 +++++++++++++++++--------------- src/config.ts | 5 +++ src/context/ConfigContext.ts | 4 +++ 4 files changed, 56 insertions(+), 25 deletions(-) create mode 100644 src/components/App/AppFooter.tsx create mode 100644 src/config.ts create mode 100644 src/context/ConfigContext.ts diff --git a/src/components/App/AppFooter.tsx b/src/components/App/AppFooter.tsx new file mode 100644 index 00000000..ef9eeeae --- /dev/null +++ b/src/components/App/AppFooter.tsx @@ -0,0 +1,20 @@ +import { Footer } from '../Footer' +import { useContext } from 'react' +import { ConfigContext } from 'src/context/ConfigContext' + +export type AppFooterProps = { + showAuthor: boolean +} + +export const AppFooter: React.FC = props => { + const config = useContext(ConfigContext) + + return ( +
+ ) +} diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx index ba10f674..cb4080c9 100644 --- a/src/components/App/index.tsx +++ b/src/components/App/index.tsx @@ -1,10 +1,13 @@ import dynamic from 'next/dynamic' import cx from 'classnames' -import { Footer } from '../Footer' import Comments from '../Comments' import { useReducedMotion } from 'src/hooks/useReducedMotion' import { Wrapper } from '../Wrapper' import { Header } from './Header' +import { ConfigContext } from 'src/context/ConfigContext' +import config from 'src/config' +import { AppFooter } from './AppFooter' + const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), { ssr: false, }) @@ -20,31 +23,30 @@ export const App: React.FC = props => { const motionDisabled = useReducedMotion() return ( - - + + + + )} + footer={( + - - )} - footer={( -
- )} - > -
- {props.children} -
+ )} + > +
+ {props.children} +
- - + + + ) } diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 00000000..7e9d4a15 --- /dev/null +++ b/src/config.ts @@ -0,0 +1,5 @@ +export default { + address: "г. Шлиссельбург ул. 18 января д. 3", + telephone: "+7 (81362) 76-312", + email: "hudozka@gmail.com", +} diff --git a/src/context/ConfigContext.ts b/src/context/ConfigContext.ts new file mode 100644 index 00000000..cd30ca28 --- /dev/null +++ b/src/context/ConfigContext.ts @@ -0,0 +1,4 @@ +import { createContext } from 'react' +import config from 'src/config' + +export const ConfigContext = createContext(config) From 5b19a6a359887515bf65b5a79b7a2795cf972f45 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 14:31:27 +0300 Subject: [PATCH 02/13] Copyright component extraction --- pages/_error.tsx | 3 ++- src/components/Copyright/index.tsx | 10 ++++++++++ src/components/Footer/index.tsx | 12 ++---------- src/config.ts | 4 ++++ 4 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 src/components/Copyright/index.tsx diff --git a/pages/_error.tsx b/pages/_error.tsx index c541d7ca..dff192bb 100644 --- a/pages/_error.tsx +++ b/pages/_error.tsx @@ -1,6 +1,7 @@ import { NextPage } from 'next' import { Wrapper } from 'src/components/Wrapper' import { NotFound } from 'src/components/NotFound' +import { Copyright } from 'src/components/Copyright' const Page: NextPage = () => ( ( footer={(
- © 2012—2019 Шлиссельбургская детская художественная школа +
)} diff --git a/src/components/Copyright/index.tsx b/src/components/Copyright/index.tsx new file mode 100644 index 00000000..a5e523ed --- /dev/null +++ b/src/components/Copyright/index.tsx @@ -0,0 +1,10 @@ +import { useContext } from 'react' +import { ConfigContext } from 'src/context/ConfigContext' + +export const Copyright: React.FC = () => { + const { yearStart, yearEnd } = useContext(ConfigContext) + + return ( + © {yearStart}—{yearEnd} Шлиссельбургская детская художественная школа + ) +} diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index a3e69d0a..f8fbe559 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,7 +1,6 @@ -import * as React from 'react' +import { Copyright } from '../Copyright' const mailto = email => `mailto:${email}` -const currentYear = () => (new Date()).getFullYear() export interface IFooterProps { address: string @@ -24,10 +23,7 @@ export const Footer: React.FC = props => (
- + {!props.showAuthor ? null : ( )} @@ -43,7 +39,3 @@ const Author = () => ( ) - -const Copyright = ({ yearStart, yearEnd }) => ( - © {yearStart}—{yearEnd} Шлиссельбургская детская художественная школа -) diff --git a/src/config.ts b/src/config.ts index 7e9d4a15..c3b3c1f2 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,5 +1,9 @@ +const currentYear = () => (new Date()).getFullYear() + export default { address: "г. Шлиссельбург ул. 18 января д. 3", telephone: "+7 (81362) 76-312", email: "hudozka@gmail.com", + yearStart: 2012, + yearEnd: currentYear(), } From add6b15265b42d5885a95b695f0d35ef4a3a76a3 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 14:32:50 +0300 Subject: [PATCH 03/13] Author component extraction --- src/components/Footer/Author.tsx | 8 ++++++++ src/components/Footer/index.tsx | 9 +-------- 2 files changed, 9 insertions(+), 8 deletions(-) create mode 100644 src/components/Footer/Author.tsx diff --git a/src/components/Footer/Author.tsx b/src/components/Footer/Author.tsx new file mode 100644 index 00000000..d1c2ab27 --- /dev/null +++ b/src/components/Footer/Author.tsx @@ -0,0 +1,8 @@ +export const Author: React.FC = () => ( + + Разработка и поддержка сайта — + + www.tmshv.ru + + +) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index f8fbe559..2f7df176 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,4 +1,5 @@ import { Copyright } from '../Copyright' +import { Author } from './Author' const mailto = email => `mailto:${email}` @@ -31,11 +32,3 @@ export const Footer: React.FC = props => (
) -const Author = () => ( - - Разработка и поддержка сайта — - - www.tmshv.ru - - -) From 19b54c56e46995b628872cbc099cc51301605bd7 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 14:34:43 +0300 Subject: [PATCH 04/13] footer-info selector removed --- src/style/footer.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/style/footer.scss b/src/style/footer.scss index 156b9aaf..ed042cf0 100644 --- a/src/style/footer.scss +++ b/src/style/footer.scss @@ -2,15 +2,6 @@ footer { padding: 0 var(--half-margin) var(--half-margin); position: relative; - .footer-info { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - - padding: var(--double-margin) var(--single-margin) 0; - margin-bottom: var(--double-margin); - } - .contacts { margin: var(--double-margin) 0 var(--half-margin); From 01eaffaf1426f6e0dcb6411efab8b9f0b3da315f Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 14:53:36 +0300 Subject: [PATCH 05/13] add Block component; copyright refactoring --- pages/_error.tsx | 9 ++++++--- src/components/Block/index.tsx | 29 +++++++++++++++++++++++++++++ src/components/Footer/index.tsx | 15 +++++++++++---- src/style/footer.scss | 20 -------------------- 4 files changed, 46 insertions(+), 27 deletions(-) create mode 100644 src/components/Block/index.tsx diff --git a/pages/_error.tsx b/pages/_error.tsx index dff192bb..a8f132fd 100644 --- a/pages/_error.tsx +++ b/pages/_error.tsx @@ -2,15 +2,18 @@ import { NextPage } from 'next' import { Wrapper } from 'src/components/Wrapper' import { NotFound } from 'src/components/NotFound' import { Copyright } from 'src/components/Copyright' +import { Block, Spacer } from 'src/components/Block' const Page: NextPage = () => ( -
+
+ + -
+ +
)} > diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx new file mode 100644 index 00000000..a6888a9b --- /dev/null +++ b/src/components/Block/index.tsx @@ -0,0 +1,29 @@ +import { createElement } from 'react' + +export type BlockProps = { + style?: React.CSSProperties + direction: 'horizontal' | 'vertical' +} + +export const Block: React.FC = props => { + return ( +
+ + + {props.children} +
+ ) +} + +export const Spacer: React.FC<{ as?: string }> = ({ as = 'div' }) => createElement(as, { + style: { + flex: 1, + } +}) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 2f7df176..092c4607 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,5 +1,6 @@ import { Copyright } from '../Copyright' import { Author } from './Author' +import { Block, Spacer } from '../Block' const mailto = email => `mailto:${email}` @@ -23,12 +24,18 @@ export const Footer: React.FC = props => ( -
+ + {!props.showAuthor ? null : ( - + <> + + + )} -
- + + ) diff --git a/src/style/footer.scss b/src/style/footer.scss index ed042cf0..c33dcbbb 100644 --- a/src/style/footer.scss +++ b/src/style/footer.scss @@ -14,24 +14,4 @@ footer { } } - .copyright { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-between; - - span { - padding: 1.5em 1em 0.25em; - box-sizing: padding-box; - } - } - - &.footer--centered { - .copyright { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: center; - } - } } \ No newline at end of file From d0a11deae8cd0e8cdd3c290fbb2baf789478cd9c Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 14:56:53 +0300 Subject: [PATCH 06/13] Spacer typings improved; moved to separate component --- pages/_error.tsx | 3 ++- src/components/Block/index.tsx | 8 -------- src/components/Footer/index.tsx | 5 +++-- src/components/Spacer/index.tsx | 11 +++++++++++ 4 files changed, 16 insertions(+), 11 deletions(-) create mode 100644 src/components/Spacer/index.tsx diff --git a/pages/_error.tsx b/pages/_error.tsx index a8f132fd..8b4bab7b 100644 --- a/pages/_error.tsx +++ b/pages/_error.tsx @@ -2,7 +2,8 @@ import { NextPage } from 'next' import { Wrapper } from 'src/components/Wrapper' import { NotFound } from 'src/components/NotFound' import { Copyright } from 'src/components/Copyright' -import { Block, Spacer } from 'src/components/Block' +import { Block } from 'src/components/Block' +import { Spacer } from 'src/components/Spacer' const Page: NextPage = () => ( = props => { ) } - -export const Spacer: React.FC<{ as?: string }> = ({ as = 'div' }) => createElement(as, { - style: { - flex: 1, - } -}) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 092c4607..fafcd0c5 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,6 +1,7 @@ import { Copyright } from '../Copyright' import { Author } from './Author' -import { Block, Spacer } from '../Block' +import { Block } from '../Block' +import { Spacer } from '../Spacer' const mailto = email => `mailto:${email}` @@ -31,7 +32,7 @@ export const Footer: React.FC = props => ( {!props.showAuthor ? null : ( <> - + )} diff --git a/src/components/Spacer/index.tsx b/src/components/Spacer/index.tsx new file mode 100644 index 00000000..d3ad0109 --- /dev/null +++ b/src/components/Spacer/index.tsx @@ -0,0 +1,11 @@ +import { createElement } from 'react' + +export type SpacerProps = { + as?: keyof HTMLElementTagNameMap +} + +export const Spacer: React.FC = ({ as = 'div' }) => createElement(as, { + style: { + flex: 1, + } +}) From 48f7e971c90b41d603d9e938317313cf4010bc81 Mon Sep 17 00:00:00 2001 From: Roman Timashev Date: Tue, 18 Feb 2020 15:36:20 +0300 Subject: [PATCH 07/13] footer / block / contacts refactoring --- pages/_error.tsx | 12 +++++------- src/components/App/AppFooter.tsx | 20 -------------------- src/components/App/index.tsx | 4 ++-- src/components/Block/index.tsx | 23 +++++++++++++++++++---- src/components/Contacts/index.tsx | 27 +++++++++++++++++++++++++++ src/components/Footer/index.tsx | 25 +++++++------------------ src/config.ts | 30 +++++++++++++++++++++++++++--- src/style/footer.scss | 18 ++---------------- 8 files changed, 89 insertions(+), 70 deletions(-) delete mode 100644 src/components/App/AppFooter.tsx create mode 100644 src/components/Contacts/index.tsx diff --git a/pages/_error.tsx b/pages/_error.tsx index 8b4bab7b..f722d751 100644 --- a/pages/_error.tsx +++ b/pages/_error.tsx @@ -9,13 +9,11 @@ const Page: NextPage = () => ( - - - - - - + + + + + )} > diff --git a/src/components/App/AppFooter.tsx b/src/components/App/AppFooter.tsx deleted file mode 100644 index ef9eeeae..00000000 --- a/src/components/App/AppFooter.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Footer } from '../Footer' -import { useContext } from 'react' -import { ConfigContext } from 'src/context/ConfigContext' - -export type AppFooterProps = { - showAuthor: boolean -} - -export const AppFooter: React.FC = props => { - const config = useContext(ConfigContext) - - return ( -