JCJang

//using authorInfluences as an example:

  const [authorInfluenced, setAuthorInfluenced] = useState([])
  const [authorInfluencedBooks, setAuthorInfluencedBooks] = useState([])
  
  const openLinkedShelf = (shelfAndBook) =>{
      setBookNumber(shelfAndBook.book[0].bookNumber)
      setShelfId(shelfAndBook.shelfId)
      setColumnFocus('shelfpanel')
  }

JCJang

     //for each author, scan their 'influenced' list for the opened author 

    app.post("/influences", async(req,res)=>{
      const languageSetting = req.body.languageSetting
      const authorToFind = req.body.authorWikiTitle
        AuthorModel.find({"editions.language":languageSetting, "authorInfluenced":authorToFind},{"editions.details.authorWikiTitle":1,"_id":0}, (err,results)=>{
        if(err){
          res.send(err)
          console.log(err)
        }

JCJang

//adding a new shelf 

app.post("/shelf", async(req,res)=>{

  const shelfTitle = req.body.shelfTitle
  const shelfLanguage = req.body.shelfLanguage
  const bookTitle= req.body.bookTitle
  const earliestPublicationYear = req.body.earliestPublicationYear
  ...

JCJang

{
  "_id": ".....",
  "shelfSubjects": [
    "0 Ancient and Modern Languages",
    "1 Literature",
    "4 Anthropology",
    "5 Human Geography"
  ],
  "editions": [
    {

JCJang

//timeline object consists of simple key-value pairs, but some keys have dates while others do not.
//"Timeline of ..." : {"1990 May 2":"Event description for 1990 May 2", "1992" : "Event description for 1992"}


//get array of [year, key, value]

const getKeyValueArr = (obj)=>{
  const keys = Object.keys(obj);
  const values = Object.values(obj);
  const keyValueArr=[]

JCJang

//simple Carousel setup using CSS position and custom hooks by Kyle Cook (WebDevSimplified)

import ImageFadeIn from '../../../../../customHooks/imageFadeIn'
import useTimeout from '../../../../../customHooks/useTimeout'
import useDebounce from '../../../../../customHooks/useDebounce'
import useClickOutside from '../../../../../customHooks/useClickOutside';
import ImageModal from './ImageModal'

import {useEffect, useState, useRef} from 'react'

JCJang

//combining and referencing code from 'react-zoom-pan-pinch' by Maciej Pyrc, 'react-image-fade-in' by Patrick Tran, react portal tutorial by Kyle Cook (WebDevSimplified)

import ImageFadeIn from '../../../../../customHooks/imageFadeIn';
import React from 'react'
import ReactDom from 'react-dom'
import {TransformWrapper, TransformComponent} from "react-zoom-pan-pinch";

import {VscZoomIn as ZoomInIcon} from "react-icons/vsc";
import {VscZoomOut as ZoomOutIcon} from "react-icons/vsc";
import {IoResizeOutline as ResetIcon} from "react-icons/io5";

JCJang

/* Headers: Rufina - English, Genwan - Chinese */

.h1{
  @apply text-4xl tracking-wider font-medium;
  font-family: "Rufina","Genwan";
}

/* Body Text: Roboto - English, Genseki - Chinese */

.body{

JCJang

import i18n from './../../i18n.js'
import { useTranslation } from 'react-i18next'
import NavLink from './NavLink.js'

const Navbar = () => {

const {t, i18n} = useTranslation();
 
return (
   <nav>

JCJang

//translationZHTW.json

{
  "Navbar":{
    "trekinn":"《 美崙遊記 》",
    "about":"簡介",
    "destinations+map":"觀光指南及地圖",
    "rooms":"訂房",
    "contact":"聯絡資訊",
    "changeTo":"English",