maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prototype my digital habits journal

Browse source 
Trying to obviate my Google Sheets spreadsheet in favor of a more focused web
app.
This commit is contained in:
William Carroll 2020-03-30 20:28:38 +01:00
parent 8d36c6d00f
commit af969a7641
15 changed files with 5904 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

57
website/habitgarden/src/App.tsx Normal file
View file

@ -0,0 +1,57 @@
import React, { useEffect } from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { useDispatch } from "react-redux";
import { actions, useTypedSelector } from "./store";
import { Link } from "react-router-dom";
const CircleRow = (props: { count: number }) => (
<tr>
{Array.from(Array(props.count)).map((_, i) => (
<td key={i} className="text-center px-3 py-2">
<input type="radio" />
</td>
))}
</tr>
);
const CircleGrid = (props: { label: string; columns: string[] }) => (
<div>
<h1 className="text-center text-2xl py-4">{props.label}</h1>
<table className="mx-auto">
<thead>
<tr>
{props.columns.map((x) => (
<th key={x}>{x}</th>
))}
</tr>
</thead>
<tbody>
{Array.from(Array(props.columns.length)).map((_, i) => (
<CircleRow key={i} count={props.columns.length} />
))}
</tbody>
</table>
</div>
);
const App: React.FC = () => {
const dispatch = useDispatch();
const { isLoading } = useTypedSelector((state) => ({
isLoading: state.isLoading,
}));
return (
<Router>
<Switch>
<Route exact path="/">
<CircleGrid label="Meditation" columns={["M", "T", "W", "Th", "F"]} />
<CircleGrid label="Reading" columns={["M", "T", "W", "Th", "F"]} />
<CircleGrid label="Challenge" columns={["M", "T", "W", "Th", "F"]} />
<CircleGrid label="Jiu Jitsu" columns={["S", "M", "T"]} />
</Route>
</Switch>
</Router>
);
};
export default App;

3
website/habitgarden/src/index.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

11
website/habitgarden/src/index.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div id="mount"></div>
<script src="./index.tsx"></script>
</body>
</html>

12
website/habitgarden/src/index.tsx Normal file
View file

@ -0,0 +1,12 @@
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("mount")
);

26
website/habitgarden/src/store.ts Normal file
View file

@ -0,0 +1,26 @@
import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
import { useSelector, TypedUseSelectorHook } from "react-redux";
export interface State {
isLoading: boolean;
}
const initialState: State = {
isLoading: true,
};
export const { actions, reducer } = createSlice({
name: "application",
initialState,
reducers: {
toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
}
});
/**
* Defining and consuming this allows us to avoid annotating State in all of our
* selectors.
*/
export const useTypedSelector: TypedUseSelectorHook<State> = useSelector;
export default configureStore({ reducer });