Changelog.js
146 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { Box, Heading, HStack, Tag, Text } from "@chakra-ui/react"; |
| 5 | import apiFetch from "@wordpress/api-fetch"; |
| 6 | import { sprintf, __ } from "@wordpress/i18n"; |
| 7 | import React, { useState, useEffect } from "react"; |
| 8 | |
| 9 | /** |
| 10 | * Internal Dependencies |
| 11 | */ |
| 12 | import ChangelogSkeleton from "./../../skeleton/ChangelogSkeleton/ChangelogSkeleton"; |
| 13 | import { CHANGELOG_TAG_COLORS } from "./../../Constants/index"; |
| 14 | |
| 15 | const Changelog = () => { |
| 16 | /* global _EVF_DASHBOARD_ */ |
| 17 | const { evfRestApiNonce, restURL } = |
| 18 | typeof _EVF_DASHBOARD_ !== "undefined" && _EVF_DASHBOARD_; |
| 19 | |
| 20 | const [changelogParsed, setChangelogParsed] = useState(false); |
| 21 | const [changelogs, setChangelogs] = useState({}); |
| 22 | |
| 23 | /** |
| 24 | * Fetrch changelogs on component load. |
| 25 | */ |
| 26 | useEffect(() => { |
| 27 | if (!changelogParsed) { |
| 28 | const data = apiFetch({ |
| 29 | path: restURL + `everest-forms/v1/changelog`, |
| 30 | method: "GET", |
| 31 | headers: { |
| 32 | "X-WP-Nonce": evfRestApiNonce, |
| 33 | }, |
| 34 | }).then((res) => { |
| 35 | if (res.success) { |
| 36 | setChangelogs(res.changelog); |
| 37 | setChangelogParsed(true); |
| 38 | } |
| 39 | }); |
| 40 | } |
| 41 | }, []); |
| 42 | if (!changelogParsed) { |
| 43 | return <ChangelogSkeleton />; |
| 44 | } |
| 45 | |
| 46 | return ( |
| 47 | <> |
| 48 | {changelogs?.map((changelog) => ( |
| 49 | <Box key={changelog.version} mb="7"> |
| 50 | <HStack justify="space-between"> |
| 51 | <Heading as="h4" fontSize="sm" fontWeight="semibold"> |
| 52 | {sprintf(__("Version %s"), changelog.version)} |
| 53 | </Heading> |
| 54 | <Text>{changelog.date}</Text> |
| 55 | </HStack> |
| 56 | <Box> |
| 57 | {Object.entries(changelog.changes).map( |
| 58 | ([tag, changes], i) => ( |
| 59 | <Box |
| 60 | key={`${changelog.version}${tag}${i}`} |
| 61 | position="relative" |
| 62 | _after={{ |
| 63 | bgColor: |
| 64 | CHANGELOG_TAG_COLORS?.[ |
| 65 | tag.trim().toLowerCase() |
| 66 | ]?.bgColor ?? "gray", |
| 67 | bottom: 0, |
| 68 | content: '""', |
| 69 | height: "full", |
| 70 | left: "12px", |
| 71 | position: "absolute", |
| 72 | top: 0, |
| 73 | width: "2px", |
| 74 | }} |
| 75 | mb="10" |
| 76 | mt="8" |
| 77 | > |
| 78 | <Tag |
| 79 | colorScheme={ |
| 80 | CHANGELOG_TAG_COLORS?.[ |
| 81 | tag.trim().toLowerCase() |
| 82 | ]?.scheme |
| 83 | } |
| 84 | position="sticky" |
| 85 | zIndex={2} |
| 86 | top="0" |
| 87 | fontWeight="normal" |
| 88 | > |
| 89 | {tag} |
| 90 | </Tag> |
| 91 | <Box pt="10px"> |
| 92 | {changes.map((change, j) => ( |
| 93 | <Text |
| 94 | key={`${changelog.version}${tag}${i}${j}`} |
| 95 | pl="10" |
| 96 | position="relative" |
| 97 | mb="4" |
| 98 | _after={{ |
| 99 | bgColor: |
| 100 | CHANGELOG_TAG_COLORS?.[ |
| 101 | tag |
| 102 | .trim() |
| 103 | .toLowerCase() |
| 104 | ]?.bgColor, |
| 105 | bgPosition: "50%", |
| 106 | borderRadius: "50%", |
| 107 | content: '""', |
| 108 | height: "20px", |
| 109 | width: "20px", |
| 110 | position: "absolute", |
| 111 | top: "50%", |
| 112 | transform: |
| 113 | "translateY(-50%)", |
| 114 | left: "2px", |
| 115 | }} |
| 116 | _before={{ |
| 117 | color: CHANGELOG_TAG_COLORS?.[ |
| 118 | tag.trim().toLowerCase() |
| 119 | ]?.color, |
| 120 | content: '"\\2713"', |
| 121 | position: "absolute", |
| 122 | left: "9px", |
| 123 | top: "50%", |
| 124 | transform: |
| 125 | "translateY(-50%)", |
| 126 | fontSize: "10px", |
| 127 | fontWeight: "bold", |
| 128 | zIndex: 1, |
| 129 | }} |
| 130 | > |
| 131 | {change} |
| 132 | </Text> |
| 133 | ))} |
| 134 | </Box> |
| 135 | </Box> |
| 136 | ) |
| 137 | )} |
| 138 | </Box> |
| 139 | </Box> |
| 140 | ))} |
| 141 | </> |
| 142 | ); |
| 143 | }; |
| 144 | |
| 145 | export default Changelog; |
| 146 |