display archived

src/components/SVG.js

@@ -21,3 +21,9 @@ export const EditSVG = (props) => SVGSkeleton({
     paths: <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />,
     ...props
 })
+
+export const TriangleSVG = (props) => SVGSkeleton({
+    viewBox: "0 0 320 512",
+    paths: <path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" />,
+    ...props
+})

src/components/Translation.js

@@ -32,13 +32,15 @@ export const Text = ({text, count = null}) => {
 
 export const TranslateProvider = ({children}) => {
 
-    const userLang = navigator.language || navigator.userLanguage
     let translate = null
+    if (typeof navigator !== "undefined") {
+        const userLang = navigator.language || navigator.userLanguage
         if (userLang === "en") {
             translate = en
         } else if (userLang === "fr") {
             translate = fr
         }
+    }
 
     return <TranslateContext.Provider value={translate}>
         { children }

src/index.js

@@ -30,4 +30,16 @@ Array.prototype.where = function(field, search) {
     return this.filter(item => item[field] === search)
 }
 
+/**
+ * Sort Array of Objects by a specific field
+ * @param {string} field to sort
+ * @param {boolean} desc way to sort
+ * @returns {Array}
+ */
+Array.prototype.sortObjectsBy = function (field, desc = false) {
+    return desc
+        ? this.sort((a, b) => a[field] < b[field])
+        : this.sort((a, b) => a[field] > b[field])
+}
+
 export default App;

src/routes/Plant.js

@@ -6,11 +6,11 @@ import { PageLayout } from "../components/PageLayout"
 import { PlantsContext } from "../Contexts"
 import {InputField, SelectField} from "../components/Form"
 import {getPicture, storePicture} from "../utilities/pictures"
-import {EditSVG, PlusSVG} from "../components/SVG"
+import {EditSVG, PlusSVG, TriangleSVG} from "../components/SVG"
 import {classNames} from "../utilities/classNames"
 import {PlantForm} from "../components/Plants"
 import {ACTION_TYPES, actionId} from "../utilities/actions"
-import {Text} from "../components/Translation";
+import {Text} from "../components/Translation"
 
 const Plant = ({id}) => {
 
@@ -109,7 +109,7 @@ const Plant = ({id}) => {
                         ? <span><Text text="when you want" /></span>
                         : <span><Text text="every {{count}} days" count={action.frequency} /></span>}
                     <span className="text-gray-500"><Text text="last task" /> {lastTask ? lastTask.toFrDate() : <Text text="never" />}</span>
-                    {/*<span>{ archived.where('action', actionId(action.action_type)).length }</span>*/}
+                    <ArchivedAction archived={archived.where('action', actionId(action.action_type))} />
                 </div>
             })}
         </div>
@@ -169,3 +169,17 @@ const Plant = ({id}) => {
 }
 
 export default Plant
+
+const ArchivedAction = ({archived = []}) => {
+    console.log(archived)
+    const [isOpen, setIsOpen] = useState(false)
+
+    return <>
+        {archived.length > 0 && <span className="relative" onClick={() => setIsOpen(!isOpen)}>
+            { archived.length } <TriangleSVG className={classNames("w-6 inline transform transition-all duration-300", isOpen ? 'rotate-180' : '')} />
+            {archived.length > 0 && isOpen && <ul className="absolute z-10 bg-white dark:bg-gray-800 border border-primary p-2 rounded">
+                {archived.sortObjectsBy('time', true).map(archive => <li>{(new Date(archive.time)).toFrDate()}</li>)}
+            </ul>}
+        </span>}
+    </>
+}