Merge pull request #716 from near/develop

weekly promotion of develop to main
near · Mar 21, 2024 · 134d929 · 134d929
2 parents 6f46dcd + 490d5a6
commit 134d929
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 67 deletions.
diff --git a/src/Events/Card.jsx b/src/Events/Card.jsx
@@ -161,14 +161,14 @@ return (
       <CoverImage src={imgSrc} />
     </CoverImageWrapper>
     <Flex direction="column" gap="24px">
-      <Text size="text-lg" fontWeight="bold" style={{ minHeight: loading && "31px" }} title={title}>
+      <Text size="text-xl" fontWeight="500" style={{ minHeight: loading && "31px" }} title={title}>
         {title}
       </Text>
-      <Flex gap="24px" alignItems="center">
-        <Flex gap="8px" alignItems={startAt !== endAt ? "start" : "center"} style={{ width: "100%" }}>
+      <Flex gap="24px">
+        <Flex gap="8px" style={{ width: "100%" }}>
           <Icon className="ph ph-calendar-blank" />
-          <Flex direction="column" alignItems="start">
-            <Text size="text-s" color="sand10">
+          <Flex direction="column">
+            <Text size="text-s" color="sand10" style={{ marginTop: "3px" }}>
               {startAt}
               {startAt !== endAt && " -"}
             </Text>
@@ -179,9 +179,9 @@ return (
             )}
           </Flex>
         </Flex>
-        <Flex gap="8px" alignItems="center" style={{ width: "100%" }} title={location}>
+        <Flex gap="8px" style={{ width: "100%" }} title={location}>
           <Icon className="ph ph-map-pin" />
-          <Text size="text-s" color="sand10">
+          <Text size="text-s" color="sand10" style={{ marginTop: "3px" }}>
             {location}
           </Text>
         </Flex>

diff --git a/src/Events/CardLarge.jsx b/src/Events/CardLarge.jsx
@@ -168,17 +168,24 @@ return (
       <CoverImage src={imgSrc} />
     </CoverImageWrapper>
     <Flex direction="column" gap="24px">
-      <Text size="text-2xl" fontWeight="bold" style={{ minHeight: loading && "31px" }} title={title}>
+      <Text
+        size="text-3xl"
+        fontWeight="500"
+        mobileSize="text-2xl"
+        style={{ minHeight: loading && "31px" }}
+        title={title}
+        overflowLines={3}
+      >
         {title}
       </Text>
-      <Text size="text-lg" color="sand10" overflowLines={7} style={{ minHeight: loading && "31px" }} title={title}>
+      <Text color="sand10" overflowLines={7} style={{ minHeight: loading && "31px" }} title={title}>
         {description}
       </Text>
-      <Flex gap="24px" alignItems="center">
-        <Flex gap="8px" alignItems={startAt !== endAt ? "start" : "center"} style={{ width: "100%" }}>
+      <Flex gap="24px">
+        <Flex gap="8px" style={{ width: "100%" }}>
           <Icon className="ph ph-calendar-blank" />
-          <Flex direction="column" alignItems="start">
-            <Text size="text-s" color="sand10">
+          <Flex direction="column">
+            <Text size="text-s" color="sand10" style={{ marginTop: "3px" }}>
               {startAt}
               {startAt !== endAt && " -"}
             </Text>
@@ -189,9 +196,9 @@ return (
             )}
           </Flex>
         </Flex>
-        <Flex gap="8px" alignItems="center" style={{ width: "100%" }} title={location}>
+        <Flex gap="8px" style={{ width: "100%" }} title={location}>
           <Icon className="ph ph-map-pin" />
-          <Text size="text-s" color="sand10">
+          <Text size="text-s" color="sand10" style={{ marginTop: "3px" }}>
             {location}
           </Text>
         </Flex>

