-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add a Slots feed section to Landing (basic slot index only). Ad…
…d a useSlotsFeed hook. (#1173) Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
- Loading branch information
1 parent
1e8b18d
commit 44b713b
Showing
8 changed files
with
192 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
client/src/app/components/nova/landing/LandingSlotSection.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| @import "../../../../scss/variables"; | ||
| @import "../../../../scss/fonts"; | ||
|
|
||
| .slots-section { | ||
| font-family: $metropolis; | ||
| margin-top: 40px; | ||
| background-color: $gray-1; | ||
| border-radius: 8px; | ||
|
|
||
| .slots-section__header { | ||
| width: fit-content; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .slots-feed__wrapper { | ||
| margin: 0 20px 20px; | ||
|
|
||
| .slots-feed__item { | ||
| display: flex; | ||
| margin: 0px 12px; | ||
| align-items: center; | ||
| line-height: 32px; | ||
| justify-content: center; | ||
| background-color: $gray-5; | ||
| border-radius: 4px; | ||
|
|
||
| &.transparent { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| &:not(:last-child) { | ||
| margin-bottom: 20px; | ||
| } | ||
| } | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
client/src/app/components/nova/landing/LandingSlotSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from "react"; | ||
| import useSlotsFeed from "~/helpers/nova/hooks/useSlotsFeed"; | ||
| import "./LandingSlotSection.scss"; | ||
| import ProgressBar from "./ProgressBar"; | ||
|
|
||
| const LandingSlotSection: React.FC = () => { | ||
| const { currentSlot, currentSlotProgressPercent, latestSlots } = useSlotsFeed(); | ||
|
|
||
| if (currentSlot === null || currentSlotProgressPercent === null) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="slots-section"> | ||
| <h2 className="slots-section__header">Latest Slots</h2> | ||
| <div className="slots-feed__wrapper"> | ||
| <ProgressBar progress={currentSlotProgressPercent} showLabel={false}> | ||
| <div className="slots-feed__item transparent">{currentSlot}</div> | ||
| </ProgressBar> | ||
| {latestSlots?.map((slot) => ( | ||
| <div key={`slot-key-${slot}`} className="slots-feed__item"> | ||
| {slot} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default LandingSlotSection; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| @import "../../../../scss/variables"; | ||
|
|
||
| .progress-bar__wrapper { | ||
| $bar-height: 32px; | ||
|
|
||
| .progress-bar { | ||
| position: relative; | ||
| background-color: $gray-5; | ||
| margin: 20px 12px; | ||
| height: $bar-height; | ||
| border-radius: 4px; | ||
| text-align: center; | ||
| overflow: hidden; | ||
|
|
||
| .progress-bar__label { | ||
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| line-height: $bar-height; | ||
| margin: 0 auto; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .progress-bar__children { | ||
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| line-height: $bar-height; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .progress-bar__fill { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: #36c636; | ||
| transform: translateX(-100%); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from "react"; | ||
| import "./ProgressBar.scss"; | ||
|
|
||
| interface ProgressBarProps { | ||
| progress: number; | ||
| showLabel: boolean; | ||
| children?: React.ReactNode | React.ReactElement; | ||
| } | ||
|
|
||
| const ProgressBar: React.FC<ProgressBarProps> = ({ progress, showLabel, children }) => ( | ||
| <div className="progress-bar__wrapper"> | ||
| <div className="progress-bar"> | ||
| <div className="progress-bar__fill" style={{ transform: `translateX(-${100 - progress}%)` }} /> | ||
| {showLabel && <div className="progress-bar__label">{progress}%</div>} | ||
| {children && <div className="progress-bar__children">{children}</div>} | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| export default ProgressBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import moment from "moment"; | ||
| import { useEffect, useState } from "react"; | ||
| import { useNovaTimeConvert } from "./useNovaTimeConvert"; | ||
|
|
||
| const DEFAULT_SLOT_LIMIT = 10; | ||
|
|
||
| export default function useSlotsFeed(slotsLimit: number = DEFAULT_SLOT_LIMIT): { | ||
| currentSlot: number | null; | ||
| currentSlotProgressPercent: number | null; | ||
| latestSlots: number[] | null; | ||
| } { | ||
| const { unixTimestampToSlotIndex, slotIndexToUnixTimeRange } = useNovaTimeConvert(); | ||
| const [currentSlot, setCurrentSlot] = useState<number | null>(null); | ||
| const [latestSlots, setLatestSlots] = useState<number[] | null>(null); | ||
| const [currentSlotProgressPercent, setCurrentSlotProgressPercent] = useState<number | null>(null); | ||
| const [slotTimeUpdateHandle, setSlotTimeUpdateHandle] = useState<NodeJS.Timeout | null>(null); | ||
|
|
||
| const checkCurrentSlot = () => { | ||
| if (unixTimestampToSlotIndex && slotIndexToUnixTimeRange) { | ||
| const now = moment().unix(); | ||
| const currentSlotIndex = unixTimestampToSlotIndex(now); | ||
| const slotTimeRange = slotIndexToUnixTimeRange(currentSlotIndex); | ||
|
|
||
| const slotProgressPercent = Math.trunc(((now - slotTimeRange.from) / (slotTimeRange.to - 1 - slotTimeRange.from)) * 100); | ||
| setCurrentSlot(currentSlotIndex); | ||
| setCurrentSlotProgressPercent(slotProgressPercent); | ||
| setLatestSlots(Array.from({ length: slotsLimit - 1 }, (_, i) => currentSlotIndex - 1 - i)); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (slotTimeUpdateHandle === null) { | ||
| checkCurrentSlot(); | ||
| const intervalTimerHandle = setInterval(() => { | ||
| checkCurrentSlot(); | ||
| }, 950); | ||
|
|
||
| setSlotTimeUpdateHandle(intervalTimerHandle); | ||
| } | ||
|
|
||
| return () => { | ||
| if (slotTimeUpdateHandle) { | ||
| clearInterval(slotTimeUpdateHandle); | ||
| } | ||
| setSlotTimeUpdateHandle(null); | ||
| setCurrentSlot(null); | ||
| setCurrentSlotProgressPercent(null); | ||
| setLatestSlots(null); | ||
| }; | ||
| }, []); | ||
|
|
||
| return { currentSlot, currentSlotProgressPercent, latestSlots }; | ||
| } |