zhixiangteoh / retrospective-tracker Goto Github PK

Features

• Read-only
• Four buttons
  1. Delete / Mark as completed (consider implementing a trash can to retrieve accidental deletes?)
  2. Add to Current's "Green"
  3. Add to Current's "Yellow"
  4. Add to Current's "Red"

Following this React Browser Todo List Extension

User should be able to edit and/or delete list item(s) as required.

Changes required to achieve this:

1. Add time component to list items, in Current (so that the current items can eventually be ordered by date/week in Previous page)
2. React Context(s) for past weeks' lists (most likely will have one context per week, to reuse ListContext)
   • Need to somehow aggregate these lists into a list of lists
   • List context needs to be modified to include an added field
3. Previous page's dropdown lists UI
4. Update Previous page with current week's list on local Monday 0000H and refresh Current

Name

Retrospective-Tracker

Description

Browser extension designed to conveniently create and track weekly retrospectives for the MLH Fellowship.

UI

Main Menu

Current | Previous | Action Items

Current

Green | Yellow | Red

• Type and add items to a list, like a todo list
• Add tags to each item to classify them

Current | Previous | Action Items

Previous

Dropdown list ordered by weeks, ordered latest to earliest

Current | Previous | Action Items

Minimum Viable Product

Core features:

• Full UI
• All text-based features
• Undo feature (or trash bin)

Additional features (in no order):

• Light/Dark mode
• Sharing support (to social media, etc.)
• Image support
• Save to all browsers' storage
• Save to local computer storage

Resources:

• React Browser Extension Boilerplate
• React Browser Todo List Example

• Store currentMonday in browser storage
• Add check in Start New Week handler to only accept max one week into future

Main Menu:

• Current (editable)
  • Green
  • Yellow
  • Red
• Previous (read-only)
  • Previous week
    • Green
    • Yellow
    • Red
  • ...
  • Week 1
    • Green
    • Yellow
    • Red
• Action Items
  • Yellow
  • Red

Refresh Current, update PreviousList accordingly.

Basic idea:
Use React Context and browsers' storage API, with browser polyfilled using webextension-polyfill node module.

Find below code highlighting some key details
(taken from framer demo extension):

// import React, { useReducer, useEffect, useRef } from 'react';
import browser from 'webextension-polyfill'; // browser polyfill to access `browser` generically
// import getStubData from './getStubData';

// ... import actions

const TodoContext = React.createContext([]); // create React Context for app-wide storage

const reducer = (state, { payload, type }) => {
  // ... action-reducer stuff
};

const TodoProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, []);
  const initRef = useRef(false);

  // Sync with storage
  useEffect(() => {
    if (initRef.current) {
      browser.storage.sync.set({ list: state }); // here, list: key, state: value

      // Update badge counter
      browser.runtime.sendMessage({
        greeting: 'updateBadge',
        text: state.filter(({ isDone }) => !isDone).length.toString(),
      });
    }
  }, [state]);

  // Listen to storage change and update the list
  useEffect(() => {
    browser.storage.onChanged.addListener(changes => {
      if (changes.list) {
        dispatch({ type: INIT, payload: changes.list.newValue });
      }
    });
  }, []);

  // Initialize the list with saved items or with initial data
  useEffect(async () => {
    const { list } = await browser.storage.sync.get({ list: getStubData() });
    dispatch({ type: INIT, payload: list });
    initRef.current = true;
  }, []);

  return <TodoContext.Provider value={[state, dispatch]}>{children}</TodoContext.Provider>;
};

export { TodoProvider, TodoContext };

Note:

When using storage.sync, the stored data will automatically be synced to any Chrome browser that the user is logged into, provided the user has sync enabled.

When Chrome is offline, Chrome stores the data locally. The next time the browser is online, Chrome syncs the data. Even if a user disables syncing, storage.sync will still work. In this case, it will behave identically to storage.local.

This is good; for the purposes of this project we can go ahead and use browser storage API.

Schema:

// e.g. actions object in browser storage
actions = {
    greenItems: null,
    yellowItems: [ 
      { id: "1", body: "need to fix" }, 
      { id: "2", body: "could've improved"},
      ...
    ],
    redItems: [ 
      { id: "3", body: "failed to fix" }, 
      { id: "4", body: "failure in life"}, 
      ...
    ]
}

Reducer to support these actions:

• ADD_YELLOW_ITEM (add one to yellowItems)
• ADD_RED_ITEM (add one to redItems)
• REMOVE_YELLOW_ITEM (remove one from yellowItems by id)
• REMOVE_RED_ITEM (remove one from redItems by id)
• SET_YELLOW_ITEMS (replace yellowItems array)
• SET_RED_ITEMS (replace redItems array)
• INIT (set whole actions object)

How it will generally work:

1. Initialized with all Yellow and Red items in PreviousList
   1. Has access to currentMonday
   2. Similar to PreviousList, gets all Yellow / Red items from previous week to firstMonday and dispatches INIT
2. User clicks Move to Green/Yellow/Red
   1. REMOVE_YELLOW_ITEM / REMOVE_RED_ITEM from Actions context
   2. ADD_YELLOW_ITEM / ADD_RED_ITEM to Current's List context
3. User clicks Delete
   1. REMOVE_YELLOW_ITEM / REMOVE_RED_ITEM from Actions context

Update: Decided to reuse ListContext to create a pseudo Actions context, but with a null greenItems field and without accessing / modifying this field.

"Week 3" is hidden.

"Week 2" is too close to list above.

• Deletes / Re-initializes to empty all browser storage used by extension
• Closes popup