From b3aa31a3f6bac24d3783fd7e7a77f812e7bd7de0 Mon Sep 17 00:00:00 2001 From: anatolykopyl Date: Thu, 19 May 2022 22:57:38 +0300 Subject: [PATCH] Added state management --- index.html | 2 +- package-lock.json | 34 ++++++++++++++++++++ package.json | 1 + src/assets/favicon.ico | Bin 15086 -> 0 bytes src/assets/icons/grid-fill.svg | 3 -- src/components/Controls.tsx | 8 +++-- src/components/Hero.tsx | 14 +++++++- src/components/Projects/Projects.module.css | 7 ++++ src/components/Projects/Projects.tsx | 16 ++++++++- src/index.tsx | 3 ++ src/localization/en.json | 2 +- src/store/index.tsx | 31 ++++++++++++++++++ 12 files changed, 111 insertions(+), 10 deletions(-) delete mode 100644 src/assets/favicon.ico delete mode 100644 src/assets/icons/grid-fill.svg create mode 100644 src/store/index.tsx diff --git a/index.html b/index.html index 48c59fc..28c455d 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - Solid App + Anatoly Kopyl diff --git a/package-lock.json b/package-lock.json index f2f5001..8ada3c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@solid-primitives/i18n": "^1.1.0", + "@solid-primitives/intersection-observer": "^1.3.0", "solid-js": "^1.3.13" }, "devDependencies": { @@ -527,6 +528,25 @@ "solid-js": "^1.3.1" } }, + "node_modules/@solid-primitives/intersection-observer": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@solid-primitives/intersection-observer/-/intersection-observer-1.3.0.tgz", + "integrity": "sha512-A0I/fmx7qBx4z7m7a1gEwdjlpDeRIu/OHMnZ6DKvuwV07r58bSAJ5LHdrkR4dPRa4U9HO359JRUKVUfe4l4ZUA==", + "dependencies": { + "@solid-primitives/utils": "^1.0.0" + }, + "peerDependencies": { + "solid-js": "^1.3.1" + } + }, + "node_modules/@solid-primitives/utils": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-1.5.2.tgz", + "integrity": "sha512-dZUHjzasuqS2lDO+PQCY1+jFmtWHlaP3tUvkX1Jr06LI/Ipa2P/ZNVSvuIoqQ0Bg+Ny27LvtrXxflZNeGtptvA==", + "peerDependencies": { + "solid-js": "^1.3.1" + } + }, "node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -1806,6 +1826,20 @@ "integrity": "sha512-aqJttEb8rmsQTU5VqfBfaeHFMIqKu1eXHVEahtW4DGKYBz/CDis5V25psQEyspuVTmPs7RpX99Whe9jV7ib4pg==", "requires": {} }, + "@solid-primitives/intersection-observer": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@solid-primitives/intersection-observer/-/intersection-observer-1.3.0.tgz", + "integrity": "sha512-A0I/fmx7qBx4z7m7a1gEwdjlpDeRIu/OHMnZ6DKvuwV07r58bSAJ5LHdrkR4dPRa4U9HO359JRUKVUfe4l4ZUA==", + "requires": { + "@solid-primitives/utils": "^1.0.0" + } + }, + "@solid-primitives/utils": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-1.5.2.tgz", + "integrity": "sha512-dZUHjzasuqS2lDO+PQCY1+jFmtWHlaP3tUvkX1Jr06LI/Ipa2P/ZNVSvuIoqQ0Bg+Ny27LvtrXxflZNeGtptvA==", + "requires": {} + }, "ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", diff --git a/package.json b/package.json index 5c7336d..76ee4bc 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "@solid-primitives/i18n": "^1.1.0", + "@solid-primitives/intersection-observer": "^1.3.0", "solid-js": "^1.3.13" } } diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico deleted file mode 100644 index b836b2bccac650e0e7d90514083add91d2c027ff..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 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 WLaxim%Fn{v*G - - \ No newline at end of file diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx index 5f95bbd..ab2040e 100644 --- a/src/components/Controls.tsx +++ b/src/components/Controls.tsx @@ -1,16 +1,18 @@ import { For, createSignal } from 'solid-js'; +import { useStore } from '../store/index'; import styles from './Controls.module.css'; import homeIcon from '../assets/icons/home.svg' import gridIcon from '../assets/icons/grid.svg' export default () => { + const [store] = useStore(); const [selected, setSelected] = createSignal(0); const [blobby, setBlobby] = createSignal([0]); const controls = [ - { icon: homeIcon }, - { icon: gridIcon }, - { icon: homeIcon }, + { name: 'home', icon: homeIcon }, + { name: 'projects', icon: gridIcon }, + { name: 'whatever', icon: homeIcon }, ] return ( diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx index 4f10ccf..825bb6a 100644 --- a/src/components/Hero.tsx +++ b/src/components/Hero.tsx @@ -1,12 +1,24 @@ import { useI18n } from "@solid-primitives/i18n"; +import { createViewportObserver } from '@solid-primitives/intersection-observer'; +import { useStore } from '../store/index'; import styles from './Hero.module.css'; export default () => { const [t] = useI18n(); + const [add] = createViewportObserver(); + const [, { setVisibleChapter }] = useStore(); return ( -
+
{ + add(el, (event) => { + console.log(event.isIntersecting); + setVisibleChapter('home'); + }); + }} + class={styles.Hero} + >

{t('my_name')} diff --git a/src/components/Projects/Projects.module.css b/src/components/Projects/Projects.module.css index e69de29..9b2fded 100644 --- a/src/components/Projects/Projects.module.css +++ b/src/components/Projects/Projects.module.css @@ -0,0 +1,7 @@ +.Projects { + padding: 32px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx index 2e307f8..2b62aac 100644 --- a/src/components/Projects/Projects.tsx +++ b/src/components/Projects/Projects.tsx @@ -1,8 +1,22 @@ +import { createViewportObserver } from '@solid-primitives/intersection-observer'; + +import { useStore } from '../../store/index'; import styles from './Projects.module.css'; export default () => { + const [, { setVisibleChapter }] = useStore(); + const [add] = createViewportObserver(); + return ( -
+
{ + add(el, (event) => { + console.log(event.isIntersecting); + setVisibleChapter('projects'); + }); + }} + class={styles.Projects} + >
) diff --git a/src/index.tsx b/src/index.tsx index 3c1a2ea..a8d0e9c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,15 +3,18 @@ import { render } from 'solid-js/web'; import { I18nContext } from "@solid-primitives/i18n"; +import { StoreProvider } from "./store/index"; import './index.css'; import App from './App'; import localization from './localization'; render( () => ( + + ), document.getElementById('root') as HTMLElement ); diff --git a/src/localization/en.json b/src/localization/en.json index cbfcfd9..ec26b8b 100644 --- a/src/localization/en.json +++ b/src/localization/en.json @@ -1,4 +1,4 @@ { - "my_name": "rerererere", + "my_name": "Anatoly Kopyl", "tagline": "Professional fullstack developer with standards" } diff --git a/src/store/index.tsx b/src/store/index.tsx new file mode 100644 index 0000000..c51b253 --- /dev/null +++ b/src/store/index.tsx @@ -0,0 +1,31 @@ +import { createSignal, createContext, useContext } from "solid-js"; +import type { Accessor, Setter } from 'solid-js'; + +type Store = [ + { visibleChapter: Accessor }, + { setVisibleChapter: Setter } +] + +const StoreContext = createContext(); + +export function StoreProvider(props) { + const [visibleChapter, setVisibleChapter] = createSignal('home'); + const store: Store = [ + { + visibleChapter + }, + { + setVisibleChapter + } + ]; + + return ( + + {props.children} + + ); +} + +export function useStore() { + return useContext(StoreContext); +}