public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
cal.pub0.org/pages/[user].tsx

173 lines
6.1 KiB
TypeScript
Raw Normal View History

Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
import { GetServerSideProps } from "next";
import Head from "next/head";
import Link from "next/link";
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
import prisma, { whereAndSelect } from "@lib/prisma";
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
import Avatar from "../components/Avatar";
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
import Theme from "@components/Theme";
Redesign profile screen
2021-08-05 12:41:20 +00:00
import { ClockIcon, InformationCircleIcon, UserIcon } from "@heroicons/react/solid";
import React from "react";
removed unused imports
2021-08-05 18:49:05 +00:00
import { ArrowRightIcon } from "@heroicons/react/outline";
Add booking flow
2021-03-22 13:48:48 +00:00
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
export default function User(props): User {
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
const { isReady } = Theme(props.user.theme);
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
const eventTypes = props.eventTypes.map((type) => (
Redesign profile screen
2021-08-05 12:41:20 +00:00
<div
added dark mode for profile page
2021-07-09 11:34:00 +00:00
key={type.id}
removed unused import
2021-08-08 16:17:17 +00:00
className="group relative dark:bg-neutral-900 dark:border-0 dark:hover:border-neutral-600 bg-white hover:bg-gray-50 border border-neutral-200 hover:border-black rounded-sm">
removed unused imports
2021-08-05 18:49:05 +00:00
<ArrowRightIcon className="absolute transition-opacity h-4 w-4 right-3 top-3 text-black dark:text-white opacity-0 group-hover:opacity-100" />
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
<Link href={`/${props.user.username}/${type.slug}`}>
<a className="block px-6 py-4">
Redesign profile screen
2021-08-05 12:41:20 +00:00
<h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
<div className="mt-2 flex space-x-4">
removed unused imports
2021-08-05 18:49:05 +00:00
<div className="flex text-sm text-neutral-500">
<ClockIcon
removed unused import
2021-08-08 16:17:17 +00:00
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
removed unused imports
2021-08-05 18:49:05 +00:00
aria-hidden="true"
/>
removed unused import
2021-08-08 16:17:17 +00:00
<p className="dark:text-white">{type.length}m</p>
Redesign profile screen
2021-08-05 12:41:20 +00:00
</div>
removed unused imports
2021-08-05 18:49:05 +00:00
<div className="flex text-sm min-w-16 text-neutral-500">
removed unused import
2021-08-08 16:17:17 +00:00
<UserIcon
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
aria-hidden="true"
/>
<p className="dark:text-white">1-on-1</p>
Redesign profile screen
2021-08-05 12:41:20 +00:00
</div>
removed unused imports
2021-08-05 18:49:05 +00:00
<div className="flex text-sm text-neutral-500">
Redesign profile screen
2021-08-05 12:41:20 +00:00
<InformationCircleIcon
removed unused import
2021-08-08 16:17:17 +00:00
className="flex-shrink-0 mt-0.5 mr-1.5 h-4 w-4 text-neutral-400 dark:text-white"
Redesign profile screen
2021-08-05 12:41:20 +00:00
aria-hidden="true"
/>
removed unused import
2021-08-08 16:17:17 +00:00
<p className="dark:text-white">{type.description}</p>
Redesign profile screen
2021-08-05 12:41:20 +00:00
</div>
</div>
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
</a>
</Link>
Redesign profile screen
2021-08-05 12:41:20 +00:00
</div>
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
));
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
return (
moved og:image outside of isReady scope so it renders on the server
2021-08-12 17:05:46 +00:00
<>
<Head>
<title>{props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
Add booking flow
2021-03-22 13:48:48 +00:00
moved og:image outside of isReady scope so it renders on the server
2021-08-12 17:05:46 +00:00
<meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta name="description" content={"Book a time with " + (props.user.name || props.user.username)} />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://calendso/" />
<meta
property="og:title"
content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
/>
<meta
property="og:description"
content={"Book a time with " + (props.user.name || props.user.username)}
/>
<meta
property="og:image"
content={
"https://og-image-one-pi.vercel.app/" +
encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>").replace(
/'/g,
"%27"
) +
".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
encodeURIComponent(props.user.avatar)
}
/>
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://calendso/" />
<meta
property="twitter:title"
content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
/>
<meta
property="twitter:description"
content={"Book a time with " + (props.user.name || props.user.username)}
/>
<meta
property="twitter:image"
content={
"https://og-image-one-pi.vercel.app/" +
encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>").replace(
/'/g,
"%27"
) +
".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
encodeURIComponent(props.user.avatar)
}
/>
</Head>
{isReady && (
<div className="bg-neutral-50 dark:bg-black h-screen">
<main className="max-w-3xl mx-auto py-24 px-4">
<div className="mb-8 text-center">
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
<h1 className="text-3xl font-bold text-neutral-900 dark:text-white mb-1">
{props.user.name || props.user.username}
</h1>
<p className="text-neutral-500 dark:text-white">{props.user.bio}</p>
Redesign profile screen
2021-08-05 12:41:20 +00:00
</div>
moved og:image outside of isReady scope so it renders on the server
2021-08-12 17:05:46 +00:00
<div className="space-y-6">{eventTypes}</div>
{eventTypes.length == 0 && (
<div className="shadow overflow-hidden rounded-sm">
<div className="p-8 text-center text-gray-400 dark:text-white">
<h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
<p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
</div>
</div>
)}
</main>
</div>
)}
</>
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
);
Add booking flow
2021-03-22 13:48:48 +00:00
}
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
export const getServerSideProps: GetServerSideProps = async (context) => {
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
const user = await whereAndSelect(
prisma.user.findFirst,
{
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
username: context.query.user.toLowerCase(),
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
},
Feat/cal 95/date range on event types (#353) * add edit links to events on dashboard * fit elements on screen for mobile * initialize components for consistent text styles * add more fine grained width/height settings * add higher level setting for when an event is available - db: add supporting values to period allow setting an amount of days, a range, or unlimited number days an event is available * fix issue where periodDates are null * return minimal required data, handle date parsing * [ui] limit booking days based on user period settings * api: validate user period settings * [db] migration for event type period settings
2021-07-15 14:10:26 +00:00
["id", "username", "email", "name", "bio", "avatar", "theme"]
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
);
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
if (!user) {
return {
notFound: true,
};
}
When navigating to a calendso user that does not exist, return notFound.
2021-04-08 15:51:13 +00:00
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
const eventTypes = await prisma.eventType.findMany({
where: {
userId: user.id,
hidden: false,
},
Feat/cal 95/date range on event types (#353) * add edit links to events on dashboard * fit elements on screen for mobile * initialize components for consistent text styles * add more fine grained width/height settings * add higher level setting for when an event is available - db: add supporting values to period allow setting an amount of days, a range, or unlimited number days an event is available * fix issue where periodDates are null * return minimal required data, handle date parsing * [ui] limit booking days based on user period settings * api: validate user period settings * [db] migration for event type period settings
2021-07-15 14:10:26 +00:00
select: {
slug: true,
title: true,
Redesign profile screen
2021-08-05 12:41:20 +00:00
length: true,
Feat/cal 95/date range on event types (#353) * add edit links to events on dashboard * fit elements on screen for mobile * initialize components for consistent text styles * add more fine grained width/height settings * add higher level setting for when an event is available - db: add supporting values to period allow setting an amount of days, a range, or unlimited number days an event is available * fix issue where periodDates are null * return minimal required data, handle date parsing * [ui] limit booking days based on user period settings * api: validate user period settings * [db] migration for event type period settings
2021-07-15 14:10:26 +00:00
description: true,
},
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
});
Add hidden event types
2021-04-28 09:23:30 +00:00
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
return {
props: {
user,
eventTypes,
},
};
};
add random bullet color in list user's events
2021-05-13 17:35:28 +00:00
// Auxiliary methods
Lowercase the router.query.user & some typescript fixes
2021-06-22 17:42:32 +00:00
export function getRandomColorCode(): string {
let color = "#";
for (let idx = 0; idx < 6; idx++) {
color += Math.floor(Math.random() * 10);
}
return color;
}