Update with @stacks.js/* and various minor improvements

README.md

@@ -1,20 +1,17 @@
-# Stacks Todo App
+# Todos App with Stacks
 
-A simple React Todo app built for the decentralized web.
+A simple todos app that demonstrates how JavaScript apps can integrate functionality provided by [the Stacks network](https://stacks.co/) with [the Stacks.js library](https://github.com/blockstack/stacks.js).
 
-This app was built for learning purposes. Try it out at [todos.blockstack.org](https://todos.blockstack.org), and check out our [guide](https://docs.blockstack.org/browser/todo-list.html) that walks you through how it all works.
+[Try out the app as a user](https://todos.blockstack.org) or [learn how it works as a developer](https://docs.blockstack.org/authentication/building-todo-app).
 
 ![demo](./public/demo.png)
 
-## Usage
+Want to run the app locally and make changes?
+
+Follow these instructions:
 
 ``` bash
-# install dependencies
+git clone https://github.com/blockstack/todos && cd todos
 npm install
-
-# Compiles and hot-reloads for development
 npm run start
-
-# Compiles and minifies for production
-npm run build
 ```

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "stacks-todo",
-  "description": "A decentralized Todo app built using Stacks.js",
+  "name": "todos",
+  "description": "A simple todos app powered by Stacks.js",
   "author": "Michael Stivala <[email protected]> (https://michaelstivala.com/)",
   "contributors": [
     "Aaron Blankstein <[email protected]> (https://github.com/kantai)",
@@ -10,27 +10,32 @@
     "Guy Lepage <[email protected]> (https://lepage.cc/)",
     "Jack Zampolin (https://github.com/jackzampolin)",
     "Moxiegirl (https://github.com/moxiegirl)",
-    "Sahana Srinivasan (https://github.com/Sahana-Srinivasan"
+    "Sahana Srinivasan (https://github.com/Sahana-Srinivasan)",
+    "Mark Hendrickson (https://github.com/markmhx)"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/blockstack/stacks-todos"
+    "url": "https://github.com/blockstack/todos"
   },
   "version": "0.2.0",
   "private": true,
   "dependencies": {
-    "@blockstack/connect": "^2.12.7",
-    "@blockstack/stacks-transactions": "0.7.0",
-    "@blockstack/ui": "^2.7.0",
-    "@stacks/auth": "^1.0.0-beta.7",
-    "@stacks/profile": "^1.0.0-beta.7",
-    "@stacks/storage": "^1.0.0-beta.7",
-    "blockstack": "git://github.com/blockstack/blockstack.js.git#3124e05",
+    "@blockstack/ui": "^2.12.14",
+    "@emotion/core": "^11.0.0",
+    "@emotion/css": "^11.0.0",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.0.0",
+    "@stacks/auth": "^1.0.0-beta.13",
+    "@stacks/connect-react": "^2.17.0",
+    "@stacks/profile": "^1.0.0-beta.13",
+    "@stacks/storage": "^1.0.0-beta.13",
+    "blockstack": "^21.1.1",
     "export-from-json": "^1.3.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",
+    "styled-components": "^5.2.1",
     "uuid": "^8.1.0"
   },
   "prettier": "@blockstack/prettier-config",

src/components/App.jsx

@@ -2,12 +2,9 @@ import React, { Component } from 'react';
 import { Signin } from './Signin';
 import { Header } from './Header';
 import { ThemeProvider, theme, CSSReset, ToastProvider } from '@blockstack/ui';
-import { appConfig } from '../assets/constants';
-import { Connect } from '@blockstack/connect';
+import { Connect } from '@stacks/connect-react';
 import { TodoList } from './TodoList';
-import { UserSession } from '@stacks/auth';
-
-const userSession = new UserSession({ appConfig });
+import { userSession } from '../stacks';
 
 export default class App extends Component {
   state = {
@@ -24,7 +21,7 @@ export default class App extends Component {
     const { userData } = this.state;
     const authOptions = {
       appDetails: {
-        name: "To-do's",
+        name: 'Todos',
         icon: window.location.origin + '/logo.svg',
       },
       userSession,

src/components/Header.jsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import { Flex, Box, Text } from '@blockstack/ui';
-import { useConnect } from '@blockstack/connect';
+import { userSession } from '../stacks';
 import { Logo } from './icons/logo';
 import { Person } from '@stacks/profile';
 
 const Auth = () => {
-  const { authOptions } = useConnect();
-  const { userSession } = authOptions;
-
   if (!userSession.isUserSignedIn()) {
     return null;
   }
@@ -61,7 +58,7 @@ export const Header = () => {
       <Box alignItems onClick={() => (document.location = '/')} cursor="pointer">
         <Logo style={{ position: 'relative', top: '-1px' }} />
         <Text ml={2} display="inline-block" fontWeight="600">
-          To-do
+          Todos
         </Text>
       </Box>
       <Auth />

src/components/Sharer.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Flex, Box, Text, Input, useClipboard } from '@blockstack/ui';
 import { ChainIcon } from './icons/chain';
-import { useConnect } from '@blockstack/connect';
+import { userSession } from '../stacks';
 
 export const Sharer = ({ togglePublic, isPublic }) => {
-  const { authOptions } = useConnect();
-  const { userSession } = authOptions;
   const { username } = userSession.loadUserData();
   const url = `${document.location.origin}/todos/${username}`;
   const { onCopy } = useClipboard(url);
@@ -26,9 +24,9 @@ export const Sharer = ({ togglePublic, isPublic }) => {
               <Flex>
                 <Box flexGrow={1}>
                   <Text fontWeight="500" display="block" fontSize={1} mb={1}>
-                    Share your to-do's
+                    Share your todos
                   </Text>
-                  <Input value={url} isDisabled backgroundColor="#F0F0F5" />
+                  <Input defaultValue={url} isDisabled backgroundColor="#F0F0F5" />
                 </Box>
                 <Box pl={4}>
                   <Text
@@ -79,7 +77,7 @@ export const Sharer = ({ togglePublic, isPublic }) => {
             </Box>
             <Box flexGrow={1} px={3}>
               <Text fontWeight="500" display="block" mb={0} fontSize={1}>
-                Share your to-do's
+                Share your todos
               </Text>
               <Text fontSize={1}>Make your list public to share it with others</Text>
             </Box>

src/components/Signin.jsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { Box, Text, Button } from '@blockstack/ui';
-import { useConnect } from '@blockstack/connect';
+import { authenticate } from '../stacks';
 
 export const Signin = () => {
-  const { doOpenAuth } = useConnect();
-
   return (
     <Box width="100%" textAlign="center">
       <Box maxWidth="800px" mx="auto" mt={[6, '100px']}>
         <Text fontWeight="700" fontSize={['36px', '60px']} lineHeight={1} display="block">
-          A to-do list that's guaranteed to stay private.
+          Todos secured by Stacks
         </Text>
         <Box mt={[5, '60px']}>
-          <Button onClick={() => doOpenAuth()}>Get Started</Button>
+          <Button onClick={() => authenticate()}>Get Started</Button>
         </Box>
         <Box mt={[3, '30px']}>
           <Text fontSize={1}>
@@ -23,10 +21,10 @@ export const Signin = () => {
               fontSize={1}
               fontWeight="500"
               onClick={() => {
-                doOpenAuth(true);
+                authenticate(true);
               }}
             >
-              sign in
+              Sign In
             </Text>
           </Text>
         </Box>

src/components/TodoList.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Flex, Box, Text } from '@blockstack/ui';
-import { useConnect } from '@blockstack/connect';
+import { userSession } from '../stacks';
 import { Todo } from './Todo';
 import { v4 as uuid } from 'uuid';
 import { Sharer } from './Sharer';
@@ -13,8 +13,6 @@ export const TodoList = () => {
   const [isPublic, setIsPublic] = useState(false);
   const [username, setUsername] = useState('');
   const [notFound, setNotFound] = useState(false);
-  const { authOptions } = useConnect();
-  const { userSession } = authOptions;
 
   useEffect(() => {
     const username = document.location.pathname.split('/')[2];
@@ -32,7 +30,7 @@ export const TodoList = () => {
       setLoading(false);
     };
     doFetchTasks();
-  }, [userSession]);
+  }, []);
 
   const saveTask = ({ value, complete, index, remove }) => {
     setTasks(currentTasks => {
@@ -74,23 +72,23 @@ export const TodoList = () => {
     if (loading) {
       return '';
     }
-    return 'Export as csv';
+    return 'Export as CSV';
   };
 
   const getHeader = () => {
     if (loading) {
       return 'Loading...';
     }
     if (notFound) {
-      return '404. No to-do list found here.';
+      return '404. No todos found here.';
     }
     if (username) {
       if (isPublic) {
-        return `${username.split('.')[0]}'s to-do list`;
+        return `${username.split('.')[0]}'s todos`;
       }
-      return `${username.split('.')[0]}'s to-do list is private`;
+      return `${username.split('.')[0]}'s todos are private`;
     }
-    return 'My to-do list';
+    return 'My todos';
   };
 
   return (
@@ -102,15 +100,7 @@ export const TodoList = () => {
               {getHeader()}
             </Text>
           </Box>
-          <Text
-            cursor="pointer"
-            fontSize={1}
-            color="blue"
-            fontWeight="500"
-            onClick={
-              exportData
-            }
-          >
+          <Text cursor="pointer" fontSize={1} color="blue" fontWeight="500" onClick={exportData}>
             {getDownload()}
           </Text>
           {!loading && !username && (

src/components/icons/chain.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import { Svg } from '@blockstack/ui';
 import { Svg } from './svg';
 
 export const ChainIcon = props => {

src/components/icons/checkbox-checked.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import { Svg } from '@blockstack/ui';
 import { Svg } from './svg';
 
 export const CheckboxChecked = props => {
@@ -9,9 +8,9 @@ export const CheckboxChecked = props => {
       <path
         d="M5.25 8L7.5 10L11 6"
         stroke="white"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </Svg>
   );

src/components/icons/checkbox-unchecked.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import { Svg } from '@blockstack/ui';
 import { Svg } from './svg';
 
 export const CheckboxUnchecked = props => {

src/components/icons/logo.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import { Svg } from '@blockstack/ui';
 import { Svg } from './svg';
 
 export const Logo = props => {

src/stacks.js

@@ -0,0 +1,21 @@
+import { showBlockstackConnect } from '@stacks/connect';
+import { AppConfig, UserSession } from '@stacks/auth';
+
+const appConfig = new AppConfig();
+const userSession = new UserSession({ appConfig });
+
+function authenticate(sendToSignIn) {
+  showBlockstackConnect({
+    redirectTo: '/',
+    finished: ({ userSession }) => {
+      window.location.reload();
+    },
+    appDetails: {
+      name: 'Todos',
+      icon: window.location.origin + '/logo.svg',
+    },
+    sendToSignIn: sendToSignIn,
+  });
+}
+
+export { authenticate, userSession };