diff --git a/src/Events/Index.jsx b/src/Events/Index.jsx
@@ -15,7 +15,7 @@ const [dataLoaded, setDataLoaded] = useState(false);
 const fetchEvents = () => {
   fetchEventsList().then((eventsData) => {
     const { entries: events, hasMore } = eventsData;
-    const sortEvents = events.sort((a, b) => new Date(a.event.start_at) - new Date(b.event.start_at));
+    const sortEvents = [...events].sort((a, b) => new Date(a.event.start_at) - new Date(b.event.start_at));
     setEventsList(sortEvents);
     setMoreEvents(hasMore);
     setDataLoaded(true);
@@ -204,11 +204,17 @@ const IconCircle = styled.div`
   }
 `;
 
-const featuredEvent =
-  eventsList.length > 0 &&
-  [...eventsList].sort(
-    (a, b) => Math.abs(new Date(a.event.start_at) - new Date()) - Math.abs(new Date(b.event.start_at) - new Date()),
-  )[0].event;
+const featuredEvent = !dataLoaded
+  ? eventsList[0]
+  : eventsList.length > 0 &&
+    [...eventsList].sort(
+      (a, b) => Math.abs(new Date(a.event.start_at) - new Date()) - Math.abs(new Date(b.event.start_at) - new Date()),
+    )[0].event;
+
+// remove featured event from events list to avoid duplicate
+const eventsListFiltered = !dataLoaded
+  ? eventsList
+  : (eventsList.length > 0 && eventsList.filter((event) => event.api_id !== featuredEvent.api_id)) || [];
 
 return (
   <Wrapper>
@@ -230,7 +236,7 @@ return (
 
     {featuredEvent && (
       <Section backgroundColor="#fff" style={{ padding: "72px 24px" }}>
-        <Container>
+        <Container gap="48px">
           <Flex direction="column" gap="80px" mobileGap="40px">
             <Text size="text-3xl" mobileSize="text-2xl" fontWeight="500">
               Upcoming Event
@@ -257,29 +263,29 @@ return (
       </Section>
     )}
 
-    <Section backgroundColor="#fff" style={{ padding: "72px 24px" }}>
-      <Container>
-        <Flex gap="80px" mobileGap="40px" alignItems="center" justifyContent="space-between">
-          <Text size="text-3xl" mobileSize="text-2xl" fontWeight="500">
-            Our Events
-          </Text>
-          {moreEvents && (
-            <Widget
-              src="${REPL_ACCOUNT}/widget/DIG.Button"
-              props={{
-                href: "https://lu.ma/NEAR-community",
-                target: "_blank",
-                label: "View All",
-                variant: "secondary",
-                size: "small",
-              }}
-            />
-          )}
-        </Flex>
+    {eventsListFiltered.length > 0 && (
+      <Section backgroundColor="#fff" style={{ padding: "72px 24px" }}>
+        <Container gap="48px">
+          <Flex gap="80px" mobileGap="40px" alignItems="center" justifyContent="space-between">
+            <Text size="text-3xl" mobileSize="text-2xl" fontWeight="500">
+              Our Events
+            </Text>
+            {moreEvents && (
+              <Widget
+                src="${REPL_ACCOUNT}/widget/DIG.Button"
+                props={{
+                  href: "https://lu.ma/NEAR-community",
+                  target: "_blank",
+                  label: "View All",
+                  variant: "secondary",
+                  size: "small",
+                }}
+              />
+            )}
+          </Flex>
 
-        {eventsList.length > 0 ? (
           <Grid columns="1fr 1fr 1fr" gap="20px">
-            {eventsList.map(({ event }) => {
+            {eventsListFiltered.map(({ event }) => {
               const startAt = convertData(event?.start_at);
               const endAt = convertData(event?.end_at);
               const location = formatLocation(event.geo_address_json);
@@ -302,28 +308,24 @@ return (
               );
             })}
           </Grid>
-        ) : (
+        </Container>
+      </Section>
+    )}
+
+    {eventsListFiltered.length === 0 && (
+      <Section backgroundColor="#fff" style={{ padding: "72px 24px" }}>
+        <Container>
           <Flex direction="column" gap="24px" alignItems="center">
-            <Text size="text-2xl" mobileSize="text-lg" style={{ textAlign: "center" }}>
-              There are no upcoming events at the moment.
+            <Text size="text-3xl" mobileSize="text-2xl" fontWeight="500">
+              New events coming soon!
             </Text>
-            <Text size="text-xl" mobileSize="text-lg" style={{ maxWidth: "808px", textAlign: "center" }}>
+            <Text size="text-xl" mobileSize="text-l" style={{ maxWidth: "808px", textAlign: "center" }}>
               Subscribe to our Luma calendar to stay up to date with our events.
             </Text>
-            <Widget
-              src="${REPL_ACCOUNT}/widget/DIG.Button"
-              props={{
-                label: "Subscribe",
-                variant: "primary",
-                size: "large",
-                href: "https://lu.ma/NEAR-community",
-                target: "_blank",
-              }}
-            />
           </Flex>
-        )}
-      </Container>
-    </Section>
+        </Container>
+      </Section>
+    )}
 
     <Section backgroundColor="var(--violet6)">
       <Container>
@@ -337,7 +339,7 @@ return (
             Hosting an event?
           </Text>
 
-          <Text size="text-xl" mobileSize="text-lg" style={{ maxWidth: "808px", textAlign: "center" }}>
+          <Text size="text-xl" mobileSize="text-l" style={{ maxWidth: "808px", textAlign: "center" }}>
             Do you want your NEAR community event posted here? Submit your event details via Luma to be considered.
           </Text>
 

diff --git a/src/NearOrg/Ecosystem/GetFundingPage.jsx b/src/NearOrg/Ecosystem/GetFundingPage.jsx
@@ -481,6 +481,7 @@ return (
               label: "Explore All Teams",
               variant: "affirmative",
               size: "large",
+              target: "_blank",
             }}
           />
         </div>

diff --git a/src/NearOrg/Notifications/Notification.jsx b/src/NearOrg/Notifications/Notification.jsx
@@ -134,19 +134,23 @@ const Left = styled.div`
 const Right = styled.div``;
 
 let { blockHeight, accountId, manageNotification, permission, value } = props;
-let { item, type, post, message } = value;
+let { item, type, post, message, proposal, notifier } = value;
 item = item ?? {};
-post = post ?? {};
+post = post ?? proposal ?? {};
 message = message ?? "";
 const path = item.path || "";
-
+const showAuthorProfile = type == "devhub/mention" || type == "devhub/edit";
+if (showAuthorProfile) {
+  accountId = notifier;
+}
 const profile = props.profile || Social.get(`${accountId}/profile/**`, "final");
 const profileUrl = `/${REPL_ACCOUNT}/widget/ProfilePage?accountId=${accountId}`;
 
 // notification type that doesn't have a content preview
 // which means it's not actionable
 // as for example "like", "comment", "star", "custom",
 // "devgovgigs/mention", "devgovgigs/edit", "devgovgigs/reply", "devgovgigs/like"
+// "devhub/mention", "devhub/edit", "devhub/reply", "devhub/like"
 const ordinaryNotification = ["follow", "unfollow", "poke"].indexOf(type) >= 0;
 
 // Assert is a valid type

diff --git a/src/NearOrg/Notifications/utils.jsx b/src/NearOrg/Notifications/utils.jsx
@@ -4,12 +4,13 @@ function createNotificationMessage(notificationType, path, postValue, customMess
   const isComment = path.indexOf("/post/comment") > 0 || notificationType === "comment";
   const isPost = !isComment && path.indexOf("/post/main") > 0;
 
-  const getDevHubParentId = postValue
+  const getDevHubPostParentId = postValue
     ? Near.view("devgovgigs.near", "get_parent_id", {
         post_id: postValue,
       })
     : undefined;
-  const isDevHubPost = getDevHubParentId === null;
+
+  const isDevHubPost = getDevHubPostParentId === null;
 
   switch (notificationType) {
     case "like":
@@ -21,19 +22,26 @@ function createNotificationMessage(notificationType, path, postValue, customMess
     case "comment":
     case "devgovgigs/reply":
       return "replied to your post";
+    case "devhub/reply":
+      return "replied to your proposal";
     case "mention":
     case "devgovgigs/mention":
       return "mentioned you in their post";
+    case "devhub/mention":
+      return "mentioned you in their proposal";
     case "poke":
       return "poked you";
     case "star":
       return "starred your component";
     case "custom":
       return customMessage ?? "";
     case "devgovgigs/edit":
+    case "devhub/edit":
       return "edited your";
     case "devgovgigs/like":
       return isDevHubPost ? "liked your post" : "liked your comment";
+    case "devhub/like":
+      return "liked your proposal";
     default:
       return null;
   }
@@ -68,11 +76,13 @@ function getNotificationContent(notificationType, notificationValue, path, postV
 function createNotificationLink(notificationType, notificationValue, authorAccountId, accountId, blockHeight) {
   const pathPrefix = `/${REPL_ACCOUNT}/widget`;
 
-  let { item, widget, params, post } = notificationValue;
+  let { item, widget, params, post, proposal, notifier } = notificationValue;
   item = item ?? {};
   widget = widget ?? "";
   params = params ?? {};
   post = post ?? {};
+  proposal = proposal ?? "";
+  notifier = notifier ?? "";
   let { blockHeight: likeAtBlockHeight, path } = item;
   path = path ?? "";
 
@@ -105,6 +115,18 @@ function createNotificationLink(notificationType, notificationValue, authorAccou
           id: post,
         },
       });
+    case "devhub/mention":
+    case "devhub/edit":
+    case "devhub/reply":
+    case "devhub/like":
+      return href({
+        widgetSrc: "devhub.near/widget/app",
+        params: {
+          page: "proposal",
+          id: proposal,
+          notifier: notifier,
+        },
+      });
     default:
       return `${pathPrefix}/PostPage?accountId=${accountId}&blockHeight=${blockHeight}`;
   }
@@ -114,6 +136,7 @@ function getNotificationIconClassName(notificationType) {
   switch (notificationType) {
     case "like":
     case "devgovgigs/like":
+    case "devhub/like":
       return "ph ph-heart";
     case "fork":
       return "ph ph-git-fork";
@@ -123,9 +146,11 @@ function getNotificationIconClassName(notificationType) {
       return "ph ph-user-minus";
     case "comment":
     case "devgovgigs/reply":
+    case "devhub/reply":
       return "ph ph-share-fat";
     case "mention":
     case "devgovgigs/mention":
+    case "devhub/mention":
       return "ph ph-at";
     case "poke":
       return "ph ph-hand-pointing";