Skip to content

Commit

Permalink
small UI updates
Browse files Browse the repository at this point in the history
  • Loading branch information
Charlie ⚡ committed Apr 14, 2022
1 parent 1f5f411 commit 5261671
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 70 deletions.
73 changes: 41 additions & 32 deletions src/components/feed.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Link from "next/link";
import { useState, useCallback } from "react";
import { FiEdit3, FiEye, FiTrash } from "react-icons/fi";

import distance from "date-fns/formatDistanceToNow";
import type { IPartialFeedItem } from "@data/modules/dashboard";
Expand All @@ -15,13 +16,7 @@ interface IBaseFeedItem {
public: boolean;
}

export interface ICardProps extends IBaseFeedItem {
excerpt?: string;
}

interface IListItemProps extends IBaseFeedItem {}

const Card: React.VFC<ICardProps> = (props) => {
const Card: React.VFC<IBaseFeedItem> = (props) => {
const onDelete = useCallback(() => {
if (props.onDelete) {
props.onDelete({ id: props.id, title: props.title });
Expand Down Expand Up @@ -113,7 +108,7 @@ const Card: React.VFC<ICardProps> = (props) => {
);
};

const PostListItem: React.VFC<IListItemProps> = (props) => {
const PostListItem: React.VFC<IBaseFeedItem> = (props) => {
function onDelete() {
props.onDelete({ id: props.id, title: props.title });
}
Expand All @@ -123,28 +118,34 @@ const PostListItem: React.VFC<IListItemProps> = (props) => {

return (
<li>
<div data-testid="POST_LIST_ITEM">
<small>added {distance(new Date(props.dateAdded))} ago</small>
<div data-testid="POST_LIST_ITEM" className="item">
<div className="info">
<h2>
<Link as={editLink} href={Routes.EDIT} passHref>
<a>{props.title}</a>
</Link>
</h2>

<small>added {distance(new Date(props.dateAdded))} ago</small>
</div>

<h2>
<Link as={editLink} href={Routes.EDIT} passHref>
<a>{props.title}</a>
</Link>
</h2>
<div className="tray">
<div className="links">
<Link as={editLink} href={Routes.EDIT}>
<a>Edit</a>
{props.public && (
<Link as={previewLink} href={Routes.PREVIEW}>
<a>
<FiEye size={16} />
</a>
</Link>
{props.public && (
<Link as={previewLink} href={Routes.PREVIEW}>
<a>Preview</a>
</Link>
)}
</div>
)}

<Link as={editLink} href={Routes.EDIT}>
<a>
<FiEdit3 size={16} />
</a>
</Link>
{props.onDelete && (
<button className="alt-button delete" onClick={onDelete}>
Delete
<FiTrash size={16} />
</button>
)}
</div>
Expand All @@ -162,28 +163,36 @@ const PostListItem: React.VFC<IListItemProps> = (props) => {
h2 {
font-size: 1.25rem;
margin: 0 0 1rem;
margin: 0;
}
small {
opacity: 0.75;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
}
.info {
flex: 1;
margin-right: 1rem;
}
.delete {
appearance: none;
background: none;
border: 0;
}
.tray {
flex: 0;
display: flex;
justify-content: space-between;
justify-content: flex-end;
font-size: small;
}
.links {
display: flex;
gap: 0.5rem;
gap: 0.75rem;
}
`}</style>
</li>
Expand Down
4 changes: 0 additions & 4 deletions src/components/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,7 @@ export const SiteFooter = () => {
}
.copy {
text-transform: uppercase;
opacity: 0.5;
}
small {
font-family: var(--monospace);
}
`}</style>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui-shell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { useDataSource } from "@hooks/useDataSource";
import { ErrorBoundary, ErrorFallback } from "./errors";
import { useIsomorphicLayoutEffect } from "./portal";

const myErrorHandler = (error: Error, info: { componentStack: string }) => {
const customErrorHandler = (error: Error, info: { componentStack: string }) => {
console.log(error, info.componentStack);
};

Expand All @@ -17,7 +17,7 @@ export const UIShell: React.FC = ({ children }) => {
ds.auth.check();
}, [ds]);
return (
<ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
<ErrorBoundary FallbackComponent={ErrorFallback} onError={customErrorHandler}>
<div className="outer">
<UIHeader />
<main>{children}</main>
Expand Down
64 changes: 32 additions & 32 deletions src/pages/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const SettingsPage = () => {
fileExtension: dataSource.settings.fileExtension || ".md"
}));

const markdownFormik = useFormik<ILocalSettings>({
const markdownForm = useFormik<ILocalSettings>({
initialValues: initialMarkdownValues.current(),
validationSchema: adaptedSchemas.localSettings,
onSubmit(values) {
Expand All @@ -55,7 +55,7 @@ const SettingsPage = () => {
}
});

const passwordFormik = useFormik<IPasswordSettings>({
const passwordForm = useFormik<IPasswordSettings>({
initialValues: {
oldPassword: "",
newPassword: "",
Expand All @@ -68,7 +68,7 @@ const SettingsPage = () => {
validationSchema: adaptedSchemas.updatePassword
});

const userFormik = useFormik<IUserFormValues>({
const userForm = useFormik<IUserFormValues>({
initialValues: { ...data?.settings },
onSubmit(values) {
dataSource.settings.update(values);
Expand Down Expand Up @@ -119,19 +119,19 @@ const SettingsPage = () => {
<h4>User Settings</h4>
</div>
<div className="form">
<form onSubmit={userFormik.handleSubmit}>
<form onSubmit={userForm.handleSubmit}>
<div>
<UIInput
testID="SETTINGS_USERNAME_INPUT"
placeholder="username"
label="Username"
name="username"
autoComplete="username"
value={userFormik.values.username}
onChange={userFormik.handleChange}
value={userForm.values.username}
onChange={userForm.handleChange}
/>
{userFormik.errors.username && (
<UIInputError>{userFormik.errors.username}</UIInputError>
{userForm.errors.username && (
<UIInputError>{userForm.errors.username}</UIInputError>
)}
</div>
<div>
Expand All @@ -142,18 +142,18 @@ const SettingsPage = () => {
autoComplete="email"
type="email"
name="email"
value={userFormik.values.email}
onChange={userFormik.handleChange}
value={userForm.values.email}
onChange={userForm.handleChange}
/>
{userFormik.errors.email && (
<UIInputError>{userFormik.errors.email}</UIInputError>
{userForm.errors.email && (
<UIInputError>{userForm.errors.email}</UIInputError>
)}
</div>
<div className="action">
<button
className="base-button"
type="submit"
disabled={userFormik.isSubmitting}>
disabled={userForm.isSubmitting}>
Save
</button>
</div>
Expand All @@ -166,20 +166,20 @@ const SettingsPage = () => {
<h4>Password</h4>
</div>
<div className="form">
<form onSubmit={passwordFormik.handleSubmit}>
<form onSubmit={passwordForm.handleSubmit}>
<input type="hidden" name="username" value={data.settings.username} />
<div>
<UIInput
label="Old Password"
name="oldPassword"
type={!isOpen ? "password" : "text"}
placeholder="*********"
value={passwordFormik.values.oldPassword}
onChange={passwordFormik.handleChange}
value={passwordForm.values.oldPassword}
onChange={passwordForm.handleChange}
autoComplete="current-password"
/>
{passwordFormik.errors.oldPassword && (
<UIInputError>{passwordFormik.errors.oldPassword}</UIInputError>
{passwordForm.errors.oldPassword && (
<UIInputError>{passwordForm.errors.oldPassword}</UIInputError>
)}
</div>
<div>
Expand All @@ -188,12 +188,12 @@ const SettingsPage = () => {
name="newPassword"
type={!isOpen ? "password" : "text"}
placeholder="*********"
value={passwordFormik.values.newPassword}
onChange={passwordFormik.handleChange}
value={passwordForm.values.newPassword}
onChange={passwordForm.handleChange}
autoComplete="new-password"
/>
{passwordFormik.errors.newPassword && (
<UIInputError>{passwordFormik.errors.newPassword}</UIInputError>
{passwordForm.errors.newPassword && (
<UIInputError>{passwordForm.errors.newPassword}</UIInputError>
)}
</div>

Expand All @@ -203,12 +203,12 @@ const SettingsPage = () => {
name="confirmPassword"
type={!isOpen ? "password" : "text"}
placeholder="*********"
value={passwordFormik.values.confirmPassword}
onChange={passwordFormik.handleChange}
value={passwordForm.values.confirmPassword}
onChange={passwordForm.handleChange}
autoComplete="new-password"
/>
{passwordFormik.errors.confirmPassword && (
<UIInputError>{passwordFormik.errors.confirmPassword}</UIInputError>
{passwordForm.errors.confirmPassword && (
<UIInputError>{passwordForm.errors.confirmPassword}</UIInputError>
)}
</div>

Expand All @@ -228,7 +228,7 @@ const SettingsPage = () => {
<button
className="base-button"
type="submit"
disabled={passwordFormik.isSubmitting}>
disabled={passwordForm.isSubmitting}>
Save
</button>
</div>
Expand All @@ -244,21 +244,21 @@ const SettingsPage = () => {
</p>
</div>
<div className="form">
<form onSubmit={markdownFormik.handleSubmit}>
<form onSubmit={markdownForm.handleSubmit}>
<div>
<UIInput
label="File Extension"
{...markdownFormik.getFieldProps("fileExtension")}
{...markdownForm.getFieldProps("fileExtension")}
/>
{markdownFormik.errors["fileExtension"] && (
<UIInputError>{markdownFormik.errors["fileExtension"]}</UIInputError>
{markdownForm.errors["fileExtension"] && (
<UIInputError>{markdownForm.errors["fileExtension"]}</UIInputError>
)}
</div>
<div className="action">
<button
className="base-button"
type="submit"
disabled={markdownFormik.isSubmitting}>
disabled={markdownForm.isSubmitting}>
Save
</button>
</div>
Expand Down

1 comment on commit 5261671

@vercel
Copy link

@vercel vercel bot commented on 5261671 Apr 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

downwrite – ./

downwrite-hephaestus.vercel.app
beta.downwrite.us
downwrite-git-main-hephaestus.vercel.app
alpha.downwrite.us
next.downwrite.us
downwrite.vercel.app

Please sign in to comment.