v3.1.2 (#872)

* fix(types): add types for `onAttemptCollectionDelete` to fix `implicit any` error (#870) - @macinjoke
* fix(populate): handle firestore list type in populate (#871) - @illuminist
* fix(types): add missing `onAuthStateChanged` for config object - @illuminist
* fix(types): relax typing for `UserProfile` to be generic object - @illuminist
* fix(types): make Schema the second generic parameter (#826)
* chore(docs): add a typescript page to the recipes section of the docs (explains passing schema to reducer)

Co-authored-by: illuminist <[email protected]>
Co-authored-by: macinjoke <[email protected]>
Co-authored-by: Marko Elez <[email protected]>
Co-authored-by: Chris Dzoba <[email protected]>

Author: 5 people

docs/recipes/typescript.md

@@ -0,0 +1,83 @@
+# Typescript
+
+## Passing Schema To Reducer
+
+**reducer.ts**
+
+```ts
+import { combineReducers } from 'redux'
+import { firebaseReducer, FirebaseReducer } from 'react-redux-firebase'
+
+interface UserProfile {
+  email: string
+}
+
+export interface TodoValue {
+  text: string
+  done: boolean
+}
+
+// create schema for the DB
+interface DBSchema {
+  todos: TodoValue
+  [name: string]: any
+}
+
+interface RootState {
+  firebase: FirebaseReducer.Reducer<UserProfile, DBSchema>
+  // firestore: FirestoreReducer.Reducer;
+}
+
+const rootReducer = combineReducers<RootState>({
+  firebase: firebaseReducer
+})
+
+export type AppState = ReturnType<typeof rootReducer>
+
+export default rootReducer
+```
+
+Then in components, `AppState` can be used within selectors:
+
+**Todo.tsx**
+
+```tsx
+import React from "react";
+import { isLoaded, isEmpty, useFirebaseConnect } from "react-redux-firebase";
+import { AppState } from './reducer'
+import Todo from './Todo'
+import { useSelector } from "react-redux";
+
+export default function Todos() {
+  useFirebaseConnect([{ path: 'todos', queryParams: ['limitToLast=10'] }])
+  const todos = useSelector((state: AppState) => {
+    return state.firebase.ordered.todos
+  })
+
+  if (!isLoaded(todos)) {
+    return (
+      <div >
+        Loading...
+      </div>
+    );
+  }
+
+  if (isEmpty(todos)) {
+    return (
+      <div >
+        No Todos Found
+      </div>
+    );
+  }
+  
+  return (
+    <div className="Todos">
+      {
+        todos && todos.map((todoItem) => {
+          return <Todo key={todoItem.key} todoId={todoItem.key} />
+        })
+      }
+    </div>
+  );
+}
+```

examples/complete/material/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  'extends': ['react-app', 'prettier', 'prettier/react'],
+  'extends': ['airbnb', 'airbnb/hooks', 'prettier', 'prettier/react'],
   root: true,
   parser: 'babel-eslint',
   plugins: ['import', 'babel', 'react', 'react-hooks', 'prettier'],

examples/complete/typescript/.eslintrc.js

@@ -0,0 +1,54 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  'extends': [
+    'airbnb-base',
+    'prettier',
+    'plugin:@typescript-eslint/recommended',
+    'prettier/@typescript-eslint',
+    'react-app',
+    'prettier',
+    'prettier/react'
+  ],
+  root: true,
+  plugins: ['@typescript-eslint', 'import', 'babel', 'react', 'react-hooks', 'prettier' ],
+  settings: {
+    'import/resolver': {
+      node: {
+        moduleDirectory: ['node_modules', '/'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx']
+      }
+    },
+    react: {
+      version: '16.0'
+    }
+  },
+  env: {
+    browser: true,
+    node: true
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': 0,
+    'import/prefer-default-export': 0,
+    'no-shadow': 0,
+    'consistent-return': 0,
+    'no-new': 0,
+    'new-cap': 0,
+    'no-return-await': 2,
+    'import/extensions': 0,
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'none',
+        semi: false,
+        bracketSpacing: true,
+        jsxBracketSameLine: true,
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false
+      }
+    ]
+  }
+}

examples/complete/typescript/package.json

@@ -7,7 +7,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "tslint 'src/**/*.ts'",
+    "lint": "eslint 'src/**/*.ts'",
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
@@ -18,14 +18,25 @@
     "redux": "^4.0.4"
   },
   "devDependencies": {
-    "@types/jest": "24.0.11",
-    "@types/node": "11.13.0",
-    "@types/react": "16.8.12",
-    "@types/react-dom": "16.8.3",
-    "@types/react-redux": "^7.1.1",
-    "react-scripts": "3.1.0",
-    "tslint": "^5.18.0",
-    "typescript": "3.4.1"
+    "@types/jest": "25.1.2",
+    "@types/node": "13.7.0",
+    "@types/react": "16.9.19",
+    "@types/react-dom": "16.9.5",
+    "@types/react-redux": "^7.1.7",
+    "@typescript-eslint/eslint-plugin": "^2.19.0",
+    "@typescript-eslint/parser": "^2.19.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "prettier": "^1.19.1",
+    "react-scripts": "3.3.1",
+    "typescript": "3.7.5"
   },
   "eslintConfig": {
     "extends": "react-app"

examples/complete/typescript/src/AddTodo.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { ExtendedFirebaseInstance, useFirebase} from "react-redux-firebase";
+import { ExtendedFirebaseInstance, useFirebase } from "react-redux-firebase";
 
 function AddTodo() {
   const firebase: ExtendedFirebaseInstance = useFirebase();
+
   function handleAddClick() {
     firebase.push("todos", { done: false, text: "Example todo" });
   }

examples/complete/typescript/src/Home.tsx

@@ -1,4 +1,5 @@
-import React, { FunctionComponent } from "react";
+import React from "react";
+import Todos from "./Todos";
 import AddTodo from "./AddTodo";
 import "./App.css";
 import logo from "./logo.svg";
@@ -7,19 +8,13 @@ function Home() {
   return (
     <div className="Home">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
           </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-          </a>
+        <div>
+          <Todos />
           <AddTodo />
+        </div>
       </header>
     </div>
   );

examples/complete/typescript/src/List.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { AppState, TodoValue } from './reducer'
+import { useSelector } from "react-redux";
+import { useFirebase } from 'react-redux-firebase'
+
+interface TodoProps {
+  todoId: string
+}
+
+function Todo({ todoId }: TodoProps) {
+  const todo: TodoValue = useSelector((state: AppState) => {
+    return state.firebase.data.todos && state.firebase.data.todos[todoId]
+  })
+  const firebase = useFirebase()
+  function toggleDoneState() {
+    firebase.update(`todos/${todoId}`, { done: !todo.done })
+  }
+  
+  return (
+    <div className="Todo">
+      <input type="checkbox" onClick={toggleDoneState} /> 
+      {todo.text}
+    </div>
+  );
+}
+
+export default Todo;

examples/complete/typescript/src/Todo.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { isLoaded, isEmpty, useFirebaseConnect } from "react-redux-firebase";
+import { AppState } from './reducer'
+import Todo from './Todo'
+import { useSelector } from "react-redux";
+
+function Todos() {
+  useFirebaseConnect([{ path: 'todos', queryParams: ['limitToLast=10'] }])
+  const todos = useSelector((state: AppState) => {
+    return state.firebase.ordered.todos
+  })
+
+  if (!isLoaded(todos)) {
+    return (
+      <div >
+        Loading...
+      </div>
+    );
+  }
+
+  if (isEmpty(todos)) {
+    return (
+      <div >
+        No Todos Found
+      </div>
+    );
+  }
+  
+  return (
+    <div className="Todos">
+      {
+        todos && todos.map((todoItem) => {
+          return <Todo key={todoItem.key} todoId={todoItem.key} />
+        })
+      }    
+    </div>
+  );
+}
+
+export default Todos;