feat: use postgres transport

Author: C5H8NNaO4

README.md

@@ -1,13 +1,111 @@
+# Lists App Backend 📡
+
+Welcome to the backend repository of the Lists app, powered by [React Server](https://state-less.cloud)!
+
+![Lists App Frontend](https://github.com/C5H8NNaO4/lists-app-frontend/raw/master/public/screenshot.png)
+
+## Overview
+
+The Lists app backend provides the robust server-side functionality needed to support the [Lists app](https://lists.state-less.cloud)'s seamless user experience. Built on the React Server framework, this backend code enables real-time synchronization, data storage, and interaction with the frontend.
+
+## Key Features
+
+- **Real-Time Sync**: Achieve real-time updates and synchronization across clients.
+- **Data Storage**: Efficiently store task lists, reminders, and user data.
+- **Server-Rendered**: Utilize server-rendering capabilities for enhanced performance.
+- **Scalable Architecture**: Build a scalable backend for handling multiple users.
+- **Clean Codebase**: Based on the clean-starter repo for a structured foundation.
+
+## Getting Started
+### Installation
+#### Install the backend
+```
+git clone https://github.com/C5H8NNaO4/lists-app-backend.git
+cd lists-app-backend
+yarn install
+yarn start
+```
+#### Install the frontend
+```
+git clone https://github.com/C5H8NNaO4/lists-app-frontend.git
+cd lists-app-frontend
+yarn install
+yarn dev
+```
+
+## Contribute
+* Fork the repository
+* Create a branch
+* Commit your changes
+* Push to the branch
+* Open a pull request
+
+We welcome contributions from the community! Feel free to submit bug reports, feature requests, or pull requests to help make Lists even better.
+## Learn More About React Server
+
+Explore the power of [React Server](https://state-less.cloud), the framework used to develop this backend. With React Server, you can build reactive, server-rendered applications with ease.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+
+Empower Your Lists App with a Robust Backend 🚀
+
 # React Server
 
 ![npm (scoped)](https://img.shields.io/npm/v/@state-less/react-server)
 
 The @state-less/clean-starter repository is designed to provide a starting point for developers exploring React Server. It includes essential backend components, utilities, and examples that illustrate the fundamental concepts and capabilities of React Server.
 
+# React Server
 React Server allows the creation of server-side React components using TSX, promoting a component-driven architecture for building robust and maintainable backend solutions. By using @state-less/clean-starter, developers can quickly get started with this innovative approach to full-stack development.
 
+```tsx
+import { Scopes, useState, clientKey } from '@state-less/react-server';
+import { ServerSideProps } from './ServerSideProps';
+
+export const HelloWorldExample2 = (props, { key, context })  => {
+  // The useState hook looks familiar?
+  const [count, setState] = useState(0, {
+    key: "count",
+    scope: Scopes.Global,
+  });
+
+  // A simple function that can be executed from the client side.
+  const increase = () => {
+    setState(count + 1);
+  };
+
+  return (
+    // Simply pass down props to the client side.
+    <ServerSideProps
+      key={clientKey(`${key}-props`, context)}
+      count={count}
+      increase={increase}
+    />
+  );
+};
+```
+
+Use the familiar approach of React to build serverside applications in a declarative way. React has proven to be a successful framework for building large scale applications while keeping a clean state-management solution to provide reactive realtime enabled modern UIs. React favors a clean codebase due to its inherently modular structure and component driven approach. React allows you to cleanly abstract the complexity of modern applications using *states*, *hooks* and *components*. 
+
+React Server brings the same flexibility to the server side by giving you a Framework that handles TSX compilation, a small React engine that powers *hooks*, *states* and the lifecycle of *components*. It also abstracts data storage and data transportation into a common concept of *states*. Data is stored in *Stores* which can be accessed by components using *hooks* (`useState`). The `useState` hook provides reactivity and automatically re-renders the component when its value is updated using the setter. Data is transported by consuming server-side states / components on the clientside using the `useComponent` hook. We are using *GraphQL* as transportation layer to provide a robust foundation. 
+
+Developers familiar with **React** and JSX components `<Component hello="world" />` are able to jump right into developing full-stack applications. It really works well and provides a seamless reactive experience on both the backend and the frontend. States are synchronized to all connected clients using PUB / SUB. 
+
 For detailed documentation and in-depth guides, please visit the official website at [state-less.cloud](https://state-less.cloud).
 
+## Explore Examples
+Dive into real-world examples, like the [Lists App](https://lists.state-less.cloud), showcasing the potential of React Server.
+
+## Key Features
+
+- **Server-Side React**: Create server-side React components using TSX for efficient, component-driven backend development.
+- **@state-less/clean-starter**: Jumpstart your project with essential backend components, utilities, and examples.
+- **Explore the Future**: Harness the power of server-side real-time TSX components.
+
+For comprehensive documentation and detailed guides, visit the official [state-less.cloud](https://state-less.cloud) website.
+
 ## Getting Started
 
 ### Backend
@@ -122,4 +220,6 @@ _Note: You can still override the provided client if you pass one in the options
 
 That's it, your App is now powered by the same backend as the documentation under [state-less.cloud](https://state-less.cloud).
 
-Happy Hacking!
+---------
+
+**License**: This project is under the **MIT License** - see the [LICENSE.md](/LICENSE.txt) file for details.

dist/components/Lists.js

@@ -81,6 +81,7 @@ var Todo = function Todo(_ref3, _ref4) {
     dueDate = _ref3$dueDate === void 0 ? null : _ref3$dueDate,
     _ref3$dueTime = _ref3.dueTime,
     dueTime = _ref3$dueTime === void 0 ? null : _ref3$dueTime,
+    note = _ref3.note,
     _changeType = _ref3.changeType,
     createdAt = _ref3.createdAt,
     color = _ref3.color;
@@ -108,6 +109,7 @@ var Todo = function Todo(_ref3, _ref4) {
       valuePoints: valuePoints,
       creditedValuePoints: creditedValuePoints,
       negativePoints: negativePoints,
+      note: note,
       dueDate: dueDate,
       dueTime: dueTime,
       type: 'Todo',
@@ -180,6 +182,14 @@ var Todo = function Todo(_ref3, _ref4) {
       reset: 1000 * 60 * 60 * reset
     }));
   };
+  var setNote = function setNote(note) {
+    if (typeof note !== 'string' || note.length > 32000) {
+      throw new Error('Invalid note');
+    }
+    setTodo(_objectSpread(_objectSpread({}, todo), {}, {
+      note: note
+    }));
+  };
   var setValuePoints = function setValuePoints(valuePoints) {
     if (typeof valuePoints !== 'number' && valuePoints < 0 || valuePoints > 100) {
       throw new Error('Invalid value points');
@@ -226,6 +236,7 @@ var Todo = function Todo(_ref3, _ref4) {
     setTitle: setTitle,
     setDueDate: setDueDate,
     setDueTime: setDueTime,
+    setNote: setNote,
     type: "Todo",
     createdAt: createdAt,
     lastModified: todo.lastModified,
@@ -332,10 +343,20 @@ var Counter = function Counter(_ref5, _ref6) {
       archived: Date.now()
     }));
   };
+  var setTitle = function setTitle(title) {
+    if (typeof title !== 'string') {
+      throw new Error('Invalid title');
+    }
+    setCounter(_objectSpread(_objectSpread({}, counter), {}, {
+      title: title,
+      lastModified: Date.now()
+    }));
+  };
   return (0, _jsxRuntime.jsx)(_ServerSideProps.ServerSideProps, _objectSpread(_objectSpread({}, counter), {}, {
     archive: archive,
     increase: increase,
     decrease: decrease,
+    setTitle: setTitle,
     changeType: function changeType(type) {
       return _changeType2(id, type);
     },
@@ -401,12 +422,22 @@ var Expense = function Expense(_ref7, _ref8) {
       lastModified: Date.now()
     }));
   };
+  var setTitle = function setTitle(title) {
+    if (typeof title !== 'string') {
+      throw new Error('Invalid title');
+    }
+    setExpense(_objectSpread(_objectSpread({}, expense), {}, {
+      title: title,
+      lastModified: Date.now()
+    }));
+  };
   return (0, _jsxRuntime.jsx)(_ServerSideProps.ServerSideProps, _objectSpread(_objectSpread({}, expense), {}, {
     archive: archive,
     changeType: function changeType(type) {
       return _changeType3(id, type);
     },
     setValue: setValue,
+    setTitle: setTitle,
     type: "Expense"
   }), (0, _reactServer.clientKey)("".concat(id, "-expense"), context));
 };
@@ -521,15 +552,20 @@ var List = function List(_ref9, _ref10) {
       throw new Error('Invalid item');
     }
     setTodos([].concat((0, _toConsumableArray2["default"])(todos), [newItem]));
+<<<<<<< HEAD
     setOrder([todoId].concat((0, _toConsumableArray2["default"])(order)));
     points.setValue(points.value + 1);
+=======
+    setOrder([].concat((0, _toConsumableArray2["default"])(order), [todoId]));
+    points.value += 1;
+>>>>>>> 03c407037195270bc170ca100fdfb6f491246104
     return newItem;
   };
   var removeEntry = function removeEntry(todoId) {
     var _user16, _todo$value, _todo$value2;
     var store = _reactServer.Dispatcher.getCurrent().getStore();
     var todo = store.getState(null, {
-      key: "todo-".concat(todoId),
+      key: "todo",
       scope: "".concat(todoId, ".").concat(((_user16 = user) === null || _user16 === void 0 ? void 0 : _user16.id) || _reactServer.Scopes.Client)
     });
     setOrder(order.filter(function (id) {
@@ -538,7 +574,12 @@ var List = function List(_ref9, _ref10) {
     setTodos(todos.filter(function (todo) {
       return todo.id !== todoId;
     }));
+<<<<<<< HEAD
     points.setValue(points.value - 1 - (todo !== null && todo !== void 0 && (_todo$value = todo.value) !== null && _todo$value !== void 0 && _todo$value.archived ? 1 : 0) - ((todo === null || todo === void 0 ? void 0 : (_todo$value2 = todo.value) === null || _todo$value2 === void 0 ? void 0 : _todo$value2.valuePoints) || 0));
+=======
+    points.value = points.value - 1 - (todo !== null && todo !== void 0 && (_todo$value = todo.value) !== null && _todo$value !== void 0 && _todo$value.archived ? 1 : 0) - ((todo === null || todo === void 0 ? void 0 : (_todo$value2 = todo.value) === null || _todo$value2 === void 0 ? void 0 : _todo$value2.valuePoints) || 0);
+    return todo.value;
+>>>>>>> 03c407037195270bc170ca100fdfb6f491246104
   };
   var addLabel = function addLabel(label) {
     var labelId = (0, _uuid.v4)();
@@ -705,6 +746,10 @@ var exportData = function exportData(_ref11) {
       key: 'color',
       scope: "".concat("list-".concat(list.id), ".", (user === null || user === void 0 ? void 0 : user.id) || clientId)
     });
+    var title = store.getState(null, {
+      key: 'title',
+      scope: "".concat("list-".concat(list.id), ".", (user === null || user === void 0 ? void 0 : user.id) || clientId)
+    });
     var settings = store.getState(null, {
       key: 'settings',
       scope: "".concat("list-".concat(list.id), ".", (user === null || user === void 0 ? void 0 : user.id) || clientId)
@@ -717,6 +762,7 @@ var exportData = function exportData(_ref11) {
       Object.assign(todo, stored.value);
     });
     data[list.id] = _objectSpread(_objectSpread({}, list), {}, {
+      title: title.value,
       color: color.value,
       order: order.value,
       todos: todos.value,
@@ -766,9 +812,10 @@ var MyLists = function MyLists(_, _ref12) {
     order = state.order;
   var addEntry = function addEntry(list) {
     var id = (0, _uuid.v4)();
-    var newList = _objectSpread(_objectSpread({}, list), {}, {
+    var newList = _objectSpread(_objectSpread({
+      id: id
+    }, list), {}, {
       order: [],
-      id: id,
       settings: {
         defaultValuePoints: DEFAULT_VALUE_POINTS,
         defaultType: 'Todo',
@@ -778,11 +825,14 @@ var MyLists = function MyLists(_, _ref12) {
     });
     var newLists = [newList].concat((0, _toConsumableArray2["default"])(state.lists));
     setState({
-      order: [id].concat((0, _toConsumableArray2["default"])(state.order)),
+      order: [newList.id].concat((0, _toConsumableArray2["default"])(state.order)),
       lists: newLists
     });
   };
   var removeEntry = function removeEntry(id) {
+    var removed = state.lists.find(function (list) {
+      return list.id === id;
+    });
     setState({
       lists: state.lists.filter(function (list) {
         return list.id !== id;
@@ -791,6 +841,7 @@ var MyLists = function MyLists(_, _ref12) {
         return listId !== id;
       })
     });
+    return removed;
   };
   var exportUserData = function exportUserData() {
     return exportData({
@@ -861,7 +912,7 @@ var MyLists = function MyLists(_, _ref12) {
 };
 exports.MyLists = MyLists;
 var isValidTodo = function isValidTodo(todo) {
-  return todo.id && todo.title && 'completed' in todo;
+  return todo.id && 'completed' in todo;
 };
 var isValidCounter = function isValidCounter(counter) {
   return counter.id && 'count' in counter && counter.type === 'Counter';
@@ -873,7 +924,7 @@ var isValidLabel = function isValidLabel(label) {
   return label.id && label.title && Object.keys(label).length === 2;
 };
 var isValidList = function isValidList(list) {
-  return list.id && list.title && list.todos && list.order && list.order.every(function (id) {
+  return list.id && list.todos && list.order && list.order.every(function (id) {
     return typeof id === 'string';
   }) && list.todos.every(function (todo) {
     return isValidItem(todo);

dist/components/examples.js

@@ -29,9 +29,15 @@ var HelloWorldExample1 = function HelloWorldExample1(props, _ref) {
   }, (0, _reactServer.clientKey)('hello-world-1-props', context));
 };
 exports.HelloWorldExample1 = HelloWorldExample1;
+<<<<<<< HEAD
 var HelloWorldExample2 = function HelloWorldExample2(_props, _ref2) {
   var key = _ref2.key,
     context = _ref2.context;
+=======
+var HelloWorldExample2 = function HelloWorldExample2(props, _ref) {
+  var key = _ref.key,
+    context = _ref.context;
+>>>>>>> 03c407037195270bc170ca100fdfb6f491246104
   var _useState3 = (0, _reactServer.useState)(0, {
       key: 'count',
       scope: _reactServer.Scopes.Global
@@ -45,6 +51,10 @@ var HelloWorldExample2 = function HelloWorldExample2(_props, _ref2) {
   return (0, _jsxRuntime.jsx)(_ServerSideProps.ServerSideProps, {
     count: count,
     increase: increase
+<<<<<<< HEAD
   }, (0, _reactServer.clientKey)('hello-world-2-props', context));
+=======
+  }, (0, _reactServer.clientKey)("".concat(key, "-props"), context));
+>>>>>>> 03c407037195270bc170ca100fdfb6f491246104
 };
 exports.HelloWorldExample2 = HelloWorldExample2;

dist/index.js

@@ -119,10 +119,21 @@ var landingList2 = {
   }],
   order: ['counter-0']
 };
+var demoList1 = {
+  id: 'demo-list-1',
+  title: 'Todos',
+  order: ['todo-0'],
+  todos: [{
+    id: 'todo-0',
+    title: 'Todo',
+    type: 'Todo',
+    completed: false
+  }]
+};
 var reactServer = (0, _jsxRuntime.jsxs)(_reactServer.Server, {
   children: [(0, _jsxRuntime.jsx)(_ChatRoom.ChatApp, {}, "chat"), (0, _jsxRuntime.jsx)(_ViewCounter.ViewCounter, {}, "view-counter"), (0, _jsxRuntime.jsx)(_Features.Features, {}, "features"), (0, _jsxRuntime.jsx)(_reactServer.TestComponent, {}, "test"), (0, _jsxRuntime.jsx)(_Navigation.Navigation, {}, "navigation"), (0, _jsxRuntime.jsx)(_examples.HelloWorldExample1, {}, "hello-world-1"), (0, _jsxRuntime.jsx)(_examples.HelloWorldExample2, {}, "hello-world-2"), (0, _jsxRuntime.jsx)(_Pages.Pages, {}, "pages"), (0, _jsxRuntime.jsx)(_Pages.DynamicPage, {}, "page"), (0, _jsxRuntime.jsx)(_Lists.MyLists, {}, "my-lists"), (0, _jsxRuntime.jsx)(_Lists.MyListsMeta, {}, "my-lists-points"), (0, _jsxRuntime.jsx)(_Votings.Votings, {
     policies: [_Votings.VotingPolicies.SingleVote]
-  }, "votings"), (0, _jsxRuntime.jsx)(_Lists.List, _objectSpread({}, landingList1), "landing-list-1"), (0, _jsxRuntime.jsx)(_Lists.List, _objectSpread({}, landingList2), "landing-list-2"), (0, _jsxRuntime.jsx)(_Votings.Votings, {
+  }, "votings"), (0, _jsxRuntime.jsx)(_Lists.List, _objectSpread({}, landingList1), "landing-list-1"), (0, _jsxRuntime.jsx)(_Lists.List, _objectSpread({}, landingList2), "landing-list-2"), (0, _jsxRuntime.jsx)(_Lists.List, _objectSpread({}, demoList1), "todos"), (0, _jsxRuntime.jsx)(_Votings.Votings, {
     policies: []
   }, "votings-multiple"), (0, _jsxRuntime.jsx)(_Session.Session, {}, "session"), (0, _jsxRuntime.jsx)(_Poll.Poll, {
     values: ['Where can I get this?', 'Meh...', 'Shut up and take my money.'],