From c6d791c520d1613de96ee001cbbd17291cb59a88 Mon Sep 17 00:00:00 2001 From: Aleksandr Kuznetsov Date: Sun, 5 Dec 2021 17:12:33 +0500 Subject: [PATCH] 2.0 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Уход от классовых компонентах к функциональным • Теперь используется другой роутер! Подробнее в README --- README.md | 6 +- package.json | 13 +- src/App.js | 290 ++++++---------- src/css/main.css | 16 +- src/index.js | 22 +- src/js/components/modals/HomeBotInfoModal.js | 95 +++--- src/js/components/modals/HomeBotsListModal.js | 84 +++-- src/js/panels/home/base.js | 162 +++++---- src/js/panels/home/placeholder.js | 50 ++- src/js/panels/more/base.js | 119 ------- src/js/panels/profile/base.js | 97 ++++++ src/js/services/VK.js | 47 --- src/js/services/_functions.js | 42 --- src/js/store/formData/actionTypes.js | 1 - src/js/store/formData/actions.js | 11 - src/js/store/formData/reducers.js | 27 -- src/js/store/reducers.js | 10 - src/js/store/router/actionTypes.js | 7 - src/js/store/router/actions.js | 57 ---- src/js/store/router/reducers.js | 313 ------------------ src/js/store/vk/actionTypes.js | 4 - src/js/store/vk/actions.js | 43 --- src/js/store/vk/reducers.js | 73 ---- src/structure.js | 30 ++ 24 files changed, 458 insertions(+), 1161 deletions(-) delete mode 100644 src/js/panels/more/base.js create mode 100644 src/js/panels/profile/base.js delete mode 100644 src/js/services/VK.js delete mode 100644 src/js/services/_functions.js delete mode 100644 src/js/store/formData/actionTypes.js delete mode 100644 src/js/store/formData/actions.js delete mode 100644 src/js/store/formData/reducers.js delete mode 100644 src/js/store/reducers.js delete mode 100644 src/js/store/router/actionTypes.js delete mode 100644 src/js/store/router/actions.js delete mode 100644 src/js/store/router/reducers.js delete mode 100644 src/js/store/vk/actionTypes.js delete mode 100644 src/js/store/vk/actions.js delete mode 100644 src/js/store/vk/reducers.js create mode 100644 src/structure.js diff --git a/README.md b/README.md index 50c1e90..6ce9c11 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,6 @@ [Документация по ReactJS](https://ru.reactjs.org/docs/getting-started.html) -[Документация по React Redux](https://rajdee.gitbooks.io/redux-in-russian/content/) - ## Установка: `git clone git://github.com/reyzitwo/vk-mini-app-boilerplate.git ` @@ -18,8 +16,8 @@ ## -Это обновленная версия [шаблона](https://github.com/iSa1vatore/vk-mini-app-boilerplate) до актуальной версии [VKUI](https://github.com/VKCOM/VKUI). +[Документация по роутеру](https://github.com/alexz9/react-router-vkminiapps) Демо: [vk.com/app7855533](https://vk.com/app7855533) -Мой VK (вопросы, предложения): [Александр Кузнецов](https://vk.me/reyzitwo) +Мой VK (вопросы, предложения): [Александр Кузнецов](https://vk.me/id566935204) diff --git a/package.json b/package.json index f4c53e9..792b73a 100644 --- a/package.json +++ b/package.json @@ -16,28 +16,19 @@ "devDependencies": { "@vkontakte/vk-miniapps-deploy": "0.0.25", "cross-env": "^5.2.1", - "react-hot-loader": "^4.12.19", - "react-scripts": "^2.1.8", - "redux-devtools-extension": "^2.13.8" + "react-scripts": "^2.1.8" }, "dependencies": { "@vkontakte/icons": "^1.16.1", "@vkontakte/vk-bridge": "^2.4.1", - "@vkontakte/vk-connect": "^1.8.7", - "@vkontakte/vkjs": "^0.21.0", "@vkontakte/vkui": "^4.7.0", - "babel-eslint": "^9.0.0", - "chalk": "^2.4.2", "core-js": "^2.6.11", "eruda": "^2.4.1", "eruda-code": "^2.0.0", "eruda-dom": "^2.0.0", - "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-redux": "^7.1.3", - "redux": "^4.0.5", - "redux-thunk": "^2.3.0" + "react-router-vkminiapps": "^1.2.3" }, "browserslist": [ ">0.2%", diff --git a/src/App.js b/src/App.js index 4a6232f..4868b51 100644 --- a/src/App.js +++ b/src/App.js @@ -1,27 +1,23 @@ import React from 'react'; -import {connect} from 'react-redux'; -import {bindActionCreators} from 'redux' -import {goBack, closeModal, setStory} from "./js/store/router/actions"; -import {getActivePanel} from "./js/services/_functions"; +import { withRouter } from 'react-router-vkminiapps'; import { Epic, View, - Root, Tabbar, ModalRoot, TabbarItem, ConfigProvider, AdaptivityProvider, AppRoot, - platform, + usePlatform, VKCOM, Cell, SplitCol, PanelHeader, SplitLayout, Panel, - Group + Group, } from "@vkontakte/vkui"; import { @@ -32,194 +28,126 @@ import { import HomePanelBase from './js/panels/home/base'; import HomePanelPlaceholder from './js/panels/home/placeholder'; -import MorePanelBase from './js/panels/more/base'; +import ProfilePanelBase from './js/panels/profile/base'; import HomeBotsListModal from './js/components/modals/HomeBotsListModal'; import HomeBotInfoModal from './js/components/modals/HomeBotInfoModal'; -class App extends React.Component { - constructor(props) { - super(props); - - this.state = { - hasHeader: true, - isDesktop: false, - Platform: platform() - } - - this.lastAndroidBackAction = 0; - } - - async componentDidMount() { - const {goBack} = this.props; - - let parsedUrl = new URL(window.location.href) - if (parsedUrl.searchParams.get('vk_platform') === 'desktop_web') { - this.setState({ - isDesktop: true, - hasHeader: false, - Platform: VKCOM - }) - } - - window.onpopstate = () => { - let timeNow = +new Date(); - - if (timeNow - this.lastAndroidBackAction > 500) { - this.lastAndroidBackAction = timeNow; - - goBack(); - } else { - window.history.pushState(null, null); - } - }; - } - - componentDidUpdate(prevProps, prevState, snapshot) { - const {activeView, activeStory, activePanel, scrollPosition} = this.props; - - if ( - prevProps.activeView !== activeView || - prevProps.activePanel !== activePanel || - prevProps.activeStory !== activeStory - ) { - let pageScrollPosition = scrollPosition[activeStory + "_" + activeView + "_" + activePanel] || 0; - - window.scroll(0, pageScrollPosition); - } - } - - render() { - const {goBack, setStory, closeModal, popouts, activeView, activeStory, activeModals, panelsHistory} = this.props; - const { isDesktop, hasHeader, Platform } = this.state - - let history = (panelsHistory[activeView] === undefined) ? [activeView] : panelsHistory[activeView]; - let popout = (popouts[activeView] === undefined) ? null : popouts[activeView]; - let activeModal = (activeModals[activeView] === undefined) ? null : activeModals[activeView]; - - const homeModals = ( - - closeModal()} - /> - closeModal()} - /> - - ); - - return ( - - - - } - style={{ justifyContent: "center" }} - > - - props.router.toView(e.currentTarget.dataset.id) + + let parsedUrl = new URL(window.location.href) + const platform = parsedUrl.searchParams.get('vk_platform') === 'desktop_web' ? VKCOM : usePlatform() + const isDesktop = parsedUrl.searchParams.get('vk_platform') === 'desktop_web' ? true : false + const hasHeader = parsedUrl.searchParams.get('vk_platform') === 'desktop_web' ? false : true + + const modals = ( + + + + + + ); + + return( + + + + } + style={{ justifyContent: "center" }} + > + + setStory('home', 'base')} - selected={activeStory === 'home'} + data-id='home' + selected={props.router.activeView === 'home'} + onClick={setActiveView} text='Главная' > setStory('more', 'callmodal')} - selected={activeStory === 'more'} + data-id='profile' + selected={props.router.activeView === 'profile'} + onClick={setActiveView} text='Профиль' > - }> - - goBack()} + + }> + goBack()} + > + + + + + goBack()} + > + + + + + + {isDesktop && ( + + + {hasHeader && } + + } + className={props.router.activeView === 'home' ? 'activeViewCell' : ''} > - - - - - - goBack()} + Главная + + + } + className={props.router.activeView === 'profile' ? 'activeViewCell' : ''} > - - - - + Профиль + + + - - {isDesktop && ( - - - {hasHeader && } - - setStory('home', 'base')} - disabled={activeStory === 'home'} - before={} - style={ activeStory === 'home' ? { - backgroundColor: 'var(--button_secondary_background)', - borderRadius: 8 - } : {}} - > - Главная - - setStory('more', 'callmodal')} - disabled={activeStory === 'more'} - before={} - style={ activeStory === 'more' ? { - backgroundColor: 'var(--button_secondary_background)', - borderRadius: 8 - } : {}} - > - Профиль - - - - - )} + )} - - - - - ); - } -} - -const mapStateToProps = (state) => { - return { - activeView: state.router.activeView, - activeStory: state.router.activeStory, - panelsHistory: state.router.panelsHistory, - activeModals: state.router.activeModals, - popouts: state.router.popouts, - scrollPosition: state.router.scrollPosition, - }; -}; - - -function mapDispatchToProps(dispatch) { - return { - dispatch, - ...bindActionCreators({setStory, goBack, closeModal}, dispatch) - } + + + + + ) } -export default connect(mapStateToProps, mapDispatchToProps)(App); \ No newline at end of file +export default withRouter(App); \ No newline at end of file diff --git a/src/css/main.css b/src/css/main.css index 099a552..ac760a0 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -3,7 +3,12 @@ margin: 0 auto; } -.ProfileUser { +.activeViewCell { + background-color: var(--button_secondary_background); + border-radius: 8px; +} + +.ProfileUserWeb { display: flex; margin: -7px -7px 0 -7px; flex-direction: column; @@ -13,6 +18,15 @@ padding: 32px; } +.ProfileUserMobail { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 32px; +} + .NameUser { margin-bottom: 8px; margin-top: 20px diff --git a/src/index.js b/src/index.js index 747db51..f16e28f 100644 --- a/src/index.js +++ b/src/index.js @@ -4,20 +4,14 @@ import 'core-js/es6/set'; import React from 'react'; import ReactDOM from 'react-dom'; -import {applyMiddleware, createStore} from "redux"; -import thunk from 'redux-thunk'; -import {Provider} from 'react-redux'; -import rootReducer from './js/store/reducers'; -import {composeWithDevTools} from 'redux-devtools-extension'; - -import {setStory} from "./js/store/router/actions"; +import Router from 'react-router-vkminiapps'; +import structure from './structure'; +import App from './App'; import '@vkontakte/vkui/dist/vkui.css'; import './css/main.css'; import bridge from '@vkontakte/vk-bridge'; -import App from './App'; - bridge.subscribe((e) => { switch (e.detail.type) { case 'VKWebAppUpdateConfig': @@ -33,16 +27,10 @@ bridge.subscribe((e) => { bridge.send('VKWebAppInit', {}) -export const store = createStore(rootReducer, composeWithDevTools( - applyMiddleware(thunk), -)); - -store.dispatch(setStory('home', 'base')); - ReactDOM.render( - + - , + , document.getElementById('root') ); diff --git a/src/js/components/modals/HomeBotInfoModal.js b/src/js/components/modals/HomeBotInfoModal.js index 8dd28a6..7afb905 100644 --- a/src/js/components/modals/HomeBotInfoModal.js +++ b/src/js/components/modals/HomeBotInfoModal.js @@ -1,5 +1,4 @@ import React from 'react'; -import {connect} from 'react-redux'; import { Cell, @@ -14,54 +13,58 @@ import { } from "@vkontakte/vkui"; import { Icon24Dismiss, Icon24Cancel } from '@vkontakte/icons' -class HomeBotsListModal extends React.Component { +function BotsListModal({id, platform, router}) { + return ( + router.toBack()}> + + + } - render() { - const {id, onClose, platform} = this.props; - - return ( - } - right={platform === IOS && - } - > - Информация о сообществе - - } - onClose={onClose} - settlingHeight={80} - > - } + right={platform === IOS && + router.toBack()}> + + + } > - Название - - - - + Информация о сообществе + + } + onClose={() => router.toBack()} + settlingHeight={100} + > + } + > + Название + + + + + 8800 - - - - - 555 - - - - - 3535 - - - - - ); - } + + + + + + 555 + + + + + 3535 + + + + + ); } -export default withPlatform(connect()(HomeBotsListModal)); +export default withPlatform(BotsListModal); \ No newline at end of file diff --git a/src/js/components/modals/HomeBotsListModal.js b/src/js/components/modals/HomeBotsListModal.js index 241ddd8..566279b 100644 --- a/src/js/components/modals/HomeBotsListModal.js +++ b/src/js/components/modals/HomeBotsListModal.js @@ -1,7 +1,4 @@ import React from 'react'; -import {connect} from 'react-redux'; - -import {openModal} from "../../store/router/actions"; import { List, @@ -28,53 +25,50 @@ const bots = [ }, { name: 'VK Testers', - avatar: 'https://sun1.is74.userapi.com/impf/c626821/v626821590/2ae79/TI4fleAH-cs.jpg?size=1280x724&quality=96&sign=851a3817064034d2fa974ce029b71a5a&type=album', + avatar: 'https://sun1.is74.userapi.com/impg/A1ovThuM8zEqmrM9JSCmQreQMma77TzS4GKnQg/KXYKrjN-gvs.jpg?size=1280x1280&quality=95&sign=65c063e8da218030ea2643df3414ece4&type=album', desc: 'Какой-то текст' }, ]; -class HomeBotsListModal extends React.Component { - - render() { - const {id, onClose, openModal, platform} = this.props; +function BotsListModal({id, platform, router}) { + return ( + router.toBack()}> + + + } - return ( - } - right={platform === IOS && - } + right={platform === IOS && + router.toBack()}> + + + } + > + Сообщества + + } + onClose={() => router.toBack()} + settlingHeight={100} + > + + {bots.map((bot, index) => ( + } + onClick={() => router.toModal('botInfo')} + asideContent={} > - VK - - } - onClose={onClose} - settlingHeight={80} - > - - {bots.map((bot, index) => ( - } - onClick={() => openModal('MODAL_PAGE_BOT_INFO')} - asideContent={} - > - {bot.name} - - ))} - - - ); - } - + {bot.name} + + ))} + + + ); } -const mapDispatchToProps = { - openModal -}; - -export default withPlatform(connect(null, mapDispatchToProps)(HomeBotsListModal)); +export default withPlatform(BotsListModal); \ No newline at end of file diff --git a/src/js/panels/home/base.js b/src/js/panels/home/base.js index 7eaabc2..28afd68 100644 --- a/src/js/panels/home/base.js +++ b/src/js/panels/home/base.js @@ -1,7 +1,4 @@ -import React from 'react'; -import {connect} from 'react-redux'; - -import {closePopout, goBack, openModal, openPopout, setPage} from '../../store/router/actions'; +import React, { useState } from 'react'; import { Div, @@ -15,21 +12,14 @@ import { Avatar } from '@vkontakte/vkui' import { Icon16Done } from '@vkontakte/icons' -import Chel from '../../../svg/chel.svg' - - -class HomePanelBase extends React.Component { - - state = { - showImg: false - }; +import img from '../../../svg/chel.svg' - showImg = () => { - this.setState({showImg: true}); - }; +function HomePanelBase({id, router}) { + const [showImg, setShowImg] = useState(false) + const [snackbar, setSnackbar] = useState(null) - openPopout() { - this.props.openPopout( + function openAlert() { + router.toPopout( setShowImg(true) }]} - onClose={() => this.props.closePopout()} + onClose={() => router.toPopout()} header='Вопрос значит' text='Вас роняли в детстве?' /> - ); + ) } - async openSpinner() { - this.props.openPopout() - await this.sleep(2500) - this.props.closePopout() + async function openSpinner() { + router.toPopout() + await new Promise(resolve => setTimeout(resolve, 2000)) + router.toPopout() } - openSnackbar() { - this.props.openPopout( + function openSnackbar() { + setSnackbar( this.props.closePopout()} + onClose={() => setSnackbar(null)} action='Например кнопка' - before={ } + before={ + + + + } > Какой-то текст - ); + ) } - sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)) - } + return ( + + Главная + +
+ +
- render() { - const {id, setPage, withoutEpic} = this.props; +
+ +
- return ( - - Examples - -
- -
-
- -
-
- -
-
- -
-
- -
- {withoutEpic &&
- -
} - {this.state.showImg &&
- чел -
} - - - ); - } +
+ +
-} +
+ +
-const mapDispatchToProps = { - setPage, - goBack, - openPopout, - closePopout, - openModal -}; +
+ +
+ + {showImg && +
+ чел +
+ } + + {snackbar} + + ); +} -export default connect(null, mapDispatchToProps)(HomePanelBase); +export default HomePanelBase; \ No newline at end of file diff --git a/src/js/panels/home/placeholder.js b/src/js/panels/home/placeholder.js index 04e594a..f6ec463 100644 --- a/src/js/panels/home/placeholder.js +++ b/src/js/panels/home/placeholder.js @@ -1,7 +1,4 @@ import React from 'react'; -import {connect} from 'react-redux'; - -import {goBack} from "../../store/router/actions"; import { Panel, @@ -12,32 +9,27 @@ import { } from "@vkontakte/vkui"; import { Icon56DiamondOutline } from '@vkontakte/icons'; -class HomePanelPlaceholder extends React.Component { - - render() { - const {id, goBack} = this.props; - - return ( - - goBack()}/>} +function HomePanelPlaceholder({id, router}) { + + return( + + router.toBack()}/>} + > + Панель + + + + } + header='Заглушка' > - Examples 1.2 - - - } - header='Заглушка' - > - Простой Placeholder. Здесь ничего нет - - - - ); - } - + Простой Placeholder. Здесь ничего нет + + + + ) } -const mapDispatchToProps = { goBack }; - -export default connect(null, mapDispatchToProps)(HomePanelPlaceholder); +export default HomePanelPlaceholder; \ No newline at end of file diff --git a/src/js/panels/more/base.js b/src/js/panels/more/base.js deleted file mode 100644 index fd7dcaf..0000000 --- a/src/js/panels/more/base.js +++ /dev/null @@ -1,119 +0,0 @@ -import React from 'react'; -import {connect} from 'react-redux'; - -import {setPage, openPopout, closePopout} from "../../store/router/actions"; - -import { - Panel, - PanelHeader, - Gradient, - Avatar, - Title, - Text, - Button, - ScreenSpinner, - Group, - Header, - SimpleCell, - CellButton -} from "@vkontakte/vkui"; -import { - Icon28SchoolOutline, - Icon28AddOutline -} from '@vkontakte/icons'; -import bridge from '@vkontakte/vk-bridge'; - -var infouser = 0 -var first_name = 'Загрузка...' -var last_name -var user_id -var photo - -class HomePanelProfile extends React.Component { - constructor(props) { - super(props); - - this.state = { - first_name: first_name, - last_name: last_name, - user_id: user_id, - photo: photo - }; - } - - componentDidMount() { - if (infouser === 0) { - this.getInfoUser(); - } - } - - async getInfoUser() { - this.props.openPopout() - - let user_info = await bridge.send('VKWebAppGetUserInfo'); - first_name = user_info.first_name - last_name = user_info.last_name - photo = user_info.photo_200 - user_id = user_info.id - this.setState({ - first_name: first_name, - last_name: last_name, - user_id: user_id, - photo: photo, - }); - infouser = 1 - - this.props.closePopout() - - } - - render() { - const {id} = this.props; - const {photo, first_name, last_name, user_id} = this.state; - - return ( - - Examples 2 - - - - - - {first_name} {last_name} - - - - Крутой человек! - - - - - -
Учебные заведения и классы
- } description="Екатеринбург">Школа №180 - }>Добавить учебное заведение - - - - ); - } - -} - -const mapDispatchToProps = { - setPage, - openPopout, - closePopout -}; - -export default connect(null, mapDispatchToProps)(HomePanelProfile); diff --git a/src/js/panels/profile/base.js b/src/js/panels/profile/base.js new file mode 100644 index 0000000..c51297c --- /dev/null +++ b/src/js/panels/profile/base.js @@ -0,0 +1,97 @@ +import React, { useState, useEffect } from 'react'; + +import { + Panel, + PanelHeader, + Gradient, + Avatar, + Title, + Text, + Button, + ScreenSpinner, + Group, + Header, + SimpleCell, + CellButton +} from "@vkontakte/vkui"; +import { + Icon28SchoolOutline, + Icon28AddOutline +} from '@vkontakte/icons'; +import bridge from '@vkontakte/vk-bridge'; + +let isInfoUser = false +let infoUser = ['Загрузка...'] + +function ProfilePanelBase({id, isDesktop, router}) { + const [infoUsers, setInfoUser] = useState(infoUser) + + useEffect(() => { + if (!isInfoUser) { + getInfoUser() + } + }) + + async function getInfoUser() { + router.toPopout() + + let user_info = await bridge.send('VKWebAppGetUserInfo'); + infoUser[0] = user_info.first_name + ' ' + user_info.last_name + infoUser.push(user_info.photo_200) + infoUser.push(user_info.id) + + setInfoUser(infoUser) + isInfoUser = true + + router.toPopout() + } + + return ( + + Профиль + + + + + + {infoUsers[0]} + + + + Какой-нибудь статус человека... + + + + + +
Учебные заведения и классы
+ + } + description="Екатеринбург" + > + Школа №180 + + + } + > + Добавить учебное заведение + + + + ); +} + +export default ProfilePanelBase; \ No newline at end of file diff --git a/src/js/services/VK.js b/src/js/services/VK.js deleted file mode 100644 index 395d00f..0000000 --- a/src/js/services/VK.js +++ /dev/null @@ -1,47 +0,0 @@ -import VKConnect from "@vkontakte/vk-connect"; - -import {setColorScheme} from "../store/vk/actions"; -import { store } from '../../index'; - -export const initApp = () => (dispatch) => { - const VKConnectCallback = (e) => { - if (e.detail.type === 'VKWebAppUpdateConfig') { - if(store.getState().vkui.colorScheme !== e.detail.data.scheme) { - dispatch(setColorScheme(e.detail.data.scheme)); - } - } - }; - - VKConnect.subscribe(VKConnectCallback); - return VKConnect.send('VKWebAppInit', {}).then(data => { - return data; - }).catch(error => { - return error; - }); -}; - -export const closeApp = () => { - return VKConnect.send("VKWebAppClose", { - "status": "success" - }).then(data => { - return data; - }).catch(error => { - return error; - }); -}; - -export const swipeBackOn = () => { - return VKConnect.send("VKWebAppEnableSwipeBack", {}).then(data => { - return data; - }).catch(error => { - return error; - }); -}; - -export const swipeBackOff = () => { - return VKConnect.send("VKWebAppDisableSwipeBack", {}).then(data => { - return data; - }).catch(error => { - return error; - }); -}; \ No newline at end of file diff --git a/src/js/services/_functions.js b/src/js/services/_functions.js deleted file mode 100644 index d2b4284..0000000 --- a/src/js/services/_functions.js +++ /dev/null @@ -1,42 +0,0 @@ -import {store} from "../../index"; - -export const smoothScrollToTop = () => { - const c = document.documentElement.scrollTop || document.body.scrollTop; - - if (c > 30) { - return; - } - - if (c > 0) { - window.requestAnimationFrame(smoothScrollToTop); - window.scrollTo(0, c - c / 8); - } -}; - -export const restoreScrollPosition = () => { - let scrolls = store.getState().vkui.componentScroll; - - Object.keys(scrolls).forEach((component) => { - let componentData = scrolls[component]; - - let element = document.getElementById(component); - - if (element) { - element = element.getElementsByClassName("HorizontalScroll__in")[0]; - - element.scrollLeft = componentData.x; - element.scrollTop = componentData.y; - } - }); -}; - -export const getActivePanel = (view) => { - let panel = store.getState().router.activePanel; - - let panelsHistory = store.getState().router.panelsHistory; - if (typeof panelsHistory[view] !== "undefined") { - panel = panelsHistory[view][panelsHistory[view].length - 1]; - } - - return panel; -}; diff --git a/src/js/store/formData/actionTypes.js b/src/js/store/formData/actionTypes.js deleted file mode 100644 index d165d8a..0000000 --- a/src/js/store/formData/actionTypes.js +++ /dev/null @@ -1 +0,0 @@ -export const SET_FORM_DATA = 'SAVE_FORM_DATA'; \ No newline at end of file diff --git a/src/js/store/formData/actions.js b/src/js/store/formData/actions.js deleted file mode 100644 index f2b71c6..0000000 --- a/src/js/store/formData/actions.js +++ /dev/null @@ -1,11 +0,0 @@ -import {SET_FORM_DATA} from './actionTypes'; - -export const setFormData = (formName, inputData) => ( - { - type: SET_FORM_DATA, - payload: { - form: formName, - data: inputData, - } - } -); \ No newline at end of file diff --git a/src/js/store/formData/reducers.js b/src/js/store/formData/reducers.js deleted file mode 100644 index 6bed088..0000000 --- a/src/js/store/formData/reducers.js +++ /dev/null @@ -1,27 +0,0 @@ -import {SET_FORM_DATA} from './actionTypes'; - -const initialState = { - forms: [] -}; - -export const formDataReducer = (state = initialState, action) => { - - switch (action.type) { - - case SET_FORM_DATA: { - return { - ...state, - forms: { - ...state.forms, - [action.payload.form]: action.payload.data - } - }; - } - - default: { - return state; - } - - } - -}; \ No newline at end of file diff --git a/src/js/store/reducers.js b/src/js/store/reducers.js deleted file mode 100644 index 8c2defc..0000000 --- a/src/js/store/reducers.js +++ /dev/null @@ -1,10 +0,0 @@ -import {combineReducers} from "redux"; -import {routerReducer} from './router/reducers'; -import {vkuiReducer} from './vk/reducers'; -import {formDataReducer} from "./formData/reducers"; - -export default combineReducers({ - vkui: vkuiReducer, - router: routerReducer, - formData: formDataReducer -}); \ No newline at end of file diff --git a/src/js/store/router/actionTypes.js b/src/js/store/router/actionTypes.js deleted file mode 100644 index 1d049d7..0000000 --- a/src/js/store/router/actionTypes.js +++ /dev/null @@ -1,7 +0,0 @@ -export const SET_PAGE = 'SET_PAGE'; -export const SET_STORY = 'SET_STORY'; -export const GO_BACK = 'GO_BACK'; -export const OPEN_POPOUT = 'OPEN_POPOUT'; -export const CLOSE_POPOUT = 'CLOSE_POPOUT'; -export const OPEN_MODAL = 'OPEN_MODAL'; -export const CLOSE_MODAL = 'CLOSE_MODAL'; \ No newline at end of file diff --git a/src/js/store/router/actions.js b/src/js/store/router/actions.js deleted file mode 100644 index fe11acf..0000000 --- a/src/js/store/router/actions.js +++ /dev/null @@ -1,57 +0,0 @@ -import {SET_PAGE, SET_STORY, GO_BACK, OPEN_POPOUT, CLOSE_POPOUT, OPEN_MODAL, CLOSE_MODAL} from './actionTypes'; - -export const setStory = (story, initial_panel) => ( - { - type: SET_STORY, - payload: { - story: story, - initial_panel: initial_panel, - } - } -); - -export const setPage = (view, panel) => ( - { - type: SET_PAGE, - payload: { - view: view, - panel: panel - } - } -); - -export const goBack = () => ( - { - type: GO_BACK - } -); - -export const openPopout = (popout) => ( - { - type: OPEN_POPOUT, - payload: { - popout: popout - } - } -); - -export const closePopout = () => ( - { - type: CLOSE_POPOUT - } -); - -export const openModal = (id) => ( - { - type: OPEN_MODAL, - payload: { - id - } - } -); - -export const closeModal = () => ( - { - type: CLOSE_MODAL - } -); diff --git a/src/js/store/router/reducers.js b/src/js/store/router/reducers.js deleted file mode 100644 index 75fc085..0000000 --- a/src/js/store/router/reducers.js +++ /dev/null @@ -1,313 +0,0 @@ -import { - SET_PAGE, - GO_BACK, - OPEN_POPOUT, - CLOSE_POPOUT, - OPEN_MODAL, - CLOSE_MODAL, - SET_STORY -} from './actionTypes'; - -import * as VK from "../../services/VK"; -import {smoothScrollToTop} from "../../services/_functions"; - -const initialState = { - activeStory: null, - activeView: null, - activePanel: null, - - storiesHistory: [], - viewsHistory: [], - panelsHistory: [], - - activeModals: [], - modalHistory: [], - popouts: [], - - scrollPosition: [] -}; - -export const routerReducer = (state = initialState, action) => { - - switch (action.type) { - - case SET_PAGE: { - let View = action.payload.view; - let Panel = action.payload.panel; - - window.history.pushState(null, null); - - let panelsHistory = state.panelsHistory[View] || []; - let viewsHistory = state.viewsHistory[state.activeStory] || []; - - const viewIndexInHistory = viewsHistory.indexOf(View); - - if (viewIndexInHistory !== -1) { - viewsHistory.splice(viewIndexInHistory, 1); - } - - if (panelsHistory.indexOf(Panel) === -1) { - panelsHistory = [...panelsHistory, Panel]; - } - - if (panelsHistory.length > 1) { - VK.swipeBackOn(); - } - - return { - ...state, - activeView: View, - activePanel: Panel, - - panelsHistory: { - ...state.panelsHistory, - [View]: panelsHistory, - }, - viewsHistory: { - ...state.viewsHistory, - [state.activeStory]: [...viewsHistory, View] - }, - scrollPosition: { - ...state.scrollPosition, - [state.activeStory + "_" + state.activeView + "_" + state.activePanel]: window.pageYOffset - } - }; - } - - case SET_STORY: { - window.history.pushState(null, null); - - let viewsHistory = state.viewsHistory[action.payload.story] || [action.payload.story]; - - let storiesHistory = state.storiesHistory; - let activeView = viewsHistory[viewsHistory.length - 1]; - let panelsHistory = state.panelsHistory[activeView] || [action.payload.initial_panel]; - let activePanel = panelsHistory[panelsHistory.length - 1]; - - if (action.payload.story === state.activeStory) { - if (panelsHistory.length > 1) { - let firstPanel = panelsHistory.shift(); - panelsHistory = [firstPanel]; - - activePanel = panelsHistory[panelsHistory.length - 1]; - } else if (viewsHistory.length > 1) { - let firstView = viewsHistory.shift(); - viewsHistory = [firstView]; - - activeView = viewsHistory[viewsHistory.length - 1]; - panelsHistory = state.panelsHistory[activeView]; - activePanel = panelsHistory[panelsHistory.length - 1]; - } - } - - if (action.payload.story === state.activeStory && panelsHistory.length === 1 && window.pageYOffset > 0) { - window.scrollTo(0, 30); - - smoothScrollToTop(); - } - - const storiesIndexInHistory = storiesHistory.indexOf(action.payload.story); - - if (storiesIndexInHistory === -1 || (storiesHistory[0] === action.payload.story && storiesHistory[storiesHistory.length - 1] !== action.payload.story)) { - storiesHistory = [...storiesHistory, action.payload.story]; - } - - return { - ...state, - activeStory: action.payload.story, - activeView: activeView, - activePanel: activePanel, - - storiesHistory: storiesHistory, - viewsHistory: { - ...state.viewsHistory, - [activeView]: viewsHistory - }, - panelsHistory: { - ...state.panelsHistory, - [activeView]: panelsHistory - }, - - scrollPosition: { - ...state.scrollPosition, - [state.activeStory + "_" + state.activeView + "_" + state.activePanel]: window.pageYOffset - } - }; - } - - case GO_BACK: { - let setView = state.activeView; - let setPanel = state.activePanel; - let setStory = state.activeStory; - - let popoutsData = state.popouts; - - if (popoutsData[setView]) { - popoutsData[setView] = null; - - return { - ...state, - popouts: { - ...state.popouts, popoutsData - } - }; - } - - let viewModalsHistory = state.modalHistory[setView]; - - if (viewModalsHistory !== undefined && viewModalsHistory.length !== 0) { - let activeModal = viewModalsHistory[viewModalsHistory.length - 2] || null; - - if (activeModal === null) { - viewModalsHistory = []; - } else if (viewModalsHistory.indexOf(activeModal) !== -1) { - viewModalsHistory = viewModalsHistory.splice(0, viewModalsHistory.indexOf(activeModal) + 1); - } else { - viewModalsHistory.push(activeModal); - } - - return { - ...state, - activeModals: { - ...state.activeModals, - [setView]: activeModal - }, - modalHistory: { - ...state.modalHistory, - [setView]: viewModalsHistory - } - }; - } - - let panelsHistory = state.panelsHistory[setView] || []; - let viewsHistory = state.viewsHistory[state.activeStory] || []; - let storiesHistory = state.storiesHistory; - - if (panelsHistory.length > 1) { - panelsHistory.pop(); - - setPanel = panelsHistory[panelsHistory.length - 1]; - } else if (viewsHistory.length > 1) { - viewsHistory.pop(); - - setView = viewsHistory[viewsHistory.length - 1]; - let panelsHistoryNew = state.panelsHistory[setView]; - - setPanel = panelsHistoryNew[panelsHistoryNew.length - 1]; - } else if (storiesHistory.length > 1) { - storiesHistory.pop(); - - setStory = storiesHistory[storiesHistory.length - 1]; - setView = state.viewsHistory[setStory][state.viewsHistory[setStory].length - 1]; - - let panelsHistoryNew = state.panelsHistory[setView]; - - if (panelsHistoryNew.length > 1) { - setPanel = panelsHistoryNew[panelsHistoryNew.length - 1]; - } else { - setPanel = panelsHistoryNew[0]; - } - } else { - VK.closeApp(); - } - - if (panelsHistory.length === 1) { - VK.swipeBackOff(); - } - - return { - ...state, - activeView: setView, - activePanel: setPanel, - activeStory: setStory, - - viewsHistory: { - ...state.viewsHistory, - [state.activeView]: viewsHistory - }, - panelsHistory: { - ...state.panelsHistory, - [state.activeView]: panelsHistory - } - }; - } - - case OPEN_POPOUT: { - window.history.pushState(null, null); - - return { - ...state, - popouts: { - ...state.popouts, - [state.activeView]: action.payload.popout - } - }; - } - - case CLOSE_POPOUT: { - return { - ...state, - popouts: { - ...state.popouts, - [state.activeView]: null - } - }; - } - - case OPEN_MODAL: { - window.history.pushState(null, null); - - let activeModal = action.payload.id || null; - let modalsHistory = state.modalHistory[state.activeView] ? [...state.modalHistory[state.activeView]] : []; - - if (activeModal === null) { - modalsHistory = []; - } else if (modalsHistory.indexOf(activeModal) !== -1) { - modalsHistory = modalsHistory.splice(0, modalsHistory.indexOf(activeModal) + 1); - } else { - modalsHistory.push(activeModal); - } - - return { - ...state, - activeModals: { - ...state.activeModals, - [state.activeView]: activeModal - }, - modalHistory: { - ...state.modalHistory, - [state.activeView]: modalsHistory - } - }; - } - - case CLOSE_MODAL: { - let activeModal = state.modalHistory[state.activeView][state.modalHistory[state.activeView].length - 2] || null; - let modalsHistory = state.modalHistory[state.activeView] ? [...state.modalHistory[state.activeView]] : []; - - if (activeModal === null) { - modalsHistory = []; - } else if (modalsHistory.indexOf(activeModal) !== -1) { - modalsHistory = modalsHistory.splice(0, modalsHistory.indexOf(activeModal) + 1); - } else { - modalsHistory.push(activeModal); - } - - return { - ...state, - activeModals: { - ...state.activeModals, - [state.activeView]: activeModal - }, - modalHistory: { - ...state.modalHistory, - [state.activeView]: modalsHistory - } - }; - } - - default: { - return state; - } - } -}; diff --git a/src/js/store/vk/actionTypes.js b/src/js/store/vk/actionTypes.js deleted file mode 100644 index cd6a54c..0000000 --- a/src/js/store/vk/actionTypes.js +++ /dev/null @@ -1,4 +0,0 @@ -export const SET_COLOR_SCHEME = 'SET_COLOR_SCHEME'; -export const SET_ACTIVE_TAB = 'SET_ACTIVE_TAB'; -export const SET_SCROLL_POSITION = 'SET_SCROLL_POSITION'; -export const SET_SCROLL_POSITION_BY_ID = 'SET_SCROLL_POSITION_BY_ID'; \ No newline at end of file diff --git a/src/js/store/vk/actions.js b/src/js/store/vk/actions.js deleted file mode 100644 index 036f6d2..0000000 --- a/src/js/store/vk/actions.js +++ /dev/null @@ -1,43 +0,0 @@ -import { - SET_COLOR_SCHEME, - SET_ACTIVE_TAB, - SET_SCROLL_POSITION, - SET_SCROLL_POSITION_BY_ID -} from './actionTypes'; - -export const setColorScheme = (scheme) => ( - { - type: SET_COLOR_SCHEME, - payload: scheme - } -); - -export const setActiveTab = (component, tab) => ( - { - type: SET_ACTIVE_TAB, - payload: { - component, - tab - } - } -); - -export const setScrollPosition = (component, x = 0, y = 0) => ( - { - type: SET_SCROLL_POSITION, - payload: { - component, - x, - y - } - } -); - -export const setScrollPositionByID = (component) => ( - { - type: SET_SCROLL_POSITION_BY_ID, - payload: { - component - } - } -); \ No newline at end of file diff --git a/src/js/store/vk/reducers.js b/src/js/store/vk/reducers.js deleted file mode 100644 index 7215c37..0000000 --- a/src/js/store/vk/reducers.js +++ /dev/null @@ -1,73 +0,0 @@ -import { - - SET_ACTIVE_TAB, - SET_COLOR_SCHEME, - SET_SCROLL_POSITION, - SET_SCROLL_POSITION_BY_ID -} from './actionTypes'; - -const initialState = { - accessToken: undefined, - colorScheme: 'client_light', - - activeTab: [], - componentScroll: [] -}; - -export const vkuiReducer = (state = initialState, action) => { - - switch (action.type) { - - case SET_COLOR_SCHEME: { - return { - ...state, - colorScheme: action.payload, - }; - } - - case SET_ACTIVE_TAB: { - return { - ...state, - activeTab: { - ...state.activeTab, - [action.payload.component]: action.payload.tab - }, - }; - } - - case SET_SCROLL_POSITION: { - return { - ...state, - componentScroll: { - ...state.componentScroll, - [action.payload.component]: { - x: action.payload.x, - y: action.payload.y - } - }, - }; - } - - case SET_SCROLL_POSITION_BY_ID: { - let element = document.getElementById(action.payload.component).getElementsByClassName("HorizontalScroll__in")[0]; - - let x = element.scrollLeft; - let y = element.scrollTop; - - return { - ...state, - componentScroll: { - ...state.componentScroll, - [action.payload.component]: { - x: x, - y: y - } - }, - }; - } - - default: { - return state; - } - } -}; \ No newline at end of file diff --git a/src/structure.js b/src/structure.js new file mode 100644 index 0000000..f7da16f --- /dev/null +++ b/src/structure.js @@ -0,0 +1,30 @@ +const structure = [ + { + id: "home", + hash: "home", + panels: [ + { + id: "base", + hash: '/base' + }, + + { + id: "placeholder", + hash: '/placeholder' + } + ] + }, + + { + id: "profile", + hash: "profile", + panels: [ + { + id: "base", + hash: '/base' + } + ] + } +] + +export default structure \ No newline at end of file