Bump demo for 10.2.x

README.md

@@ -81,8 +81,8 @@ Now fill in the envrionment variables we discussed above in your `.env`
 Now run the following commands and you should be good to go 💪🏼
 
 ```
-$ npm install
-$ npm start
+npm install
+npm start
 ```
 
 ## 🤕 Support

package.json

@@ -4,15 +4,15 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",
-    "appwrite": "^10.1.0",
+    "appwrite": "^10.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "craco --openssl-legacy-provider start",
+    "start": "craco start",
     "build": "craco build",
     "lint": "eslint ./src",
     "test": "craco test",

src/api/api.js

@@ -1,5 +1,5 @@
-import { Client as Appwrite, Databases, Account } from "appwrite";
-import { Server } from "../utils/config";
+import { Client as Appwrite, Databases, Account, ID} from 'appwrite';
+import { Server } from '../utils/config';
 
 let api = {
   sdk: null,
@@ -18,7 +18,7 @@ let api = {
   },
 
   createAccount: (email, password, name) => {
-    return api.provider().account.create("unique()", email, password, name);
+    return api.provider().account.create(ID.unique(), email, password, name);
   },
 
   getAccount: () => {
@@ -34,24 +34,24 @@ let api = {
     return api.provider().account.deleteSession("current");
   },
 
-  createDocument: (databaseId, collectionId, data, permissions) => {
+  createDocument: (data, permissions) => {
     return api
       .provider()
-      .database.createDocument(databaseId, collectionId, 'unique()', data, permissions);
+      .database.createDocument(Server.databaseID, Server.collectionID, 'unique()', data, permissions);
   },
 
-  listDocuments: (databaseId, collectionId) => {
-    return api.provider().database.listDocuments(databaseId, collectionId);
+  listDocuments: () => {
+    return api.provider().database.listDocuments(Server.databaseID, Server.collectionID);
   },
 
-  updateDocument: (databaseId, collectionId, documentId, data) => {
+  updateDocument: (documentId, data) => {
     return api
       .provider()
-      .database.updateDocument(databaseId, collectionId, documentId, data);
+      .database.updateDocument(Server.databaseID, Server.collectionID, documentId, data);
   },
 
-  deleteDocument: (databaseId, collectionId, documentId) => {
-    return api.provider().database.deleteDocument(databaseId, collectionId, documentId);
+  deleteDocument: (documentId) => {
+    return api.provider().database.deleteDocument(Server.databaseID, Server.collectionID, documentId);
   },
 };
 

src/hooks/index.js

@@ -38,7 +38,7 @@ export const useGetTodos = (stale) => {
     const getTodos = async () => {
       dispatch({ type: FetchState.FETCH_INIT });
       try {
-        const data = await api.listDocuments(Server.databaseID, Server.collectionID);
+        const data = await api.listDocuments();
         if (!didCancel) {
           dispatch({ type: FetchState.FETCH_SUCCESS, payload: data.documents });
         }

src/pages/Todo/Todo.js

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import api from '../../api/api';
 import { FetchState, useGetTodos } from '../../hooks';
-import { Server } from '../../utils/config';
 import Alert from '../Alert/Alert';
 import TodoItem from './TodoItem';
 import { Permission, Role } from 'appwrite';
@@ -20,7 +19,7 @@ const Todo = ({ user, dispatch }) => {
     };
     // console.log(data, user);
     try {
-      await api.createDocument(Server.databaseID, Server.collectionID, data, [
+      await api.createDocument(data, [
         Permission.read(Role.user(user['$id'])),
         Permission.write(Role.user(user['$id'])),
       ]);
@@ -43,17 +42,17 @@ const Todo = ({ user, dispatch }) => {
 
   return (
     <>
-      <section className="container h-screen max-h-screen px-3 max-w-xl mx-auto flex flex-col">
+      <section className="container flex flex-col h-screen max-w-xl max-h-screen px-3 mx-auto">
         {isError && <Alert color="red" message="Something went wrong..." />}
-        <div className="my-auto p-16 rounded-lg text-center">
-          <div className="font-bold text-3xl md:text-5xl lg:text-6xl">
+        <div className="p-16 my-auto text-center rounded-lg">
+          <div className="text-3xl font-bold md:text-5xl lg:text-6xl">
             📝 <br /> &nbsp; toTooooDoooos
           </div>
 
           <form onSubmit={handleAddTodo}>
             <input
               type="text"
-              className="w-full my-8 px-6 py-4 text-xl rounded-lg border-0 focus:ring-2 focus:ring-gray-800 transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-110 hover:shadow-xl shadow-md"
+              className="w-full px-6 py-4 my-8 text-xl transition duration-200 ease-in-out transform border-0 rounded-lg shadow-md focus:ring-2 focus:ring-gray-800 hover:-translate-y-1 hover:scale-110 hover:shadow-xl"
               placeholder="🤔   What to do today?"
               value={currentTodo}
               onChange={(e) => setCurrentTodo(e.target.value)}
@@ -70,10 +69,10 @@ const Todo = ({ user, dispatch }) => {
         </div>
       </section>
 
-      <section className="absolute bottom-0 right-0 py-3 px-6 mr-8 mb-8">
+      <section className="absolute bottom-0 right-0 px-6 py-3 mb-8 mr-8">
         <button
           onClick={handleLogout}
-          className="mx-auto mt-4 py-3 px-12 font-semibold text-md rounded-lg shadow-md bg-white text-gray-900 border border-gray-900 hover:border-transparent hover:text-white hover:bg-gray-900 focus:outline-none"
+          className="px-12 py-3 mx-auto mt-4 font-semibold text-gray-900 bg-white border border-gray-900 rounded-lg shadow-md text-md hover:border-transparent hover:text-white hover:bg-gray-900 focus:outline-none"
         >
           Logout 👋
         </button>

src/pages/Todo/TodoItem.js

@@ -11,10 +11,9 @@ const TodoItem = ({ item, setStale }) => {
     try {
       // console.log(item);
       await api.updateDocument(
-        Server.databaseID,
-        Server.collectionID,
-        item['$id'],
-        data
+        item["$id"],
+        data,
+        item["$permissions"]
       );
       setStale({ stale: true });
     } catch (e) {
@@ -26,8 +25,6 @@ const TodoItem = ({ item, setStale }) => {
     // console.log('Deleting Todo');
     try {
       await api.deleteDocument(
-        Server.databaseID,
-        Server.collectionID,
         item['$id']
       );
       setStale({ stale: true });
@@ -37,11 +34,11 @@ const TodoItem = ({ item, setStale }) => {
   };
 
   return (
-    <li className="flex justify-between items-center mt-4 px-4">
+    <li className="flex items-center justify-between px-4 mt-4">
       <div className="flex">
         <input
           type="checkbox"
-          className="h-6 w-6 text-green-500 rounded-md border-4 border-green-200 focus:ring-0 transition duration-75 ease-in-out transform hover:scale-125"
+          className="w-6 h-6 text-green-500 transition duration-75 ease-in-out transform border-4 border-green-200 rounded-md focus:ring-0 hover:scale-125"
           checked={item['isComplete']}
           onChange={(e) => handleComplete(e, item)}
         />
@@ -55,7 +52,7 @@ const TodoItem = ({ item, setStale }) => {
       </div>
       <button
         onClick={(e) => handleDelete(e, item)}
-        className="focus:outline-none transition duration-75 ease-in-out transform hover:scale-125"
+        className="transition duration-75 ease-in-out transform focus:outline-none hover:scale-125"
       >
         {deleteButton}
       </button>