diff --git a/js_machine_front/src/components/app/app.tsx b/js_machine_front/src/components/app/app.tsx index 4135588..4d0a43b 100644 --- a/js_machine_front/src/components/app/app.tsx +++ b/js_machine_front/src/components/app/app.tsx @@ -1,49 +1,49 @@ -import React from 'react'; -import './styles/app.css'; -import { NavBar } from 'components/navBar/navBar'; -import { Partners } from 'scenes/partnersLogo/partners'; -import { Events } from 'scenes/communityEvents/communityEvents'; -import { News } from 'scenes/news/news'; -import { About } from 'scenes/about/about'; -import { Main } from 'scenes/main/main'; -import { DigestView } from 'scenes/digestView/digestView'; -import { ErrorBoundary } from 'components/navBar/error-boundary/error-boundary'; -import { Authorization } from 'scenes/authorization/authorization'; -import { Route, Redirect, Switch } from 'react-router'; - -// Internationalization -import { messages } from 'i18n/messages'; -import en from 'react-intl/locale-data/en'; -import ru from 'react-intl/locale-data/ru'; -import { addLocaleData, IntlProvider } from 'react-intl'; - -addLocaleData([...en, ...ru]); - -const locale = - (navigator.languages && navigator.languages[0]) || - navigator.language || - 'en-US'; - -const App: React.FC = () => { - return ( - -
- - - - - - - - - - - - - -
- - ); -}; - -export default App; +import React from 'react'; +import './styles/app.css'; +import { NavBar } from 'components/navBar/navBar'; +import { Partners } from 'scenes/partnersLogo/partners'; +import { Events } from 'scenes/communityEvents/communityEvents'; +import { News } from 'scenes/news/news'; +import { About } from 'scenes/about/about'; +import { Main } from 'scenes/main/main'; +import { DigestView } from 'scenes/digestView/digestView'; +import { ErrorBoundary } from 'components/navBar/error-boundary/error-boundary'; +import { Authorization } from 'scenes/authorization/authorization'; +import { Route, Redirect, Switch } from 'react-router'; + +// Internationalization +import { messages } from 'i18n/messages'; +import en from 'react-intl/locale-data/en'; +import ru from 'react-intl/locale-data/ru'; +import { addLocaleData, IntlProvider } from 'react-intl'; + +addLocaleData([...en, ...ru]); + +const locale = + (navigator.languages && navigator.languages[0]) || + navigator.language || + 'en-US'; + +const App: React.FC = () => { + return ( + +
+ + + + + + + + + + + + + +
+ + ); +}; + +export default App; diff --git a/js_machine_front/src/components/navBar/error-boundary/error-boundary.tsx b/js_machine_front/src/components/navBar/error-boundary/error-boundary.tsx index 31d06dd..28e00ec 100644 --- a/js_machine_front/src/components/navBar/error-boundary/error-boundary.tsx +++ b/js_machine_front/src/components/navBar/error-boundary/error-boundary.tsx @@ -1,24 +1,24 @@ -import * as React from 'react'; - -import { ErrorIndicator } from '../error-indicator'; - -import { ErrorBoundaryState } from 'components/navBar/models/errorBoundary'; - -export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> { - state: ErrorBoundaryState = { - hasError: false, - }; - - componentDidCatch(): void { - this.setState({ - hasError: true, - }); - } - - render(): React.ReactNode | React.FC { - if (this.state.hasError) { - return ; - } - return this.props.children; - } -} +import * as React from 'react'; + +import { ErrorIndicator } from '../error-indicator'; + +import { ErrorBoundaryState } from 'components/navBar/models/errorBoundary'; + +export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> { + state: ErrorBoundaryState = { + hasError: false, + }; + + componentDidCatch(): void { + this.setState({ + hasError: true, + }); + } + + render(): React.ReactNode | React.FC { + if (this.state.hasError) { + return ; + } + return this.props.children; + } +} diff --git a/js_machine_front/src/components/navBar/error-boundary/index.ts b/js_machine_front/src/components/navBar/error-boundary/index.ts index 44d179a..39d945d 100644 --- a/js_machine_front/src/components/navBar/error-boundary/index.ts +++ b/js_machine_front/src/components/navBar/error-boundary/index.ts @@ -1 +1 @@ -export * from './error-boundary'; +export * from './error-boundary'; diff --git a/js_machine_front/src/components/navBar/error-indicator/error-indicator.tsx b/js_machine_front/src/components/navBar/error-indicator/error-indicator.tsx index 26e3d2c..9c18ff6 100644 --- a/js_machine_front/src/components/navBar/error-indicator/error-indicator.tsx +++ b/js_machine_front/src/components/navBar/error-indicator/error-indicator.tsx @@ -1,34 +1,34 @@ -import React, { memo } from 'react'; - -import './error-indicator.css'; -import icon from './error-indicator.svg'; - -import { FormattedMessage } from 'react-intl'; - -const sectionStyle = { - height: '100%', - backgroundImage: `url(${icon})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', -}; - -const ErrorIndicator: React.FC = memo(() => { - return ( -
-
- - - - - - - - () - -
-
- ); -}); - -export { ErrorIndicator }; +import React, { memo } from 'react'; + +import './error-indicator.css'; +import icon from './error-indicator.svg'; + +import { FormattedMessage } from 'react-intl'; + +const sectionStyle = { + height: '100%', + backgroundImage: `url(${icon})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', +}; + +const ErrorIndicator: React.FC = memo(() => { + return ( +
+
+ + + + + + + + () + +
+
+ ); +}); + +export { ErrorIndicator }; diff --git a/js_machine_front/src/components/navBar/error-indicator/index.ts b/js_machine_front/src/components/navBar/error-indicator/index.ts index bc0fba6..5203184 100644 --- a/js_machine_front/src/components/navBar/error-indicator/index.ts +++ b/js_machine_front/src/components/navBar/error-indicator/index.ts @@ -1 +1 @@ -export * from './error-indicator'; +export * from './error-indicator'; diff --git a/js_machine_front/src/components/navBar/images/logo.png b/js_machine_front/src/components/navBar/images/logo.png deleted file mode 100644 index 8af9f4d..0000000 Binary files a/js_machine_front/src/components/navBar/images/logo.png and /dev/null differ diff --git a/js_machine_front/src/components/navBar/models/errorBoundary.ts b/js_machine_front/src/components/navBar/models/errorBoundary.ts index 12d01a6..c448862 100644 --- a/js_machine_front/src/components/navBar/models/errorBoundary.ts +++ b/js_machine_front/src/components/navBar/models/errorBoundary.ts @@ -1,3 +1,3 @@ -export interface ErrorBoundaryState { - hasError: boolean; - } +export interface ErrorBoundaryState { + hasError: boolean; + } diff --git a/js_machine_front/src/components/navBar/models/navBar.ts b/js_machine_front/src/components/navBar/models/navBar.ts index b32f753..d26dd7a 100644 --- a/js_machine_front/src/components/navBar/models/navBar.ts +++ b/js_machine_front/src/components/navBar/models/navBar.ts @@ -1,3 +1,3 @@ -export interface NavBarState { - isMenuOpened: boolean; -} +export interface NavBarState { + isMenuOpened: boolean; +} diff --git a/js_machine_front/src/components/navBar/navBar.tsx b/js_machine_front/src/components/navBar/navBar.tsx index 2baf041..047b9f8 100644 --- a/js_machine_front/src/components/navBar/navBar.tsx +++ b/js_machine_front/src/components/navBar/navBar.tsx @@ -1,49 +1,81 @@ -import React from 'react'; -import LogoSrc from './images/logo.png'; -import './styles/route.css'; -import './styles/routeMedia.css'; -import { NavLink } from 'react-router-dom'; -import { FormattedMessage } from 'react-intl'; -import { NavBarState } from './models/navBar'; - -export class NavBar extends React.PureComponent { - public state: NavBarState = {isMenuOpened: false}; - - handleMenu = () => { - this.setState({isMenuOpened: !this.state.isMenuOpened}); - } - - render(): JSX.Element { - return ( -
-
- - logo - -
- - - -
- - - - - - - - - - - - - - - -
-
- ); - } -} +import React from 'react'; +import './styles/route.css'; +import './styles/routeMedia.css'; +import { NavLink } from 'react-router-dom'; +import { FormattedMessage } from 'react-intl'; +import { NavBarState } from './models/navBar'; + +export class NavBar extends React.PureComponent { + public state: NavBarState = { isMenuOpened: false }; + + handleMenu = () => { + this.setState({ isMenuOpened: !this.state.isMenuOpened }); + } + render(): JSX.Element { + return ( +
+
+ + JS MACHINE + +
+ + + +
+ + + + + + + + + + + + + + + +
+
+ ); + } +} diff --git a/js_machine_front/src/components/navBar/styles/route.css b/js_machine_front/src/components/navBar/styles/route.css index 61e52ed..04caeb3 100644 --- a/js_machine_front/src/components/navBar/styles/route.css +++ b/js_machine_front/src/components/navBar/styles/route.css @@ -1,44 +1,50 @@ .logo-box { - position: absolute; - top: 60px; - left: 60px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin: 0; + position: absolute; + top: 60px; + left: 60px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0; } .logo-box__link { - height: 28px; - position: absolute; - background-repeat: no-repeat; - background-size: cover; - background-position: center; + height: 28px; + position: absolute; + background-repeat: no-repeat; + background-size: cover; + background-position: center; } .menu { - position: absolute; - right: 60px; - top: 60px; - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: fit-content; + position: absolute; + right: 60px; + top: 60px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: fit-content; } .menu__nav-link { - margin-left: 60px; - font-family: 'Exo', sans-serif; - font-size: 16px; - color: white; - text-decoration: none; - font-weight: bold; + margin-left: 60px; + font-family: 'Exo', sans-serif; + font-size: 16px; + color: white; + text-decoration: none; + font-weight: bold; +} + +.menu__nav-link--logo { + font-family: 'Machine', sans-serif; + font-size: 20px; + letter-spacing: 1px; } .active-link { - color: #F2E14C; + color: #f2e14c; } #menu__toggle { - display: none; -} \ No newline at end of file + display: none; +} diff --git a/js_machine_front/src/components/navBar/styles/routeMedia.css b/js_machine_front/src/components/navBar/styles/routeMedia.css index 77a7755..53a74be 100644 --- a/js_machine_front/src/components/navBar/styles/routeMedia.css +++ b/js_machine_front/src/components/navBar/styles/routeMedia.css @@ -86,4 +86,8 @@ text-decoration: none; transition-duration: .25s; } + .menu__nav-link--logo { + color: white; + font-family: 'Machine', sans-serif; + } } \ No newline at end of file diff --git a/js_machine_front/src/components/navBar/tests/navBar.test.tsx b/js_machine_front/src/components/navBar/tests/navBar.test.tsx index e35c4e1..6962e9e 100644 --- a/js_machine_front/src/components/navBar/tests/navBar.test.tsx +++ b/js_machine_front/src/components/navBar/tests/navBar.test.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import { NavBar } from '../navBar'; -import { shallow } from 'enzyme'; -import { NavLink } from 'react-router-dom'; - -describe('NavBar component is ready', () => { - it('navLink components is ready', () => { - const component = shallow(); - - const tileContent = component.find(NavLink); - - expect(tileContent).toHaveLength(6); - }); -}); +import React from 'react'; +import { NavBar } from '../navBar'; +import { shallow } from 'enzyme'; +import { NavLink } from 'react-router-dom'; + +describe('NavBar component is ready', () => { + it('navLink components is ready', () => { + const component = shallow(); + + const tileContent = component.find(NavLink); + + expect(tileContent).toHaveLength(6); + }); +}); diff --git a/js_machine_front/src/fonts/machine.ttf b/js_machine_front/src/fonts/machine.ttf new file mode 100644 index 0000000..f94c02a Binary files /dev/null and b/js_machine_front/src/fonts/machine.ttf differ diff --git a/js_machine_front/src/i18n/messages.ts b/js_machine_front/src/i18n/messages.ts index 70c81b7..462f369 100644 --- a/js_machine_front/src/i18n/messages.ts +++ b/js_machine_front/src/i18n/messages.ts @@ -1,7 +1,7 @@ -import { en_US } from './translations/en-US'; -import { ru_RU } from './translations/ru-RU'; - -export const messages: {[index: string]: object} = { - 'en-US': en_US , - 'ru-RU': ru_RU, -}; +import { en_US } from './translations/en-US'; +import { ru_RU } from './translations/ru-RU'; + +export const messages: {[index: string]: object} = { + 'en-US': en_US , + 'ru-RU': ru_RU, +}; diff --git a/js_machine_front/src/i18n/translations/en-US/error-indicator.ts b/js_machine_front/src/i18n/translations/en-US/error-indicator.ts index 16a4efb..fc7486c 100644 --- a/js_machine_front/src/i18n/translations/en-US/error-indicator.ts +++ b/js_machine_front/src/i18n/translations/en-US/error-indicator.ts @@ -1,5 +1,5 @@ -export const errorIndicator = { -'errorIndicator.title': 'OOPS!', -'errorIndicator.subTitle': 'Something went wrong', -'errorIndicator.subTitle1': 'but we have already sent a guy from support to fix it', -}; +export const errorIndicator = { +'errorIndicator.title': 'OOPS!', +'errorIndicator.subTitle': 'Something went wrong', +'errorIndicator.subTitle1': 'but we have already sent a guy from support to fix it', +}; diff --git a/js_machine_front/src/i18n/translations/en-US/index.ts b/js_machine_front/src/i18n/translations/en-US/index.ts index 773fef5..d70ca1f 100644 --- a/js_machine_front/src/i18n/translations/en-US/index.ts +++ b/js_machine_front/src/i18n/translations/en-US/index.ts @@ -1,8 +1,8 @@ -import { errorIndicator } from './error-indicator'; -import { pages } from './pages'; -import { signIn } from './sign-in'; -import { signUp } from './sign-up'; - -export const en_US = { - ...errorIndicator, ...pages, ...signIn, ...signUp, -}; +import { errorIndicator } from './error-indicator'; +import { pages } from './pages'; +import { signIn } from './sign-in'; +import { signUp } from './sign-up'; + +export const en_US = { + ...errorIndicator, ...pages, ...signIn, ...signUp, +}; diff --git a/js_machine_front/src/i18n/translations/en-US/pages.ts b/js_machine_front/src/i18n/translations/en-US/pages.ts index 6fce2d8..726ffc9 100644 --- a/js_machine_front/src/i18n/translations/en-US/pages.ts +++ b/js_machine_front/src/i18n/translations/en-US/pages.ts @@ -1,8 +1,8 @@ -export const pages = { - 'page.about': 'ABOUT US', - 'page.news': 'NEWS', - 'page.events': 'EVENTS', - 'page.partners': 'PARTNERS', - 'page.signIn': 'SIGN IN', - 'page.digestview': 'DIGEST VIEW', -}; +export const pages = { + 'page.about': 'ABOUT US', + 'page.news': 'NEWS', + 'page.events': 'EVENTS', + 'page.partners': 'PARTNERS', + 'page.signIn': 'SIGN IN', + 'page.digestview': 'DIGEST VIEW', +}; diff --git a/js_machine_front/src/i18n/translations/en-US/sign-in.ts b/js_machine_front/src/i18n/translations/en-US/sign-in.ts index ef266b9..9b76702 100644 --- a/js_machine_front/src/i18n/translations/en-US/sign-in.ts +++ b/js_machine_front/src/i18n/translations/en-US/sign-in.ts @@ -1,8 +1,8 @@ -export const signIn = { - 'authorization.signIn': 'SIGN IN', - 'authorization.signUp': 'SIGN UP', - 'authorization.signInFormTitle': 'or use your E-mail for registration:', - 'authorization.signInFormEmail': 'E-mail', - 'authorization.signInFormPassword': 'Password', - 'authorization.signInFormSubmit': 'SUBMIT', -}; +export const signIn = { + 'authorization.signIn': 'SIGN IN', + 'authorization.signUp': 'SIGN UP', + 'authorization.signInFormTitle': 'or use your E-mail for registration:', + 'authorization.signInFormEmail': 'E-mail', + 'authorization.signInFormPassword': 'Password', + 'authorization.signInFormSubmit': 'SUBMIT', +}; diff --git a/js_machine_front/src/i18n/translations/en-US/sign-up.ts b/js_machine_front/src/i18n/translations/en-US/sign-up.ts index 9d9809a..ea0a239 100644 --- a/js_machine_front/src/i18n/translations/en-US/sign-up.ts +++ b/js_machine_front/src/i18n/translations/en-US/sign-up.ts @@ -1,8 +1,8 @@ -export const signUp = { - 'authorization.signUpFormTitle': 'or use your E-mail for registration:', - 'authorization.signUpFormLastName': 'Lastname', - 'authorization.signUpFormEmail': 'E-mail', - 'authorization.signUpFormFirstName': 'Name', - 'authorization.signUpFormPassword': 'Password', - 'authorization.signUpFormSubmit': 'SIGN UP', -}; +export const signUp = { + 'authorization.signUpFormTitle': 'or use your E-mail for registration:', + 'authorization.signUpFormLastName': 'Lastname', + 'authorization.signUpFormEmail': 'E-mail', + 'authorization.signUpFormFirstName': 'Name', + 'authorization.signUpFormPassword': 'Password', + 'authorization.signUpFormSubmit': 'SIGN UP', +}; diff --git a/js_machine_front/src/i18n/translations/ru-RU/error-indicator.ts b/js_machine_front/src/i18n/translations/ru-RU/error-indicator.ts index 992e09a..62f898b 100644 --- a/js_machine_front/src/i18n/translations/ru-RU/error-indicator.ts +++ b/js_machine_front/src/i18n/translations/ru-RU/error-indicator.ts @@ -1,5 +1,5 @@ -export const errorIndicator = { - 'errorIndicator.title': 'УПС!', - 'errorIndicator.subTitle': 'что-то пошло не так', - 'errorIndicator.subTitle1': 'но мы уже отправили парня из поддержки починить это', -}; +export const errorIndicator = { + 'errorIndicator.title': 'УПС!', + 'errorIndicator.subTitle': 'что-то пошло не так', + 'errorIndicator.subTitle1': 'но мы уже отправили парня из поддержки починить это', +}; diff --git a/js_machine_front/src/i18n/translations/ru-RU/index.ts b/js_machine_front/src/i18n/translations/ru-RU/index.ts index 530f228..19fdfb8 100644 --- a/js_machine_front/src/i18n/translations/ru-RU/index.ts +++ b/js_machine_front/src/i18n/translations/ru-RU/index.ts @@ -1,8 +1,8 @@ -import { errorIndicator } from './error-indicator'; -import { pages } from './pages'; -import { signIn } from './sign-in'; -import { signUp } from './sign-up'; - -export const ru_RU = { - ...errorIndicator, ...pages, ...signIn, ...signUp, -}; +import { errorIndicator } from './error-indicator'; +import { pages } from './pages'; +import { signIn } from './sign-in'; +import { signUp } from './sign-up'; + +export const ru_RU = { + ...errorIndicator, ...pages, ...signIn, ...signUp, +}; diff --git a/js_machine_front/src/i18n/translations/ru-RU/pages.ts b/js_machine_front/src/i18n/translations/ru-RU/pages.ts index c8867b3..d145ec7 100644 --- a/js_machine_front/src/i18n/translations/ru-RU/pages.ts +++ b/js_machine_front/src/i18n/translations/ru-RU/pages.ts @@ -1,8 +1,8 @@ -export const pages = { - 'page.about': 'О НАС', - 'page.news': 'НОВОСТИ', - 'page.events': 'СОБЫТИЯ', - 'page.partners': 'ПАРТНЕРЫ', - 'page.signIn': 'ВХОД', - 'page.digestview': 'DIGEST VIEW', -}; +export const pages = { + 'page.about': 'О НАС', + 'page.news': 'НОВОСТИ', + 'page.events': 'СОБЫТИЯ', + 'page.partners': 'ПАРТНЕРЫ', + 'page.signIn': 'ВХОД', + 'page.digestview': 'DIGEST VIEW', +}; diff --git a/js_machine_front/src/i18n/translations/ru-RU/sign-in.ts b/js_machine_front/src/i18n/translations/ru-RU/sign-in.ts index f17449b..9e283e3 100644 --- a/js_machine_front/src/i18n/translations/ru-RU/sign-in.ts +++ b/js_machine_front/src/i18n/translations/ru-RU/sign-in.ts @@ -1,8 +1,8 @@ -export const signIn = { - 'authorization.signIn': 'ЗАРЕГИСТРИРОВАТЬСЯ', - 'authorization.signUp': 'ВОЙТИ', - 'authorization.signInFormTitle': 'или используйте E-mail для регистрации:', - 'authorization.signInFormEmail': 'E-mail', - 'authorization.signInFormPassword': 'Пароль', - 'authorization.signInFormSubmit': 'ВОЙТИ', -}; +export const signIn = { + 'authorization.signIn': 'ЗАРЕГИСТРИРОВАТЬСЯ', + 'authorization.signUp': 'ВОЙТИ', + 'authorization.signInFormTitle': 'или используйте E-mail для регистрации:', + 'authorization.signInFormEmail': 'E-mail', + 'authorization.signInFormPassword': 'Пароль', + 'authorization.signInFormSubmit': 'ВОЙТИ', +}; diff --git a/js_machine_front/src/i18n/translations/ru-RU/sign-up.ts b/js_machine_front/src/i18n/translations/ru-RU/sign-up.ts index 01bb57d..f9485c6 100644 --- a/js_machine_front/src/i18n/translations/ru-RU/sign-up.ts +++ b/js_machine_front/src/i18n/translations/ru-RU/sign-up.ts @@ -1,8 +1,8 @@ -export const signUp = { - 'authorization.signUpFormTitle': 'или используйте E-mail для регистрации:', - 'authorization.signUpFormLastName': 'Фамилия', - 'authorization.signUpFormEmail': 'E-mail', - 'authorization.signUpFormFirstName': 'Имя', - 'authorization.signUpFormPassword': 'Пароль', - 'authorization.signUpFormSubmit': 'ЗАРЕГИСТРИРОВАТЬСЯ', -}; +export const signUp = { + 'authorization.signUpFormTitle': 'или используйте E-mail для регистрации:', + 'authorization.signUpFormLastName': 'Фамилия', + 'authorization.signUpFormEmail': 'E-mail', + 'authorization.signUpFormFirstName': 'Имя', + 'authorization.signUpFormPassword': 'Пароль', + 'authorization.signUpFormSubmit': 'ЗАРЕГИСТРИРОВАТЬСЯ', +}; diff --git a/js_machine_front/src/index.css b/js_machine_front/src/index.css index 03fd976..8c3e802 100644 --- a/js_machine_front/src/index.css +++ b/js_machine_front/src/index.css @@ -69,4 +69,11 @@ code { src: url('fonts/Exo2-LightItalic.ttf') format('truetype'); font-weight: lighter; font-style: italic; +} + +@font-face{ + font-family: 'Machine'; + src: url('fonts/machine.ttf') format('truetype'); + font-weight: normal; + font-style: normal; } \ No newline at end of file diff --git a/js_machine_front/src/index.tsx b/js_machine_front/src/index.tsx index 997c6ac..94dbb28 100644 --- a/js_machine_front/src/index.tsx +++ b/js_machine_front/src/index.tsx @@ -1,18 +1,18 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import * as serviceWorker from './serviceWorker'; -import { BrowserRouter as Router } from 'react-router-dom'; -import App from './components/app/app'; - -ReactDOM.render( - - - , - document.getElementById('root'), -); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.register(); +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import * as serviceWorker from './serviceWorker'; +import { BrowserRouter as Router } from 'react-router-dom'; +import App from './components/app/app'; + +ReactDOM.render( + + + , + document.getElementById('root'), +); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.register(); diff --git a/js_machine_front/src/scenes/about/about.tsx b/js_machine_front/src/scenes/about/about.tsx index f45c7fe..fd0b82d 100644 --- a/js_machine_front/src/scenes/about/about.tsx +++ b/js_machine_front/src/scenes/about/about.tsx @@ -1,48 +1,48 @@ -import React, { memo } from 'react'; -import Background from './images/about.jpg'; -import './styles/about.css'; -import './styles/aboutMedia.css'; -import { Tile } from './models/tile'; -import { TileContent } from './components/tileContent'; -import { FormattedMessage } from 'react-intl'; - -const sectionStyle = { - height: '100vh', - backgroundImage: `url(${Background})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', -}; - -export const About: React.FC = memo(() => { - const arrTiles: Tile[] = [ - { - id: 0, - title: 'История', - description: - 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', - }, - { - id: 1, - title: 'Достижения', - description: - 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', - }, - { - id: 2, - title: 'Команда', - description: - 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', - }, - ]; - return ( -
-
-
- -
- -
-
- ); -}); +import React, { memo } from 'react'; +import Background from './images/about.jpg'; +import './styles/about.css'; +import './styles/aboutMedia.css'; +import { Tile } from './models/tile'; +import { TileContent } from './components/tileContent'; +import { FormattedMessage } from 'react-intl'; + +const sectionStyle = { + height: '100vh', + backgroundImage: `url(${Background})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', +}; + +export const About: React.FC = memo(() => { + const arrTiles: Tile[] = [ + { + id: 0, + title: 'История', + description: + 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', + }, + { + id: 1, + title: 'Достижения', + description: + 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', + }, + { + id: 2, + title: 'Команда', + description: + 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', + }, + ]; + return ( +
+
+
+ +
+ +
+
+ ); +}); diff --git a/js_machine_front/src/scenes/about/components/tileContent.tsx b/js_machine_front/src/scenes/about/components/tileContent.tsx index dac5b22..d2c6d40 100644 --- a/js_machine_front/src/scenes/about/components/tileContent.tsx +++ b/js_machine_front/src/scenes/about/components/tileContent.tsx @@ -1,24 +1,24 @@ -import React from 'react'; -import { TileElement } from './tileElement'; -import { Tile } from 'scenes/about/models/tile'; -import { PropsTileContent } from 'scenes/about/models/tileContent'; -import '../styles/tileContent.css'; -import '../styles/tileContentMedia.css'; - -export const TileContent: React.FC = (props: PropsTileContent) => { - return ( -
-
-
- {props.arrTiles.map((item: Tile) => ( - - ))} -
-
-
- ); -}; +import React from 'react'; +import { TileElement } from './tileElement'; +import { Tile } from 'scenes/about/models/tile'; +import { PropsTileContent } from 'scenes/about/models/tileContent'; +import '../styles/tileContent.css'; +import '../styles/tileContentMedia.css'; + +export const TileContent: React.FC = (props: PropsTileContent) => { + return ( +
+
+
+ {props.arrTiles.map((item: Tile) => ( + + ))} +
+
+
+ ); +}; diff --git a/js_machine_front/src/scenes/about/components/tileElement.tsx b/js_machine_front/src/scenes/about/components/tileElement.tsx index fd232b0..f19d528 100644 --- a/js_machine_front/src/scenes/about/components/tileElement.tsx +++ b/js_machine_front/src/scenes/about/components/tileElement.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import '../styles/tileElement.css'; -import '../styles/tileElementMedia.css'; - -import { PropsTileElement } from 'scenes/about/models/tileElement'; - -export const TileElement: React.FC = (props: PropsTileElement) => { - return ( -
-
{props.title}
-

{props.description}

-
- ); -}; +import React from 'react'; +import '../styles/tileElement.css'; +import '../styles/tileElementMedia.css'; + +import { PropsTileElement } from 'scenes/about/models/tileElement'; + +export const TileElement: React.FC = (props: PropsTileElement) => { + return ( +
+
{props.title}
+

{props.description}

+
+ ); +}; diff --git a/js_machine_front/src/scenes/about/models/tile.ts b/js_machine_front/src/scenes/about/models/tile.ts index 6ebe780..1445c49 100644 --- a/js_machine_front/src/scenes/about/models/tile.ts +++ b/js_machine_front/src/scenes/about/models/tile.ts @@ -1,5 +1,5 @@ -export interface Tile { - id: number; - title: string; - description: string; -} +export interface Tile { + id: number; + title: string; + description: string; +} diff --git a/js_machine_front/src/scenes/about/models/tileContent.ts b/js_machine_front/src/scenes/about/models/tileContent.ts index 508701f..4b3f6fe 100644 --- a/js_machine_front/src/scenes/about/models/tileContent.ts +++ b/js_machine_front/src/scenes/about/models/tileContent.ts @@ -1,5 +1,5 @@ -import { Tile } from './tile'; - -export interface PropsTileContent { - arrTiles: Tile[]; -} +import { Tile } from './tile'; + +export interface PropsTileContent { + arrTiles: Tile[]; +} diff --git a/js_machine_front/src/scenes/about/models/tileElement.ts b/js_machine_front/src/scenes/about/models/tileElement.ts index 50fea17..037abc6 100644 --- a/js_machine_front/src/scenes/about/models/tileElement.ts +++ b/js_machine_front/src/scenes/about/models/tileElement.ts @@ -1,4 +1,4 @@ -export interface PropsTileElement { - title: string; - description: string; - } +export interface PropsTileElement { + title: string; + description: string; + } diff --git a/js_machine_front/src/scenes/about/tests/about.test.tsx b/js_machine_front/src/scenes/about/tests/about.test.tsx index 1c560b0..d860910 100644 --- a/js_machine_front/src/scenes/about/tests/about.test.tsx +++ b/js_machine_front/src/scenes/about/tests/about.test.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import { About } from '../about'; -import { shallow } from 'enzyme'; -import { TileContent } from '../components/tileContent'; - -describe('About component is ready', () => { - it('tileContent component is ready', () => { - const component = shallow(); - - const tileContent = component.find(TileContent); - - expect(tileContent).toHaveLength(1); - }); -}); +import React from 'react'; +import { About } from '../about'; +import { shallow } from 'enzyme'; +import { TileContent } from '../components/tileContent'; + +describe('About component is ready', () => { + it('tileContent component is ready', () => { + const component = shallow(); + + const tileContent = component.find(TileContent); + + expect(tileContent).toHaveLength(1); + }); +}); diff --git a/js_machine_front/src/scenes/about/tests/tileContent.test.tsx b/js_machine_front/src/scenes/about/tests/tileContent.test.tsx index d981c8a..00526df 100644 --- a/js_machine_front/src/scenes/about/tests/tileContent.test.tsx +++ b/js_machine_front/src/scenes/about/tests/tileContent.test.tsx @@ -1,30 +1,30 @@ -import React from 'react'; -import { TileContent } from '../components/tileContent'; -import { Tile } from '../models/tile'; -import { shallow } from 'enzyme'; -import { TileElement } from '../components/tileElement'; - -describe('TileContent component is ready', () => { - const props: Tile[] = [ - { - id: 0, - title: 'История', - description: - 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', - }, - { - id: 1, - title: 'Достижения', - description: - 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', - }, - ]; - - it('tileElement component is ready', () => { - const component = shallow(); - - const tileElement = component.find(TileElement); - - expect(tileElement).toHaveLength(2); - }); -}); +import React from 'react'; +import { TileContent } from '../components/tileContent'; +import { Tile } from '../models/tile'; +import { shallow } from 'enzyme'; +import { TileElement } from '../components/tileElement'; + +describe('TileContent component is ready', () => { + const props: Tile[] = [ + { + id: 0, + title: 'История', + description: + 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', + }, + { + id: 1, + title: 'Достижения', + description: + 'Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах.', + }, + ]; + + it('tileElement component is ready', () => { + const component = shallow(); + + const tileElement = component.find(TileElement); + + expect(tileElement).toHaveLength(2); + }); +}); diff --git a/js_machine_front/src/scenes/authorization/authorization.tsx b/js_machine_front/src/scenes/authorization/authorization.tsx index 9d98808..5d8318f 100644 --- a/js_machine_front/src/scenes/authorization/authorization.tsx +++ b/js_machine_front/src/scenes/authorization/authorization.tsx @@ -1,33 +1,33 @@ -import React from 'react'; -import Background from './images/authorization.jpg'; -import './styles/authorization.css'; -import './styles/authorizationMedia.css'; - -import { AuthorizationHOC, AuthorizationSignIn, AuthorizationSignUp, AuthorizationBar} from './'; -import { AuthorizationProps } from 'scenes/authorization/models/authorization'; - -const sectionStyle = { - height: '100vh', - backgroundImage: `url(${Background})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', -}; - -export const AuthorizationComponent: React.FC = (props: AuthorizationProps) => { - const { isAuthorizitationVisible } = props; - - return ( -
-
-
- - - -
-
-
- ); -}; - -export const Authorization = AuthorizationHOC(AuthorizationComponent); +import React from 'react'; +import Background from './images/authorization.jpg'; +import './styles/authorization.css'; +import './styles/authorizationMedia.css'; + +import { AuthorizationHOC, AuthorizationSignIn, AuthorizationSignUp, AuthorizationBar} from './'; +import { AuthorizationProps } from 'scenes/authorization/models/authorization'; + +const sectionStyle = { + height: '100vh', + backgroundImage: `url(${Background})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', +}; + +export const AuthorizationComponent: React.FC = (props: AuthorizationProps) => { + const { isAuthorizitationVisible } = props; + + return ( +
+
+
+ + + +
+
+
+ ); +}; + +export const Authorization = AuthorizationHOC(AuthorizationComponent); diff --git a/js_machine_front/src/scenes/authorization/components/authorizationBar.tsx b/js_machine_front/src/scenes/authorization/components/authorizationBar.tsx index f50b4d9..890d5f7 100644 --- a/js_machine_front/src/scenes/authorization/components/authorizationBar.tsx +++ b/js_machine_front/src/scenes/authorization/components/authorizationBar.tsx @@ -1,23 +1,23 @@ -import React from 'react'; -import '../styles/authorizationBar.css'; -import '../styles/authorizationBarMedia.css'; - -import { AuthorizationBarProps } from 'scenes/authorization/models/authorizationBar'; - -export const AuthorizationBar: React.FC = (props: AuthorizationBarProps) => { - const barStyle = props.isAuthorizitationVisible ? 'authorization-bar_sign-in' : 'authorization-bar_sign-up'; - return ( - <> -
-
-
- {props.barTitle} -
-
- -
-
-
- - ); -}; +import React from 'react'; +import '../styles/authorizationBar.css'; +import '../styles/authorizationBarMedia.css'; + +import { AuthorizationBarProps } from 'scenes/authorization/models/authorizationBar'; + +export const AuthorizationBar: React.FC = (props: AuthorizationBarProps) => { + const barStyle = props.isAuthorizitationVisible ? 'authorization-bar_sign-in' : 'authorization-bar_sign-up'; + return ( + <> +
+
+
+ {props.barTitle} +
+
+ +
+
+
+ + ); +}; diff --git a/js_machine_front/src/scenes/authorization/components/authorizationHOC.tsx b/js_machine_front/src/scenes/authorization/components/authorizationHOC.tsx index 34186d8..98fbeb0 100644 --- a/js_machine_front/src/scenes/authorization/components/authorizationHOC.tsx +++ b/js_machine_front/src/scenes/authorization/components/authorizationHOC.tsx @@ -1,40 +1,40 @@ -import React from 'react'; - -import { getStateForSignIn, getStateForSignUp } from 'scenes/authorization/services/authrizationService'; - -import { AuthorizationHOCProps, AuthorizationHOCState } from 'scenes/authorization/models/authorizationHOC'; - -export const AuthorizationHOC = (AuthComponent: React.FC) => { - return class AuthHOC extends React.PureComponent { - constructor(props: AuthorizationHOCProps) { - super(props); - this.state = { - isAuthorizitationVisible: true, - barTitle: '', - barBtn: '', - }; - } - - private changeLoginOptions = () => { - if (this.state.isAuthorizitationVisible) { - this.setState(() => { - const signUpMocks = getStateForSignUp(); - return {...signUpMocks, isAuthorizitationVisible: false}; - }); - } else { - this.setState(() => { - const signInMocks = getStateForSignIn(); - return {...signInMocks, isAuthorizitationVisible: true}; - }); - } - } - - public componentDidMount = () => { - this.setState(() => getStateForSignIn()); - } - - public render(): JSX.Element { - return ; - } - }; -}; +import React from 'react'; + +import { getStateForSignIn, getStateForSignUp } from 'scenes/authorization/services/authrizationService'; + +import { AuthorizationHOCProps, AuthorizationHOCState } from 'scenes/authorization/models/authorizationHOC'; + +export const AuthorizationHOC = (AuthComponent: React.FC) => { + return class AuthHOC extends React.PureComponent { + constructor(props: AuthorizationHOCProps) { + super(props); + this.state = { + isAuthorizitationVisible: true, + barTitle: '', + barBtn: '', + }; + } + + private changeLoginOptions = () => { + if (this.state.isAuthorizitationVisible) { + this.setState(() => { + const signUpMocks = getStateForSignUp(); + return {...signUpMocks, isAuthorizitationVisible: false}; + }); + } else { + this.setState(() => { + const signInMocks = getStateForSignIn(); + return {...signInMocks, isAuthorizitationVisible: true}; + }); + } + } + + public componentDidMount = () => { + this.setState(() => getStateForSignIn()); + } + + public render(): JSX.Element { + return ; + } + }; +}; diff --git a/js_machine_front/src/scenes/authorization/components/authorizationSignIn.tsx b/js_machine_front/src/scenes/authorization/components/authorizationSignIn.tsx index c3febe1..6aeda8a 100644 --- a/js_machine_front/src/scenes/authorization/components/authorizationSignIn.tsx +++ b/js_machine_front/src/scenes/authorization/components/authorizationSignIn.tsx @@ -1,24 +1,24 @@ -import React from 'react'; -import { SocialAuth } from './socialAuth'; -import { SignInFrom } from './signInFrom'; -import { FormattedMessage } from 'react-intl'; - -import '../styles/authorizationSignIn.css'; -import '../styles/authorizationSignInMedia.css'; - -import { SignInProps } from 'scenes/authorization/models/authorizationSignIn'; - -export const AuthorizationSignIn: React.FC = (props: SignInProps) => { - const resetSignInWidth = props.isAuthorizitationVisible ? '' : 'reset_sign-in-width'; - return ( -
-
-
- -
- - -
-
- ); -}; +import React from 'react'; +import { SocialAuth } from './socialAuth'; +import { SignInFrom } from './signInFrom'; +import { FormattedMessage } from 'react-intl'; + +import '../styles/authorizationSignIn.css'; +import '../styles/authorizationSignInMedia.css'; + +import { SignInProps } from 'scenes/authorization/models/authorizationSignIn'; + +export const AuthorizationSignIn: React.FC = (props: SignInProps) => { + const resetSignInWidth = props.isAuthorizitationVisible ? '' : 'reset_sign-in-width'; + return ( +
+
+
+ +
+ + +
+
+ ); +}; diff --git a/js_machine_front/src/scenes/authorization/components/authorizationSignUp.tsx b/js_machine_front/src/scenes/authorization/components/authorizationSignUp.tsx index 349bf2a..1d24578 100644 --- a/js_machine_front/src/scenes/authorization/components/authorizationSignUp.tsx +++ b/js_machine_front/src/scenes/authorization/components/authorizationSignUp.tsx @@ -1,24 +1,24 @@ -import React from 'react'; -import { SocialAuth } from './socialAuth'; -import { SignUpForm } from './signUpForm'; -import { FormattedMessage } from 'react-intl'; - -import '../styles/authorizationSignUp.css'; -import '../styles/authorizationSignUpMedia.css'; - -import { SignUpProps } from 'scenes/authorization/models/authorizationSignUp'; - -export const AuthorizationSignUp: React.FC = (props: SignUpProps) => { - const resetSignUpWidth = props.isAuthorizitationVisible ? 'reset_sign-up-width' : ''; - return ( -
-
-
- -
- - -
-
- ); -}; +import React from 'react'; +import { SocialAuth } from './socialAuth'; +import { SignUpForm } from './signUpForm'; +import { FormattedMessage } from 'react-intl'; + +import '../styles/authorizationSignUp.css'; +import '../styles/authorizationSignUpMedia.css'; + +import { SignUpProps } from 'scenes/authorization/models/authorizationSignUp'; + +export const AuthorizationSignUp: React.FC = (props: SignUpProps) => { + const resetSignUpWidth = props.isAuthorizitationVisible ? 'reset_sign-up-width' : ''; + return ( +
+
+
+ +
+ + +
+
+ ); +}; diff --git a/js_machine_front/src/scenes/authorization/components/signInFrom.tsx b/js_machine_front/src/scenes/authorization/components/signInFrom.tsx index 9bfe075..86d7ece 100644 --- a/js_machine_front/src/scenes/authorization/components/signInFrom.tsx +++ b/js_machine_front/src/scenes/authorization/components/signInFrom.tsx @@ -1,23 +1,23 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import '../styles/authForm.css'; -import '../styles/authFormMedia.css'; - -export const SignInFrom: React.FC = () => { - return ( -
-
- -
- - { placeholder => } - - - { placeholder => } - - -
- ); -}; +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import '../styles/authForm.css'; +import '../styles/authFormMedia.css'; + +export const SignInFrom: React.FC = () => { + return ( +
+
+ +
+ + { placeholder => } + + + { placeholder => } + + +
+ ); +}; diff --git a/js_machine_front/src/scenes/authorization/components/signUpForm.tsx b/js_machine_front/src/scenes/authorization/components/signUpForm.tsx index 892f951..ff5bc26 100644 --- a/js_machine_front/src/scenes/authorization/components/signUpForm.tsx +++ b/js_machine_front/src/scenes/authorization/components/signUpForm.tsx @@ -1,27 +1,27 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import '../styles/authForm.css'; -import '../styles/authFormMedia.css'; - -export const SignUpForm: React.FC = () => { - return ( -
-
- - {placeholder => } - - - {placeholder => } - - - {placeholder => } - - - {placeholder => } - - -
- ); -}; +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import '../styles/authForm.css'; +import '../styles/authFormMedia.css'; + +export const SignUpForm: React.FC = () => { + return ( +
+
+ + {placeholder => } + + + {placeholder => } + + + {placeholder => } + + + {placeholder => } + + +
+ ); +}; diff --git a/js_machine_front/src/scenes/authorization/components/socialAuth.tsx b/js_machine_front/src/scenes/authorization/components/socialAuth.tsx index 3f3d012..ddcde21 100644 --- a/js_machine_front/src/scenes/authorization/components/socialAuth.tsx +++ b/js_machine_front/src/scenes/authorization/components/socialAuth.tsx @@ -1,13 +1,13 @@ -import React from 'react'; -import '../styles/authSocial.css'; -import '../styles/authSocialMedia.css'; - -export const SocialAuth: React.FC = () => { - return ( -
-
-
-
-
- ); -}; +import React from 'react'; +import '../styles/authSocial.css'; +import '../styles/authSocialMedia.css'; + +export const SocialAuth: React.FC = () => { + return ( +
+
+
+
+
+ ); +}; diff --git a/js_machine_front/src/scenes/authorization/index.ts b/js_machine_front/src/scenes/authorization/index.ts index 09554b1..9af0bf8 100644 --- a/js_machine_front/src/scenes/authorization/index.ts +++ b/js_machine_front/src/scenes/authorization/index.ts @@ -1,4 +1,4 @@ -export * from './components/authorizationBar'; -export * from './components/authorizationHOC'; -export * from './components/authorizationSignIn'; -export * from './components/authorizationSignUp'; +export * from './components/authorizationBar'; +export * from './components/authorizationHOC'; +export * from './components/authorizationSignIn'; +export * from './components/authorizationSignUp'; diff --git a/js_machine_front/src/scenes/authorization/models/authorization.ts b/js_machine_front/src/scenes/authorization/models/authorization.ts index 7f196dc..195b57e 100644 --- a/js_machine_front/src/scenes/authorization/models/authorization.ts +++ b/js_machine_front/src/scenes/authorization/models/authorization.ts @@ -1,6 +1,6 @@ -export interface AuthorizationProps { - changeLoginOptions: () => void; - isAuthorizitationVisible: boolean; - barTitle: string; - barBtn: string; -} +export interface AuthorizationProps { + changeLoginOptions: () => void; + isAuthorizitationVisible: boolean; + barTitle: string; + barBtn: string; +} diff --git a/js_machine_front/src/scenes/authorization/models/authorizationBar.ts b/js_machine_front/src/scenes/authorization/models/authorizationBar.ts index c535075..4ba7188 100644 --- a/js_machine_front/src/scenes/authorization/models/authorizationBar.ts +++ b/js_machine_front/src/scenes/authorization/models/authorizationBar.ts @@ -1,6 +1,6 @@ -export interface AuthorizationBarProps { - changeLoginOptions: () => void; - isAuthorizitationVisible: boolean; - barTitle: string; - barBtn: string; -} +export interface AuthorizationBarProps { + changeLoginOptions: () => void; + isAuthorizitationVisible: boolean; + barTitle: string; + barBtn: string; +} diff --git a/js_machine_front/src/scenes/authorization/models/authorizationHOC.ts b/js_machine_front/src/scenes/authorization/models/authorizationHOC.ts index 056f40e..4538585 100644 --- a/js_machine_front/src/scenes/authorization/models/authorizationHOC.ts +++ b/js_machine_front/src/scenes/authorization/models/authorizationHOC.ts @@ -1,12 +1,12 @@ -export interface AuthorizationHOCProps { - changeLoginOptions: () => void; - isAuthorizitationVisible: boolean; - barTitle: string; - barBtn: string; -} - -export interface AuthorizationHOCState { - isAuthorizitationVisible: boolean; - barTitle: string; - barBtn: string; -} +export interface AuthorizationHOCProps { + changeLoginOptions: () => void; + isAuthorizitationVisible: boolean; + barTitle: string; + barBtn: string; +} + +export interface AuthorizationHOCState { + isAuthorizitationVisible: boolean; + barTitle: string; + barBtn: string; +} diff --git a/js_machine_front/src/scenes/authorization/models/authorizationSignIn.ts b/js_machine_front/src/scenes/authorization/models/authorizationSignIn.ts index 7fe01fa..dc3b675 100644 --- a/js_machine_front/src/scenes/authorization/models/authorizationSignIn.ts +++ b/js_machine_front/src/scenes/authorization/models/authorizationSignIn.ts @@ -1,3 +1,3 @@ -export interface SignInProps { - isAuthorizitationVisible: boolean; -} +export interface SignInProps { + isAuthorizitationVisible: boolean; +} diff --git a/js_machine_front/src/scenes/authorization/models/authorizationSignUp.ts b/js_machine_front/src/scenes/authorization/models/authorizationSignUp.ts index 11992fe..1869b56 100644 --- a/js_machine_front/src/scenes/authorization/models/authorizationSignUp.ts +++ b/js_machine_front/src/scenes/authorization/models/authorizationSignUp.ts @@ -1,3 +1,3 @@ -export interface SignUpProps { - isAuthorizitationVisible: boolean; -} +export interface SignUpProps { + isAuthorizitationVisible: boolean; +} diff --git a/js_machine_front/src/scenes/authorization/tests/authorization.test.tsx b/js_machine_front/src/scenes/authorization/tests/authorization.test.tsx index a1150d2..9f59440 100644 --- a/js_machine_front/src/scenes/authorization/tests/authorization.test.tsx +++ b/js_machine_front/src/scenes/authorization/tests/authorization.test.tsx @@ -1,49 +1,49 @@ -import React from 'react'; -import { Authorization, AuthorizationComponent } from '../authorization'; -import { shallow } from 'enzyme'; -import { AuthorizationBar } from '../components/authorizationBar'; -import { AuthorizationSignUp } from '../components/authorizationSignUp'; -import { AuthorizationSignIn } from '../components/authorizationSignIn'; - -describe('Authorization component is ready', () => { - const props = { - signInStyle: 'sign-in__wrapper', - signUpStyle: 'reset_width', - barStyle: 'authorization-bar__wrapper_sign-in', - barTitle: '', - barBtn: '', - changeLoginOptions: () => { }, - }; - - it('authorization component is ready', () => { - const component = shallow(); - - const authorizationComponent = component.find(AuthorizationComponent); - - expect(authorizationComponent).toHaveLength(1); - }); - - it('signIn component is ready', () => { - const component = shallow(); - - const signInComponent = component.find(AuthorizationSignIn); - - expect(signInComponent).toHaveLength(1); - }); - - it('signUp component is ready', () => { - const component = shallow(); - - const signUpComponent = component.find(AuthorizationSignUp); - - expect(signUpComponent).toHaveLength(1); - }); - - it('authorizationBar component is ready', () => { - const component = shallow(); - - const authorizationBar = component.find(AuthorizationBar); - - expect(authorizationBar).toHaveLength(1); - }); -}); +import React from 'react'; +import { Authorization, AuthorizationComponent } from '../authorization'; +import { shallow } from 'enzyme'; +import { AuthorizationBar } from '../components/authorizationBar'; +import { AuthorizationSignUp } from '../components/authorizationSignUp'; +import { AuthorizationSignIn } from '../components/authorizationSignIn'; + +describe('Authorization component is ready', () => { + const props = { + signInStyle: 'sign-in__wrapper', + signUpStyle: 'reset_width', + barStyle: 'authorization-bar__wrapper_sign-in', + barTitle: '', + barBtn: '', + changeLoginOptions: () => { }, + }; + + it('authorization component is ready', () => { + const component = shallow(); + + const authorizationComponent = component.find(AuthorizationComponent); + + expect(authorizationComponent).toHaveLength(1); + }); + + it('signIn component is ready', () => { + const component = shallow(); + + const signInComponent = component.find(AuthorizationSignIn); + + expect(signInComponent).toHaveLength(1); + }); + + it('signUp component is ready', () => { + const component = shallow(); + + const signUpComponent = component.find(AuthorizationSignUp); + + expect(signUpComponent).toHaveLength(1); + }); + + it('authorizationBar component is ready', () => { + const component = shallow(); + + const authorizationBar = component.find(AuthorizationBar); + + expect(authorizationBar).toHaveLength(1); + }); +}); diff --git a/js_machine_front/src/scenes/authorization/tests/authorizationSignIn.test.tsx b/js_machine_front/src/scenes/authorization/tests/authorizationSignIn.test.tsx index 32038b3..1391d37 100644 --- a/js_machine_front/src/scenes/authorization/tests/authorizationSignIn.test.tsx +++ b/js_machine_front/src/scenes/authorization/tests/authorizationSignIn.test.tsx @@ -1,27 +1,27 @@ -import React from 'react'; -import { AuthorizationSignIn } from '../components/authorizationSignIn'; -import { shallow } from 'enzyme'; -import { SocialAuth } from '../components/socialAuth'; -import { SignInFrom } from '../components/signInFrom'; - -describe('AuthorizationSignIn component is ready', () => { - const props = { - signInStyle: 'sign-in__wrapper', - }; - - it('socialAuth component is ready', () => { - const component = shallow(); - - const socialAuth = component.find(SocialAuth); - - expect(socialAuth).toHaveLength(1); - }); - - it('signInFrom component is ready', () => { - const component = shallow(); - - const signInFrom = component.find(SignInFrom); - - expect(signInFrom).toHaveLength(1); - }); -}); +import React from 'react'; +import { AuthorizationSignIn } from '../components/authorizationSignIn'; +import { shallow } from 'enzyme'; +import { SocialAuth } from '../components/socialAuth'; +import { SignInFrom } from '../components/signInFrom'; + +describe('AuthorizationSignIn component is ready', () => { + const props = { + signInStyle: 'sign-in__wrapper', + }; + + it('socialAuth component is ready', () => { + const component = shallow(); + + const socialAuth = component.find(SocialAuth); + + expect(socialAuth).toHaveLength(1); + }); + + it('signInFrom component is ready', () => { + const component = shallow(); + + const signInFrom = component.find(SignInFrom); + + expect(signInFrom).toHaveLength(1); + }); +}); diff --git a/js_machine_front/src/scenes/authorization/tests/authorizationSignUp.test.tsx b/js_machine_front/src/scenes/authorization/tests/authorizationSignUp.test.tsx index 53e044c..2b328a6 100644 --- a/js_machine_front/src/scenes/authorization/tests/authorizationSignUp.test.tsx +++ b/js_machine_front/src/scenes/authorization/tests/authorizationSignUp.test.tsx @@ -1,27 +1,27 @@ -import React from 'react'; -import { AuthorizationSignUp } from '../components/authorizationSignUp'; -import { shallow } from 'enzyme'; -import { SignUpForm } from '../components/signUpForm'; -import { SocialAuth } from '../components/socialAuth'; - -describe('AuthorizationSignUp', () => { - const props = { - signUpStyle: 'reset_width', - }; - - it('socialAuth component is ready', () => { - const component = shallow(); - - const socialAuth = component.find(SocialAuth); - - expect(socialAuth).toHaveLength(1); - }); - - it('signUpForm component is ready', () => { - const component = shallow(); - - const signUpForm = component.find(SignUpForm); - - expect(signUpForm).toHaveLength(1); - }); -}); +import React from 'react'; +import { AuthorizationSignUp } from '../components/authorizationSignUp'; +import { shallow } from 'enzyme'; +import { SignUpForm } from '../components/signUpForm'; +import { SocialAuth } from '../components/socialAuth'; + +describe('AuthorizationSignUp', () => { + const props = { + signUpStyle: 'reset_width', + }; + + it('socialAuth component is ready', () => { + const component = shallow(); + + const socialAuth = component.find(SocialAuth); + + expect(socialAuth).toHaveLength(1); + }); + + it('signUpForm component is ready', () => { + const component = shallow(); + + const signUpForm = component.find(SignUpForm); + + expect(signUpForm).toHaveLength(1); + }); +}); diff --git a/js_machine_front/src/scenes/communityEvents/communityEvents.tsx b/js_machine_front/src/scenes/communityEvents/communityEvents.tsx index 92fb830..d4568c6 100644 --- a/js_machine_front/src/scenes/communityEvents/communityEvents.tsx +++ b/js_machine_front/src/scenes/communityEvents/communityEvents.tsx @@ -1,41 +1,41 @@ -import React from 'react'; -import Background from './images/events.jpg'; -import './styles/events.css'; - -import { EventsContent } from './components/eventsContent'; -import { getEventData } from './services/moksEvetnData'; -import { EventModel } from './models/events'; - -import { FormattedMessage } from 'react-intl'; - -const sectionStyle = { - height: '100vh', - backgroundImage: `url(${Background})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', -}; - -export class Events extends React.PureComponent<{}, EventModel> { - public state: EventModel = { eventsData: [] }; - - public componentDidMount = async () => { - const response = await getEventData(); - this.setState(() => { - return { eventsData: response }; - }); - } - - public render(): JSX.Element { - return ( -
-
-
- -
- -
-
- ); - } -} +import React from 'react'; +import Background from './images/events.jpg'; +import './styles/events.css'; + +import { EventsContent } from './components/eventsContent'; +import { getEventData } from './services/moksEvetnData'; +import { EventModel } from './models/events'; + +import { FormattedMessage } from 'react-intl'; + +const sectionStyle = { + height: '100vh', + backgroundImage: `url(${Background})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', +}; + +export class Events extends React.PureComponent<{}, EventModel> { + public state: EventModel = { eventsData: [] }; + + public componentDidMount = async () => { + const response = await getEventData(); + this.setState(() => { + return { eventsData: response }; + }); + } + + public render(): JSX.Element { + return ( +
+
+
+ +
+ +
+
+ ); + } +} diff --git a/js_machine_front/src/scenes/communityEvents/components/eventsContent.tsx b/js_machine_front/src/scenes/communityEvents/components/eventsContent.tsx index c347a90..67a57f8 100644 --- a/js_machine_front/src/scenes/communityEvents/components/eventsContent.tsx +++ b/js_machine_front/src/scenes/communityEvents/components/eventsContent.tsx @@ -1,29 +1,29 @@ -import React, { memo } from 'react'; -import { Event, EventModel } from '../models/events'; -import '../styles/eventsContent.css'; - -export const EventsContent: React.FC = memo((props: EventModel) => { - return ( -
-
- { - props.eventsData.map((event: Event) => { - const eventDate: number = new Date(event.date).getDate(); - const eventMonth: string = new Date(event.date).toLocaleString('ru', { month: 'short' }).toUpperCase(); - - return
-
-

{eventDate}

- {eventMonth} -
-
-

{event.title}

- {event.description} -
-
; - }) - } -
-
- ); -}); +import React, { memo } from 'react'; +import { Event, EventModel } from '../models/events'; +import '../styles/eventsContent.css'; + +export const EventsContent: React.FC = memo((props: EventModel) => { + return ( +
+
+ { + props.eventsData.map((event: Event) => { + const eventDate: number = new Date(event.date).getDate(); + const eventMonth: string = new Date(event.date).toLocaleString('ru', { month: 'short' }).toUpperCase(); + + return
+
+

{eventDate}

+ {eventMonth} +
+
+

{event.title}

+ {event.description} +
+
; + }) + } +
+
+ ); +}); diff --git a/js_machine_front/src/scenes/communityEvents/models/events.ts b/js_machine_front/src/scenes/communityEvents/models/events.ts index 8eb6c2e..6a74012 100644 --- a/js_machine_front/src/scenes/communityEvents/models/events.ts +++ b/js_machine_front/src/scenes/communityEvents/models/events.ts @@ -1,10 +1,10 @@ -export interface Event { - id: number; - date: string; - title: string; - description: string; -} - -export interface EventModel { - eventsData: Event[]; -} +export interface Event { + id: number; + date: string; + title: string; + description: string; +} + +export interface EventModel { + eventsData: Event[]; +} diff --git a/js_machine_front/src/scenes/digestView/components/dateAndView.tsx b/js_machine_front/src/scenes/digestView/components/dateAndView.tsx index e5343d5..a40ca3e 100644 --- a/js_machine_front/src/scenes/digestView/components/dateAndView.tsx +++ b/js_machine_front/src/scenes/digestView/components/dateAndView.tsx @@ -1,13 +1,13 @@ -import React, { memo } from 'react'; -import Eye from '../images/eye.svg'; -import '../styles/dateAndView.css'; -import { DateAndViewProps } from '../models/dateAndView'; - -export const DateAndView: React.FC = memo((props: DateAndViewProps) => { - return ( -
- 5 АВГ - Eye {props.views} -
- ); -}); +import React, { memo } from 'react'; +import Eye from '../images/eye.svg'; +import '../styles/dateAndView.css'; +import { DateAndViewProps } from '../models/dateAndView'; + +export const DateAndView: React.FC = memo((props: DateAndViewProps) => { + return ( +
+ 5 АВГ + Eye {props.views} +
+ ); +}); diff --git a/js_machine_front/src/scenes/digestView/components/leftArrowButton.tsx b/js_machine_front/src/scenes/digestView/components/leftArrowButton.tsx index 16b4e89..c67ea59 100644 --- a/js_machine_front/src/scenes/digestView/components/leftArrowButton.tsx +++ b/js_machine_front/src/scenes/digestView/components/leftArrowButton.tsx @@ -1,13 +1,13 @@ -import React, { memo } from 'react'; -import '../styles/leftArrowButton.css'; -import arrow from '../images/left.svg'; -import { LeftArrowButtonProps } from '../models/leftArrowButton'; - -export const LeftArrowButton: React.FC = memo((props: LeftArrowButtonProps) => { - return ( - - left-arrow - {props.text} - - ); -}); +import React, { memo } from 'react'; +import '../styles/leftArrowButton.css'; +import arrow from '../images/left.svg'; +import { LeftArrowButtonProps } from '../models/leftArrowButton'; + +export const LeftArrowButton: React.FC = memo((props: LeftArrowButtonProps) => { + return ( + + left-arrow + {props.text} + + ); +}); diff --git a/js_machine_front/src/scenes/digestView/components/option.tsx b/js_machine_front/src/scenes/digestView/components/option.tsx index 8df02d6..05687fe 100644 --- a/js_machine_front/src/scenes/digestView/components/option.tsx +++ b/js_machine_front/src/scenes/digestView/components/option.tsx @@ -1,15 +1,15 @@ -import React, { memo } from 'react'; -import '../styles/option.css'; -import star from '../images/star.svg'; -import share from '../images/share-option.svg'; -import warning from '../images/warning.svg'; - -export const Option: React.FC = memo(() => { - return ( -
- share - start - warning -
- ); -}); +import React, { memo } from 'react'; +import '../styles/option.css'; +import star from '../images/star.svg'; +import share from '../images/share-option.svg'; +import warning from '../images/warning.svg'; + +export const Option: React.FC = memo(() => { + return ( +
+ share + start + warning +
+ ); +}); diff --git a/js_machine_front/src/scenes/digestView/digestView.tsx b/js_machine_front/src/scenes/digestView/digestView.tsx index e012b5a..98879f6 100644 --- a/js_machine_front/src/scenes/digestView/digestView.tsx +++ b/js_machine_front/src/scenes/digestView/digestView.tsx @@ -1,73 +1,73 @@ -import React, { memo } from 'react'; -import CSSTransition from 'react-transition-group/CSSTransition'; -import './styles/digestView.css'; - -import { LeftArrowButton } from './components/leftArrowButton'; -import { DateAndView } from './components/dateAndView'; -import { Option } from './components/option'; -import { data } from './services/digestView'; -import { DigestViewProps } from './models/digestView'; - -export const DigestView: React.FC = memo((props: DigestViewProps) => { - - const benefits = data.benefits.map((el, idx) => { - return
  • {el}
    • ; - }); - - const news = ( - -

    #Новости

    -

    {data.news.title}

    -

    {data.news.body} тут.

    -     - ); - - const event = ( - -

    #События

    -

    {data.event.title}

    -

    {data.event.body}

    -     - ); - - const greating = ( - -

    Всем доброе утро!

    -

    Прошлое неделя подарила нам интересные статьи, обновления библиотек (куда - без них), браузеров в всяких платформ.

    -

    Ну что же, берем в руку кружку, да-да, берем. Вязли? Отлично, потому что - начинаем!

    -     - ); - - return ( - -
    -
    - -
    -
    -     - ); -}); +import React, { memo } from 'react'; +import CSSTransition from 'react-transition-group/CSSTransition'; +import './styles/digestView.css'; + +import { LeftArrowButton } from './components/leftArrowButton'; +import { DateAndView } from './components/dateAndView'; +import { Option } from './components/option'; +import { data } from './services/digestView'; +import { DigestViewProps } from './models/digestView'; + +export const DigestView: React.FC = memo((props: DigestViewProps) => { + + const benefits = data.benefits.map((el, idx) => { + return
  • {el}
    • ; + }); + + const news = ( + +

    #Новости

    +

    {data.news.title}

    +

    {data.news.body} тут.

    +     + ); + + const event = ( + +

    #События

    +

    {data.event.title}

    +

    {data.event.body}

    +     + ); + + const greating = ( + +

    Всем доброе утро!

    +

    Прошлое неделя подарила нам интересные статьи, обновления библиотек (куда + без них), браузеров в всяких платформ.

    +

    Ну что же, берем в руку кружку, да-да, берем. Вязли? Отлично, потому что + начинаем!

    +     + ); + + return ( + +
    +
    + +
    +
    +     + ); +}); diff --git a/js_machine_front/src/scenes/digestView/models/dateAndView.ts b/js_machine_front/src/scenes/digestView/models/dateAndView.ts index 511600b..7bba0de 100644 --- a/js_machine_front/src/scenes/digestView/models/dateAndView.ts +++ b/js_machine_front/src/scenes/digestView/models/dateAndView.ts @@ -1,3 +1,3 @@ -export interface DateAndViewProps { - views: number; -} +export interface DateAndViewProps { + views: number; +} diff --git a/js_machine_front/src/scenes/digestView/models/digestView.ts b/js_machine_front/src/scenes/digestView/models/digestView.ts index 4c3470f..76b378e 100644 --- a/js_machine_front/src/scenes/digestView/models/digestView.ts +++ b/js_machine_front/src/scenes/digestView/models/digestView.ts @@ -1,3 +1,3 @@ -export interface DigestViewProps { - history: any; -} +export interface DigestViewProps { + history: any; +} diff --git a/js_machine_front/src/scenes/digestView/models/leftArrowButton.ts b/js_machine_front/src/scenes/digestView/models/leftArrowButton.ts index d5ed544..0296bfe 100644 --- a/js_machine_front/src/scenes/digestView/models/leftArrowButton.ts +++ b/js_machine_front/src/scenes/digestView/models/leftArrowButton.ts @@ -1,4 +1,4 @@ -export interface LeftArrowButtonProps { - closeDigest: (event: React.MouseEvent) => void; - text: string; - } +export interface LeftArrowButtonProps { + closeDigest: (event: React.MouseEvent) => void; + text: string; + } diff --git a/js_machine_front/src/scenes/digestView/services/digestView.ts b/js_machine_front/src/scenes/digestView/services/digestView.ts index 7f2bb6c..24952b0 100644 --- a/js_machine_front/src/scenes/digestView/services/digestView.ts +++ b/js_machine_front/src/scenes/digestView/services/digestView.ts @@ -1,19 +1,19 @@ -export const data = { - view: 25, - news: { - title: 'В Firebox будет проведен эксперимент, связанный с DNS-over-HTTP', - body: 'Безопасность и удобство в перспективе. Что же из этого получится - не известно. Апока что читаем', - link: 'localhost:3000', - }, - event : { - title: 'The Rolling Scopes Conference (9-11 августа)', - body: 'Одна из крупнейших конференций, котарая пройдет в Минске уже в 5 раз и ужетак скоро на этих выходных!', - }, - benefits: [ - '3 дня по 3 потока', - 'Более 1000 участников', - '50+ спикеров из 13 стран 1000 участников', - 'Воркшопы и панельныные экскурсии', - ], - back: 'назад', -}; +export const data = { + view: 25, + news: { + title: 'В Firebox будет проведен эксперимент, связанный с DNS-over-HTTP', + body: 'Безопасность и удобство в перспективе. Что же из этого получится - не известно. Апока что читаем', + link: 'localhost:3000', + }, + event : { + title: 'The Rolling Scopes Conference (9-11 августа)', + body: 'Одна из крупнейших конференций, котарая пройдет в Минске уже в 5 раз и ужетак скоро на этих выходных!', + }, + benefits: [ + '3 дня по 3 потока', + 'Более 1000 участников', + '50+ спикеров из 13 стран 1000 участников', + 'Воркшопы и панельныные экскурсии', + ], + back: 'назад', +}; diff --git a/js_machine_front/src/scenes/main/components/RecentEvents.tsx b/js_machine_front/src/scenes/main/components/RecentEvents.tsx index e4b1107..1f35111 100644 --- a/js_machine_front/src/scenes/main/components/RecentEvents.tsx +++ b/js_machine_front/src/scenes/main/components/RecentEvents.tsx @@ -1,28 +1,28 @@ -import React from 'react'; - -import '../styles/recentEvents.css'; -import '../styles/recentEventsMedia.css'; - -import { EventProps, Event } from 'scenes/main/models/recentEvents'; - -export const RecentEvents: React.FC = (props: EventProps) => { - return
    - { - props.events.map((event: Event) => { - const eventDate: number = new Date(event.date).getDate(); - const eventMonth: string = new Date(event.date).toLocaleString('ru', { month: 'short' }).toUpperCase(); - - return
    -
    -

    {eventDate}

    - {eventMonth} -
    -
    -

    {event.title}

    - {event.description} -
    -
    ; - }) - } -
    ; -}; +import React from 'react'; + +import '../styles/recentEvents.css'; +import '../styles/recentEventsMedia.css'; + +import { EventProps, Event } from 'scenes/main/models/recentEvents'; + +export const RecentEvents: React.FC = (props: EventProps) => { + return
    + { + props.events.map((event: Event) => { + const eventDate: number = new Date(event.date).getDate(); + const eventMonth: string = new Date(event.date).toLocaleString('ru', { month: 'short' }).toUpperCase(); + + return
    +
    +

    {eventDate}

    + {eventMonth} +
    +
    +

    {event.title}

    + {event.description} +
    +
    ; + }) + } +
    ; +}; diff --git a/js_machine_front/src/scenes/main/components/SocialLinks.tsx b/js_machine_front/src/scenes/main/components/SocialLinks.tsx index d46c6ea..3dfdfcf 100644 --- a/js_machine_front/src/scenes/main/components/SocialLinks.tsx +++ b/js_machine_front/src/scenes/main/components/SocialLinks.tsx @@ -1,24 +1,24 @@ -import React from 'react'; -import VkIcon from '../images/vk-icon.png'; -import TelegramIcon from '../images/telegram-icon.png'; -import InstaIcon from '../images/instagram-icon.png'; -import '../styles/socialLinks.css'; -import '../styles/socialLinksMedia.css'; - -const sectionStyle = { - height: '100%', - alignItems: 'center', - display: 'flex', -}; - -export const SocialLinks: React.FC = () => { - return ( -
    -
    - telegram-icon - vk-icon - inst-icon -
    -
    - ); -}; +import React from 'react'; +import VkIcon from '../images/vk-icon.png'; +import TelegramIcon from '../images/telegram-icon.png'; +import InstaIcon from '../images/instagram-icon.png'; +import '../styles/socialLinks.css'; +import '../styles/socialLinksMedia.css'; + +const sectionStyle = { + height: '100%', + alignItems: 'center', + display: 'flex', +}; + +export const SocialLinks: React.FC = () => { + return ( +
    +
    + telegram-icon + vk-icon + inst-icon +
    +
    + ); +}; diff --git a/js_machine_front/src/scenes/main/index.ts b/js_machine_front/src/scenes/main/index.ts index a5cb66d..ae4026e 100644 --- a/js_machine_front/src/scenes/main/index.ts +++ b/js_machine_front/src/scenes/main/index.ts @@ -1,2 +1,2 @@ -export * from './components/RecentEvents'; -export * from './components/SocialLinks'; +export * from './components/RecentEvents'; +export * from './components/SocialLinks'; diff --git a/js_machine_front/src/scenes/main/main.tsx b/js_machine_front/src/scenes/main/main.tsx index 5b836cf..4e83cc5 100644 --- a/js_machine_front/src/scenes/main/main.tsx +++ b/js_machine_front/src/scenes/main/main.tsx @@ -1,52 +1,52 @@ -import React, { memo } from 'react'; -import Background from './images/main.jpg'; -import './styles/main.css'; -import './styles/mainMedia.css'; - -import { SocialLinks, RecentEvents } from './'; - -const sectionStyle = { - height: '100%', - backgroundImage: `url(${Background})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', -}; - -const events = [ - { - id: '0', - date: '04/20/2019', - title: 'MITCone 2019', - description: 'Одна из самых масштабных конференций Могилева, спикеры из Минска, Гомеля, и других городов', - }, - { - id: '1', - date: '05/30/2019', - title: 'JS JUNGLE', - description: 'Отпразнуем День JS разработчика вместе. Вопросы по JS/Front-End и It в целом. Победителям подарки!', - }, - { - id: '2', - date: '06/29/2019', - title: 'Городской пикник', - description: 'Встреча могилевских IT-компаний на открытом воздухе в парке Подниколье', - }, - { - id: '3', - date: '08/09/2019', - title: 'The Rolling Scopes Conference', - description: 'Интересные доклады, живое общение и конечно же призы!', - }, -]; - -export const Main: React.FC = memo(() => { - return ( -
    - -
    - -
    -
    - ); -}); +import React, { memo } from 'react'; +import Background from './images/main.jpg'; +import './styles/main.css'; +import './styles/mainMedia.css'; + +import { SocialLinks, RecentEvents } from './'; + +const sectionStyle = { + height: '100%', + backgroundImage: `url(${Background})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', +}; + +const events = [ + { + id: '0', + date: '04/20/2019', + title: 'MITCone 2019', + description: 'Одна из самых масштабных конференций Могилева, спикеры из Минска, Гомеля, и других городов', + }, + { + id: '1', + date: '05/30/2019', + title: 'JS JUNGLE', + description: 'Отпразнуем День JS разработчика вместе. Вопросы по JS/Front-End и It в целом. Победителям подарки!', + }, + { + id: '2', + date: '06/29/2019', + title: 'Городской пикник', + description: 'Встреча могилевских IT-компаний на открытом воздухе в парке Подниколье', + }, + { + id: '3', + date: '08/09/2019', + title: 'The Rolling Scopes Conference', + description: 'Интересные доклады, живое общение и конечно же призы!', + }, +]; + +export const Main: React.FC = memo(() => { + return ( +
    + +
    + +
    +
    + ); +}); diff --git a/js_machine_front/src/scenes/main/models/recentEvents.ts b/js_machine_front/src/scenes/main/models/recentEvents.ts index 32fc0de..95d8b94 100644 --- a/js_machine_front/src/scenes/main/models/recentEvents.ts +++ b/js_machine_front/src/scenes/main/models/recentEvents.ts @@ -1,10 +1,10 @@ -export interface Event { - id: string; - date: string; - title: string; - description: string; -} - -export interface EventProps { - events: Event[]; -} +export interface Event { + id: string; + date: string; + title: string; + description: string; +} + +export interface EventProps { + events: Event[]; +} diff --git a/js_machine_front/src/scenes/main/tests/main.test.tsx b/js_machine_front/src/scenes/main/tests/main.test.tsx index 7ac0b84..2707076 100644 --- a/js_machine_front/src/scenes/main/tests/main.test.tsx +++ b/js_machine_front/src/scenes/main/tests/main.test.tsx @@ -1,23 +1,23 @@ -import React from 'react'; -import { Main } from '../main'; -import { shallow } from 'enzyme'; -import { RecentEvents } from '../components/RecentEvents'; -import { SocialLinks } from '../components/SocialLinks'; - -describe('Main component is ready', () => { - it('recentEvents component is ready', () => { - const component = shallow(
    ); - - const recentEvents = component.find(RecentEvents); - - expect(recentEvents).toHaveLength(1); - }); - - it('socialLinks component is ready', () => { - const component = shallow(
    ); - - const socialLinks = component.find(SocialLinks); - - expect(socialLinks).toHaveLength(1); - }); -}); +import React from 'react'; +import { Main } from '../main'; +import { shallow } from 'enzyme'; +import { RecentEvents } from '../components/RecentEvents'; +import { SocialLinks } from '../components/SocialLinks'; + +describe('Main component is ready', () => { + it('recentEvents component is ready', () => { + const component = shallow(
    ); + + const recentEvents = component.find(RecentEvents); + + expect(recentEvents).toHaveLength(1); + }); + + it('socialLinks component is ready', () => { + const component = shallow(
    ); + + const socialLinks = component.find(SocialLinks); + + expect(socialLinks).toHaveLength(1); + }); +}); diff --git a/js_machine_front/src/scenes/news/components/newsContainer.tsx b/js_machine_front/src/scenes/news/components/newsContainer.tsx index 65d19df..2fa1430 100644 --- a/js_machine_front/src/scenes/news/components/newsContainer.tsx +++ b/js_machine_front/src/scenes/news/components/newsContainer.tsx @@ -1,15 +1,15 @@ -import React from 'react'; -import { NewsModel, News } from '../models/news'; -import { NewsPresentation } from './newsPresentation'; -import '../styles/newsContainer.css'; -import '../styles/newsContainerMedia.css'; - -export const EventsContainer: React.FC = (props: NewsModel) => { - return ( -
    - { - props.newsData.map((news: News) => ) - } -
    - ); -}; +import React from 'react'; +import { NewsModel, News } from '../models/news'; +import { NewsPresentation } from './newsPresentation'; +import '../styles/newsContainer.css'; +import '../styles/newsContainerMedia.css'; + +export const EventsContainer: React.FC = (props: NewsModel) => { + return ( +
    + { + props.newsData.map((news: News) => ) + } +
    + ); +}; diff --git a/js_machine_front/src/scenes/news/components/newsPresentation.tsx b/js_machine_front/src/scenes/news/components/newsPresentation.tsx index 16e2aca..be0fd78 100644 --- a/js_machine_front/src/scenes/news/components/newsPresentation.tsx +++ b/js_machine_front/src/scenes/news/components/newsPresentation.tsx @@ -1,30 +1,30 @@ -import React from 'react'; -import { News } from '../models/news'; -import { Link } from 'react-router-dom'; - -export const NewsPresentation: React.FC = (props) => { - const newsDate: number = new Date(props.date).getDate(); - const newsMonth: string = new Date(props.date).toLocaleString('ru', {month: 'short'}).toUpperCase(); - - return ( -
    - -
    -
    ЧИТАТЬ >
    -
    - - -
    -
    -

    {newsDate} {newsMonth}

    -
    -
    -

    {props.title}

    -
    -
    -

    {props.description}

    -
    -
    -
    - ) -}; +import React from 'react'; +import { News } from '../models/news'; +import { Link } from 'react-router-dom'; + +export const NewsPresentation: React.FC = (props) => { + const newsDate: number = new Date(props.date).getDate(); + const newsMonth: string = new Date(props.date).toLocaleString('ru', {month: 'short'}).toUpperCase(); + + return ( +
    + +
    +
    ЧИТАТЬ >
    +
    + + +
    +
    +

    {newsDate} {newsMonth}

    +
    +
    +

    {props.title}

    +
    +
    +

    {props.description}

    +
    +
    +
    + ); +}; diff --git a/js_machine_front/src/scenes/news/models/news.ts b/js_machine_front/src/scenes/news/models/news.ts index 9d034c9..955f1d9 100644 --- a/js_machine_front/src/scenes/news/models/news.ts +++ b/js_machine_front/src/scenes/news/models/news.ts @@ -1,10 +1,10 @@ -export interface News { - id: number; - date: string; - title: string; - description: string; -} - -export interface NewsModel { - newsData: News[]; -} +export interface News { + id: number; + date: string; + title: string; + description: string; +} + +export interface NewsModel { + newsData: News[]; +} diff --git a/js_machine_front/src/scenes/news/news.tsx b/js_machine_front/src/scenes/news/news.tsx index bdc50a7..6975703 100644 --- a/js_machine_front/src/scenes/news/news.tsx +++ b/js_machine_front/src/scenes/news/news.tsx @@ -1,38 +1,38 @@ -import React from 'react'; -import Background from './images/news.jpg'; -import { FormattedMessage } from 'react-intl'; -import './styles/news.css'; - -import { EventsContainer } from './components/newsContainer'; -import { NewsModel } from './models/news'; -import { getNewsData } from './services/mocksNewsData'; - -const sectionStyle = { - height: '100vh', - backgroundImage: `url(${Background})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: 'center', -}; - -export class News extends React.PureComponent<{}, NewsModel> { - public state: NewsModel = { newsData: [] }; - - public componentDidMount = async () => { - const response = await getNewsData(); - this.setState(() => ({ newsData: response })); - } - - public render(): JSX.Element { - return ( -
    -
    -
    - -
    - -
    -
    - ); - } -} +import React from 'react'; +import Background from './images/news.jpg'; +import { FormattedMessage } from 'react-intl'; +import './styles/news.css'; + +import { EventsContainer } from './components/newsContainer'; +import { NewsModel } from './models/news'; +import { getNewsData } from './services/mocksNewsData'; + +const sectionStyle = { + height: '100vh', + backgroundImage: `url(${Background})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: 'center', +}; + +export class News extends React.PureComponent<{}, NewsModel> { + public state: NewsModel = { newsData: [] }; + + public componentDidMount = async () => { + const response = await getNewsData(); + this.setState(() => ({ newsData: response })); + } + + public render(): JSX.Element { + return ( +
    +
    +
    + +
    + +
    +
    + ); + } +} diff --git a/js_machine_front/src/scenes/partnersLogo/components/partnersLogo.tsx b/js_machine_front/src/scenes/partnersLogo/components/partnersLogo.tsx index 079f8f4..9bd17c2 100644 --- a/js_machine_front/src/scenes/partnersLogo/components/partnersLogo.tsx +++ b/js_machine_front/src/scenes/partnersLogo/components/partnersLogo.tsx @@ -1,13 +1,13 @@ -import React from 'react'; -import '../styles/partnersLogo.css'; -import '../styles/partnersLogoMedia.css'; - -export const PartnersLogo: React.FC = () => { - return ( -
    -
    -
    -
    -
    - ); -}; +import React from 'react'; +import '../styles/partnersLogo.css'; +import '../styles/partnersLogoMedia.css'; + +export const PartnersLogo: React.FC = () => { + return ( +
    +
    +
    +
    +
    + ); +}; diff --git a/js_machine_front/src/scenes/partnersLogo/partners.tsx b/js_machine_front/src/scenes/partnersLogo/partners.tsx index 426ccf8..5f8d333 100644 --- a/js_machine_front/src/scenes/partnersLogo/partners.tsx +++ b/js_machine_front/src/scenes/partnersLogo/partners.tsx @@ -1,28 +1,28 @@ -import React, { memo } from 'react'; -import Background from './images/partners.jpg'; -import './styles/partners.css'; -import './styles/partnersMedia.css'; -import { PartnersLogo } from './components/partnersLogo'; - -import { FormattedMessage } from 'react-intl'; - -const sectionStyle = { - height: '100vh', - backgroundImage: `url(${Background})`, - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover', - backgroundPosition: '50% 20%', -}; - -export const Partners: React.FC = memo(() => { - return ( -
    -
    -
    - -
    - -
    -
    - ); -}); +import React, { memo } from 'react'; +import Background from './images/partners.jpg'; +import './styles/partners.css'; +import './styles/partnersMedia.css'; +import { PartnersLogo } from './components/partnersLogo'; + +import { FormattedMessage } from 'react-intl'; + +const sectionStyle = { + height: '100vh', + backgroundImage: `url(${Background})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + backgroundPosition: '50% 20%', +}; + +export const Partners: React.FC = memo(() => { + return ( +
    +
    +
    + +
    + +
    +
    + ); +}); diff --git a/js_machine_front/src/scenes/partnersLogo/tests/partners.test.tsx b/js_machine_front/src/scenes/partnersLogo/tests/partners.test.tsx index 5789860..831b4c1 100644 --- a/js_machine_front/src/scenes/partnersLogo/tests/partners.test.tsx +++ b/js_machine_front/src/scenes/partnersLogo/tests/partners.test.tsx @@ -1,16 +1,16 @@ -import React from 'react'; -import { Partners } from '../partners'; -import { shallow } from 'enzyme'; -import { PartnersLogo } from '../components/partnersLogo'; - -describe('Partners component is ready', () => { - it('partnersLogo component is ready', () => { - - const component = shallow(); - - const partnersLogo = component.find(PartnersLogo); - - expect(partnersLogo).toHaveLength(1); - - }); -}); +import React from 'react'; +import { Partners } from '../partners'; +import { shallow } from 'enzyme'; +import { PartnersLogo } from '../components/partnersLogo'; + +describe('Partners component is ready', () => { + it('partnersLogo component is ready', () => { + + const component = shallow(); + + const partnersLogo = component.find(PartnersLogo); + + expect(partnersLogo).toHaveLength(1); + + }); +}); diff --git a/js_machine_front/src/scenes/partnersLogo/tests/partnersLogo.test.tsx b/js_machine_front/src/scenes/partnersLogo/tests/partnersLogo.test.tsx index d6050f2..920f300 100644 --- a/js_machine_front/src/scenes/partnersLogo/tests/partnersLogo.test.tsx +++ b/js_machine_front/src/scenes/partnersLogo/tests/partnersLogo.test.tsx @@ -1,13 +1,13 @@ -import React from 'react'; -import { PartnersLogo } from '../components/partnersLogo'; -import { shallow } from 'enzyme'; - -describe('PartnersLogo component is ready', () => { - it('partnersLogo component is ready', () => { - const component = shallow(); - - const partnersLogo = component.find('div'); - - expect(partnersLogo).toHaveLength(4); - }); -}); +import React from 'react'; +import { PartnersLogo } from '../components/partnersLogo'; +import { shallow } from 'enzyme'; + +describe('PartnersLogo component is ready', () => { + it('partnersLogo component is ready', () => { + const component = shallow(); + + const partnersLogo = component.find('div'); + + expect(partnersLogo).toHaveLength(4); + }); +}); diff --git a/js_machine_front/src/serviceWorker.ts b/js_machine_front/src/serviceWorker.ts index 00afbf4..699eb40 100644 --- a/js_machine_front/src/serviceWorker.ts +++ b/js_machine_front/src/serviceWorker.ts @@ -1,14 +1,14 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA //tslint:disable const isLocalhost = Boolean( window.location.hostname === 'localhost' || diff --git a/js_machine_front/tslint.json b/js_machine_front/tslint.json index 3b54087..47f9f5e 100644 --- a/js_machine_front/tslint.json +++ b/js_machine_front/tslint.json @@ -1,142 +1,142 @@ -{ - "defaultSeverity": "error", - "extends": [ - "tslint:recommended", - "tslint-react", - "tslint-config-prettier" - ], - "jsRules": {}, - "rules": { - "jsx-no-lambda": false, - "ordered-imports": false, - "arrow-return-shorthand": true, - "callable-types": true, - "class-name": true, - "comment-format": [ - true, - "check-space" - ], - "curly": true, - "eofline": true, - "forin": true, - "import-spacing": true, - "interface-name": [true, "never-prefix"], - "interface-over-type-literal": true, - "label-position": true, - "max-line-length": [ - true, - 280 - ], - "member-access": false, - "member-ordering": [ - true, - { - "order": [ - "static-field", - "instance-field", - "static-method", - "instance-method" - ] - } - ], - "no-arg": true, - "no-bitwise": true, - "no-console": true, - "no-construct": true, - "no-debugger": true, - "no-duplicate-super": true, - "no-empty": false, - "no-empty-interface": true, - "no-eval": true, - "no-inferrable-types": [ - true, - "ignore-params" - ], - "no-misused-new": true, - "no-non-null-assertion": true, - "no-shadowed-variable": true, - "no-string-literal": false, - "no-string-throw": true, - "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unnecessary-initializer": true, - "no-unused-expression": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ - true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" - ], - "prefer-const": true, - "quotemark": [ - true, - "single", - "jsx-double" - ], - "radix": true, - "semicolon": [ - true, - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "unified-signatures": true, - "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ], - "indent": [ - true, - "spaces", - 2 - ], - "trailing-comma": [ - true, - { - "multiline": "always", - "singleline": "never" - } - ], - "linebreak-style": [ - true, - "CRLF" - ], - "typedef": [ - true, - "call-signature", - "parameter", - "property-declaration", - "member-variable-declaration" - ], - "no-consecutive-blank-lines": true - }, - "rulesDirectory": [], - "linterOptions": { - "typeCheck": true, - "exclude": [ - "config/**/*.js", - "node_modules/**/*.ts", - "coverage/lcov-report/*.js" - ] - } - } \ No newline at end of file +{ + "defaultSeverity": "error", + "extends": [ + "tslint:recommended", + "tslint-react", + "tslint-config-prettier" + ], + "jsRules": {}, + "rules": { + "jsx-no-lambda": false, + "ordered-imports": false, + "arrow-return-shorthand": true, + "callable-types": true, + "class-name": true, + "comment-format": [ + true, + "check-space" + ], + "curly": true, + "eofline": true, + "forin": true, + "import-spacing": true, + "interface-name": [true, "never-prefix"], + "interface-over-type-literal": true, + "label-position": true, + "max-line-length": [ + true, + 280 + ], + "member-access": false, + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], + "no-arg": true, + "no-bitwise": true, + "no-console": true, + "no-construct": true, + "no-debugger": true, + "no-duplicate-super": true, + "no-empty": false, + "no-empty-interface": true, + "no-eval": true, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-misused-new": true, + "no-non-null-assertion": true, + "no-shadowed-variable": true, + "no-string-literal": false, + "no-string-throw": true, + "no-switch-case-fall-through": true, + "no-trailing-whitespace": true, + "no-unnecessary-initializer": true, + "no-unused-expression": true, + "no-var-keyword": true, + "object-literal-sort-keys": false, + "one-line": [ + true, + "check-open-brace", + "check-catch", + "check-else", + "check-whitespace" + ], + "prefer-const": true, + "quotemark": [ + true, + "single", + "jsx-double" + ], + "radix": true, + "semicolon": [ + true, + "always" + ], + "triple-equals": [ + true, + "allow-null-check" + ], + "typedef-whitespace": [ + true, + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + } + ], + "unified-signatures": true, + "variable-name": false, + "whitespace": [ + true, + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type" + ], + "indent": [ + true, + "spaces", + 2 + ], + "trailing-comma": [ + true, + { + "multiline": "always", + "singleline": "never" + } + ], + "linebreak-style": [ + true, + "LF" + ], + "typedef": [ + true, + "call-signature", + "parameter", + "property-declaration", + "member-variable-declaration" + ], + "no-consecutive-blank-lines": true + }, + "rulesDirectory": [], + "linterOptions": { + "typeCheck": true, + "exclude": [ + "config/**/*.js", + "node_modules/**/*.ts", + "coverage/lcov-report/*.js" + ] + } + }