\n
handleChange('light')} />\n
\n
\n
handleChange('dark')} />\n
\n
\n \n );\n}\n"
},
{
"path": "src/components/Preferences/TitleBarSelector.tsx",
"content": "import React, { useState } from 'react';\nimport { FullScreenDialog, ConfirmDialog } from '../Mui';\nimport { Dropdown, MenuItem, useMuiMenu } from '../Mui';\nimport { Control } from '../../utils/form';\n\nconst exlucded: Array
= ['darwin', 'win32'];\nconst shouldRelaunch = !exlucded.includes(window.platform);\n\nexport function TitleBarSelector({ value, onChange }: Control) {\n const { anchorEl, setAnchorEl, onClose } = useMuiMenu();\n const [change, setChange] = useState(null);\n const [shouldClose, setShoudClose] = useState(false);\n const handleChange = onChange || (() => {});\n const hadnleSelect = shouldRelaunch ? setChange : handleChange;\n\n return (\n \n Title Bar
\n \n match.toUpperCase())}\n >\n hadnleSelect('native')}\n onClose={onClose}\n />\n hadnleSelect('frameless')}\n onClose={onClose}\n />\n \n {shouldRelaunch && (\n setChange(null)}\n onConfirm={() => {\n if (change && change !== value) {\n handleChange(change);\n setShoudClose(true);\n }\n }}\n onExited={() => shouldClose && window.relaunch()}\n >\n This will relaunch your application and the changes to take effect\n after relaunch\n \n )}\n
\n \n );\n}\n"
},
{
"path": "src/components/Preferences/index.ts",
"content": "import './Preferences.scss';\n\nexport * from './Preferences';\nexport { Preferences as default } from './Preferences';\n"
},
{
"path": "src/components/PrivateRoute.tsx",
"content": "import React from 'react';\nimport { Route, Redirect, RouteProps } from 'react-router-dom';\nimport { useSelector } from 'react-redux';\nimport { RootState } from '../store';\nimport { PATHS } from '../constants';\n\nexport function PrivateRoute(props: RouteProps) {\n const loggedIn = useSelector((state: RootState) => state.auth.loggedIn);\n return loggedIn ? : ;\n}\n"
},
{
"path": "src/components/Switch/Switch.scss",
"content": "$defaultWidth: 47.5px;\n\n@mixin shadow($x) {\n box-shadow: $x 0.5px 3px 0px lighten(#000, 50%);\n}\n\n.switch {\n @include dimen($defaultWidth);\n @include relative();\n\n cursor: pointer;\n user-select: none;\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n\n .switch-bar {\n @include animate(background-color);\n @include dimen(100%, 0);\n @include relative();\n background-color: var(--border-color);\n border-radius: 50px;\n padding-bottom: 50%;\n }\n\n .switch-icon {\n @include animate(transform);\n @include absolute(-0.4px);\n @include dimen(50%, 100%);\n padding: round(percentage(2.5 / strip-unit($defaultWidth)));\n transform: translateX(0);\n\n &:before {\n @include sq-dimen(100%);\n @include shadow(1px);\n content: '';\n background-color: #fff;\n border-radius: 50%;\n display: block;\n }\n }\n\n &.checked {\n .switch-bar {\n background-color: var(--accent-color);\n }\n .switch-icon {\n transform: translateX(100%);\n &:before {\n @include shadow(-1px);\n }\n }\n }\n}\n"
},
{
"path": "src/components/Switch/Switch.tsx",
"content": "import React, { useMemo, useCallback, CSSProperties } from 'react';\n\ninterface Props {\n checked?: boolean;\n onChange?(checked: boolean): void;\n width?: number;\n}\n\nexport const Switch = React.memo(\n ({ checked = false, width, onChange }) => {\n const style = useMemo(() => ({ width }), [width]);\n\n const onClick = useCallback(() => {\n onChange && onChange(!checked);\n }, [onChange, checked]);\n\n return (\n \n \n \n \n );\n }\n);\n"
},
{
"path": "src/components/Switch/index.ts",
"content": "import './Switch.scss';\n\nexport * from './Switch';\nexport { Switch as default } from './Switch';\n"
},
{
"path": "src/constants/index.ts",
"content": "export { default as PATHS } from './paths.json';\n"
},
{
"path": "src/constants/paths.json",
"content": "{\n \"AUTH\": \"/auth\",\n \"TASKLIST\": \"/tasklist/:taskListId?\"\n}\n"
},
{
"path": "src/date.d.ts",
"content": "type DayCn = '日' | '一' | '二' | '三' | '四' | '五' | '六';\ntype MonthFullName =\n | 'January'\n | 'February'\n | 'March'\n | 'April'\n | 'May'\n | 'June'\n | 'July'\n | 'August'\n | 'September'\n | 'October'\n | 'November'\n | 'December';\n\ntype MonthAbbr =\n | 'Jan'\n | 'Feb'\n | 'Mar'\n | 'Apr'\n | 'May'\n | 'Jun'\n | 'Jul'\n | 'Aug'\n | 'Sep'\n | 'Oct'\n | 'Nov'\n | 'Dec';\n\ntype DayFullName =\n | 'Sunday'\n | 'Monday'\n | 'Tuesday'\n | 'Wednesday'\n | 'Thursday'\n | 'Friday'\n | 'Saturday';\n\ntype DayAbbr = 'Sun' | 'Mon' | 'Tue' | 'Wed' | 'Thur' | 'Fri' | 'Sat';\n\ntype DaySuffix = 'th' | 'st' | 'nd' | 'rd';\n\ninterface Date {\n getDayCn(): DayCn;\n\n addDays: (n: number) => Date;\n\n addMonths: (n: number) => Date;\n\n getMonthName(): MonthFullName;\n\n getMonthAbbr(): MonthAbbr;\n\n getDayFull(): DayFullName;\n\n getDayAbbr(): DayAbbr;\n\n getDayOfYear(): number;\n\n getDaySuffix(): DaySuffix;\n\n getWeekOfYear(): number;\n\n isLeapYear(): boolean;\n\n getMonthDayCount(): number;\n\n compare(\n d: Date\n ): {\n sameYear: boolean;\n sameDate: boolean;\n sameMonth: boolean;\n lastMonth: boolean;\n nextMonth: boolean;\n };\n\n isToday(): boolean;\n\n dayDiff(d?: Date): number;\n\n toISODateString(): string;\n\n format(dateFormat: string): string;\n}\n"
},
{
"path": "src/hooks/crud-reducer/bindDispatch.ts",
"content": "import { Dispatch } from 'react';\nimport { ActionCreators } from './crudAction';\n\nexport type Dispatched
![](\"./screenshot/1.png\")
\n ![](\"./screenshot/2.png\")
\n ![](\"./screenshot/3.png\")
\n ![](\"./screenshot/4.png\")
\n![](\"./screenshot/guide-1.png\")
\n\nAnd the `oAuth.json` looks like this\n\n```json\n{\n \"installed\": {\n \"client_id\": \"...\",\n \"project_id\": \"...\",\n \"auth_uri\": \"https://accounts.google.com/o/oauth2/auth\",\n \"token_uri\": \"https://oauth2.googleapis.com/token\",\n \"auth_provider_x509_cert_url\": \"https://www.googleapis.com/oauth2/v1/certs\",\n \"client_secret\": \"...\",\n \"redirect_uris\": [\"urn:ietf:wg:oauth:2.0:oob\", \"http://localhost\"]\n }\n}\n```\n\n3. Start and drag the `oAuth.json` into the application.\n\n4. Enable [Google Tasks API](https://console.developers.google.com/apis/library/tasks.googleapis.com)\n\n5. Click on the `Get Code` button and will require authentication. Just ignore the `This app isn't verified` warning and continue because you are the app owner.\n\n6. Paste the code into the input filed and click the `Confirm` button.\n\n### Development\n\n```\nyarn dev\n```\n\n### Packaging\n\nTo package apps for the local platform:\n\n```\nyarn package\n```\n\nFirst, refer to the [Multi Platform Build docs](https://www.electron.build/multi-platform-build) for dependencies. Then,\n\n```\nyarn package-all\n```\n\n### TODO\n\n- [x] Support Window & Linux\n- [x] Keyboard shortcuts\n- [x] Dark Theme\n- [x] Add Note\n- [x] Add Date\n- [x] Animation\n- [x] Sync data periodically\n- [x] Move task to another list\n- [x] Improve / check performace\n- [ ] Subtask\n- [ ] Error handling\n\n### Known issue\n\n- Add time / repeat is not supported as API limitation\n- Tasks sorting type (My order / Date) is not synced to the official platform (Web/App)\n- The position of the task which marks as complete to incomplete may be different after refresh\n"
},
{
"path": "common.d.ts",
"content": "type Theme = 'light' | 'dark';\ntype AccentColor = 'red' | 'blue' | 'amber' | 'green' | 'purple' | 'grey';\ntype TitleBar = 'native' | 'frameless';\n\ninterface Schema$Storage