Skip to content

Commit

Permalink
💥 Switched to TypeScript
Browse files Browse the repository at this point in the history
  • Loading branch information
@max-programming
max-programming committed Dec 26, 2020
1 parent 0cc3b36 commit fbcd657
Show file tree
Hide file tree
Showing 31 changed files with 625 additions and 447 deletions.
1 change: 1 addition & 0 deletions .eslintcache
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[{"/mnt/d/Contribs/max-todos/src/App.tsx":"1","/mnt/d/Contribs/max-todos/src/components/Actions/ActionsMenu.tsx":"2","/mnt/d/Contribs/max-todos/src/components/Actions/DeleteConfirm.tsx":"3","/mnt/d/Contribs/max-todos/src/components/Actions/EditConfirm.tsx":"4","/mnt/d/Contribs/max-todos/src/components/Actions/MoreMenu.tsx":"5","/mnt/d/Contribs/max-todos/src/components/CustomLink.tsx":"6","/mnt/d/Contribs/max-todos/src/components/PersistentDrawerLeft.tsx":"7","/mnt/d/Contribs/max-todos/src/components/Todos/AddTodo.tsx":"8","/mnt/d/Contribs/max-todos/src/components/Todos/Todo.tsx":"9","/mnt/d/Contribs/max-todos/src/components/Todos/Todos.tsx":"10","/mnt/d/Contribs/max-todos/src/context/DeleteConfirmContext.tsx":"11","/mnt/d/Contribs/max-todos/src/context/MainContext.tsx":"12","/mnt/d/Contribs/max-todos/src/context/SmallTextContext.tsx":"13","/mnt/d/Contribs/max-todos/src/context/ThemeContext.tsx":"14","/mnt/d/Contribs/max-todos/src/hooks/useChangeMenuIcon.tsx":"15","/mnt/d/Contribs/max-todos/src/index.tsx":"16","/mnt/d/Contribs/max-todos/src/pages/About.tsx":"17","/mnt/d/Contribs/max-todos/src/pages/Settings.tsx":"18","/mnt/d/Contribs/max-todos/src/react-app-env.d.ts":"19","/mnt/d/Contribs/max-todos/src/service-worker.ts":"20","/mnt/d/Contribs/max-todos/src/serviceWorkerRegistration.ts":"21","/mnt/d/Contribs/max-todos/src/types.d.ts":"22"},{"size":771,"mtime":1608956416692,"results":"23","hashOfConfig":"24"},{"size":3470,"mtime":1608966501592,"results":"25","hashOfConfig":"24"},{"size":1824,"mtime":1608963532361,"results":"26","hashOfConfig":"24"},{"size":1375,"mtime":1608963630120,"results":"27","hashOfConfig":"24"},{"size":2656,"mtime":1608957588884,"results":"28","hashOfConfig":"24"},{"size":447,"mtime":1608963838120,"results":"29","hashOfConfig":"24"},{"size":7748,"mtime":1608966043418,"results":"30","hashOfConfig":"24"},{"size":1810,"mtime":1608958200315,"results":"31","hashOfConfig":"24"},{"size":4719,"mtime":1608966535080,"results":"32","hashOfConfig":"24"},{"size":2502,"mtime":1608958575807,"results":"33","hashOfConfig":"24"},{"size":934,"mtime":1608965053370,"results":"34","hashOfConfig":"24"},{"size":2805,"mtime":1608966583799,"results":"35","hashOfConfig":"24"},{"size":808,"mtime":1608965055870,"results":"36","hashOfConfig":"24"},{"size":1212,"mtime":1608965057741,"results":"37","hashOfConfig":"24"},{"size":320,"mtime":1608965841849,"results":"38","hashOfConfig":"24"},{"size":907,"mtime":1608879309918,"results":"39","hashOfConfig":"24"},{"size":2130,"mtime":1608966267876,"results":"40","hashOfConfig":"24"},{"size":1264,"mtime":1608961096814,"results":"41","hashOfConfig":"24"},{"size":40,"mtime":1608954726052,"results":"42","hashOfConfig":"24"},{"size":2972,"mtime":1608879369277,"results":"43","hashOfConfig":"24"},{"size":5284,"mtime":1608879390082,"results":"44","hashOfConfig":"24"},{"size":95,"mtime":1608966410980,"results":"45","hashOfConfig":"24"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"ty89r0",{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"70","messages":"71","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"72","messages":"73","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"76","messages":"77","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"78","messages":"79","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"82","messages":"83","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"84","messages":"85","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"86","messages":"87","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"88","messages":"89","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/mnt/d/Contribs/max-todos/src/App.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Actions/ActionsMenu.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Actions/DeleteConfirm.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Actions/EditConfirm.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Actions/MoreMenu.tsx",[],"/mnt/d/Contribs/max-todos/src/components/CustomLink.tsx",[],"/mnt/d/Contribs/max-todos/src/components/PersistentDrawerLeft.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Todos/AddTodo.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Todos/Todo.tsx",[],"/mnt/d/Contribs/max-todos/src/components/Todos/Todos.tsx",[],"/mnt/d/Contribs/max-todos/src/context/DeleteConfirmContext.tsx",[],"/mnt/d/Contribs/max-todos/src/context/MainContext.tsx",[],"/mnt/d/Contribs/max-todos/src/context/SmallTextContext.tsx",[],"/mnt/d/Contribs/max-todos/src/context/ThemeContext.tsx",[],"/mnt/d/Contribs/max-todos/src/hooks/useChangeMenuIcon.tsx",[],"/mnt/d/Contribs/max-todos/src/index.tsx",[],"/mnt/d/Contribs/max-todos/src/pages/About.tsx",[],"/mnt/d/Contribs/max-todos/src/pages/Settings.tsx",[],"/mnt/d/Contribs/max-todos/src/react-app-env.d.ts",[],"/mnt/d/Contribs/max-todos/src/service-worker.ts",[],"/mnt/d/Contribs/max-todos/src/serviceWorkerRegistration.ts",[],"/mnt/d/Contribs/max-todos/src/types.d.ts",[]]
3 changes: 2 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"editor.formatOnSaveMode": "modifications"
"editor.formatOnSaveMode": "modifications",
"typescript.tsdk": "node_modules/typescript/lib"
}
20 changes: 14 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"darkreader": "^4.9.2",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@types/node": "^14.14.16",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"darkreader": "^4.9.26",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-dom": "^17.0.1",
"react-flip-move": "^3.0.4",
"react-scripts": "4.0.0",
"react-scripts": "^4.0.1",
"typescript": "^4.1.3",
"uuid": "^7.0.3",
"wouter": "^2.5.1"
"wouter": "^2.7.0"
},
"scripts": {
"start": "react-scripts start",
Expand All @@ -34,5 +38,9 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/material-ui": "^0.21.8",
"@types/react-beautiful-dnd": "^13.0.0"
}
}
2 changes: 1 addition & 1 deletion src/App.js → src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import About from "./pages/About";
import Settings from "./pages/Settings";

