Skip to content

Commit

Permalink
implement changes to move high demand topics to telegram
Browse files Browse the repository at this point in the history
  • Loading branch information
@dominicarrojado
dominicarrojado committed Apr 9, 2024
1 parent 59c3f3e commit 03e8c0d
Show file tree
Hide file tree
Showing 19 changed files with 470 additions and 223 deletions.
8 changes: 4 additions & 4 deletions app/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ export default function About() {
</div>
<Paragraph>
<span className="font-medium">SG Alerts</span> is a free notification
service that sends you an email depending on the topics you&apos;ve
subscribed to. It&apos;s a simple service that helps you stay up to date
with the latest information without having to constantly check the
source website.
service that sends you an email or a Telegram message depending on the
topics you&apos;ve subscribed to. It&apos;s a simple service that helps
you stay up to date with the latest information without having to
constantly check the source website.
</Paragraph>
<Paragraph>
It started out as a personal project to help me monitor the appointment
Expand Down
7 changes: 4 additions & 3 deletions app/how-it-works/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,9 @@ export default function HowToUse() {
<Paragraph>
<span className="font-medium">SG Alerts</span> is a free notification
service that monitors the websites and sends you an email notification
when there are new updates. It is designed to help you save time and
effort by automating the process of checking for updates.
or a Telegram message when there are new updates. It is designed to help
you save time and effort by automating the process of checking for
updates.
</Paragraph>
<Paragraph>
<span className="font-medium">SG Alerts</span> is not affiliated with
Expand All @@ -54,7 +55,7 @@ export default function HowToUse() {
to help others save time and effort.
</Paragraph>
<Paragraph>
Since it notifies you via email, the best way to use{" "}
Since most alerts are sent via email, the best way to use{" "}
<span className="font-medium">SG Alerts</span> is to make sure that you
have access to your email at all times. This means that you should have
your email app installed on your phone and have notifications enabled.
Expand Down
3 changes: 3 additions & 0 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ export const metadata: Metadata = {
"Email Alerts",
"Email Notifications",
"Email Subscription",
"Telegram Alerts",
"Telegram Notifications",
"Telegram Channels",
...NOTIFICATION_SETTINGS.map((setting) => {
// remove emojis
let { title } = setting;
Expand Down
11 changes: 11 additions & 0 deletions app/page-separator.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
"use client";

import { Separator, SeparatorText } from "@/components/ui/separator";

export default function PageSeparator() {
return (
<Separator className="my-10 relative">
<SeparatorText>AND</SeparatorText>
</Separator>
);
}
192 changes: 103 additions & 89 deletions app/subscribe-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import Link from "next/link";
import React, { FormEvent, useState } from "react";
import { AlertCircle, Loader2Icon } from "lucide-react";
import { AlertCircle, AtSignIcon, Loader2Icon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Card,
Expand All @@ -27,6 +27,8 @@ import {
SubscriptionTopic,
} from "@/lib/enums";
import { NOTIFICATION_SETTINGS } from "@/lib/content";
import TelegramChannels from "./telegram-channels";
import PageSeparator from "./page-separator";

export default function SubscribeForm() {
const submitBtnText = "Subscribe Now";
Expand Down Expand Up @@ -62,95 +64,107 @@ export default function SubscribeForm() {
};

return fetchStatus !== FetchStatus.Success ? (
<form onSubmit={onSubmit}>
<Card className="w-full">
<CardHeader>
<CardTitle>1️⃣ &nbsp;First Step</CardTitle>
<CardDescription>
Choose at least one topic you want to get notified about.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-6">
{NOTIFICATION_SETTINGS.map(({ id, title, description }) => (
<Label
key={id}
htmlFor={id}
className="flex flex-row items-center justify-between rounded-lg border p-4"
>
<div className="space-y-0.5 pr-2">
<p className="text-base">{title}</p>
<p className="text-sm font-light text-muted-foreground">
{description}
</p>
</div>
<Switch
id={id}
name="topics"
disabled={isLoading}
checked={topics.includes(id)}
onClick={() => switchOnClick(id)}
/>
</Label>
))}
</div>
</CardContent>
</Card>
<Card className="mt-6">
<CardHeader>
<CardTitle>2️⃣ &nbsp;Last Step</CardTitle>
<CardDescription>
Provide your email address and confirm your subscription.
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col space-y-2">
<Label htmlFor="email">Email Address</Label>
<Input
id="email"
type="email"
autoComplete="email"
value={email}
disabled={isLoading}
onChange={inputOnChange}
required
/>
<p className="text-sm text-muted-foreground">
By submitting this form, you agree to receive email notifications
about your chosen services above and understand that you can
update it at any time{" "}
<Link href={Routes.Settings} passHref legacyBehavior>
<Anchor>here</Anchor>
</Link>
.
</p>
</div>
</CardContent>
<CardFooter className="flex-col space-y-4">
{fetchStatus === FetchStatus.Failure && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Something went wrong. Please try again later.
</AlertDescription>
</Alert>
)}
<Button
type="submit"
className="w-full"
disabled={isLoading || !isFormValid}
>
{isLoading && (
<>
<Loader2Icon className="mr-2 h-4 w-4 animate-spin" />{" "}
</>
<>
<TelegramChannels />
<PageSeparator />
<form onSubmit={onSubmit}>
<Card className="w-full">
<CardHeader>
<CardTitle className="flex gap-2 items-center">
<AtSignIcon />
Email Notifications
</CardTitle>
<CardTitle className="!mt-6">1️⃣ &nbsp;First Step</CardTitle>
<CardDescription>
Choose at least one topic you want to get notified about via
email.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-6">
{NOTIFICATION_SETTINGS.map(
({ id, title, description, hasTelegramChannel }) =>
!hasTelegramChannel && (
<Label
key={id}
htmlFor={id}
className="flex flex-row items-center justify-between rounded-lg border p-4"
>
<div className="space-y-0.5 pr-2">
<p className="text-base">{title}</p>
<p className="text-sm font-light text-muted-foreground">
{description}
</p>
</div>
<Switch
id={id}
name="topics"
disabled={isLoading}
checked={topics.includes(id)}
onClick={() => switchOnClick(id)}
/>
</Label>
)
)}
</div>
</CardContent>
</Card>
<Card className="mt-6">
<CardHeader>
<CardTitle>2️⃣ &nbsp;Last Step</CardTitle>
<CardDescription>
Provide your email address and confirm your subscription.
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col space-y-2">
<Label htmlFor="email">Email Address</Label>
<Input
id="email"
type="email"
autoComplete="email"
value={email}
disabled={isLoading}
onChange={inputOnChange}
required
/>
<p className="text-sm text-muted-foreground">
By submitting this form, you agree to receive email
notifications about your chosen services above and understand
that you can update it at any time{" "}
<Link href={Routes.Settings} passHref legacyBehavior>
<Anchor>here</Anchor>
</Link>
.
</p>
</div>
</CardContent>
<CardFooter className="flex-col space-y-4">
{fetchStatus === FetchStatus.Failure && (
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Something went wrong. Please try again later.
</AlertDescription>
</Alert>
)}
{submitBtnText}
</Button>
</CardFooter>
</Card>
</form>
<Button
type="submit"
className="w-full"
disabled={isLoading || !isFormValid}
>
{isLoading && (
<>
<Loader2Icon className="mr-2 h-4 w-4 animate-spin" />{" "}
</>
)}
{submitBtnText}
</Button>
</CardFooter>
</Card>
</form>
</>
) : (
<Card className="w-full">
<CardHeader>
Expand Down
60 changes: 60 additions & 0 deletions app/telegram-channels.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
"use client";

import { ExternalLink, SendIcon } from "lucide-react";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Anchor } from "@/components/ui/anchor";
import { TELEGRAM_PUBLIC_CHANNELS } from "@/lib/content";
import { TELEGRAM_SHORT_URL } from "@/lib/constants";

export default function TelegramChannels() {
return (
<Card className="w-full">
<CardHeader>
<CardTitle className="flex gap-2 items-center">
<SendIcon />
Telegram Channels
</CardTitle>
<CardDescription>
Subscribe to the channels below if you want to receive notifications
via Telegram.
</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-6">
{TELEGRAM_PUBLIC_CHANNELS.map(({ id, title, description }) => (
<div
key={id}
className="flex flex-row items-center justify-between rounded-lg border p-4 w-full"
>
<div className="space-y-0.5 pr-2">
<Anchor
href={`${TELEGRAM_SHORT_URL}/${id}`}
className="no-underline text-base"
isExternal
>
{title}
</Anchor>
<p className="text-sm font-light text-muted-foreground">
{description}
</p>
</div>
<Anchor
href={`${TELEGRAM_SHORT_URL}/${id}`}
className="no-underline px-2 shrink-0"
isExternal
>
<ExternalLink />
</Anchor>
</div>
))}
</div>
</CardContent>
</Card>
);
}
Loading

0 comments on commit 03e8c0d

Please sign in to comment.