├── src ├── index.css ├── utils │ └── config.js ├── reportWebVitals.js ├── index.js ├── App.js ├── pages │ ├── Alert │ │ └── Alert.js │ ├── Landing │ │ └── Landing.js │ ├── Todo │ │ ├── TodoItem.js │ │ └── Todo.js │ ├── Login │ │ ├── Login.js │ │ └── SignUp.js │ └── icons.js ├── api │ └── api.js └── hooks │ └── index.js ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── .env.example ├── craco.config.js ├── netlify.toml ├── tailwind.config.js ├── app.json ├── .do └── deploy.template.yaml ├── LICENSE ├── package.json ├── .github └── ISSUE_TEMPLATE │ ├── documentation.yaml │ ├── feature.yaml │ └── bug.yaml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── README.md /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appwrite/demo-todo-with-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appwrite/demo-todo-with-react/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appwrite/demo-todo-with-react/HEAD/public/logo512.png -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_ENDPOINT= 2 | REACT_APP_PROJECT= 3 | REACT_APP_COLLECTION_ID= 4 | REACT_APP_DATABASE_ID= 5 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | // craco.config.js 2 | module.exports = { 3 | style: { 4 | postcss: { 5 | plugins: [ 6 | require('tailwindcss'), 7 | require('autoprefixer'), 8 | ], 9 | }, 10 | }, 11 | } -------------------------------------------------------------------------------- /src/utils/config.js: -------------------------------------------------------------------------------- 1 | export const Server = { 2 | endpoint : process.env.REACT_APP_ENDPOINT, 3 | project: process.env.REACT_APP_PROJECT, 4 | collectionID : process.env.REACT_APP_COLLECTION_ID, 5 | databaseID : process.env.REACT_APP_DATABASE_ID, 6 | } 7 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "build" 4 | 5 | [[redirects]] 6 | from = "/*" 7 | to = "/index.html" 8 | status = 200 9 | 10 | [template.environment] 11 | REACT_APP_ENDPOINT = "Your Appwrite Server Endpoint" 12 | REACT_APP_PROJECT = "Your Appwrite project ID" 13 | REACT_APP_COLLECTION_ID = "Your Collection ID" 14 | REACT_APP_DATABASE_ID = "Your Database ID" -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: { 3 | enable : true, 4 | content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], 5 | options : { 6 | safelist: [/^w-/] 7 | }, 8 | }, 9 | darkMode: false, // or 'media' or 'class' 10 | theme: { 11 | extend: {}, 12 | fontFamily: { 13 | sans: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'] 14 | } 15 | }, 16 | variants: { 17 | extend: { 18 | opacity: ['disabled'], 19 | cursor: ['disabled'], 20 | } 21 | }, 22 | plugins: [ 23 | require('@tailwindcss/forms') 24 | ], 25 | } 26 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "REACT_APP_ENDPOINT": { 4 | "description": "Your Appwrite endpoint", 5 | "value": "APP_ENDPOINT", 6 | "required": true 7 | }, 8 | "REACT_APP_PROJECT": { 9 | "description": "Your Appwrite project ID", 10 | "value": "APP_PROJECT_ID", 11 | "required": true 12 | }, 13 | "REACT_APP_COLLECTION_ID": { 14 | "description": "Your Appwrite collection ID", 15 | "value": "COLLECTION_ID", 16 | "required": true 17 | } 18 | }, 19 | "buildpacks": [ 20 | { 21 | "url": "https://github.com/mars/create-react-app-buildpack" 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /.do/deploy.template.yaml: -------------------------------------------------------------------------------- 1 | spec: 2 | name: todo-with-react 3 | static_sites: 4 | - environment_slug: html 5 | git: 6 | branch: main 7 | repo_clone_url: https://github.com/appwrite/todo-with-react.git 8 | name: todo-with-react 9 | output_dir: build 10 | build_command: npm run build 11 | envs: 12 | - key: REACT_APP_ENDPOINT 13 | value: Your Appwrite endpoint 14 | scope: RUN_TIME 15 | - key: REACT_APP_PROJECT 16 | value: Your Appwrite Project ID 17 | scope: RUN_TIME 18 | - key: REACT_APP_COLLECTION_ID 19 | value: Your Appwrite Collection ID 20 | scope: RUN_TIME 21 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom"; 2 | import Todo from "./pages/Todo/Todo"; 3 | import Login from "./pages/Login/Login"; 4 | import Landing from "./pages/Landing/Landing"; 5 | import { useGetUser } from "./hooks"; 6 | 7 | function App() { 8 | // eslint-disable-next-line 9 | const [{ user, isLoading, isError }, dispatch] = useGetUser(); 10 | 11 | return ( 12 | 13 | 14 | 15 | {user ? : } 16 | 17 | 18 | {user ? : } 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Appwrite 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/pages/Alert/Alert.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | 3 | const Alert = ({ color, message }) => { 4 | const [showAlert, setShowAlert] = React.useState(true); 5 | const TIMEOUT = 3000; 6 | 7 | useEffect(() => { 8 | let timeout = setTimeout(() => setShowAlert(false), TIMEOUT); 9 | return () => { 10 | clearTimeout(timeout); 11 | }; 12 | }, []); 13 | 14 | return ( 15 | <> 16 | {showAlert && ( 17 |
20 | 21 | 22 | 23 | 24 | {message} 25 | 26 | 34 |
35 | )} 36 | 37 | ); 38 | }; 39 | 40 | export default Alert; 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-mvc", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "^6.1.1", 7 | "appwrite": "^10.1.0", 8 | "react": "^17.0.2", 9 | "react-dom": "^17.0.2", 10 | "react-router-dom": "^5.2.0", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.0.1" 13 | }, 14 | "scripts": { 15 | "start": "craco --openssl-legacy-provider start", 16 | "build": "craco build", 17 | "lint": "eslint ./src", 18 | "test": "craco test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | }, 39 | "devDependencies": { 40 | "@tailwindcss/forms": "^0.3.2", 41 | "@testing-library/jest-dom": "^5.11.4", 42 | "@testing-library/react": "^11.1.0", 43 | "@testing-library/user-event": "^12.1.10", 44 | "autoprefixer": "^9.8.8", 45 | "postcss": "^7.0.39", 46 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation.yaml: -------------------------------------------------------------------------------- 1 | name: "📚 Documentation" 2 | description: "Report an issue related to documentation" 3 | title: "📚 Documentation: " 4 | labels: [documentation] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for taking the time to fill out our documentation update request form 🙏 10 | - type: textarea 11 | id: issue-description 12 | validations: 13 | required: true 14 | attributes: 15 | label: "💭 Description" 16 | description: "A clear and concise description of what the issue is." 17 | placeholder: "Documentation should not ..." 18 | - type: checkboxes 19 | id: no-duplicate-issues 20 | attributes: 21 | label: "👀 Have you spent some time to check if this issue has been raised before?" 22 | description: "Have you Googled for a similar issue or checked our older issues for a similar bug?" 23 | options: 24 | - label: "I checked and didn't find similar issue" 25 | required: true 26 | - type: checkboxes 27 | id: read-code-of-conduct 28 | attributes: 29 | label: "🏢 Have you read the Code of Conduct?" 30 | options: 31 | - label: "I have read the [Code of Conduct](https://github.com/appwrite/appwrite/blob/HEAD/CODE_OF_CONDUCT.md)" 32 | required: true 33 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yaml: -------------------------------------------------------------------------------- 1 | name: 🚀 Feature 2 | description: "Submit a proposal for a new feature" 3 | title: "🚀 Feature: " 4 | labels: [feature] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for taking the time to fill out our feature request form 🙏 10 | - type: textarea 11 | id: feature-description 12 | validations: 13 | required: true 14 | attributes: 15 | label: "🔖 Feature description" 16 | description: "A clear and concise description of what the feature is." 17 | placeholder: "You should add ..." 18 | - type: textarea 19 | id: pitch 20 | validations: 21 | required: true 22 | attributes: 23 | label: "🎤 Pitch" 24 | description: "Please explain why this feature should be implemented and how it would be used. Add examples, if applicable." 25 | placeholder: "In my use-case, ..." 26 | - type: checkboxes 27 | id: no-duplicate-issues 28 | attributes: 29 | label: "👀 Have you spent some time to check if this issue has been raised before?" 30 | description: "Have you Googled for a similar issue or checked our older issues for a similar bug?" 31 | options: 32 | - label: "I checked and didn't find similar issue" 33 | required: true 34 | - type: checkboxes 35 | id: read-code-of-conduct 36 | attributes: 37 | label: "🏢 Have you read the Code of Conduct?" 38 | options: 39 | - label: "I have read the [Code of Conduct](https://github.com/appwrite/appwrite/blob/HEAD/CODE_OF_CONDUCT.md)" 40 | required: true 41 | -------------------------------------------------------------------------------- /src/api/api.js: -------------------------------------------------------------------------------- 1 | import { Client as Appwrite, Databases, Account } from "appwrite"; 2 | import { Server } from "../utils/config"; 3 | 4 | let api = { 5 | sdk: null, 6 | 7 | provider: () => { 8 | if (api.sdk) { 9 | return api.sdk; 10 | } 11 | let appwrite = new Appwrite(); 12 | appwrite.setEndpoint(Server.endpoint).setProject(Server.project); 13 | const account = new Account(appwrite); 14 | const database = new Databases(appwrite); 15 | 16 | api.sdk = { database, account }; 17 | return api.sdk; 18 | }, 19 | 20 | createAccount: (email, password, name) => { 21 | return api.provider().account.create("unique()", email, password, name); 22 | }, 23 | 24 | getAccount: () => { 25 | let account = api.provider().account; 26 | return account.get(); 27 | }, 28 | 29 | createSession: (email, password) => { 30 | return api.provider().account.createEmailSession(email, password); 31 | }, 32 | 33 | deleteCurrentSession: () => { 34 | return api.provider().account.deleteSession("current"); 35 | }, 36 | 37 | createDocument: (databaseId, collectionId, data, permissions) => { 38 | return api 39 | .provider() 40 | .database.createDocument(databaseId, collectionId, 'unique()', data, permissions); 41 | }, 42 | 43 | listDocuments: (databaseId, collectionId) => { 44 | return api.provider().database.listDocuments(databaseId, collectionId); 45 | }, 46 | 47 | updateDocument: (databaseId, collectionId, documentId, data) => { 48 | return api 49 | .provider() 50 | .database.updateDocument(databaseId, collectionId, documentId, data); 51 | }, 52 | 53 | deleteDocument: (databaseId, collectionId, documentId) => { 54 | return api.provider().database.deleteDocument(databaseId, collectionId, documentId); 55 | }, 56 | }; 57 | 58 | export default api; 59 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | 15 | 24 | React App 25 | 26 | 27 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/pages/Landing/Landing.js: -------------------------------------------------------------------------------- 1 | import { appwrite, github, twitter, react } from "../icons"; 2 | import { useHistory } from "react-router-dom"; 3 | 4 | const Landing = () => { 5 | const history = useHistory(); 6 | 7 | const handleClick = () => { 8 | history.push("/todos"); 9 | }; 10 | 11 | const links = [ 12 | { 13 | href: "http://github.com/appwrite/appwrite", 14 | icon: github(10), 15 | }, 16 | { 17 | href: "https://twitter.com/appwrite_io", 18 | icon: twitter(10), 19 | }, 20 | { 21 | href: "http://appwrite.io", 22 | icon: appwrite(10), 23 | }, 24 | ]; 25 | 26 | return ( 27 | <> 28 |
29 |
30 |

Introducing

31 |

toTooooDoooo

32 |

33 | A Simple To-do App built with {appwrite(8)} Appwrite and {react(8)}{" "} 34 | React 35 |

36 | 42 |
43 |
44 | 45 |
46 | {links.map((item, key) => ( 47 |
48 | {item["icon"]} 49 |
50 | ))} 51 |
52 | 53 | ); 54 | }; 55 | 56 | export default Landing; 57 | -------------------------------------------------------------------------------- /src/pages/Todo/TodoItem.js: -------------------------------------------------------------------------------- 1 | import api from '../../api/api'; 2 | import { Server } from '../../utils/config'; 3 | import { deleteButton } from '../icons'; 4 | 5 | const TodoItem = ({ item, setStale }) => { 6 | const handleComplete = async (e, item) => { 7 | // console.log('Marking Todo as complete'); 8 | let data = { 9 | isComplete: !item['isComplete'], 10 | }; 11 | try { 12 | // console.log(item); 13 | await api.updateDocument( 14 | Server.databaseID, 15 | Server.collectionID, 16 | item['$id'], 17 | data 18 | ); 19 | setStale({ stale: true }); 20 | } catch (e) { 21 | console.error('Error in marking todo as complete'); 22 | } 23 | }; 24 | 25 | const handleDelete = async (e, item) => { 26 | // console.log('Deleting Todo'); 27 | try { 28 | await api.deleteDocument( 29 | Server.databaseID, 30 | Server.collectionID, 31 | item['$id'] 32 | ); 33 | setStale({ stale: true }); 34 | } catch (e) { 35 | console.error('Error in deleting todo'); 36 | } 37 | }; 38 | 39 | return ( 40 |
  • 41 |
    42 | handleComplete(e, item)} 47 | /> 48 |
    53 | {item['content']} 54 |
    55 |
    56 | 62 |
    • 63 | ); 64 | }; 65 | 66 | export default TodoItem; 67 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | build/ 107 | yarn.lock -------------------------------------------------------------------------------- /src/pages/Login/Login.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import api from "../../api/api"; 3 | import SignUp from "./SignUp"; 4 | import { FetchState } from "../../hooks"; 5 | 6 | const Login = ({ dispatch }) => { 7 | const [email, setEmail] = useState(); 8 | const [password, setPassword] = useState(); 9 | const [register, setRegister] = useState(false); 10 | 11 | const handleLogin = async (e) => { 12 | e.preventDefault(); 13 | dispatch({ type: FetchState.FETCH_INIT }); 14 | try { 15 | await api.createSession(email, password); 16 | const data = await api.getAccount(); 17 | dispatch({ type: FetchState.FETCH_SUCCESS, payload: data }); 18 | } catch (e) { 19 | dispatch({ type: FetchState.FETCH_FAILURE }); 20 | } 21 | }; 22 | 23 | return register ? ( 24 | 25 | ) : ( 26 |
    27 |
    28 |

    Login

    29 |

    30 | {" "} 31 | Don't have an account ?{" "} 32 | setRegister(true)} 35 | > 36 | Sign Up 37 | {" "} 38 |

    39 |
    40 | 41 | setEmail(e.target.value)} 45 | name="email" 46 | autoComplete="email" 47 | /> 48 | 49 | setPassword(e.target.value)} 53 | name="password" 54 | autoComplete="password" 55 | /> 56 | 57 |
    58 | 65 |
    66 |
    67 |
    68 |
    69 | ); 70 | }; 71 | 72 | export default Login; 73 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug.yaml: -------------------------------------------------------------------------------- 1 | name: "🐛 Bug Report" 2 | description: "Submit a bug report to help us improve" 3 | title: "🐛 Bug Report: " 4 | labels: [bug] 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thanks for taking the time to fill out our bug report form 🙏 10 | - type: textarea 11 | id: steps-to-reproduce 12 | validations: 13 | required: true 14 | attributes: 15 | label: "👟 Reproduction steps" 16 | description: "How do you trigger this bug? Please walk us through it step by step." 17 | placeholder: "When I ..." 18 | - type: textarea 19 | id: expected-behavior 20 | validations: 21 | required: true 22 | attributes: 23 | label: "👍 Expected behavior" 24 | description: "What did you think would happen?" 25 | placeholder: "It should ..." 26 | - type: textarea 27 | id: actual-behavior 28 | validations: 29 | required: true 30 | attributes: 31 | label: "👎 Actual Behavior" 32 | description: "What did actually happen? Add screenshots, if applicable." 33 | placeholder: "It actually ..." 34 | - type: dropdown 35 | id: appwrite-version 36 | attributes: 37 | label: "🎲 Appwrite version" 38 | description: "What version of Appwrite are you running?" 39 | options: 40 | - Version 0.10.x 41 | - Version 0.9.x 42 | - Version 0.8.x 43 | - Version 0.7.x 44 | - Version 0.6.x 45 | - Different version (specify in environment) 46 | validations: 47 | required: true 48 | - type: dropdown 49 | id: operating-system 50 | attributes: 51 | label: "💻 Operating system" 52 | description: "What OS is your server / device running on?" 53 | options: 54 | - Linux 55 | - MacOS 56 | - Windows 57 | - Something else 58 | validations: 59 | required: true 60 | - type: textarea 61 | id: enviromnemt 62 | validations: 63 | required: false 64 | attributes: 65 | label: "🧱 Your Environment" 66 | description: "Is your environment customized in any way?" 67 | placeholder: "I use Cloudflare for ..." 68 | - type: checkboxes 69 | id: no-duplicate-issues 70 | attributes: 71 | label: "👀 Have you spent some time to check if this issue has been raised before?" 72 | description: "Have you Googled for a similar issue or checked our older issues for a similar bug?" 73 | options: 74 | - label: "I checked and didn't find similar issue" 75 | required: true 76 | - type: checkboxes 77 | id: read-code-of-conduct 78 | attributes: 79 | label: "🏢 Have you read the Code of Conduct?" 80 | options: 81 | - label: "I have read the [Code of Conduct](https://github.com/appwrite/appwrite/blob/HEAD/CODE_OF_CONDUCT.md)" 82 | required: true 83 | -------------------------------------------------------------------------------- /src/hooks/index.js: -------------------------------------------------------------------------------- 1 | import api from "../api/api"; 2 | import { Server } from "../utils/config"; 3 | import { useEffect, useReducer } from "react"; 4 | 5 | export const FetchState = { 6 | FETCH_INIT: 0, 7 | FETCH_SUCCESS: 1, 8 | FETCH_FAILURE: 2, 9 | }; 10 | 11 | export const useGetTodos = (stale) => { 12 | const reducer = (state, action) => { 13 | switch (action.type) { 14 | case FetchState.FETCH_INIT: 15 | return { ...state, isLoading: true, isError: false }; 16 | case FetchState.FETCH_SUCCESS: 17 | return { 18 | ...state, 19 | isLoading: false, 20 | isError: false, 21 | todos: action.payload, 22 | }; 23 | case FetchState.FETCH_FAILURE: 24 | return { ...state, isLoading: false, isError: true }; 25 | default: 26 | throw new Error(); 27 | } 28 | }; 29 | 30 | const [state, dispatch] = useReducer(reducer, { 31 | isLoading: false, 32 | isError: false, 33 | todos: [], 34 | }); 35 | 36 | useEffect(() => { 37 | let didCancel = false; 38 | const getTodos = async () => { 39 | dispatch({ type: FetchState.FETCH_INIT }); 40 | try { 41 | const data = await api.listDocuments(Server.databaseID, Server.collectionID); 42 | if (!didCancel) { 43 | dispatch({ type: FetchState.FETCH_SUCCESS, payload: data.documents }); 44 | } 45 | } catch (e) { 46 | if (!didCancel) { 47 | dispatch({ type: FetchState.FETCH_FAILURE }); 48 | } 49 | } 50 | }; 51 | getTodos(); 52 | return () => (didCancel = true); 53 | }, [stale]); 54 | 55 | return [state]; 56 | }; 57 | 58 | export const useGetUser = () => { 59 | const reducer = (state, action) => { 60 | switch (action.type) { 61 | case FetchState.FETCH_INIT: 62 | return { ...state, isLoading: true, isError: false }; 63 | case FetchState.FETCH_SUCCESS: 64 | return { 65 | ...state, 66 | isLoading: false, 67 | isError: false, 68 | user: action.payload, 69 | }; 70 | case FetchState.FETCH_FAILURE: 71 | return { ...state, isLoading: false, isError: true }; 72 | default: 73 | throw new Error(); 74 | } 75 | }; 76 | 77 | const [state, dispatch] = useReducer(reducer, { 78 | isLoading: false, 79 | isError: true, 80 | data: [], 81 | }); 82 | 83 | useEffect(() => { 84 | let didCancel = false; 85 | const getTodos = async () => { 86 | dispatch({ type: FetchState.FETCH_INIT }); 87 | try { 88 | const account = await api.getAccount(); 89 | if (!didCancel) { 90 | dispatch({ type: FetchState.FETCH_SUCCESS, payload: account }); 91 | } 92 | } catch (e) { 93 | if (!didCancel) { 94 | dispatch({ type: FetchState.FETCH_FAILURE }); 95 | } 96 | } 97 | }; 98 | getTodos(); 99 | return () => (didCancel = true); 100 | }, []); 101 | 102 | return [state, dispatch]; 103 | }; 104 | -------------------------------------------------------------------------------- /src/pages/Todo/Todo.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import api from '../../api/api'; 3 | import { FetchState, useGetTodos } from '../../hooks'; 4 | import { Server } from '../../utils/config'; 5 | import Alert from '../Alert/Alert'; 6 | import TodoItem from './TodoItem'; 7 | import { Permission, Role } from 'appwrite'; 8 | 9 | const Todo = ({ user, dispatch }) => { 10 | const [stale, setStale] = useState({ stale: false }); 11 | const [{ todos, isLoading, isError }] = useGetTodos(stale); 12 | const [currentTodo, setCurrentTodo] = useState(''); 13 | 14 | const handleAddTodo = async (e) => { 15 | e.preventDefault(); 16 | // console.log('Adding Todo'); 17 | const data = { 18 | content: currentTodo, 19 | isComplete: false, 20 | }; 21 | // console.log(data, user); 22 | try { 23 | await api.createDocument(Server.databaseID, Server.collectionID, data, [ 24 | Permission.read(Role.user(user['$id'])), 25 | Permission.write(Role.user(user['$id'])), 26 | ]); 27 | setStale({ stale: true }); 28 | setCurrentTodo(''); 29 | } catch (e) { 30 | console.error('Error in adding todo'); 31 | } 32 | }; 33 | 34 | const handleLogout = async (e) => { 35 | dispatch({ type: FetchState.FETCH_INIT }); 36 | try { 37 | await api.deleteCurrentSession(); 38 | dispatch({ type: FetchState.FETCH_SUCCESS, payload: null }); 39 | } catch (e) { 40 | dispatch({ type: FetchState.FETCH_FAILURE }); 41 | } 42 | }; 43 | 44 | return ( 45 | <> 46 |
    47 | {isError && } 48 |
    49 |
    50 | 📝
      toTooooDoooos 51 |
    52 | 53 |
    54 | setCurrentTodo(e.target.value)} 60 | > 61 |
    62 | 63 | {isLoading &&

    Loading ....

    } 64 | 65 |
      66 | {todos.map((item) => ( 67 | 68 | ))} 69 |
    70 |
    71 |
    72 | 73 |
    74 | 80 |
    81 | 82 | ); 83 | }; 84 | 85 | export default Todo; 86 | -------------------------------------------------------------------------------- /src/pages/Login/SignUp.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import api from "../../api/api"; 3 | import { FetchState } from "../../hooks"; 4 | 5 | const SignUp = ({ setRegister, dispatch }) => { 6 | const [name, setName] = useState(); 7 | const [email, setEmail] = useState(); 8 | const [password, setPassword] = useState(); 9 | 10 | const handleSignup = async (e) => { 11 | e.preventDefault(); 12 | dispatch({ type: FetchState.FETCH_INIT }); 13 | try { 14 | const user = await api.createAccount(email, password, name); 15 | await api.createSession(email, password); 16 | dispatch({ type: FetchState.FETCH_SUCCESS, payload: user }); 17 | } catch (e) { 18 | dispatch({ type: FetchState.FETCH_FAILURE }); 19 | } 20 | }; 21 | 22 | return ( 23 | <> 24 |
    25 |
    26 |

    Sign Up

    27 |

    28 | {" "} 29 | Already have an account ?{" "} 30 | setRegister(false)} 33 | > 34 | Login 35 | {" "} 36 |

    37 |
    38 | 39 | setName(e.target.value)} 43 | name="name" 44 | autoComplete="name" 45 | /> 46 | 47 | 48 | {/* “Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” */} 49 | setEmail(e.target.value)} 53 | name="email" 54 | autoComplete="email" 55 | /> 56 | 57 | setPassword(e.target.value)} 61 | name="password" 62 | autoComplete="password" 63 | /> 64 | 65 |
    66 | 73 |
    74 |
    75 |
    76 |
    77 | 78 | ); 79 | }; 80 | 81 | export default SignUp; 82 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity, expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at team@appwrite.io. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We would ❤️ for you to contribute to Appwrite and help make it better! We want contributing to Appwrite to be fun, enjoyable, and educational for anyone and everyone. All contributions are welcome, including issues, new docs as well as updates and tweaks, blog posts, workshops, and more. 4 | 5 | ## How to Start? 6 | 7 | If you are worried or don’t know where to start, check out our next section explaining what kind of help we could use and where can you get involved. You can reach out with questions to [Eldad Fux (@eldadfux)](https://twitter.com/eldadfux) or [@appwrite_io](https://twitter.com/appwrite_io) on Twitter, and anyone from the [Appwrite team on Discord](https://discord.gg/GSeTUeA). You can also submit an issue, and a maintainer can guide you! 8 | 9 | ## Code of Conduct 10 | 11 | Help us keep Appwrite open and inclusive. Please read and follow our [Code of Conduct](/CODE_OF_CONDUCT.md). 12 | 13 | ## Submit a Pull Request 🚀 14 | 15 | Branch naming convention is as following 16 | 17 | `TYPE-ISSUE_ID-DESCRIPTION` 18 | 19 | example: 20 | 21 | ``` 22 | doc-548-submit-a-pull-request-section-to-contribution-guide 23 | ``` 24 | 25 | When `TYPE` can be: 26 | 27 | - **feat** - is a new feature 28 | - **doc** - documentation only changes 29 | - **cicd** - changes related to CI/CD system 30 | - **fix** - a bug fix 31 | - **refactor** - code change that neither fixes a bug nor adds a feature 32 | 33 | **All PRs must include a commit message with the changes description!** 34 | 35 | For the initial start, fork the project and use git clone command to download the repository to your computer. A standard procedure for working on an issue would be to: 36 | 37 | 1. `git pull`, before creating a new branch, pull the changes from upstream. Your master needs to be up to date. 38 | 39 | ``` 40 | $ git pull 41 | ``` 42 | 43 | 2. Create new branch from `master` like: `doc-548-submit-a-pull-request-section-to-contribution-guide`
    44 | 45 | ``` 46 | $ git checkout -b [name_of_your_new_branch] 47 | ``` 48 | 49 | 3. Work - commit - repeat ( be sure to be in your branch ) 50 | 51 | 4. Push changes to GitHub 52 | 53 | ``` 54 | $ git push origin [name_of_your_new_branch] 55 | ``` 56 | 57 | 5. Submit your changes for review 58 | If you go to your repository on GitHub, you'll see a `Compare & pull request` button. Click on that button. 59 | 6. Start a Pull Request 60 | Now submit the pull request and click on `Create pull request`. 61 | 7. Get a code review approval/reject 62 | 8. After approval, merge your PR 63 | 9. GitHub will automatically delete the branch after the merge is done. (they can still be restored). 64 | 65 | ## Introducing New Features 66 | 67 | We would 💖 you to contribute to Appwrite, but we would also like to make sure Appwrite is as great as possible and loyal to its vision and mission statement 🙏. 68 | 69 | For us to find the right balance, please open an issue explaining your ideas before introducing a new pull request. 70 | 71 | This will allow the Appwrite community to have sufficient discussion about the new feature value and how it fits in the product roadmap and vision. 72 | 73 | This is also important for the Appwrite lead developers to be able to give technical input and different emphasis regarding the feature design and architecture. Some bigger features might need to go through our [RFC process](https://github.com/appwrite/rfc). 74 | 75 | ## Other Ways to Help 76 | 77 | Pull requests are great, but there are many other areas where you can help Appwrite. 78 | 79 | ### Blogging & Speaking 80 | 81 | Blogging, speaking about, or creating tutorials about one of Appwrite’s many features. Mention [@appwrite_io](https://twitter.com/appwrite_io) on Twitter and/or email team [at] appwrite [dot] io so we can give pointers and tips and help you spread the word by promoting your content on the different Appwrite communication channels. Please add your blog posts and videos of talks to our [Awesome Appwrite](https://github.com/appwrite/awesome-appwrite) repo on GitHub. 82 | 83 | ### Presenting at Meetups 84 | 85 | Presenting at meetups and conferences about your Appwrite projects. Your unique challenges and successes in building things with Appwrite can provide great speaking material. We’d love to review your talk abstract/CFP, so get in touch with us if you’d like some help! 86 | 87 | ### Sending Feedbacks & Reporting Bugs 88 | 89 | Sending feedback is a great way for us to understand your different use cases of Appwrite better. If you had any issues, bugs, or want to share about your experience, feel free to do so on our GitHub issues page or at our [Discord channel](https://discord.gg/GSeTUeA). 90 | 91 | ### Submitting New Ideas 92 | 93 | If you think Appwrite could use a new feature, please open an issue on our GitHub repository, stating as much information as you can think about your new idea and it's implications. We would also use this issue to gather more information, get more feedback from the community, and have a proper discussion about the new feature. 94 | 95 | ### Improving Documentation 96 | 97 | Submitting documentation updates, enhancements, designs, or bug fixes. Spelling or grammar fixes will be very much appreciated. 98 | 99 | ### Helping Someone 100 | 101 | Searching for Appwrite on Discord, GitHub, or StackOverflow and helping someone else who needs help. You can also help by teaching others how to contribute to Appwrite's repo! 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🔖 Todo With React 2 | 3 | ![Easter Eggs Claimed](https://img.shields.io/github/issues-pr-closed-raw/appwrite/todo-with-react/easter-egg?label=Easter%20Eggs%20Claimed&style=flat-square&logo=data:image/png;base64,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) 4 | 5 | A simple todo app built with Appwrite and React 6 | 7 | If you simply want to try out the App, go ahead and check out the demo at https://appwrite-todo-with-react.vercel.app 8 | 9 | 10 | ## 🎬 Getting Started 11 | 12 | ### 🤘 Install Appwrite 13 | Follow our simple [Installation Guide](https://appwrite.io/docs/installation) to get Appwrite up and running in no time. You can either deploy Appwrite on your local machine or, on any cloud provider of your choice. 14 | 15 | > Note: If you setup Appwrite on your local machine, you will need to create a public IP so that your hosted frontend can access it. 16 | 17 | We need to make a few configuration changes to your Appwrite server. 18 | 19 | 1. Add a new Web App in Appwrite and enter the endpoint of your website (`localhost, .vercel.app etc`) 20 | ![Create Web App](https://user-images.githubusercontent.com/20852629/113019434-3c27c900-919f-11eb-997c-1da5a8303ceb.png) 21 | 22 | 2. Create a new collection with the following properties 23 | * **Attributes** 24 | * 25 | Add the following attributes to the collection. 26 | > Make sure that your Attribute ID exactly matches the key in the images 27 | 28 |

    29 | Content Attribute 30 |

    31 | 32 |

    33 | IsComplete Attribute 34 |

    35 | 36 | * **Permissions** 37 | 38 | Add the following permissions to your collections. These permissions ensure that only registered users can access the collection. 39 | 40 |

    41 | Collection Permissions 42 |

    43 | 44 | ### 🚀 Deploy the Front End 45 | You have two options to deploy the front-end and we will cover both of them here. In either case, you will need to fill in these environment variables that help your frontend connect to Appwrite. 46 | 47 | * REACT_APP_ENDPOINT - Your Appwrite endpoint 48 | * REACT_APP_PROJECT - Your Appwrite project ID 49 | * REACT_APP_COLLECTION_ID - Your Appwrite collection ID 50 | 51 | ### **Deploy to a Static Hosting Provider** 52 | 53 | Use the following buttons to deploy to your favourite hosting provider in one click! We support Vercel, Netlify and DigitalOcean. You will need to enter the environment variables above when prompted. 54 | 55 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fappwrite%2Ftodo-with-react&env=REACT_APP_COLLECTION_ID,REACT_APP_PROJECT,REACT_APP_ENDPOINT&envDescription=Your%20Appwrite%20Endpoint%2C%20Project%20ID%20and%20Collection%20ID%20) 56 | 57 | [![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/appwrite/demo-todo-with-react) 58 | 59 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/appwrite/todo-with-react) 60 | 61 | [![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/appwrite/todo-with-react/tree/main) 62 | 63 | 64 | ### **Run locally** 65 | 66 | Follow these instructions to run the demo app locally 67 | 68 | ```sh 69 | $ git clone https://github.com/appwrite/todo-with-react 70 | $ cd todo-with-react 71 | ``` 72 | 73 | Run the following command to generate your `.env` vars 74 | 75 | ```sh 76 | $ cp .env.example .env 77 | ``` 78 | 79 | Now fill in the envrionment variables we discussed above in your `.env` 80 | 81 | Now run the following commands and you should be good to go 💪🏼 82 | 83 | ``` 84 | $ npm install 85 | $ npm start 86 | ``` 87 | 88 | ## 🤕 Support 89 | 90 | If you get stuck anywhere, hop onto one of our [support channels in discord](https://appwrite.io/discord) and we'd be delighted to help you out 🤝 91 | 92 | ## 😧 Help Wanted 93 | Our access credentials were recently compromised and someone tried to ruin these demos. They decided to leave behind 15 easter eggs 🥚 for you to discover. If you find them, submit a PR cleaning up that section of the code (One PR per person across all the repos). You can track the number of claimed Easter Eggs using the badge at the top. 94 | 95 | The first 15 people to get their PRs merged will receive some Appwrite Swags 🤩 . Just head over to our [Discord channel](https://appwrite.io/discord) and share your PR link with us. 96 | 97 | > *UPDATE **17-11-2021**:* The easter egg contest is now closed. 98 | -------------------------------------------------------------------------------- /src/pages/icons.js: -------------------------------------------------------------------------------- 1 | export const appwrite = (size) => ( 2 | 3 | 7 | 11 | 12 | ); 13 | 14 | export const react = (size, animate = false) => ( 15 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | 26 | export const github = (size) => ( 27 | 28 | 29 | 34 | 35 | 36 | 37 | ); 38 | 39 | export const linkedin = (size) => ( 40 | 41 | 42 | 46 | 50 | 54 | 55 | 56 | ); 57 | 58 | export const twitter = (size) => ( 59 | 63 | 64 | 65 | ); 66 | 67 | export const deleteButton = ( 68 | 75 | 81 | 82 | ); 83 | 84 | export const downArray = null; 85 | --------------------------------------------------------------------------------