Live on Heroku

Table of Contents

1. Introduction
2. Dependencies
3. Features
   • Sign-up / Login
   • Entities
   • Chapters/stories
   • Scenes
   • Pseudonyms
   • Themes

Introduction

Writer's Friend is a visual tool to improve writing experience. It will allow users to to easily navigate through their works and and edit texts.

Dependencies

Features

• Sign-up / Login

• Entities

  Users can create entities, like trees with following levels:

  1. world
  2. book series
  3. book
  4. chapter/story
  

  Entities are stored in Redux store as an ordered array of entities of highest level, with nested array of children-entities. Nesting goes up to 4 levels.

  Redux store updated using following function.

   export let updateEntity = (array, child) => {
   	//finding original entity
   	let oldChild = findEntity(array, child.id);
   	//generating updated entity
   	let newChild = {...oldChild, ...child};
  
   	//if order parameter not passed - remove it
   	if (child.order===undefined) delete newChild.order;
   	
   	//create a full copy of original array
   	let newArray = deepCopy(array);
  
   	//if position was changed
   	if (oldChild.parentId !== newChild.parentId 
   		|| (newChild.order!==undefined && oldChild.order !== newChild.order)) {
   		
   		//remove entity from original position
   		newArray = removeEntity(array, oldChild.id);
  
   		//adjust order
   		if (newChild.order === "last" || newChild.parentId === null){
   			delete newChild.order;
   		} else if (oldChild.parentId === newChild.parentId && newChild.order > oldChild.order) {
   			newChild.order--;
   		}
   		//add entity to the new position
   		newArray = addEntity(newArray, newChild);
   	} 
   	//if position stayed the same
   	else {
   		if (oldChild.parentId === null) {
   			//for top level - update entity
   			newArray = updateFn(array, newChild)
   		} else {
   			//for deeper-level entity - copy array with callback function that would update entity when it get's to it
   			let path = findPath(array, newChild.id)
   			newArray = copyArray(array, newChild, path, updateFn)
   		}
   	}
  
   	return newArray;
  
   }

• Chapters/stories

  Chapters and stories are leaf-entities.

  There are 2 ways to create new story/chapter:

  1. Through entity creation form:
  
  2. Pressing Start writing button - that would create story on the hiest level.
  

• Scenes

  • To write a text users can create several blocks of text - scenes.

  • Users can re-order scenes

    

  • Users can join scenes

    

  • Users can split scenes

    

  • Users can delete scenes after a confirmation.

  • All of the changes preserved in the Redux store unless saved.

  • Users can reset unsaved changes after a confirmation.

• Pseudonyms

  • Users can create multiple pseudonyms.

  • Users can set one pseudonym to represent as themself.

    

• Themes

  • User can change color theme of the app

    

  • Theme setting is preserved in cookies

   import Cookies from 'js-cookie';
  
   const [theme, setTheme] = useState("peach")
   // array of pre-defined themes
   const themeList = useMemo(()=>["peach", "beach", "midnight", "dark"],[]);
  
   // check cookies for set theme
   useEffect(() => {
   	dispatch(sessionActions.restoreUser())
   	.then(() => {
   		if (Cookies.get('color-theme') && themeList.includes(Cookies.get('color-theme'))) {
   			setTheme(Cookies.get('color-theme'))
   		} 
   		else {
   			Cookies.set('color-theme','peach')
   		}
   		setIsLoaded(true)
   	});
   }, [dispatch, themeList]);
  
   //set theme-class to body
   useEffect(()=>{
   	document.body.setAttribute("class", "")
   	document.body.classList.add(theme)
   },[theme])

  I used CSS variables to set colors for each theme

   .midnight {
   	--bg-color1: #245579;
   	--text-color1: #000;
   	--text-hover1: #ffbc42;
  
   	--bg-color2: #d81159;
   	--text-color2: #333;
   	--text-hover2: #ffbc42;
   	
   	...
   }