function App() {
const { addTodo } = useContext(MainContext);
const { addTodo } = useContext(MainContext)!;

return (
<div style={{ height: "100vh" }}>
Expand Down
87 changes: 67 additions & 20 deletions src/components/Actions/ActionsMenu.jsx → src/components/Actions/ActionsMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,70 @@
import { TodoType } from "../../types";
import { Typography, IconButton, Menu, MenuItem } from "@material-ui/core";
import DeleteIcon from "@material-ui/icons/DeleteTwoTone";
import EditIcon from "@material-ui/icons/EditTwoTone";
import {
DeleteTwoTone as DeleteIcon,
EditTwoTone as EditIcon,
StarTwoTone as StarIconOutlined,
Star as StarIcon,
SvgIconComponent,
} from "@material-ui/icons";
import useChangeMenuIcon from "../../hooks/useChangeMenuIcon";
import StarIconOutlined from "@material-ui/icons/StarTwoTone";
import StarIcon from "@material-ui/icons/Star";
import { useState } from "react";
import React, { useState } from "react";

const ITEM_HEIGHT = 48;

interface Option {
name: string;
customColor?: string | undefined;
iconColor?:
| "error"
| "action"
| "inherit"
| "disabled"
| "primary"
| "secondary"
| undefined;
textColor?:
| "inherit"
| "initial"
| "error"
| "primary"
| "secondary"
| "textPrimary"
| "textSecondary"
| undefined;
icon: SvgIconComponent;
method: (e?: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
}

interface Props {
deleteTodo: (e: any) => void;
setEditOpen: React.Dispatch<React.SetStateAction<boolean>>;
markStar: (id: string) => void;
todo: TodoType;
}

enum OptionName {
STAR = "Star",
UNSTAR = "Unstar",
EDIT = "Edit",
DELETE = "Delete",
}

export default function ActionsMenu({
deleteTodo,
setEditOpen,
markStar,
todo,
}) {
const [anchorEl, setAnchorEl] = useState(null);
}: Props) {
const [anchorEl, setAnchorEl] = useState<
(EventTarget & HTMLButtonElement) | null
>(null);
const open = Boolean(anchorEl);
const MenuIcon = useChangeMenuIcon();
const options = [

const options: Option[] = [
{
name: todo.starred ? "Unstar" : "Star",
name: todo.starred ? OptionName.UNSTAR : OptionName.STAR,
customColor: todo.starred ? "#CCA43A" : "#000",
icon: todo.starred ? StarIcon : StarIconOutlined,
method: () => {
Expand All @@ -28,29 +73,31 @@ export default function ActionsMenu({
},
},
{
name: "Edit",
color: "primary",
name: OptionName.EDIT,
iconColor: "primary",
textColor: "primary",
icon: EditIcon,
method: () => {
setEditOpen(true);
setAnchorEl(null);
},
},
{
name: "Delete",
color: "error",
name: OptionName.DELETE,
iconColor: "error",
textColor: "error",
icon: DeleteIcon,
method: (e) => {
deleteTodo(e);
setAnchorEl(null);
},
},
];
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
setAnchorEl(e.currentTarget);
};

const handleEvent = (option, e) => {
const handleEvent = (option: OptionName, e: any) => {
if (option === "Star") markStar(todo.id);
else if (option === "Edit") setEditOpen(true);
else if (option === "Delete") deleteTodo(e);
Expand Down Expand Up @@ -84,13 +131,13 @@ export default function ActionsMenu({
{options.map((option) => (
<MenuItem key={option.name} onClick={option.method}>
<option.icon
color={option.color && option.color}
style={{ color: !option.color && option.customColor }}
color={option.iconColor}
htmlColor={option.customColor}
/>
&nbsp;
<Typography
color={option.color && option.color}
style={{ color: !option.color && option.customColor }}
color={option.textColor}
style={{ color: option.customColor }}
>
{option.name}
</Typography>
Expand Down
11 changes: 8 additions & 3 deletions src/components/Actions/DeleteConfirm.jsx → src/components/Actions/DeleteConfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ import {
useMediaQuery,
} from "@material-ui/core";

export const DeleteConfirm = ({ open, close, yes }) => {
interface Props {
open: boolean;
close: () => void;
yes: () => void;
}

export const DeleteConfirm = ({ open, close, yes }: Props) => {
const matches = useMediaQuery("(max-width: 768px)");
return (
<Dialog open={open} onClose={close}>
Expand Down Expand Up @@ -41,7 +47,7 @@ export const DeleteConfirm = ({ open, close, yes }) => {
);
};

export const DeleteAllConfirm = ({ open, close, yes }) => {
export const DeleteAllConfirm = ({ open, close, yes }: Props) => {
return (
<Dialog open={open} onClose={close}>
<DialogTitle>DELETE ALL ITEMS?</DialogTitle>
Expand All @@ -61,4 +67,3 @@ export const DeleteAllConfirm = ({ open, close, yes }) => {
</Dialog>
);
};

9 changes: 8 additions & 1 deletion src/components/Actions/EditConfirm.jsx → src/components/Actions/EditConfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@ import {
Button,
} from "@material-ui/core";

const EditConfirm = ({ open, close, value, yes }) => {
interface Props {
yes: (val: string) => void;
open: boolean;
close: () => void;
value: string;
}

const EditConfirm = ({ open, close, value, yes }: Props) => {
const [newValue, setNewValue] = useState(value);
const onClose = () => {
setNewValue(value);
Expand Down
49 changes: 40 additions & 9 deletions src/components/Actions/MoreMenu.jsx → src/components/Actions/MoreMenu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,55 @@
import { useState, useContext } from "react";
import React, { useState, useContext } from "react";
import { IconButton, Menu, MenuItem, Typography } from "@material-ui/core";
import DeleteSweepIcon from "@material-ui/icons/DeleteSweepTwoTone";
import {
DeleteSweepTwoTone as DeleteSweepIcon,
SvgIconComponent,
} from "@material-ui/icons";
import useChangeMenuIcon from "../../hooks/useChangeMenuIcon";
import { MainContext } from "../../context/MainContext";
import { DeleteAllConfirm } from "./DeleteConfirm";

const MoreMenu = () => {
const [anchorEl, setAnchorEl] = useState(null);
const [anchorEl, setAnchorEl] = useState<
(EventTarget & HTMLButtonElement) | null
>(null);
const [deleteOpen, setDeleteOpen] = useState(false);
const open = Boolean(anchorEl);
const MenuIcon = useChangeMenuIcon();
const { todos, deleteAll } = useContext(MainContext);
const { todos, deleteAll } = useContext(MainContext)!;

const handleClick = (event) => setAnchorEl(event.currentTarget);
const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
setAnchorEl(e.currentTarget);
const handleClose = () => setAnchorEl(null);

const options = [
interface Option {
name: string;
iconColor:
| "error"
| "action"
| "inherit"
| "disabled"
| "primary"
| "secondary"
| undefined;
textColor:
| "error"
| "inherit"
| "primary"
| "secondary"
| "initial"
| "textPrimary"
| "textSecondary"
| undefined;
disabled: boolean;
icon: SvgIconComponent;
method: () => void;
}

const options: Option[] = [
{
name: "Delete All",
color: "error",
iconColor: "error",
textColor: "error",
disabled: todos.length === 0,
icon: DeleteSweepIcon,
method: () => {
Expand Down Expand Up @@ -57,8 +88,8 @@ const MoreMenu = () => {
disabled={option.disabled}
onClick={option.method}
>
<option.icon color={option.color} /> &nbsp;
<Typography color={option.color}>{option.name}</Typography>
<option.icon color={option.iconColor} /> &nbsp;
<Typography color={option.textColor}>{option.name}</Typography>
</MenuItem>
))}
</Menu>
Expand Down
9 changes: 8 additions & 1 deletion src/components/CustomLink.jsx → src/components/CustomLink.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React from "react";
import { useRoute, Link } from "wouter";

const CustomLink = (props) => {
interface Props {
href: string;
onClick?: () => void;
children: React.ReactNode;
}

const CustomLink = (props: Props) => {
const [isActive] = useRoute(props.href);
const activeObject = {
color: "#3f51b5",
Expand Down
29 changes: 18 additions & 11 deletions src/components/PersistentDrawerLeft.jsx → src/components/PersistentDrawerLeft.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,17 @@ import {
useScrollTrigger,
useMediaQuery,
} from "@material-ui/core";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import TodoIcon from "@material-ui/icons/NotesOutlined";
import AboutIconOutlined from "@material-ui/icons/InfoOutlined";
import AboutIcon from "@material-ui/icons/Info";
import MenuIcon from "@material-ui/icons/Menu";
import BackIcon from "@material-ui/icons/ArrowBack";
import SettingsIconOutlined from "@material-ui/icons/SettingsOutlined";
import SettingsIcon from "@material-ui/icons/Settings";
import {
ChevronLeft as ChevronLeftIcon,
ChevronRight as ChevronRightIcon,
NotesOutlined as TodoIcon,
InfoOutlined as AboutIconOutlined,
Info as AboutIcon,
Menu as MenuIcon,
ArrowBack as BackIcon,
SettingsOutlined as SettingsIconOutlined,
Settings as SettingsIcon,
} from "@material-ui/icons";
import { Link, useLocation } from "wouter";
import clsx from "clsx";
import { useState } from "react";
Expand Down Expand Up @@ -91,7 +93,12 @@ const useStyles = makeStyles((theme) => ({
},
}));

function HideOnScroll(props) {
interface Props {
window?: () => Window;
children: React.ReactElement;
}

function HideOnScroll(props: Props) {
const { children, window } = props;
// Note that you normally won't need to set the window ref as useScrollTrigger
// will default to window.
Expand All @@ -105,7 +112,7 @@ function HideOnScroll(props) {
);
}

export default function PersistentDrawerLeft(props) {
export default function PersistentDrawerLeft(props: any) {
const classes = useStyles();
const theme = useTheme();
const [open, setOpen] = useState(false);
Expand Down
Loading

0 comments on commit fbcd657

Please sign in to comment.