the-collab-lab · vivitt · Apr 16, 2024 · Apr 16, 2024 · Apr 23, 2024
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -2,22 +2,19 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on merge
-'on':
+on:
   push:
     branches:
       - main
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
+      - uses: actions/checkout@v4
       - run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_TCL_71_SMART_SHOPPING_LIST }}'
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_DESPIENSA_94998 }}
           channelId: live
-          projectId: tcl-71-smart-shopping-list
+          projectId: despiensa-94998
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -2,19 +2,20 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on PR
-'on': pull_request
+on: pull_request
+permissions:
+  checks: write
+  contents: read
+  pull-requests: write
 jobs:
   build_and_preview:
-    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
+      - uses: actions/checkout@v4
       - run: npm ci && npm run build
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: '${{ secrets.GITHUB_TOKEN }}'
-          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_TCL_71_SMART_SHOPPING_LIST }}'
-          projectId: tcl-71-smart-shopping-list
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_DESPIENSA_94998 }}
+          projectId: despiensa-94998
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ yarn-error.log*
 
 # firebase config
 .firebaserc
+.firebase
diff --git a/404.html b/404.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Page Not Found</title>
+
+		<style media="screen">
+			body {
+				background: #eceff1;
+				color: rgba(0, 0, 0, 0.87);
+				font-family: Roboto, Helvetica, Arial, sans-serif;
+				margin: 0;
+				padding: 0;
+			}
+			#message {
+				background: white;
+				max-width: 360px;
+				margin: 100px auto 16px;
+				padding: 32px 24px 16px;
+				border-radius: 3px;
+			}
+			#message h3 {
+				color: #888;
+				font-weight: normal;
+				font-size: 16px;
+				margin: 16px 0 12px;
+			}
+			#message h2 {
+				color: #ffa100;
+				font-weight: bold;
+				font-size: 16px;
+				margin: 0 0 8px;
+			}
+			#message h1 {
+				font-size: 22px;
+				font-weight: 300;
+				color: rgba(0, 0, 0, 0.6);
+				margin: 0 0 16px;
+			}
+			#message p {
+				line-height: 140%;
+				margin: 16px 0 24px;
+				font-size: 14px;
+			}
+			#message a {
+				display: block;
+				text-align: center;
+				background: #039be5;
+				text-transform: uppercase;
+				text-decoration: none;
+				color: white;
+				padding: 16px;
+				border-radius: 4px;
+			}
+			#message,
+			#message a {
+				box-shadow:
+					0 1px 3px rgba(0, 0, 0, 0.12),
+					0 1px 2px rgba(0, 0, 0, 0.24);
+			}
+			#load {
+				color: rgba(0, 0, 0, 0.4);
+				text-align: center;
+				font-size: 13px;
+			}
+			@media (max-width: 600px) {
+				body,
+				#message {
+					margin-top: 0;
+					background: white;
+					box-shadow: none;
+				}
+				body {
+					border-top: 16px solid #ffa100;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div id="message">
+			<h2>404</h2>
+			<h1>Page Not Found</h1>
+			<p>
+				The specified file was not found on this website. Please check the URL
+				for mistakes and try again.
+			</p>
+			<h3>Why am I seeing this?</h3>
+			<p>
+				This page was generated by the Firebase Command-Line Interface. To
+				modify it, edit the <code>404.html</code> file in your project's
+				configured <code>public</code> directory.
+			</p>
+		</div>
+	</body>
+</html>
diff --git a/README.md b/README.md
@@ -1,68 +1,102 @@
-## Overview
+# Despiensa
 
-This README file explains The Collab Lab’s smart shopping list project and provides instructions for developing it locally.
+A "smart" shopping list app that learns users' buying habits and helps them remember what they are likely to need to buy on their next trip to the store.
+<br/>
 
-If you’re a Collab Lab developer, WELCOME! We’re so excited to work with you and collaborate on something amazing. Be sure to read [the setup instructions](#set-up-the-project) and then [make your first contribution](#make-your-first-contribution)! For additional details on how your cohort will operate, please check out the [project brief](PROJECT-BRIEF.md).
+<div align='center'>
+<img src='./public/img/despiensa.png' alt='Despiensa’s landing page' width='600'/>
+</div>
 
-## What is this project?
+---
 
-The goal of this project is to collaborate with your Collab Lab team to create a “smart” shopping list app that learns your buying habits and helps you remember what you’re likely to need to buy on your next trip to the store.
+### Contents
 
-### How does it work?
+- [Motivation and project details](#motivation)
+- [Quick start: How to use Despiensa](#quick-start-how-to-use-despiensa)
+- [Usage: Current features](#check-out-an-example)
+- [Contributing to this project](#contributing-to-this-project)
 
-As a user, you will enter items (e.g., “Greek yogurt” or “Paper towels”) into your list. Each time you buy the item, you mark it as purchased in the list. Over time, the app comes to understand the intervals at which you buy different items. If an item is likely to be due to be bought soon, it rises to the top of the shopping list.
+---
 
-### Check out an example
+## Motivation and project details
 
-The app will work in many of the same ways as [iNeedToBuy.xyz](https://app.ineedtobuy.xyz/) (on which our project is based) with the exception that we will not be implementing barcode scanning (that feature would add a lot of scope to the project and wasn’t all that useful).
+[The Collab Lab](https://the-collab-lab.codes/) supports early-career developers by providing an environment to gain practical experience through remote collaboration on real-world projects as part of an agile team.
 
-📺&nbsp; Check out a video demo of the example app here:
-[![](https://cdn.zappy.app/33815167c45d74c3ae5af232de633add.png)](https://www.youtube.com/watch?v=mwj74mE9s64&t)
+This project is the result of the TCL-71 participation and was developed by [Celine](https://github.com/ocsiddisco), [Borja](https://github.com/borjaMarti), [Judith](https://github.com/BikeMouse), and [Viviana](https://github.com/vivitt).
 
-<hr>
+We worked on this application from February to early April 2024, using React, Tailwind, and Firebase, with Figma employed to create our app's views.
 
-## Set up the project
+## Quick start: How to use Despiensa
 
-### Install Node and NPM
+An email account is all that's needed to start using Despiensa. Once registered and signed in via Google, users can begin creating lists, adding items, and sharing their lists with others. Visit the following link to [start using Despiensa](https://tcl-71-smart-shopping-list.web.app/) now.
 
-`npm` is distributed with Node.js, which means that when you download Node.js, you automatically get `npm` installed on your computer. You can install Node by [downloading it from the Node.js website](https://nodejs.org/en/) or using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) on a macOS or Linux device or [nvm-windows](https://github.com/coreybutler/nvm-windows) on a Windows device.
+## Usage: Current features
 
-💡 **Note:** This project requires the latest Long Term Support (LTS) version of Node. If you have an earlier version of Node, now would be a great time to upgrade!
+### Create a list or chose one to use
 
-### Clone the project locally
+When users log into the app, they are prompted to create a list if they are newcomers.
+<br/>
 
-On GitHub, navigate to the repo for your cohort’s project (you’re probably there right now), then:
+<div align='center'>
+<img src='./public/img/all-my-lists.png' alt='Despiensa’s All my lists view, without any list' width='600'/>
+</div>
 
-1. Click on the "Code" tab. It may already be selected.
-2. Click the green "Code" button to reveal a "Clone" popup.
-3. The "HTTPS" tab should be automatically selected. If not, click "HTTPS."
-4. Click the copy button to copy the url of this repository to your clipboard.
-   ![screenshot of "Code" tab on GitHub](_resources/images/00_get_repo_url_from_gui.png)
+<br/>
+Otherwise, they can navigate to the list they want to use.
 
-From your terminal, `cd` into the directory where you want this project to live.
-![screenshot of how to navigate folders in terminal](_resources/images/01_cd_dev_directory.jpg)
+### Mark items as purchased
 
-Once you’re in the directory, type `git clone` followed by the web URL you just copied to your clipboard from GitHub. Then `cd` into the directory that is created.
-![screenshot of how to git clone](_resources/images/02_git_clone_and_cd.jpg)
+Once in the List view, users can interact with the items in the list. Each time a user buy the item, them mark it as purchased in the list. Over time, the app comes to understand the intervals at which users buy different items, and if an item is likely to be due to be bought soon, it rises to the top of the shopping list.
+<br/>
 
-### Install the project’s dependencies
+<div align='center'>
+<img src='./public/img/items.png' alt='List view, filter input is empty and all list items are shown' width='600'/>
+</div>
 
-Once you’ve cloned the project locally and you’re in the project directory, you’ll want to install the project’s dependencies. To do so, type the following into your terminal: `npm ci`
+### Filter items to access them easier
 
-![screenshot of npm ci in the terminal](_resources/images/03_install_dependencies.jpg)
+Users can filter items using the input at the top.
+<br/>
 
-### Access the project in your browser
+<div align='center'>
+<img src='./public/img/items-filter.png' alt='List view, filter input contains the text "ch" and only matching items are shown' width='600'/>
+</div>
 
-After you’ve cloned the project locally and updated the dependencies, run the project by typing the following into your terminal: `npm start`. You should be able to see the project at `localhost:3000`.
-![screenshot of the react project](_resources/images/04_local_dev_landing_page.jpg)
+### Manage List
 
-🎉 You did it! You’re ready to start contributing!
+In this view, users can manage the list they are currently using.
 
-## Make your first contribution
+#### Add items
 
-You’ll want to make your first contribution to this repo before your kick-off call! This will help make sure you’re ready to go on day one.
+By clicking in the "Add item" button in the List view or in the "Manage List" link in the navigation bar, users can access the Manage List view and use the first input to add new items to their list.
 
-1. Get this project set up locally by following [the setup instructions](#set-up-the-project).
-2. Add your name to the [CONTRIBUTORS.md](CONTRIBUTORS.md) file.
-   - Do this from your local environment and not from GitHub in your browser. The purpose (aside from highlighting our amazing team) is to make sure your local environment is set up properly!
-   - Commit to the `main` branch and push it up to the remote repo. (Over the next 8 weeks, we will rely on feature branches as we collaborate on the project, but for this task committing to main will do just fine.)
+#### Share list
+
+By clicking in the "Share list" button in the List view or in the "Manage List" link in the navigation bar, users can access the Manage List view and use the second input to share a list with other registered users. When a list is shared with a user, they will find it in the All My List view.
+<br/>
+
+<div align='center'>
+<img src='./public/img/manage-list.png' alt='Manage List view, displaying a first form to add items and a second one to share the list.' width='600'/>
+</div>
+
+
+## Contributing to this project
+
+Contributions to this project are appreciated. If you find any issues or have suggestions for improvements, please feel free to submit a pull request or open an issue.
+
+### Project set up
+
+- clone this repo
+- `npm install`
+- `npm start`
+- navigate to `localhost:3000` to see the project
+
+Latest Long Term Support (LTS) version of Node is required to run this project locally
+
+---
+
+<div align='center'>
+
+Made with 💜 by [Celine](https://github.com/ocsiddisco), [Borja](https://github.com/borjaMarti), [Judith](https://github.com/BikeMouse), and [Viviana](https://github.com/vivitt).
+
+</div>
diff --git a/firebase.json b/firebase.json
@@ -1,16 +1,12 @@
 {
-  "hosting": {
-    "public": "build",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
-    ]
-  }
+	"hosting": {
+		"public": "build",
+		"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+		"rewrites": [
+			{
+				"source": "**",
+				"destination": "/index.html"
+			}
+		]
+	}
 }
diff --git a/public/img/all-my-lists.png b/public/img/all-my-lists.png
diff --git a/public/img/despiensa.png b/public/img/despiensa.png
diff --git a/public/img/items-filter.png b/public/img/items-filter.png
diff --git a/public/img/items.png b/public/img/items.png
diff --git a/public/img/manage-list.png b/public/img/manage-list.png
diff --git a/src/api/README.md b/src/api/README.md
@@ -50,11 +50,33 @@ This function takes user-provided data and uses it to create a new item in the F
 
 ### `updateItem`
 
-🚧 To be completed! 🚧
+This function takes a listPath and a itemId as parameters to update the item's dateLastPurchased, dateNextPurchased and totalPurchases timestamps.
+
+| Parameter  | Type     | Description                             |
+| ---------- | -------- | --------------------------------------- |
+| `listPath` | `string` | The Firestore path of the current list. |
+| `itemId`   | `string` | The id of the item to update.           |
 
 ### `deleteItem`
 
-🚧 To be completed! 🚧
+This function takes the path of the current list and the ID of an item as parameters to delete the item from the list.
+
+| Parameter  | Type     | Description                             |
+| ---------- | -------- | --------------------------------------- |
+| `listPath` | `string` | The Firestore path of the current list. |
+| `itemId`   | `string` | The id of the item to delete.           |
+
+### `deleteList`
+
+This function takes the Id and the Email from a user and the Path and ID of a list as parameters.
+If the user is the list owner, the list is deleted. Otherwise, the list is removed from the user's sharedList array.
+
+| Parameter   | Type     | Description                               |
+| ----------- | -------- | ----------------------------------------- |
+| `userId`    | `string` | The ID of the current user                |
+| `userEmail` | `string` | The Email of the current user             |
+| `listPath`  | `string` | The Firestore path of the list to delete. |
+| `listId`    | `string` | The id of the list to delete.             |
 
 ## The shape of the the data
 

diff --git a/src/api/config.js b/src/api/config.js
@@ -4,13 +4,12 @@ import { getAuth } from 'firebase/auth';
 
 // Your web app's Firebase configuration
 const firebaseConfig = {
-	apiKey: 'AIzaSyCnrz0zhsT7mih_K6t67dT2K6a5wcNaLzY',
-	authDomain: 'tcl-71-smart-shopping-list.firebaseapp.com',
-	databaseURL: 'FILL_ME_IN',
-	projectId: 'tcl-71-smart-shopping-list',
-	storageBucket: 'tcl-71-smart-shopping-list.appspot.com',
-	messagingSenderId: '200403710630',
-	appId: '1:200403710630:web:1af41c1300a8751bde3a67',
+	apiKey: 'AIzaSyDk7NjVgD07csrGxjM32jiqYM4uDm6i8SM',
+	authDomain: 'despiensa-94998.firebaseapp.com',
+	projectId: 'despiensa-94998',
+	storageBucket: 'despiensa-94998.appspot.com',
+	messagingSenderId: '264773944931',
+	appId: '1:264773944931:web:a9b6343468cf30c491da56',
 };
 
 // Initialize Firebase
Original file line number	Diff line number	Diff line change
Expand Up		@@ -26,3 +26,4 @@ yarn-error.log*

		# firebase config
		.firebaserc
		.firebase