Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-14 16:51:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

implement page controller

Browse Source
This commit is contained in:
Amruth Pillai
2020-04-01 12:47:17 +05:30
parent 3a9a0dc811
commit ad9105f4a4
12 changed files with 208 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/App/App.js
View File

@ -1,5 +1,6 @@
import React, { useRef, useEffect, useContext, Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import { PanZoom } from 'react-easy-panzoom';
import AppContext from '../../context/AppContext';
import PageContext from '../../context/PageContext';
@ -8,9 +9,11 @@ import LeftSidebar from '../LeftSidebar/LeftSidebar';
import RightSidebar from '../RightSidebar/RightSidebar';
import templates from '../../templates';
import PageController from '../../shared/PageController';
const App = () => {
const pageRef = useRef(null);
const panZoomRef = useRef(null);
const { i18n } = useTranslation();
const context = useContext(AppContext);
@ -18,24 +21,36 @@ const App = () => {
const { theme, settings } = state;
const pageContext = useContext(PageContext);
const { setPageElement } = pageContext;
const { setPageRef, setPanZoomRef } = pageContext;
useEffect(() => {
setPageElement(pageRef);
setPageRef(pageRef);
setPanZoomRef(panZoomRef);
i18n.changeLanguage(settings.language);
const storedState = JSON.parse(localStorage.getItem('state'));
dispatch({ type: 'import_data', payload: storedState });
}, [dispatch, setPageElement, i18n, settings.language]);
}, [dispatch, setPageRef, setPanZoomRef, i18n, settings.language]);
return (
<Suspense fallback="Loading...">
<div className="h-screen overflow-hidden grid grid-cols-5 items-center">
<div className="h-screen grid grid-cols-5 items-center">
<LeftSidebar />
<div className="z-0 h-screen col-span-3 flex overflow-scroll justify-center items-center">
<div id="page" ref={pageRef} className="shadow-2xl">
{templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div>
<div className="relative z-0 h-screen overflow-hidden col-span-3 flex justify-center items-center">
<PanZoom
ref={panZoomRef}
enableBoundingBox
minZoom="0.4"
style={{
outline: 'none',
}}
>
<div id="page" ref={pageRef} className="shadow-2xl">
{templates.find(x => theme.layout.toLowerCase() === x.key).component()}
</div>
</PanZoom>
<PageController />
</div>
<RightSidebar />