Delete //website/days-of-week-habits
This is one small change in a series of other, larger changes.
This commit is contained in:
William Carroll
parent
1eab926121
commit
381c344563
15 changed files with 0 additions and 6048 deletions
|
|
@ -1,2 +0,0 @@
|
|||
source_up
|
||||
use_nix
|
||||
3
website/days-of-week-habits/.gitignore
vendored
3
website/days-of-week-habits/.gitignore
vendored
|
|
@ -1,3 +0,0 @@
|
|||
/.cache
|
||||
/dist
|
||||
/node_modules
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
# Habits (days of the week)
|
||||
|
||||
I use post-its to track the current habits I do on certain days of the week. I
|
||||
would like to replace these post-its with a screen that renders my habits. This
|
||||
project is a sketch of what that might look like.
|
||||
|
||||
## Stack
|
||||
|
||||
- React: Maps application state to UI
|
||||
- React-Router: Stateful routing for SPAs
|
||||
- Redux: Application state management
|
||||
- TypeScript: Type-safety
|
||||
- TailwindCSS: Styling library using utility classes
|
||||
- Prettier: Source code formatting
|
||||
- Jest: Test runner
|
||||
|
||||
## Developing
|
||||
|
||||
```shell
|
||||
$ nix-shell
|
||||
$ yarn run dev
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
```shell
|
||||
$ nix-build
|
||||
```
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{ pkgs, ... }:
|
||||
|
||||
pkgs.stdenv.mkDerivation {
|
||||
name = "typescript";
|
||||
srcs = builtins.path { path = ./.; name = "day-of-week-habits"; };
|
||||
buildInputs = with pkgs; [
|
||||
nodejs
|
||||
# Exposes lscpu for parcel.js
|
||||
utillinux
|
||||
];
|
||||
# parcel.js needs number of CPUs
|
||||
PARCEL_WORKERS = "1";
|
||||
buildPhase = ''
|
||||
npx parcel build src/index.html --public-url ./
|
||||
'';
|
||||
installPhase = ''
|
||||
mv dist $out
|
||||
'';
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"name": "tailwindcss",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "parcel src/index.html & npx tsc --watch --noEmit",
|
||||
"prettier": "prettier --ignore-path .gitignore --write \"**/*.{js,ts,jsx,tsx,html,css.json}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/humanize-duration": "^3.18.0",
|
||||
"@types/node": "^13.9.3",
|
||||
"parcel-bundler": "^1.12.4",
|
||||
"prettier": "^2.0.2",
|
||||
"tailwindcss": "^1.2.0",
|
||||
"typescript": "^3.8.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.2.5",
|
||||
"@types/react-dom": "^16.9.5",
|
||||
"@types/react-redux": "^7.1.7",
|
||||
"@types/react-router-dom": "^5.1.3",
|
||||
"humanize-duration": "^3.22.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-redux": "^7.2.0",
|
||||
"react-router-dom": "^5.1.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
const tailwindcss = require('tailwindcss')
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
tailwindcss('./tailwind.config.js')
|
||||
]
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
let
|
||||
briefcase = import <briefcase> {};
|
||||
pkgs = briefcase.third_party.pkgs;
|
||||
in pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
nodejs
|
||||
yarn
|
||||
];
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
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";
|
||||
import humanizeDuration from "humanize-duration";
|
||||
import type { Task, Habit } from "./store";
|
||||
|
||||
const days = [
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
"Sunday",
|
||||
];
|
||||
|
||||
const postItColor = "yellow";
|
||||
|
||||
const PostIt = (props: { day: number; tasks: Task[] }) => (
|
||||
<div className={`bg-${postItColor}-300 mr-2 mb-2 w-1/5 px-4 pb-4`}>
|
||||
<h2 className="text-center py-4">{days[props.day]}</h2>
|
||||
{props.tasks.map((task) => (
|
||||
<ol key={task.label}>
|
||||
<li className="py-2">
|
||||
<span className={`text-${postItColor}-600 pr-2`}>
|
||||
[{humanizeDuration(task.duration)}]
|
||||
</span>
|
||||
{task.label}
|
||||
</li>
|
||||
</ol>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const App: React.FC = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { isLoading, habits } = useTypedSelector((state) => ({
|
||||
isLoading: state.isLoading,
|
||||
habits: state.habits,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route exact path="/">
|
||||
<div className="mx-auto font-mono">
|
||||
<h1 className="text-center my-8">Habits</h1>
|
||||
<ol className="flex">
|
||||
{habits.map((habit) => (
|
||||
<PostIt key={habit.day} day={habit.day} tasks={habit.tasks} />
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
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")
|
||||
);
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { useSelector, TypedUseSelectorHook } from "react-redux";
|
||||
|
||||
// Monday 0
|
||||
// Tuesday 1
|
||||
// Wednesday 2
|
||||
// Thursday 3
|
||||
// Friday 4
|
||||
// Saturday 5
|
||||
// Sunday 6
|
||||
type Day = number;
|
||||
|
||||
export interface Task {
|
||||
label: string;
|
||||
// Number of milliseconds
|
||||
duration: number;
|
||||
}
|
||||
|
||||
export interface Habit {
|
||||
day: Day;
|
||||
tasks: Task[];
|
||||
}
|
||||
|
||||
export interface State {
|
||||
isLoading: boolean;
|
||||
habits: Habit[];
|
||||
}
|
||||
|
||||
const minute: number = 1000 * 60;
|
||||
const hour: number = minute * 60;
|
||||
|
||||
/*******************************************************************************
|
||||
* Tasks
|
||||
******************************************************************************/
|
||||
|
||||
const jiuJitsu: Task = {
|
||||
label: "Jiu Jitsu",
|
||||
duration: hour,
|
||||
};
|
||||
|
||||
const hotYoga: Task = {
|
||||
label: "Hot Pod Yoga",
|
||||
duration: hour,
|
||||
};
|
||||
|
||||
const shave: Task = {
|
||||
label: "Shave",
|
||||
duration: 10 * minute,
|
||||
};
|
||||
|
||||
const vacuum: Task = {
|
||||
label: "Vacuum",
|
||||
duration: 15 * minute,
|
||||
};
|
||||
|
||||
const nap: Task = {
|
||||
label: "Nap",
|
||||
duration: hour,
|
||||
};
|
||||
|
||||
const trimNails: Task = {
|
||||
label: "Trim Nails",
|
||||
duration: 5 * minute,
|
||||
};
|
||||
|
||||
const trash: Task = {
|
||||
label: "Take out trash",
|
||||
duration: 5 * minute,
|
||||
};
|
||||
|
||||
const scheduleLaundry: Task = {
|
||||
label: "Schedule laundry pick-up",
|
||||
duration: 5 * minute,
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
* Days
|
||||
******************************************************************************/
|
||||
|
||||
const monday: Habit = {
|
||||
day: 0,
|
||||
tasks: [jiuJitsu],
|
||||
};
|
||||
|
||||
const tuesday: Habit = {
|
||||
day: 1,
|
||||
tasks: [
|
||||
{
|
||||
label: "Work from 6PS",
|
||||
duration: hour * 8,
|
||||
},
|
||||
jiuJitsu,
|
||||
],
|
||||
};
|
||||
|
||||
const wednesday: Habit = {
|
||||
day: 2,
|
||||
tasks: [
|
||||
hotYoga,
|
||||
shave,
|
||||
{
|
||||
label: "Clean apartment sinks",
|
||||
duration: 15 * minute,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const thursday: Habit = {
|
||||
day: 3,
|
||||
tasks: [],
|
||||
};
|
||||
|
||||
const friday: Habit = {
|
||||
day: 4,
|
||||
tasks: [hotYoga],
|
||||
};
|
||||
|
||||
const saturday: Habit = {
|
||||
day: 5,
|
||||
tasks: [vacuum, nap],
|
||||
};
|
||||
|
||||
const sunday: Habit = {
|
||||
day: 6,
|
||||
tasks: [jiuJitsu, nap, shave, trimNails, trash, scheduleLaundry],
|
||||
};
|
||||
|
||||
/*******************************************************************************
|
||||
* State
|
||||
******************************************************************************/
|
||||
|
||||
const initialState: State = {
|
||||
isLoading: true,
|
||||
habits: [monday, tuesday, wednesday, thursday, friday, saturday, sunday],
|
||||
};
|
||||
|
||||
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 });
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
module.exports = {
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue