From 90ba2410b9b4c705c84f4cdea1cfe249ba037d60 Mon Sep 17 00:00:00 2001 From: Ceda EI Date: Mon, 21 Dec 2020 00:49:50 +0530 Subject: [PATCH] Create core structure for the app --- src/App.js | 15 ++--- src/Core.js | 37 +++++++++++++ src/app/store.js | 4 +- src/coreSlice.js | 17 ++++++ src/features/counter/Counter.js | 58 ------------------- src/features/counter/Counter.module.css | 74 ------------------------- src/features/counter/counterSlice.js | 42 -------------- src/plugins/index.js | 6 ++ src/plugins/mpd.js | 9 +++ src/plugins/weather.js | 9 +++ 10 files changed, 85 insertions(+), 186 deletions(-) create mode 100644 src/Core.js create mode 100644 src/coreSlice.js delete mode 100644 src/features/counter/Counter.js delete mode 100644 src/features/counter/Counter.module.css delete mode 100644 src/features/counter/counterSlice.js create mode 100644 src/plugins/index.js create mode 100644 src/plugins/mpd.js create mode 100644 src/plugins/weather.js diff --git a/src/App.js b/src/App.js index 1578ca5..4f9c3ef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,12 @@ import React from "react"; -import { Counter } from "./features/counter/Counter"; -import "./App.css"; +import { Grommet } from "grommet"; +import Core from "./Core"; function App() { return ( -
-
- -

- Edit src/App.js and save to reload. -

-
-
+ + + ); } diff --git a/src/Core.js b/src/Core.js new file mode 100644 index 0000000..b0a5ba5 --- /dev/null +++ b/src/Core.js @@ -0,0 +1,37 @@ +import React from "react"; +import { useSelector, useDispatch } from "react-redux"; + +import { setPlugin, selectCore } from "./coreSlice"; +import * as plugins from "./plugins"; + +function Core() { + const coreState = useSelector(selectCore); + const dispatch = useDispatch(); + console.log(plugins.default); + const plugin = plugins.default[coreState.plugin]; + const props = { + data: coreState.data, + close: () => dispatch(setPlugin(false)) + }; + return <> + {plugin ? null : + <> +

Welcome to Honda!

+ {Object.keys(plugins.default).map( + i =>

dispatch(setPlugin(i))} + key={i} + > + {plugins.default[i].pluginName} +

) + } + + } + {plugin ? + React.cloneElement(plugin(), props) + :null + } + ; +} + +export default Core; diff --git a/src/app/store.js b/src/app/store.js index a4ab810..e591a8f 100644 --- a/src/app/store.js +++ b/src/app/store.js @@ -1,8 +1,8 @@ import { configureStore } from "@reduxjs/toolkit"; -import counterReducer from "../features/counter/counterSlice"; +import coreReducer from "../coreSlice"; export default configureStore({ reducer: { - counter: counterReducer, + core: coreReducer, }, }); diff --git a/src/coreSlice.js b/src/coreSlice.js new file mode 100644 index 0000000..d7493e4 --- /dev/null +++ b/src/coreSlice.js @@ -0,0 +1,17 @@ +import { createSlice } from "@reduxjs/toolkit"; + +export const coreSlice = createSlice({ + name: "core", + initialState: { + plugin: false, + data: {} + }, + reducers: { + setPlugin: (state, action) => ({...state, plugin: action.payload}), + setData: (state, action) => ({...state, data: action.payload}), + } +}); + +export const { setPlugin, setData } = coreSlice.actions; +export const selectCore = state => state.core; +export default coreSlice.reducer; diff --git a/src/features/counter/Counter.js b/src/features/counter/Counter.js deleted file mode 100644 index 886387c..0000000 --- a/src/features/counter/Counter.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useState } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { - decrement, - increment, - incrementByAmount, - incrementAsync, - selectCount, -} from "./counterSlice"; -import styles from "./Counter.module.css"; - -export function Counter() { - const count = useSelector(selectCount); - const dispatch = useDispatch(); - const [incrementAmount, setIncrementAmount] = useState("2"); - - return ( -
-
- - {count} - -
-
- setIncrementAmount(e.target.value)} - /> - - -
-
- ); -} diff --git a/src/features/counter/Counter.module.css b/src/features/counter/Counter.module.css deleted file mode 100644 index 6c2b58f..0000000 --- a/src/features/counter/Counter.module.css +++ /dev/null @@ -1,74 +0,0 @@ -.row { - display: flex; - align-items: center; - justify-content: center; -} - -.row:not(:last-child) { - margin-bottom: 16px; -} - -.value { - font-size: 78px; - padding-left: 16px; - padding-right: 16px; - margin-top: 2px; - font-family: 'Courier New', Courier, monospace; -} - -.button { - appearance: none; - background: none; - font-size: 32px; - padding-left: 12px; - padding-right: 12px; - outline: none; - border: 2px solid transparent; - color: rgb(112, 76, 182); - padding-bottom: 4px; - cursor: pointer; - background-color: rgba(112, 76, 182, 0.1); - border-radius: 2px; - transition: all 0.15s; -} - -.textbox { - font-size: 32px; - padding: 2px; - width: 64px; - text-align: center; - margin-right: 8px; -} - -.button:hover, .button:focus { - border: 2px solid rgba(112, 76, 182, 0.4); -} - -.button:active { - background-color: rgba(112, 76, 182, 0.2); -} - -.asyncButton { - composes: button; - position: relative; - margin-left: 8px; -} - -.asyncButton:after { - content: ""; - background-color: rgba(112, 76, 182, 0.15); - display: block; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - opacity: 0; - transition: width 1s linear, opacity 0.5s ease 1s; -} - -.asyncButton:active:after { - width: 0%; - opacity: 1; - transition: 0s -} diff --git a/src/features/counter/counterSlice.js b/src/features/counter/counterSlice.js deleted file mode 100644 index 2325c98..0000000 --- a/src/features/counter/counterSlice.js +++ /dev/null @@ -1,42 +0,0 @@ -import { createSlice } from "@reduxjs/toolkit"; - -export const counterSlice = createSlice({ - name: "counter", - initialState: { - value: 0, - }, - reducers: { - increment: state => { - // Redux Toolkit allows us to write "mutating" logic in reducers. It - // doesn"t actually mutate the state because it uses the Immer library, - // which detects changes to a "draft state" and produces a brand new - // immutable state based off those changes - state.value += 1; - }, - decrement: state => { - state.value -= 1; - }, - incrementByAmount: (state, action) => { - state.value += action.payload; - }, - }, -}); - -export const { increment, decrement, incrementByAmount } = counterSlice.actions; - -// The function below is called a thunk and allows us to perform async logic. It -// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This -// will call the thunk with the `dispatch` function as the first argument. Async -// code can then be executed and other actions can be dispatched -export const incrementAsync = amount => dispatch => { - setTimeout(() => { - dispatch(incrementByAmount(amount)); - }, 1000); -}; - -// The function below is called a selector and allows us to select a value from -// the state. Selectors can also be defined inline where they"re used instead of -// in the slice file. For example: `useSelector((state) => state.counter.value)` -export const selectCount = state => state.counter.value; - -export default counterSlice.reducer; diff --git a/src/plugins/index.js b/src/plugins/index.js new file mode 100644 index 0000000..2d2ab40 --- /dev/null +++ b/src/plugins/index.js @@ -0,0 +1,6 @@ +import Mpd from "./mpd"; +import Weather from "./weather"; +export default { + mpd: Mpd, + weather: Weather, +}; diff --git a/src/plugins/mpd.js b/src/plugins/mpd.js new file mode 100644 index 0000000..c93fd21 --- /dev/null +++ b/src/plugins/mpd.js @@ -0,0 +1,9 @@ +import React from "react"; + +function Mpd() { + return

MPD Plugin

; +} + +Mpd.pluginName = "Music Player"; + +export default Mpd; diff --git a/src/plugins/weather.js b/src/plugins/weather.js new file mode 100644 index 0000000..419ec1e --- /dev/null +++ b/src/plugins/weather.js @@ -0,0 +1,9 @@ +import React from "react"; + +function Weather() { + return

Weather Plugin

; +} + +Weather.pluginName = "Weather"; + +export default Weather;