AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Begin integration of dotnet backend with biergarten nextjs code

Browse Source
This commit is contained in:
Aaron Po
2026-01-26 18:52:16 -05:00
parent 3d8b17320a
commit 7dc7ef4b1a
345 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

494
Website/LICENSE.md Normal file
View File

@@ -0,0 +1,494 @@
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/> Everyone is permitted
to copy and distribute verbatim copies of this license document, but changing it is not
allowed.
Preamble
The GNU General Public License is a free, copyleft license for software and other kinds of
works.
The licenses for most software and other practical works are designed to take away your
freedom to share and change the works. By contrast, the GNU General Public License is
intended to guarantee your freedom to share and change all versions of a program--to make
sure it remains free software for all its users. We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to any other work
released this way by its authors. You can apply it to your programs, too.
When we speak of free software, we are referring to freedom, not price. Our General Public
Licenses are designed to make sure that you have the freedom to distribute copies of free
software (and charge for them if you wish), that you receive source code or can get it if
you want it, that you can change the software or use pieces of it in new free programs,
and that you know you can do these things.
To protect your rights, we need to prevent others from denying you these rights or asking
you to surrender the rights. Therefore, you have certain responsibilities if you
distribute copies of the software, or if you modify it: responsibilities to respect the
freedom of others.
For example, if you distribute copies of such a program, whether gratis or for a fee, you
must pass on to the recipients the same freedoms that you received. You must make sure
that they, too, receive or can get the source code. And you must show them these terms so
they know their rights.
Developers that use the GNU GPL protect your rights with two steps: (1) assert copyright
on the software, and (2) offer you this License giving you legal permission to copy,
distribute and/or modify it.
For the developers' and authors' protection, the GPL clearly explains that there is no
warranty for this free software. For both users' and authors' sake, the GPL requires that
modified versions be marked as changed, so that their problems will not be attributed
erroneously to authors of previous versions.
Some devices are designed to deny users access to install or run modified versions of the
software inside them, although the manufacturer can do so. This is fundamentally
incompatible with the aim of protecting users' freedom to change the software. The
systematic pattern of such abuse occurs in the area of products for individuals to use,
which is precisely where it is most unacceptable. Therefore, we have designed this version
of the GPL to prohibit the practice for those products. If such problems arise
substantially in other domains, we stand ready to extend this provision to those domains
in future versions of the GPL, as needed to protect the freedom of users.
Finally, every program is threatened constantly by software patents. States should not
allow patents to restrict development and use of software on general-purpose computers,
but in those that do, we wish to avoid the special danger that patents applied to a free
program could make it effectively proprietary. To prevent this, the GPL assures that
patents cannot be used to render the program non-free.
The precise terms and conditions for copying, distribution and modification follow.
TERMS AND CONDITIONS
0.Definitions.
"This License" refers to version 3 of the GNU General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of works, such as
semiconductor masks.
"The Program" refers to any copyrightable work licensed under this License. Each licensee
is addressed as "you". "Licensees" and "recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work in a fashion
requiring copyright permission, other than the making of an exact copy. The resulting work
is called a "modified version" of the earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based on the Program.
To "propagate" a work means to do anything with it that, without permission, would make
you directly or secondarily liable for infringement under applicable copyright law, except
executing it on a computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification), making available to the public, and in some
countries other activities as well.
To "convey" a work means any kind of propagation that enables other parties to make or
receive copies. Mere interaction with a user through a computer network, with no transfer
of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices" to the extent that it
includes a convenient and prominently visible feature that (1) displays an appropriate
copyright notice, and (2) tells the user that there is no warranty for the work (except to
the extent that warranties are provided), that licensees may convey the work under this
License, and how to view a copy of this License. If the interface presents a list of user
commands or options, such as a menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work for making modifications
to it. "Object code" means any non-source form of a work.
A "Standard Interface" means an interface that either is an official standard defined by a
recognized standards body, or, in the case of interfaces specified for a particular
programming language, one that is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other than the work as a
whole, that (a) is included in the normal form of packaging a Major Component, but which
is not part of that Major Component, and (b) serves only to enable use of the work with
that Major Component, or to implement a Standard Interface for which an implementation is
available to the public in source code form. A "Major Component", in this context, means a
major essential component (kernel, window system, and so on) of the specific operating
system (if any) on which the executable work runs, or a compiler used to produce the work,
or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all the source code needed
to generate, install, and (for an executable work) run the object code and to modify the
work, including scripts to control those activities. However, it does not include the
work's System Libraries, or general-purpose tools or generally available free programs
which are used unmodified in performing those activities but which are not part of the
work. For example, Corresponding Source includes interface definition files associated
with source files for the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require, such as by intimate
data communication or control flow between those subprograms and other parts of the work.
The Corresponding Source need not include anything that users can regenerate automatically
from other parts of the Corresponding Source.
The Corresponding Source for a work in source code form is that same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of copyright on the
Program, and are irrevocable provided the stated conditions are met. This License
explicitly affirms your unlimited permission to run the unmodified Program. The output
from running a covered work is covered by this License only if the output, given its
content, constitutes a covered work. This License acknowledges your rights of fair use or
other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not convey, without conditions
so long as your license otherwise remains in force. You may convey covered works to others
for the sole purpose of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with the terms of this
License in conveying all material for which you do not control copyright. Those thus
making or running the covered works for you must do so exclusively on your behalf, under
your direction and control, on terms that prohibit them from making any copies of your
copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under the conditions stated
below. Sublicensing is not allowed; section 10 makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological measure under any
applicable law fulfilling obligations under article 11 of the WIPO copyright treaty
adopted on 20 December 1996, or similar laws prohibiting or restricting circumvention of
such measures.
When you convey a covered work, you waive any legal power to forbid circumvention of
technological measures to the extent such circumvention is effected by exercising rights
under this License with respect to the covered work, and you disclaim any intention to
limit operation or modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of technological
measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you receive it, in any
medium, provided that you conspicuously and appropriately publish on each copy an
appropriate copyright notice; keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code; keep intact all
notices of the absence of any warranty; and give all recipients a copy of this License
along with the Program.
You may charge any price or no price for each copy that you convey, and you may offer
support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to produce it from the
Program, in the form of source code under the terms of section 4, provided that you also
meet all of these conditions:
a) The work must carry prominent notices stating that you modified it, and giving a relevant date.
b) The work must carry prominent notices stating that it is released under this License and any conditions added under section 7. This requirement modifies the requirement in section 4 to "keep intact all notices".
c) You must license the entire work, as a whole, under this License to anyone who comes into possession of a copy. This License will therefore apply, along with any applicable section 7 additional terms, to the whole of the work, and all its parts, regardless of how they are packaged. This License gives no permission to license the work in any other way, but it does not invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display Appropriate Legal Notices; however, if the Program has interactive interfaces that do not display Appropriate Legal Notices, your work need not make them do so.
A compilation of a covered work with other separate and independent works, which are not
by their nature extensions of the covered work, and which are not combined with it such as
to form a larger program, in or on a volume of a storage or distribution medium, is called
an "aggregate" if the compilation and its resulting copyright are not used to limit the
access or legal rights of the compilation's users beyond what the individual works permit.
Inclusion of a covered work in an aggregate does not cause this License to apply to the
other parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms of sections 4 and 5,
provided that you also convey the machine-readable Corresponding Source under the terms of
this License, in one of these ways:
a) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by the Corresponding Source fixed on a durable physical medium customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product (including a physical distribution medium), accompanied by a written offer, valid for at least three years and valid for as long as you offer spare parts or customer support for that product model, to give anyone who possesses the object code either (1) a copy of the Corresponding Source for all the software in the product that is covered by this License, on a durable physical medium customarily used for software interchange, for a price no more than your reasonable cost of physically performing this conveying of source, or (2) access to copy the Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the written offer to provide the Corresponding Source. This alternative is allowed only occasionally and noncommercially, and only if you received the object code with such an offer, in accord with subsection 6b.
d) Convey the object code by offering access from a designated place (gratis or for a charge), and offer equivalent access to the Corresponding Source in the same way through the same place at no further charge. You need not require recipients to copy the Corresponding Source along with the object code. If the place to copy the object code is a network server, the Corresponding Source may be on a different server (operated by you or a third party) that supports equivalent copying facilities, provided you maintain clear directions next to the object code saying where to find the Corresponding Source. Regardless of what server hosts the Corresponding Source, you remain obligated to ensure that it is available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided you inform other peers where the object code and corresponding source of the work are being offered to the general public at no charge under subsection 6d.
A separable portion of the object code, whose source code is excluded from the
Corresponding Source as a System Library, need not be included in conveying the object
code work.
A "User Product" is either (1) a "consumer product", which means any tangible personal
property which is normally used for personal, family, or household purposes, or (2)
anything designed or sold for incorporation into a dwelling. In determining whether a
product is a consumer product, doubtful cases shall be resolved in favor of coverage. For
a particular product received by a particular user, "normally used" refers to a typical or
common use of that class of product, regardless of the status of the particular user or of
the way in which the particular user actually uses, or expects or is expected to use, the
product. A product is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent the only
significant mode of use of the product.
"Installation Information" for a User Product means any methods, procedures, authorization
keys, or other information required to install and execute modified versions of a covered
work in that User Product from a modified version of its Corresponding Source. The
information must suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because modification has been made.
If you convey an object code work under this section in, or with, or specifically for use
in, a User Product, and the conveying occurs as part of a transaction in which the right
of possession and use of the User Product is transferred to the recipient in perpetuity or
for a fixed term (regardless of how the transaction is characterized), the Corresponding
Source conveyed under this section must be accompanied by the Installation Information.
But this requirement does not apply if neither you nor any third party retains the ability
to install modified object code on the User Product (for example, the work has been
installed in ROM).
The requirement to provide Installation Information does not include a requirement to
continue to provide support service, warranty, or updates for a work that has been
modified or installed by the recipient, or for the User Product in which it has been
modified or installed. Access to a network may be denied when the modification itself
materially and adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided, in accord with this
section must be in a format that is publicly documented (and with an implementation
available to the public in source code form), and must require no special password or key
for unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this License by making
exceptions from one or more of its conditions. Additional permissions that are applicable
to the entire Program shall be treated as though they were included in this License, to
the extent that they are valid under applicable law. If additional permissions apply only
to part of the Program, that part may be used separately under those permissions, but the
entire Program remains governed by this License without regard to the additional
permissions.
When you convey a copy of a covered work, you may at your option remove any additional
permissions from that copy, or from any part of it. (Additional permissions may be written
to require their own removal in certain cases when you modify the work.) You may place
additional permissions on material, added by you to a covered work, for which you have or
can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you add to a covered
work, you may (if authorized by the copyright holders of that material) supplement the
terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the
terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or
author attributions in that material or in the Appropriate Legal
Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or
requiring that modified versions of such material be marked in
reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or
authors of the material; or
e) Declining to grant rights under trademark law for use of some
trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that
material by anyone who conveys the material (or modified versions of
it) with contractual assumptions of liability to the recipient, for
any liability that these contractual assumptions directly impose on
those licensors and authors.
All other non-permissive additional terms are considered "further restrictions" within the
meaning of section 10. If the Program as you received it, or any part of it, contains a
notice stating that it is governed by this License along with a term that is a further
restriction, you may remove that term. If a license document contains a further
restriction but permits relicensing or conveying under this License, you may add to a
covered work material governed by the terms of that license document, provided that the
further restriction does not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you must place, in the
relevant source files, a statement of the additional terms that apply to those files, or a
notice indicating where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the form of a separately
written license, or stated as exceptions; the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly provided under this
License. Any attempt otherwise to propagate or modify it is void, and will automatically
terminate your rights under this License (including any patent licenses granted under the
third paragraph of section 11).
However, if you cease all violation of this License, then your license from a particular
copyright holder is reinstated (a) provisionally, unless and until the copyright holder
explicitly and finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means prior to 60 days
after the cessation.
Moreover, your license from a particular copyright holder is reinstated permanently if the
copyright holder notifies you of the violation by some reasonable means, this is the first
time you have received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after your receipt of the
notice.
Termination of your rights under this section does not terminate the licenses of parties
who have received copies or rights from you under this License. If your rights have been
terminated and not permanently reinstated, you do not qualify to receive new licenses for
the same material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or run a copy of the
Program. Ancillary propagation of a covered work occurring solely as a consequence of
using peer-to-peer transmission to receive a copy likewise does not require acceptance.
However, nothing other than this License grants you permission to propagate or modify any
covered work. These actions infringe copyright if you do not accept this License.
Therefore, by modifying or propagating a covered work, you indicate your acceptance of
this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically receives a license from
the original licensors, to run, modify and propagate that work, subject to this License.
You are not responsible for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an organization, or
substantially all assets of one, or subdividing an organization, or merging organizations.
If propagation of a covered work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever licenses to the work
the party's predecessor in interest had or could give under the previous paragraph, plus a
right to possession of the Corresponding Source of the work from the predecessor in
interest, if the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the rights granted or
affirmed under this License. For example, you may not impose a license fee, royalty, or
other charge for exercise of rights granted under this License, and you may not initiate
litigation (including a cross-claim or counterclaim in a lawsuit) alleging that any patent
claim is infringed by making, using, selling, offering for sale, or importing the Program
or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this License of the Program
or a work on which the Program is based. The work thus licensed is called the
contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims owned or controlled by the
contributor, whether already acquired or hereafter acquired, that would be infringed by
some manner, permitted by this License, of making, using, or selling its contributor
version, but do not include claims that would be infringed only as a consequence of
further modification of the contributor version. For purposes of this definition,
"control" includes the right to grant patent sublicenses in a manner consistent with the
requirements of this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free patent license under
the contributor's essential patent claims, to make, use, sell, offer for sale, import and
otherwise run, modify and propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express agreement or
commitment, however denominated, not to enforce a patent (such as an express permission to
practice a patent or covenant not to sue for patent infringement). To "grant" such a
patent license to a party means to make such an agreement or commitment not to enforce a
patent against the party.
If you convey a covered work, knowingly relying on a patent license, and the Corresponding
Source of the work is not available for anyone to copy, free of charge and under the terms
of this License, through a publicly available network server or other readily accessible
means, then you must either (1) cause the Corresponding Source to be so available, or (2)
arrange to deprive yourself of the benefit of the patent license for this particular work,
or (3) arrange, in a manner consistent with the requirements of this License, to extend
the patent license to downstream recipients. "Knowingly relying" means you have actual
knowledge that, but for the patent license, your conveying the covered work in a country,
or your recipient's use of the covered work in a country, would infringe one or more
identifiable patents in that country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or arrangement, you convey, or
propagate by procuring conveyance of, a covered work, and grant a patent license to some
of the parties receiving the covered work authorizing them to use, propagate, modify or
convey a specific copy of the covered work, then the patent license you grant is
automatically extended to all recipients of the covered work and works based on it.
A patent license is "discriminatory" if it does not include within the scope of its
coverage, prohibits the exercise of, or is conditioned on the non-exercise of one or more
of the rights that are specifically granted under this License. You may not convey a
covered work if you are a party to an arrangement with a third party that is in the
business of distributing software, under which you make payment to the third party based
on the extent of your activity of conveying the work, and under which the third party
grants, to any of the parties who would receive the covered work from you, a
discriminatory patent license (a) in connection with copies of the covered work conveyed
by you (or copies made from those copies), or (b) primarily for and in connection with
specific products or compilations that contain the covered work, unless you entered into
that arrangement, or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting any implied license or
other defenses to infringement that may otherwise be available to you under applicable
patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or otherwise) that
contradict the conditions of this License, they do not excuse you from the conditions of
this License. If you cannot convey a covered work so as to satisfy simultaneously your
obligations under this License and any other pertinent obligations, then as a consequence
you may not convey it at all. For example, if you agree to terms that obligate you to
collect a royalty for further conveying from those to whom you convey the Program, the
only way you could satisfy both those terms and this License would be to refrain entirely
from conveying the Program.
13. Use with the GNU Affero General Public License.
Notwithstanding any other provision of this License, you have permission to link or
combine any covered work with a work licensed under version 3 of the GNU Affero General
Public License into a single combined work, and to convey the resulting work. The terms of
this License will continue to apply to the part which is the covered work, but the special
requirements of the GNU Affero General Public License, section 13, concerning interaction
through a network will apply to the combination as such.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of the GNU General
Public License from time to time. Such new versions will be similar in spirit to the
present version, but may differ in detail to address new problems or concerns.
Each version is given a distinguishing version number. If the Program specifies that a
certain numbered version of the GNU General Public License "or any later version" applies
to it, you have the option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software Foundation. If the Program
does not specify a version number of the GNU General Public License, you may choose any
version ever published by the Free Software Foundation.
If the Program specifies that a proxy can decide which future versions of the GNU General
Public License can be used, that proxy's public statement of acceptance of a version
permanently authorizes you to choose that version for the Program.
Later license versions may give you additional or different permissions. However, no
additional obligations are imposed on any author or copyright holder as a result of your
choosing to follow a later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT
WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE
PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT
NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.
SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR
OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY COPYRIGHT
HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE
LIABLE TO YOU FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL
DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH
HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided above cannot be given
local legal effect according to their terms, reviewing courts shall apply local law that
most closely approximates an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a copy of the Program in
return for a fee.

219
Website/README.md Normal file
View File

@@ -0,0 +1,219 @@
# The Biergarten App
## About
The Biergarten App is a web application designed for beer lovers to share their favorite
brews and breweries with like-minded people online.
This application's stack consists of Next.js, Prisma and Neon Postgres. I'm motivated to
learn more about these technologies while exploring my passion for beer.
I've also incorporated different APIs into the application, such as the Cloudinary API for
image uploading, the SparkPost API for email services as well as Mapbox for geolocation
and map data.
To handle serverless functions (API routes), I use the next-connect package.
On the client-side, I use Tailwind CSS, Headless UI and Daisy UI for styling to create a
visually appealing and user-friendly interface.
I'm sharing my code publicly so that others can learn from it and use it as a reference
for their own projects.
### Some beer terminology
In this app you will encounter various beer related terms. Here is a list of terms used in
this app and their definitions.
#### ABV
[Alcohol by volume](https://en.wikipedia.org/wiki/Alcohol_by_volume) (abbreviated as ABV)
is a standard measure of how much alcohol (ethanol) is contained in a given volume of an
alcoholic beverage (expressed as a volume percent).
#### IBU
The
[International Bitterness Units](https://en.wikipedia.org/wiki/Beer_measurement#Bitterness)
scale, or IBU, is used to approximately quantify the bitterness of beer. This scale is not
measured on the perceived bitterness of the beer, but rather the amount of a component of
beer known as iso-alpha acids.
## Database Schema
![Schema](./schema.svg)
## Technologies
### General
- [Next.js](https://nextjs.org/)
- A React based framework for building web applications offering several features such
as server side rendering, static site generation and API routes.
### Client
- [SWR](https://swr.vercel.app/)
- A React Hooks library for fetching data with support for caching, revalidation and
error handling.
- [Tailwind CSS](https://tailwindcss.com/)
- A popular open-source utility-first CSS framework that provides pre-defined classes to
style HTML elements.
- [Headless UI](https://headlessui.dev/)
- A set of completely unstyled, fully accessible UI components, designed to integrate
beautifully with Tailwind CSS.
- [Daisy UI](https://daisyui.com/)
- A component library for Tailwind CSS that provides ready-to-use components for
building user interfaces.
### Server
- [Prisma](https://www.prisma.io/)
- An open-source ORM for Node.js and TypeScript applications.
- [Neon Postgres](https://neon.tech/)
- A managed PostgreSQL database service powered by Neon.
- [Cloudinary](https://cloudinary.com/)
- A cloud-based image and video management service that provides developers with an easy
way to upload, store, and manipulate media assets.
- [SparkPost](https://www.sparkpost.com/)
- A cloud-based email delivery service that provides developers with an easy way to send
transactional and marketing emails.
- [Mapbox](https://www.mapbox.com/)
- A suite of open-source mapping tools that allows developers to add custom maps,
search, and navigation into their applications.
- [next-connect](https://github.com/hoangvvo/next-connect#readme)
- A promise-based method routing and middleware layer for Next.js.
## How to run locally
### Prerequisites
Before you can run this application locally, you will need to have the following installed
on your machine:
- [Node.js](https://nodejs.org/en/)
- [npm (version 8 or higher)](https://www.npmjs.com/get-npm)
You will also need to create a free account with the following services:
- [Cloudinary](https://cloudinary.com/users/register/free)
- [SparkPost](https://www.sparkpost.com/)
- [Neon Postgres](https://neon.tech/)
- [Mapbox](https://account.mapbox.com/auth/signup/)
### Setup
1. Clone this repository and navigate to the project directory.
```bash
git clone https://github.com/aaronpo97/the-biergarten-app
cd the-biergarten-app
```
2. Run the following command to install the dependencies.
```bash
npm install
```
3. Run the following script to create a `.env` file in the root directory of the project
and add the following environment variables. Update these variables with your own
values.
```bash
echo "BASE_URL=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_KEY=
CLOUDINARY_SECRET=
CONFIRMATION_TOKEN_SECRET=
RESET_PASSWORD_TOKEN_SECRET=
SESSION_SECRET=
SESSION_TOKEN_NAME=
SESSION_MAX_AGE=
NODE_ENV=
POSTGRES_PRISMA_URL=
POSTGRES_URL_NON_POOLING=
SHADOW_DATABASE_URL=
ADMIN_PASSWORD=
MAPBOX_ACCESS_TOKEN=
SPARKPOST_API_KEY=
SPARKPOST_SENDER_ADDRESS=" > .env
```
### Explanation of environment variables
- `BASE_URL` is the base URL of the application.
- For example, if you are running the application locally, you can set this to
`http://localhost:3000`.
- `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME`, `CLOUDINARY_KEY`, and `CLOUDINARY_SECRET` are the
credentials for your Cloudinary account.
- You can create a free account [here](https://cloudinary.com/users/register/free).
- `CONFIRMATION_TOKEN_SECRET` is the secret used to sign the confirmation token used for
email confirmation.
- You can generate a random string using the`openssl rand -base64 127` command.
- `RESET_PASSWORD_TOKEN_SECRET` is the secret used to sign the reset password token.
- You can generate a random string using the `openssl rand -base64 127` command.
- `SESSION_SECRET` is the secret used to sign the session cookie.
- Use the same command as above to generate a random string.
- `SESSION_TOKEN_NAME` is the name of the session cookie.
- You can set this to `biergarten`.
- `SESSION_MAX_AGE` is the maximum age of the session cookie in seconds.
- You can set this to `604800` (1 week).
- `POSTGRES_PRISMA_URL`is a pooled connection string for your Neon Postgres database.
- `POSTGRES_URL_NON_POOLING` is a non-pooled connection string for your Neon Postgres
database used for migrations.
- `SHADOW_DATABASE_URL` is a connection string for a secondary database used for
migrations to detect schema drift.
- You can create a free account [here](https://neon.tech).
- Consult the [docs](https://neon.tech/docs/guides/prisma) for more information.
- `MAPBOX_ACCESS_TOKEN` is the access token for your Mapbox account.
- You can create a free account [here](https://account.mapbox.com/auth/signup/).
- `NODE_ENV` is the environment in which the application is running.
- You can set this to `development` or `production`.
- `SPARKPOST_API_KEY` is the API key for your SparkPost account.
- You can create a free account [here](https://www.sparkpost.com/).
- `SPARKPOST_SENDER_ADDRESS` is the email address that will be used to send emails.
- `ADMIN_PASSWORD` is the password for the admin account created when seeding the
database.
1. Initialize the database and run the migrations.
```bash
npx prisma generate
npx prisma migrate dev
```
5. Seed the database with some initial data.
```bash
npm run seed
```
6. Start the application.
```bash
npm run dev
```
## License
The Biergarten App is licensed under the GNU General Public License v3.0. This means that
anyone is free to use, modify, and distribute the code as long as they also distribute
their modifications under the same license.
I encourage anyone who uses this code for educational purposes to attribute me as the
original author, and to provide a link to this repository.
By contributing to this repository, you agree to license your contributions under the same
license as the project.
If you have any questions or concerns about the license, please feel free to submit an
issue to this repository.
I hope that this project will be useful to other developers and beer enthusiasts who are
interested in learning about web development with Next.js, Prisma, Postgres, and other
technologies.

15
Website/next.config.js Normal file
View File

@@ -0,0 +1,15 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
remotePatterns: [
{ hostname: 'picsum.photos', protocol: 'https', pathname: '**' },
{ hostname: 'res.cloudinary.com', protocol: 'https', pathname: '**' },
],
},
};
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer(nextConfig);

10881
Website/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

98
Website/package.json Normal file
View File

@@ -0,0 +1,98 @@
{
"name": "biergarten",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"prestart": "npm run build",
"start": "next start",
"lint": "next lint",
"clear-db": "npx ts-node ./src/prisma/seed/clear/index.ts",
"format": "npx prettier . --write; npx prisma format;",
"format-watch": "npx onchange \"**/*\" -- prettier --write --ignore-unknown {{changed}}",
"seed": "npx --max-old-space-size=4096 ts-node ./src/prisma/seed/index.ts"
},
"dependencies": {
"@hapi/iron": "^7.0.1",
"@headlessui/react": "^1.7.15",
"@headlessui/tailwindcss": "^0.2.0",
"@hookform/resolvers": "^3.3.1",
"@mapbox/mapbox-sdk": "^0.15.2",
"@mapbox/search-js-core": "^1.0.0-beta.17",
"@mapbox/search-js-react": "^1.0.0-beta.17",
"@next/bundle-analyzer": "^14.0.3",
"@prisma/client": "^5.7.0",
"@react-email/components": "^0.0.11",
"@react-email/render": "^0.0.9",
"@react-email/tailwind": "^0.0.12",
"@vercel/analytics": "^1.1.0",
"argon2": "^0.31.1",
"classnames": "^2.5.1",
"cloudinary": "^1.41.0",
"cookie": "^0.7.0",
"date-fns": "^2.30.0",
"dotenv": "^16.3.1",
"jsonwebtoken": "^9.0.1",
"lodash": "^4.17.21",
"mapbox-gl": "^3.4.0",
"multer": "^1.4.5-lts.1",
"next": "^14.2.22",
"next-cloudinary": "^5.10.0",
"next-connect": "^1.0.0-next.3",
"passport": "^0.6.0",
"passport-local": "^1.0.0",
"pino": "^10.0.0",
"react": "^18.2.0",
"react-daisyui": "^5.0.0",
"react-dom": "^18.2.0",
"react-email": "^1.9.5",
"react-hook-form": "^7.45.2",
"react-hot-toast": "^2.4.1",
"react-icons": "^4.10.1",
"react-intersection-observer": "^9.5.2",
"react-map-gl": "^7.1.7",
"react-responsive-carousel": "^3.2.23",
"swr": "^2.2.0",
"theme-change": "^2.5.0",
"zod": "^3.21.4"
},
"devDependencies": {
"@faker-js/faker": "^8.3.1",
"@types/cookie": "^0.5.1",
"@types/express": "^4.17.21",
"@types/jsonwebtoken": "^9.0.2",
"@types/lodash": "^4.14.195",
"@types/mapbox__mapbox-sdk": "^0.13.4",
"@types/multer": "^1.4.7",
"@types/node": "^20.4.2",
"@types/passport-local": "^1.0.35",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vercel/fetch": "^7.0.0",
"autoprefixer": "^10.4.14",
"daisyui": "^4.7.2",
"dotenv-cli": "^7.2.1",
"eslint": "^8.51.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-airbnb-typescript": "17.1.0",
"eslint-config-next": "^13.5.4",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-react": "^7.33.2",
"generate-password": "^1.7.1",
"onchange": "^7.1.0",
"postcss": "^8.4.26",
"prettier": "^3.0.0",
"prettier-plugin-jsdoc": "^1.0.2",
"prettier-plugin-tailwindcss": "^0.5.7",
"prisma": "^5.7.0",
"tailwindcss": "^3.4.1",
"tailwindcss-animated": "^1.0.1",
"ts-node": "^10.9.1",
"typescript": "^5.3.2"
},
"prisma": {
"schema": "./src/prisma/schema.prisma",
"seed": "npm run seed"
}
}

6
Website/postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

BIN
Website/public/background.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

6
Website/public/favicon/about.txt Normal file
View File

@@ -0,0 +1,6 @@
This favicon was generated using the following graphics from Twitter Twemoji:
- Graphics Title: 1f37a.svg
- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f37a.svg
- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

BIN
Website/public/favicon/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
Website/public/favicon/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
Website/public/favicon/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
Website/public/favicon/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 515 B

BIN
Website/public/favicon/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 961 B

BIN
Website/public/favicon/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

11
Website/public/favicon/site.webmanifest Normal file
View File

@@ -0,0 +1,11 @@
{
"name": "",
"short_name": "",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

5
Website/public/robots.txt Normal file
View File

@@ -0,0 +1,5 @@
User-agent: *
Disallow: /api/
Disallow: /login/
Disallow: /register/
Disallow: /users/

2697
Website/schema.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 256 KiB

176
Website/src/components/Account/AccountInfo.tsx Normal file
View File

@@ -0,0 +1,176 @@
import validateUsernameRequest from '@/requests/users/profile/validateUsernameRequest';
import { BaseCreateUserSchema } from '@/services/users/auth/schema/CreateUserValidationSchemas';
import { Switch } from '@headlessui/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { Dispatch, FC, useContext } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import UserContext from '@/contexts/UserContext';
import createErrorToast from '@/util/createErrorToast';
import { toast } from 'react-hot-toast';
import { AccountPageAction, AccountPageState } from '@/reducers/accountPageReducer';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormTextInput from '../ui/forms/FormTextInput';
import { sendEditUserRequest, validateEmailRequest } from '@/requests/users/auth';
interface AccountInfoProps {
pageState: AccountPageState;
dispatch: Dispatch<AccountPageAction>;
}
const AccountInfo: FC<AccountInfoProps> = ({ pageState, dispatch }) => {
const { user, mutate } = useContext(UserContext);
const EditUserSchema = BaseCreateUserSchema.pick({
username: true,
email: true,
firstName: true,
lastName: true,
}).extend({
email: z
.string()
.email({ message: 'Email must be a valid email address.' })
.refine(
async (email) => {
if (user!.email === email) return true;
return validateEmailRequest({ email });
},
{ message: 'Email is already taken.' },
),
username: z
.string()
.min(1, { message: 'Username must not be empty.' })
.max(20, { message: 'Username must be less than 20 characters.' })
.refine(
async (username) => {
if (user!.username === username) return true;
return validateUsernameRequest(username);
},
{ message: 'Username is already taken.' },
),
});
const onSubmit = async (data: z.infer<typeof EditUserSchema>) => {
const loadingToast = toast.loading('Submitting edits...');
try {
await sendEditUserRequest({ user: user!, data });
toast.remove(loadingToast);
toast.success('Edits submitted successfully.');
dispatch({ type: 'CLOSE_ALL' });
await mutate!();
} catch (error) {
dispatch({ type: 'CLOSE_ALL' });
toast.remove(loadingToast);
createErrorToast(error);
await mutate!();
}
};
const { register, handleSubmit, formState, reset } = useForm<
z.infer<typeof EditUserSchema>
>({
resolver: zodResolver(EditUserSchema),
});
return (
<div className="card mt-8">
<div className="card-body flex flex-col space-y-3">
<div className="flex w-full items-center justify-between space-x-5">
<div className="">
<h1 className="text-lg font-bold">Edit Your Account Info</h1>
<p>Update your personal account information.</p>
</div>
<div>
<Switch
className="toggle"
id="edit-toggle"
checked={pageState.accountInfoOpen}
onClick={async () => {
dispatch({ type: 'TOGGLE_ACCOUNT_INFO_VISIBILITY' });
await mutate!();
reset({
username: user!.username,
email: user!.email,
firstName: user!.firstName,
lastName: user!.lastName,
});
}}
/>
</div>
</div>
{pageState.accountInfoOpen && (
<form
className="form-control space-y-5"
onSubmit={handleSubmit(onSubmit)}
noValidate
>
<div>
<FormInfo>
<FormLabel htmlFor="username">Username</FormLabel>
<FormError>{formState.errors.username?.message}</FormError>
</FormInfo>
<FormTextInput
type="text"
disabled={!pageState.accountInfoOpen || formState.isSubmitting}
error={!!formState.errors.username}
id="username"
formValidationSchema={register('username')}
/>
<FormInfo>
<FormLabel htmlFor="email">Email</FormLabel>
<FormError>{formState.errors.email?.message}</FormError>
</FormInfo>
<FormTextInput
type="email"
disabled={!pageState.accountInfoOpen || formState.isSubmitting}
error={!!formState.errors.email}
id="email"
formValidationSchema={register('email')}
/>
<div className="flex space-x-3">
<div className="w-1/2">
<FormInfo>
<FormLabel htmlFor="firstName">First Name</FormLabel>
<FormError>{formState.errors.firstName?.message}</FormError>
</FormInfo>
<FormTextInput
type="text"
disabled={!pageState.accountInfoOpen || formState.isSubmitting}
error={!!formState.errors.firstName}
id="firstName"
formValidationSchema={register('firstName')}
/>
</div>
<div className="w-1/2">
<FormInfo>
<FormLabel htmlFor="lastName">Last Name</FormLabel>
<FormError>{formState.errors.lastName?.message}</FormError>
</FormInfo>
<FormTextInput
type="text"
disabled={!pageState.accountInfoOpen || formState.isSubmitting}
error={!!formState.errors.lastName}
id="lastName"
formValidationSchema={register('lastName')}
/>
</div>
</div>
<button
className="btn btn-primary my-5 w-full"
type="submit"
disabled={!pageState.accountInfoOpen || formState.isSubmitting}
>
Save Changes
</button>
</div>
</form>
)}
</div>
</div>
);
};
export default AccountInfo;

82
Website/src/components/Account/BeerPostsByUser.tsx Normal file
View File

@@ -0,0 +1,82 @@
import UserContext from '@/contexts/UserContext';
import useBeerPostsByUser from '@/hooks/data-fetching/beer-posts/useBeerPostsByUser';
import { FC, useContext, MutableRefObject, useRef } from 'react';
import { FaArrowUp } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer';
import BeerCard from '../BeerIndex/BeerCard';
import LoadingCard from '../ui/LoadingCard';
import Spinner from '../ui/Spinner';
const BeerPostsByUser: FC = () => {
const { user } = useContext(UserContext);
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
const PAGE_SIZE = 2;
const { beerPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } =
useBeerPostsByUser({ pageSize: PAGE_SIZE, userId: user!.id });
const { ref: lastBeerPostRef } = useInView({
onChange: (visible) => {
if (!visible || isAtEnd) return;
setSize(size + 1);
},
});
return (
<div className="mt-4" ref={pageRef}>
<div className="grid gap-6 xl:grid-cols-2">
{!!beerPosts.length && !isLoading && (
<>
{beerPosts.map((beerPost, i) => {
return (
<div
key={beerPost.id}
ref={beerPosts.length === i + 1 ? lastBeerPostRef : undefined}
>
<BeerCard post={beerPost} />
</div>
);
})}
</>
)}
{isLoadingMore && (
<>
{Array.from({ length: PAGE_SIZE }, (_, i) => (
<LoadingCard key={i} />
))}
</>
)}
</div>
{(isLoading || isLoadingMore) && (
<div className="flex h-32 w-full items-center justify-center">
<Spinner size="sm" />
</div>
)}
{!!beerPosts.length && isAtEnd && !isLoading && (
<div className="flex h-20 items-center justify-center text-center">
<div className="tooltip tooltip-bottom" data-tip="Scroll back to top of page.">
<button
type="button"
className="btn btn-ghost btn-sm"
aria-label="Scroll back to top of page."
onClick={() => {
pageRef.current?.scrollIntoView({
behavior: 'smooth',
});
}}
>
<FaArrowUp />
</button>
</div>
</div>
)}
{!beerPosts.length && !isLoading && (
<div className="flex h-24 w-full items-center justify-center">
<p className="text-lg font-bold">No posts yet.</p>
</div>
)}
</div>
);
};
export default BeerPostsByUser;

84
Website/src/components/Account/BreweryPostsByUser.tsx Normal file
View File

@@ -0,0 +1,84 @@
import UserContext from '@/contexts/UserContext';
import { FC, useContext, MutableRefObject, useRef } from 'react';
import { FaArrowUp } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer';
import useBreweryPostsByUser from '@/hooks/data-fetching/brewery-posts/useBreweryPostsByUser';
import LoadingCard from '../ui/LoadingCard';
import Spinner from '../ui/Spinner';
import BreweryCard from '../BreweryIndex/BreweryCard';
const BreweryPostsByUser: FC = () => {
const { user } = useContext(UserContext);
const pageRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
const PAGE_SIZE = 2;
const { breweryPosts, setSize, size, isLoading, isLoadingMore, isAtEnd } =
useBreweryPostsByUser({ pageSize: PAGE_SIZE, userId: user!.id });
const { ref: lastBreweryPostRef } = useInView({
onChange: (visible) => {
if (!visible || isAtEnd) return;
setSize(size + 1);
},
});
return (
<div className="mt-4" ref={pageRef}>
<div className="grid gap-6 xl:grid-cols-2">
{!!breweryPosts.length && !isLoading && (
<>
{breweryPosts.map((breweryPost, i) => {
return (
<div
key={breweryPost.id}
ref={breweryPosts.length === i + 1 ? lastBreweryPostRef : undefined}
>
<BreweryCard brewery={breweryPost} />
</div>
);
})}
</>
)}
{isLoadingMore && (
<>
{Array.from({ length: PAGE_SIZE }, (_, i) => (
<LoadingCard key={i} />
))}
</>
)}
</div>
{(isLoading || isLoadingMore) && (
<div className="flex h-32 w-full items-center justify-center">
<Spinner size="sm" />
</div>
)}
{!!breweryPosts.length && isAtEnd && !isLoading && (
<div className="flex h-20 items-center justify-center text-center">
<div className="tooltip tooltip-bottom" data-tip="Scroll back to top of page.">
<button
type="button"
className="btn btn-ghost btn-sm"
aria-label="Scroll back to top of page."
onClick={() => {
pageRef.current?.scrollIntoView({
behavior: 'smooth',
});
}}
>
<FaArrowUp />
</button>
</div>
</div>
)}
{!breweryPosts.length && !isLoading && (
<div className="flex h-24 w-full items-center justify-center">
<p className="text-lg font-bold">No posts yet.</p>
</div>
)}
</div>
);
};
export default BreweryPostsByUser;

96
Website/src/components/Account/DeleteAccount.tsx Normal file
View File

@@ -0,0 +1,96 @@
import UserContext from '@/contexts/UserContext';
import { AccountPageState, AccountPageAction } from '@/reducers/accountPageReducer';
import { Switch } from '@headlessui/react';
import { useRouter } from 'next/router';
import { Dispatch, FunctionComponent, useContext, useRef } from 'react';
import { toast } from 'react-hot-toast';
interface DeleteAccountProps {
pageState: AccountPageState;
dispatch: Dispatch<AccountPageAction>;
}
const DeleteAccount: FunctionComponent<DeleteAccountProps> = ({
dispatch,
pageState,
}) => {
const deleteRef = useRef<null | HTMLDialogElement>(null);
const router = useRouter();
const { user, mutate } = useContext(UserContext);
const onDeleteSubmit = async () => {
deleteRef.current!.close();
const loadingToast = toast.loading(
'Deleting your account. We are sad to see you go. 😭',
);
const request = await fetch(`/api/users/${user?.id}`, {
method: 'DELETE',
});
if (!request.ok) {
throw new Error('Could not delete that user.');
}
toast.remove(loadingToast);
toast.success('Deleted your account. Goodbye. 😓');
await mutate!();
router.push('/');
};
return (
<div className="card w-full space-y-4">
<div className="card-body">
<div className="flex w-full items-center justify-between space-x-5">
<div className="">
<h1 className="text-lg font-bold">Delete Your Account</h1>
<p>Want to leave? Delete your account here.</p>
</div>
<div>
<Switch
className="toggle"
id="edit-toggle"
checked={pageState.deleteAccountOpen}
onClick={() => {
dispatch({ type: 'TOGGLE_DELETE_ACCOUNT_VISIBILITY' });
}}
/>
</div>
</div>
{pageState.deleteAccountOpen && (
<>
<div className="mt-3">
<button
className="btn btn-primary w-full"
onClick={() => deleteRef.current!.showModal()}
>
Delete my account
</button>
<dialog id="delete-modal" className="modal" ref={deleteRef}>
<div className="modal-box text-center">
<h3 className="text-lg font-bold">{`You're about to delete your account.`}</h3>
<p className="">This action is permanent and cannot be reversed.</p>
<div className="modal-action flex-col space-x-0 space-y-3">
<button
className="btn btn-error btn-sm w-full"
onClick={onDeleteSubmit}
>
Okay, delete my account
</button>
<button
className="btn btn-success btn-sm w-full"
onClick={() => deleteRef.current!.close()}
>
Go back
</button>
</div>
</div>
</dialog>
</div>
</>
)}
</div>
</div>
);
};
export default DeleteAccount;

101
Website/src/components/Account/Security.tsx Normal file
View File

@@ -0,0 +1,101 @@
import { Switch } from '@headlessui/react';
import { Dispatch, FunctionComponent } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { UpdatePasswordSchema } from '@/services/users/auth/schema/CreateUserValidationSchemas';
import { AccountPageState, AccountPageAction } from '@/reducers/accountPageReducer';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import { sendUpdatePasswordRequest } from '@/requests/users/auth';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormTextInput from '../ui/forms/FormTextInput';
interface SecurityProps {
pageState: AccountPageState;
dispatch: Dispatch<AccountPageAction>;
}
const Security: FunctionComponent<SecurityProps> = ({ dispatch, pageState }) => {
const { register, handleSubmit, formState, reset } = useForm<
z.infer<typeof UpdatePasswordSchema>
>({
resolver: zodResolver(UpdatePasswordSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof UpdatePasswordSchema>> = async (data) => {
const loadingToast = toast.loading('Changing password.');
try {
await sendUpdatePasswordRequest(data);
toast.remove(loadingToast);
toast.success('Password changed successfully.');
dispatch({ type: 'CLOSE_ALL' });
} catch (error) {
dispatch({ type: 'CLOSE_ALL' });
createErrorToast(error);
}
};
return (
<div className="card w-full space-y-4">
<div className="card-body">
<div className="flex w-full items-center justify-between space-x-5">
<div className="">
<h1 className="text-lg font-bold">Change Your Password</h1>
<p>Update your password to maintain the safety of your account.</p>
</div>
<div>
<Switch
className="toggle"
id="edit-toggle"
checked={pageState.securityOpen}
onClick={() => {
dispatch({ type: 'TOGGLE_SECURITY_VISIBILITY' });
reset();
}}
/>
</div>
</div>
{pageState.securityOpen && (
<form className="form-control" noValidate onSubmit={handleSubmit(onSubmit)}>
<FormInfo>
<FormLabel htmlFor="password">New Password</FormLabel>
<FormError>{formState.errors.password?.message}</FormError>
</FormInfo>
<FormTextInput
type="password"
disabled={!pageState.securityOpen || formState.isSubmitting}
error={!!formState.errors.password}
id="password"
formValidationSchema={register('password')}
/>
<FormInfo>
<FormLabel htmlFor="confirm-password">Confirm Password</FormLabel>
<FormError>{formState.errors.confirmPassword?.message}</FormError>
</FormInfo>
<FormTextInput
type="password"
disabled={!pageState.securityOpen || formState.isSubmitting}
error={!!formState.errors.confirmPassword}
id="confirm-password"
formValidationSchema={register('confirmPassword')}
/>
<button
className="btn btn-primary mt-5"
disabled={!pageState.securityOpen || formState.isSubmitting}
type="submit"
>
Update
</button>
</form>
)}
</div>
</div>
);
};
export default Security;

93
Website/src/components/Account/UpdateProfileForm.tsx Normal file
View File

@@ -0,0 +1,93 @@
import FormError from '@/components/ui/forms/FormError';
import FormInfo from '@/components/ui/forms/FormInfo';
import FormLabel from '@/components/ui/forms/FormLabel';
import FormSegment from '@/components/ui/forms/FormSegment';
import Link from 'next/link';
import FormTextArea from '@/components/ui/forms/FormTextArea';
import { FC } from 'react';
import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
import type {
UseFormHandleSubmit,
SubmitHandler,
FieldErrors,
UseFormRegister,
} from 'react-hook-form';
import { z } from 'zod';
import UpdateProfileSchema from '@/services/users/auth/schema/UpdateProfileSchema';
type UpdateProfileSchemaT = z.infer<typeof UpdateProfileSchema>;
interface UpdateProfileFormProps {
handleSubmit: UseFormHandleSubmit<UpdateProfileSchemaT>;
onSubmit: SubmitHandler<UpdateProfileSchemaT>;
errors: FieldErrors<UpdateProfileSchemaT>;
isSubmitting: boolean;
register: UseFormRegister<UpdateProfileSchemaT>;
user: z.infer<typeof GetUserSchema>;
}
const UpdateProfileForm: FC<UpdateProfileFormProps> = ({
handleSubmit,
onSubmit,
errors,
isSubmitting,
register,
user,
}) => {
return (
<form className="form-control space-y-1" noValidate onSubmit={handleSubmit(onSubmit)}>
<div>
<FormInfo>
<FormLabel htmlFor="userAvatar">Avatar</FormLabel>
<FormError>{errors.userAvatar?.message}</FormError>
</FormInfo>
<FormSegment>
<input
disabled={isSubmitting}
type="file"
id="userAvatar"
className="file-input file-input-bordered w-full"
{...register('userAvatar')}
multiple={false}
/>
</FormSegment>
</div>
<div>
<FormInfo>
<FormLabel htmlFor="bio">Bio</FormLabel>
<FormError>{errors.bio?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
disabled={isSubmitting}
id="bio"
{...register('bio')}
rows={5}
formValidationSchema={register('bio')}
error={!!errors.bio}
placeholder="Bio"
/>
</FormSegment>
</div>
<div className="mt-6 flex w-full flex-col justify-center space-y-3">
<Link
className={`btn btn-secondary rounded-xl ${isSubmitting ? 'btn-disabled' : ''}`}
href={`/users/${user?.id}`}
>
Cancel Changes
</Link>
<button
className="btn btn-primary w-full rounded-xl"
type="submit"
disabled={isSubmitting}
>
Save Changes
</button>
</div>
</form>
);
};
export default UpdateProfileForm;

29
Website/src/components/Account/UpdateProfileLink.tsx Normal file
View File

@@ -0,0 +1,29 @@
import Link from 'next/link';
import React from 'react';
import { FaArrowRight } from 'react-icons/fa';
const UpdateProfileLink: React.FC = () => {
return (
<div className="card">
<div className="card-body flex flex-col space-y-3">
<div className="flex w-full items-center justify-between space-x-5">
<div className="">
<h1 className="text-lg font-bold">Update Your Profile</h1>
<p className="text-sm">You can update your profile information here.</p>
</div>
<div>
<Link
href="/users/account/edit-profile"
className="btn-sk btn btn-circle btn-ghost btn-sm"
>
<FaArrowRight className="text-xl" />
</Link>
</div>
</div>
</div>
</div>
);
};
export default UpdateProfileLink;

39
Website/src/components/Account/UserAvatar.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { FC } from 'react';
import { CldImage } from 'next-cloudinary';
import { z } from 'zod';
import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
import { FaUser } from 'react-icons/fa';
interface UserAvatarProps {
user: {
username: z.infer<typeof GetUserSchema>['username'];
userAvatar: z.infer<typeof GetUserSchema>['userAvatar'];
id: z.infer<typeof GetUserSchema>['id'];
};
}
const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
const { userAvatar } = user;
return !userAvatar ? (
<div
className="mask mask-circle flex h-32 w-full items-center justify-center bg-primary"
aria-label="Default user avatar"
role="img"
>
<span className="h-full text-2xl font-bold text-base-content">
<FaUser className="h-full" />
</span>
</div>
) : (
<CldImage
src={userAvatar.path}
alt="user avatar"
width={1000}
height={1000}
crop="fill"
className="mask mask-circle h-full w-full object-cover"
/>
);
};
export default UserAvatar;

29
Website/src/components/Account/UserPosts.tsx Normal file
View File

@@ -0,0 +1,29 @@
import { Tab } from '@headlessui/react';
import { FC } from 'react';
import BeerPostsByUser from './BeerPostsByUser';
import BreweryPostsByUser from './BreweryPostsByUser';
const UserPosts: FC = () => {
return (
<div className="mt-4">
<div>
<Tab.Group>
<Tab.List className="tabs-boxed tabs grid grid-cols-2">
<Tab className="tab uppercase ui-selected:tab-active">Beers</Tab>
<Tab className="tab uppercase ui-selected:tab-active">Breweries</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<BeerPostsByUser />
</Tab.Panel>
<Tab.Panel>
<BreweryPostsByUser />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
);
};
export default UserPosts;

61
Website/src/components/BeerById/BeerCommentForm.tsx Normal file
View File

@@ -0,0 +1,61 @@
import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
import { zodResolver } from '@hookform/resolvers/zod';
import { FunctionComponent } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import { sendCreateBeerCommentRequest } from '@/requests/comments/beer-comment';
import CommentForm from '../Comments/CommentForm';
interface BeerCommentFormProps {
beerPost: z.infer<typeof BeerPostQueryResult>;
mutate: ReturnType<typeof useBeerPostComments>['mutate'];
}
const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
beerPost,
mutate,
}) => {
const { register, handleSubmit, formState, watch, reset, setValue } = useForm<
z.infer<typeof CreateCommentValidationSchema>
>({
defaultValues: { rating: 0 },
resolver: zodResolver(CreateCommentValidationSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
const loadingToast = toast.loading('Posting a new comment...');
try {
await sendCreateBeerCommentRequest({ body: data, beerPostId: beerPost.id });
reset();
toast.remove(loadingToast);
toast.success('Comment posted successfully.');
await mutate();
} catch (error) {
await mutate();
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (
<CommentForm
handleSubmit={handleSubmit}
onSubmit={onSubmit}
watch={watch}
setValue={setValue}
formState={formState}
register={register}
/>
);
};
export default BeerCommentForm;

109
Website/src/components/BeerById/BeerInfoHeader.tsx Normal file
View File

@@ -0,0 +1,109 @@
import Link from 'next/link';
import format from 'date-fns/format';
import { FC, useContext } from 'react';
import UserContext from '@/contexts/UserContext';
import { FaRegEdit } from 'react-icons/fa';
import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
import { z } from 'zod';
import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
import BeerPostLikeButton from './BeerPostLikeButton';
interface BeerInfoHeaderProps {
beerPost: z.infer<typeof BeerPostQueryResult>;
}
const BeerInfoHeader: FC<BeerInfoHeaderProps> = ({ beerPost }) => {
const createdAt = new Date(beerPost.createdAt);
const timeDistance = useTimeDistance(createdAt);
const { user } = useContext(UserContext);
const idMatches = user && beerPost.postedBy.id === user.id;
const isPostOwner = !!(user && idMatches);
const { likeCount, mutate } = useGetBeerPostLikeCount(beerPost.id);
return (
<article className="card flex flex-col justify-center bg-base-300">
<div className="card-body">
<header className="flex justify-between">
<div className="space-y-2">
<div>
<h1 className="text-2xl font-bold lg:text-4xl">{beerPost.name}</h1>
<h2 className="text-lg font-semibold lg:text-2xl">
by{' '}
<Link
href={`/breweries/${beerPost.brewery.id}`}
className="link-hover link font-semibold"
>
{beerPost.brewery.name}
</Link>
</h2>
</div>
<div>
<h3 className="italic">
{' posted by '}
<Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
{`${beerPost.postedBy.username} `}
</Link>
{timeDistance && (
<span
className="tooltip tooltip-bottom"
data-tip={format(createdAt, 'MM/dd/yyyy')}
>
{`${timeDistance} ago`}
</span>
)}
</h3>
</div>
</div>
{isPostOwner && (
<div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
<Link href={`/beers/${beerPost.id}/edit`} className="btn btn-ghost btn-xs">
<FaRegEdit className="text-xl" />
</Link>
</div>
)}
</header>
<div className="space-y-2">
<p>{beerPost.description}</p>
<div className="flex justify-between">
<div className="space-y-1">
<div>
<Link
className="link-hover link text-lg font-bold"
href={`/beers/styles/${beerPost.style.id}`}
>
{beerPost.style.name}
</Link>
</div>
<div>
<span className="mr-4 text-lg font-medium">
{beerPost.abv.toFixed(1)}% ABV
</span>
<span className="text-lg font-medium">{beerPost.ibu.toFixed(1)} IBU</span>
</div>
<div>
{(!!likeCount || likeCount === 0) && (
<span>
Liked by {likeCount}
{likeCount !== 1 ? ' users' : ' user'}
</span>
)}
</div>
</div>
<div className="card-actions items-end">
{user && (
<BeerPostLikeButton beerPostId={beerPost.id} mutateCount={mutate} />
)}
</div>
</div>
</div>
</div>
</article>
);
};
export default BeerInfoHeader;

88
Website/src/components/BeerById/BeerPostCommentsSection.tsx Normal file
View File

@@ -0,0 +1,88 @@
import UserContext from '@/contexts/UserContext';
import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
import { FC, MutableRefObject, useContext, useRef } from 'react';
import { z } from 'zod';
import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
import { useRouter } from 'next/router';
import {
deleteBeerPostCommentRequest,
editBeerPostCommentRequest,
} from '@/requests/comments/beer-comment';
import BeerCommentForm from './BeerCommentForm';
import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
import CommentsComponent from '../Comments/CommentsComponent';
interface BeerPostCommentsSectionProps {
beerPost: z.infer<typeof BeerPostQueryResult>;
}
const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost }) => {
const { user } = useContext(UserContext);
const router = useRouter();
const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
const PAGE_SIZE = 15;
const { comments, isLoading, mutate, setSize, size, isLoadingMore, isAtEnd } =
useBeerPostComments({ id: beerPost.id, pageNum, pageSize: PAGE_SIZE });
const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<div className="w-full space-y-3" ref={commentSectionRef}>
<div className="card bg-base-300">
<div className="card-body h-full">
{user ? (
<BeerCommentForm beerPost={beerPost} mutate={mutate} />
) : (
<div className="flex h-52 flex-col items-center justify-center">
<span className="text-lg font-bold">Log in to leave a comment.</span>
</div>
)}
</div>
</div>
{
/**
* If the comments are loading, show a loading component. Otherwise, show the
* comments.
*/
isLoading ? (
<div className="card bg-base-300 pb-6">
<CommentLoadingComponent length={PAGE_SIZE} />
</div>
) : (
<CommentsComponent
commentSectionRef={commentSectionRef}
comments={comments}
isLoadingMore={isLoadingMore}
isAtEnd={isAtEnd}
pageSize={PAGE_SIZE}
setSize={setSize}
size={size}
mutate={mutate}
handleDeleteCommentRequest={(id) => {
return deleteBeerPostCommentRequest({
commentId: id,
beerPostId: beerPost.id,
});
}}
handleEditCommentRequest={(id, data) => {
return editBeerPostCommentRequest({
body: data,
commentId: id,
beerPostId: beerPost.id,
});
}}
/>
)
}
</div>
);
};
export default BeerPostCommentsSection;

35
Website/src/components/BeerById/BeerPostLikeButton.tsx Normal file
View File

@@ -0,0 +1,35 @@
import useCheckIfUserLikesBeerPost from '@/hooks/data-fetching/beer-likes/useCheckIfUserLikesBeerPost';
import { FC, useEffect, useState } from 'react';
import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
import sendBeerPostLikeRequest from '@/requests/likes/beer-post-like/sendBeerPostLikeRequest';
import LikeButton from '../ui/LikeButton';
const BeerPostLikeButton: FC<{
beerPostId: string;
mutateCount: ReturnType<typeof useGetBeerPostLikeCount>['mutate'];
}> = ({ beerPostId, mutateCount }) => {
const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerPost(beerPostId);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
}, [isLiked]);
const handleLike = async () => {
try {
setLoading(true);
await sendBeerPostLikeRequest(beerPostId);
await Promise.all([mutateCount(), mutateLikeStatus()]);
setLoading(false);
} catch (e) {
setLoading(false);
}
};
return <LikeButton isLiked={!!isLiked} handleLike={handleLike} loading={loading} />;
};
export default BeerPostLikeButton;

33
Website/src/components/BeerById/BeerRecommendationLoadingComponent.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { FC } from 'react';
import Spinner from '../ui/Spinner';
interface BeerRecommendationLoadingComponentProps {
length: number;
}
const BeerRecommendationLoadingComponent: FC<BeerRecommendationLoadingComponentProps> = ({
length,
}) => {
return (
<>
{Array.from({ length }).map((_, i) => (
<div className="animate my-3 fade-in-10" key={i}>
<div className="flex animate-pulse space-x-4">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 w-3/4 rounded bg-base-100" />
<div className="space-y-2">
<div className="h-4 rounded bg-base-100" />
<div className="h-4 w-11/12 rounded bg-base-100" />
</div>
</div>
</div>
</div>
))}
<div className="p-1">
<Spinner size="sm" />
</div>
</>
);
};
export default BeerRecommendationLoadingComponent;

106
Website/src/components/BeerById/BeerRecommendations.tsx Normal file
View File

@@ -0,0 +1,106 @@
import Link from 'next/link';
import { FC } from 'react';
import { useInView } from 'react-intersection-observer';
import { z } from 'zod';
import useBeerRecommendations from '@/hooks/data-fetching/beer-posts/useBeerRecommendations';
import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
import debounce from 'lodash/debounce';
import BeerRecommendationLoadingComponent from './BeerRecommendationLoadingComponent';
const BeerRecommendationsSection: FC<{
beerPost: z.infer<typeof BeerPostQueryResult>;
}> = ({ beerPost }) => {
const PAGE_SIZE = 10;
const { beerPosts, isAtEnd, isLoadingMore, setSize, size } = useBeerRecommendations({
beerPost,
pageSize: PAGE_SIZE,
});
const { ref: penultimateBeerPostRef } = useInView({
/**
* When the last beer post comes into view, call setSize from useBeerPostsByBrewery to
* load more beer posts.
*/
onChange: (visible) => {
if (!visible || isAtEnd) return;
debounce(() => setSize(size + 1), 200)();
},
});
return (
<div className="card h-full">
<div className="card-body">
<>
<div className="my-2 flex flex-row items-center justify-between">
<div>
<h3 className="text-3xl font-bold">Also check out</h3>
</div>
</div>
{!!beerPosts.length && (
<div className="space-y-5">
{beerPosts.map((post, index) => {
const isPenultimateBeerPost = index === beerPosts.length - 2;
/**
* Attach a ref to the second last beer post in the list. When it comes
* into view, the component will call setSize to load more beer posts.
*/
return (
<div
ref={isPenultimateBeerPost ? penultimateBeerPostRef : undefined}
key={post.id}
className="animate-fade"
>
<div className="flex flex-col">
<Link className="link-hover link" href={`/beers/${post.id}`}>
<span className="text-xl font-bold">{post.name}</span>
</Link>
<Link
className="link-hover link"
href={`/breweries/${post.brewery.id}`}
>
<span className="text-lg font-semibold">{post.brewery.name}</span>
</Link>
</div>
<div>
<div>
<Link
className="link-hover link"
href={`/beers/styles/${post.style.id}`}
>
<span className="font-medium">{post.style.name}</span>
</Link>
</div>
<div className="space-x-2">
<span>{post.abv.toFixed(1)}% ABV</span>
<span>{post.ibu.toFixed(1)} IBU</span>
</div>
</div>
</div>
);
})}
</div>
)}
{
/**
* If there are more beer posts to load, show a loading component with a
* skeleton loader and a loading spinner.
*/
!!isLoadingMore && !isAtEnd && (
<BeerRecommendationLoadingComponent length={PAGE_SIZE} />
)
}
</>
</div>
</div>
);
};
export default BeerRecommendationsSection;

73
Website/src/components/BeerIndex/BeerCard.tsx Normal file
View File

@@ -0,0 +1,73 @@
import Link from 'next/link';
import { FC, useContext } from 'react';
import BeerPostQueryResult from '@/services/posts/beer-post/schema/BeerPostQueryResult';
import { z } from 'zod';
import UserContext from '@/contexts/UserContext';
import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
import { CldImage } from 'next-cloudinary';
import BeerPostLikeButton from '../BeerById/BeerPostLikeButton';
const BeerCard: FC<{ post: z.infer<typeof BeerPostQueryResult> }> = ({ post }) => {
const { user } = useContext(UserContext);
const { mutate, likeCount, isLoading } = useGetBeerPostLikeCount(post.id);
return (
<div className="card card-compact bg-base-300" key={post.id}>
<figure className="h-96">
<Link href={`/beers/${post.id}`} className="h-full object-cover">
{post.beerImages.length > 0 && (
<CldImage
src={post.beerImages[0].path}
alt={post.name}
crop="fill"
width="3000"
height="3000"
className="h-full object-cover"
/>
)}
</Link>
</figure>
<div className="card-body justify-between">
<div className="space-y-1">
<Link href={`/beers/${post.id}`}>
<h3 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
{post.name}
</h3>
</Link>
<Link href={`/breweries/${post.brewery.id}`}>
<h4 className="text-md link-hover link whitespace-normal lg:truncate lg:text-xl">
{post.brewery.name}
</h4>
</Link>
</div>
<div className="flex items-end justify-between">
<div>
<Link
className="text-md hover:underline lg:text-xl"
href={`/beers/styles/${post.style.id}`}
>
{post.style.name}
</Link>
<div className="space-x-3">
<span className="text-sm lg:text-lg">{post.abv.toFixed(1)}% ABV</span>
<span className="text-sm lg:text-lg">{post.ibu.toFixed(1)} IBU</span>
</div>
{!isLoading && (
<span>
liked by {likeCount} user{likeCount === 1 ? '' : 's'}
</span>
)}
</div>
<div>
{!!user && !isLoading && (
<BeerPostLikeButton beerPostId={post.id} mutateCount={mutate} />
)}
</div>
</div>
</div>
</div>
);
};
export default BeerCard;

100
Website/src/components/BeerStyleById/BeerStyleBeerSection.tsx Normal file
View File

@@ -0,0 +1,100 @@
import Link from 'next/link';
import { FC, MutableRefObject, useRef } from 'react';
import { useInView } from 'react-intersection-observer';
import { z } from 'zod';
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
import useBeerPostsByBeerStyle from '@/hooks/data-fetching/beer-posts/useBeerPostsByBeerStyles';
import BeerRecommendationLoadingComponent from '../BeerById/BeerRecommendationLoadingComponent';
interface BeerStyleBeerSectionProps {
beerStyle: z.infer<typeof BeerStyleQueryResult>;
}
const BeerStyleBeerSection: FC<BeerStyleBeerSectionProps> = ({ beerStyle }) => {
const PAGE_SIZE = 2;
const { beerPosts, isAtEnd, isLoadingMore, setSize, size } = useBeerPostsByBeerStyle({
beerStyleId: beerStyle.id,
pageSize: PAGE_SIZE,
});
const { ref: penultimateBeerPostRef } = useInView({
/**
* When the last beer post comes into view, call setSize from useBeerPostsByBeerStyle
* to load more beer posts.
*/
onChange: (visible) => {
if (!visible || isAtEnd) return;
setSize(size + 1);
},
});
const beerRecommendationsRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<div className="card h-full" ref={beerRecommendationsRef}>
<div className="card-body">
<>
<div className="my-2 flex flex-row items-center justify-between">
<div>
<h3 className="text-3xl font-bold">Brews</h3>
</div>
</div>
{!!beerPosts.length && (
<div className="space-y-5">
{beerPosts.map((beerPost, index) => {
const isPenultimateBeerPost = index === beerPosts.length - 2;
/**
* Attach a ref to the second last beer post in the list. When it comes
* into view, the component will call setSize to load more beer posts.
*/
return (
<div
ref={isPenultimateBeerPost ? penultimateBeerPostRef : undefined}
key={beerPost.id}
>
<div>
<Link className="link-hover link" href={`/beers/${beerPost.id}`}>
<span className="text-xl font-semibold">{beerPost.name}</span>
</Link>
</div>
<div>
<Link
className="link-hover link"
href={`/breweries/${beerPost.brewery.id}`}
>
<span className="text-xl font-semibold">
{beerPost.brewery.name}
</span>
</Link>
</div>
<div className="space-x-2">
<span>{beerPost.abv}% ABV</span>
<span>{beerPost.ibu} IBU</span>
</div>
</div>
);
})}
</div>
)}
{
/**
* If there are more beer posts to load, show a loading component with a
* skeleton loader and a loading spinner.
*/
!!isLoadingMore && !isAtEnd && (
<BeerRecommendationLoadingComponent length={PAGE_SIZE} />
)
}
</>
</div>
</div>
);
};
export default BeerStyleBeerSection;

65
Website/src/components/BeerStyleById/BeerStyleCommentForm.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { FunctionComponent } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
import { sendCreateBeerStyleCommentRequest } from '@/requests/comments/beer-style-comment';
import CommentForm from '../Comments/CommentForm';
interface BeerCommentFormProps {
beerStyle: z.infer<typeof BeerStyleQueryResult>;
mutate: ReturnType<typeof useBeerStyleComments>['mutate'];
}
const BeerStyleCommentForm: FunctionComponent<BeerCommentFormProps> = ({
beerStyle,
mutate,
}) => {
const { register, handleSubmit, formState, watch, reset, setValue } = useForm<
z.infer<typeof CreateCommentValidationSchema>
>({
defaultValues: { rating: 0 },
resolver: zodResolver(CreateCommentValidationSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
const loadingToast = toast.loading('Posting a new comment...');
try {
await sendCreateBeerStyleCommentRequest({
body: { content: data.content, rating: data.rating },
beerStyleId: beerStyle.id,
});
reset();
toast.remove(loadingToast);
toast.success('Comment posted successfully.');
await mutate();
} catch (error) {
await mutate();
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (
<CommentForm
handleSubmit={handleSubmit}
onSubmit={onSubmit}
watch={watch}
setValue={setValue}
formState={formState}
register={register}
/>
);
};
export default BeerStyleCommentForm;

86
Website/src/components/BeerStyleById/BeerStyleCommentSection.tsx Normal file
View File

@@ -0,0 +1,86 @@
import UserContext from '@/contexts/UserContext';
import { FC, MutableRefObject, useContext, useRef } from 'react';
import { z } from 'zod';
import { useRouter } from 'next/router';
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
import {
sendDeleteBeerStyleCommentRequest,
sendEditBeerStyleCommentRequest,
} from '@/requests/comments/beer-style-comment';
import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
import CommentsComponent from '../Comments/CommentsComponent';
import BeerStyleCommentForm from './BeerStyleCommentForm';
interface BeerStyleCommentsSectionProps {
beerStyle: z.infer<typeof BeerStyleQueryResult>;
}
const BeerStyleCommentsSection: FC<BeerStyleCommentsSectionProps> = ({ beerStyle }) => {
const { user } = useContext(UserContext);
const router = useRouter();
const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
const PAGE_SIZE = 15;
const { comments, isLoading, mutate, setSize, size, isLoadingMore, isAtEnd } =
useBeerStyleComments({ id: beerStyle.id, pageNum, pageSize: PAGE_SIZE });
const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<div className="w-full space-y-3" ref={commentSectionRef}>
<div className="card bg-base-300">
<div className="card-body h-full">
{user ? (
<BeerStyleCommentForm beerStyle={beerStyle} mutate={mutate} />
) : (
<div className="flex h-52 flex-col items-center justify-center">
<span className="text-lg font-bold">Log in to leave a comment.</span>
</div>
)}
</div>
</div>
{
/**
* If the comments are loading, show a loading component. Otherwise, show the
* comments.
*/
isLoading ? (
<div className="card bg-base-300 pb-6">
<CommentLoadingComponent length={PAGE_SIZE} />
</div>
) : (
<CommentsComponent
commentSectionRef={commentSectionRef}
comments={comments}
isLoadingMore={isLoadingMore}
isAtEnd={isAtEnd}
pageSize={PAGE_SIZE}
setSize={setSize}
size={size}
mutate={mutate}
handleDeleteCommentRequest={(id) => {
return sendDeleteBeerStyleCommentRequest({
beerStyleId: beerStyle.id,
commentId: id,
});
}}
handleEditCommentRequest={(id, data) => {
return sendEditBeerStyleCommentRequest({
beerStyleId: beerStyle.id,
commentId: id,
body: data,
});
}}
/>
)
}
</div>
);
};
export default BeerStyleCommentsSection;

112
Website/src/components/BeerStyleById/BeerStyleHeader.tsx Normal file
View File

@@ -0,0 +1,112 @@
import Link from 'next/link';
import format from 'date-fns/format';
import { FC, useContext } from 'react';
import UserContext from '@/contexts/UserContext';
import { FaRegEdit } from 'react-icons/fa';
import { z } from 'zod';
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
import useBeerStyleLikeCount from '@/hooks/data-fetching/beer-style-likes/useBeerStyleLikeCount';
import BeerStyleLikeButton from './BeerStyleLikeButton';
interface BeerInfoHeaderProps {
beerStyle: z.infer<typeof BeerStyleQueryResult>;
}
const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
const createdAt = new Date(beerStyle.createdAt);
const timeDistance = useTimeDistance(createdAt);
const { user } = useContext(UserContext);
const idMatches = user && beerStyle.postedBy.id === user.id;
const isPostOwner = !!(user && idMatches);
const { likeCount, mutate } = useBeerStyleLikeCount(beerStyle.id);
return (
<article className="card flex flex-col justify-center bg-base-300">
<div className="card-body">
<header className="flex justify-between">
<div className="space-y-2">
<div>
<h1 className="text-2xl font-bold lg:text-4xl">{beerStyle.name}</h1>
</div>
<div>
<h3 className="italic">
{' posted by '}
<Link
href={`/users/${beerStyle.postedBy.id}`}
className="link-hover link"
>
{`${beerStyle.postedBy.username} `}
</Link>
{timeDistance && (
<span
className="tooltip tooltip-bottom"
data-tip={format(createdAt, 'MM/dd/yyyy')}
>
{`${timeDistance} ago`}
</span>
)}
</h3>
</div>
</div>
{isPostOwner && (
<div className="tooltip tooltip-left" data-tip={`Edit '${beerStyle.name}'`}>
<Link href={`/beers/${beerStyle.id}/edit`} className="btn btn-ghost btn-xs">
<FaRegEdit className="text-xl" />
</Link>
</div>
)}
</header>
<div>
<p>{beerStyle.description}</p>
</div>
<div className="flex justify-between">
<div className="space-y-2">
<div className="w-25 flex flex-row space-x-3">
<div className="text-sm font-bold">
ABV Range:{' '}
<span>
{beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}
%
</span>
</div>
<div className="text-sm font-bold">
IBU Range:{' '}
<span>
{beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
</span>
</div>
</div>
<div className="font-semibold">
Recommended Glassware:{' '}
<span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
</div>
<div className="flex justify-between">
<div>
{(!!likeCount || likeCount === 0) && (
<span>
Liked by {likeCount}
{likeCount !== 1 ? ' users' : ' user'}
</span>
)}
</div>
</div>
</div>
<div className="card-actions items-end">
{user && (
<BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
)}
</div>
</div>
</div>
</article>
);
};
export default BeerStyleHeader;

34
Website/src/components/BeerStyleById/BeerStyleLikeButton.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { FC, useEffect, useState } from 'react';
import useGetBeerPostLikeCount from '@/hooks/data-fetching/beer-likes/useBeerPostLikeCount';
import useCheckIfUserLikesBeerStyle from '@/hooks/data-fetching/beer-style-likes/useCheckIfUserLikesBeerPost';
import sendBeerStyleLikeRequest from '@/requests/likes/beer-style-like/sendBeerStyleLikeRequest';
import LikeButton from '../ui/LikeButton';
const BeerStyleLikeButton: FC<{
beerStyleId: string;
mutateCount: ReturnType<typeof useGetBeerPostLikeCount>['mutate'];
}> = ({ beerStyleId, mutateCount }) => {
const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerStyle(beerStyleId);
const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
}, [isLiked]);
const handleLike = async () => {
try {
setLoading(true);
await sendBeerStyleLikeRequest(beerStyleId);
await Promise.all([mutateCount(), mutateLikeStatus()]);
setLoading(false);
} catch (e) {
setLoading(false);
}
};
return <LikeButton isLiked={!!isLiked} handleLike={handleLike} loading={loading} />;
};
export default BeerStyleLikeButton;

48
Website/src/components/BeerStyleIndex/BeerStyleCard.tsx Normal file
View File

@@ -0,0 +1,48 @@
import BeerStyleQueryResult from '@/services/posts/beer-style-post/schema/BeerStyleQueryResult';
import Link from 'next/link';
import { FC } from 'react';
import { z } from 'zod';
const BeerStyleCard: FC<{ beerStyle: z.infer<typeof BeerStyleQueryResult> }> = ({
beerStyle,
}) => {
return (
<div className="card card-compact bg-base-300">
<div className="card-body justify-between">
<div className="space-y-1">
<Link href={`/beers/styles/${beerStyle.id}`}>
<h3 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
{beerStyle.name}
</h3>
</Link>
<div className="w-25 flex flex-row space-x-3">
<div className="text-sm font-bold">
ABV Range:{' '}
<span>
{beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}%
</span>
</div>
<div className="text-sm font-bold">
IBU Range:{' '}
<span>
{beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
</span>
</div>
</div>
<div className="h-20">
<p className="line-clamp-3 overflow-ellipsis">{beerStyle.description}</p>
</div>
<div className="font-semibold">
Recommended Glassware:{' '}
<span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
</div>
</div>
</div>
</div>
);
};
export default BeerStyleCard;

111
Website/src/components/BreweryById/BreweryBeerSection.tsx Normal file
View File

@@ -0,0 +1,111 @@
import UseBeerPostsByBrewery from '@/hooks/data-fetching/beer-posts/useBeerPostsByBrewery';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import Link from 'next/link';
import { FC, MutableRefObject, useContext, useRef } from 'react';
import { useInView } from 'react-intersection-observer';
import { z } from 'zod';
import { FaPlus } from 'react-icons/fa';
import UserContext from '@/contexts/UserContext';
import BeerRecommendationLoadingComponent from '../BeerById/BeerRecommendationLoadingComponent';
interface BreweryCommentsSectionProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
}
const BreweryBeersSection: FC<BreweryCommentsSectionProps> = ({ breweryPost }) => {
const PAGE_SIZE = 2;
const { user } = useContext(UserContext);
const { beerPosts, isAtEnd, isLoadingMore, setSize, size } = UseBeerPostsByBrewery({
breweryId: breweryPost.id,
pageSize: PAGE_SIZE,
});
const { ref: penultimateBeerPostRef } = useInView({
/**
* When the last beer post comes into view, call setSize from useBeerPostsByBrewery to
* load more beer posts.
*/
onChange: (visible) => {
if (!visible || isAtEnd) return;
setSize(size + 1);
},
});
const beerRecommendationsRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<div className="card h-full" ref={beerRecommendationsRef}>
<div className="card-body">
<>
<div className="my-2 flex flex-row items-center justify-between">
<div>
<h3 className="text-3xl font-bold">Brews</h3>
</div>
<div>
{user && (
<Link
className={`btn btn-ghost btn-sm gap-2 rounded-2xl outline`}
href={`/breweries/${breweryPost.id}/beers/create`}
>
<FaPlus className="text-xl" />
Add Beer
</Link>
)}
</div>
</div>
{!!beerPosts.length && (
<div className="space-y-5">
{beerPosts.map((beerPost, index) => {
const isPenultimateBeerPost = index === beerPosts.length - 2;
/**
* Attach a ref to the second last beer post in the list. When it comes
* into view, the component will call setSize to load more beer posts.
*/
return (
<div
ref={isPenultimateBeerPost ? penultimateBeerPostRef : undefined}
key={beerPost.id}
>
<div>
<Link className="link-hover link" href={`/beers/${beerPost.id}`}>
<span className="text-xl font-semibold">{beerPost.name}</span>
</Link>
</div>
<div>
<Link
className="link-hover link text-lg font-medium"
href={`/beers/styles/${beerPost.style.id}`}
>
{beerPost.style.name}
</Link>
</div>
<div className="space-x-2">
<span>{beerPost.abv}% ABV</span>
<span>{beerPost.ibu} IBU</span>
</div>
</div>
);
})}
</div>
)}
{
/**
* If there are more beer posts to load, show a loading component with a
* skeleton loader and a loading spinner.
*/
!!isLoadingMore && !isAtEnd && (
<BeerRecommendationLoadingComponent length={PAGE_SIZE} />
)
}
</>
</div>
</div>
);
};
export default BreweryBeersSection;

60
Website/src/components/BreweryById/BreweryCommentForm.tsx Normal file
View File

@@ -0,0 +1,60 @@
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { FC } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import toast from 'react-hot-toast';
import { z } from 'zod';
import sendCreateBreweryCommentRequest from '@/requests/comments/brewery-comment/sendCreateBreweryCommentRequest';
import createErrorToast from '@/util/createErrorToast';
import CommentForm from '../Comments/CommentForm';
interface BreweryCommentFormProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
mutate: ReturnType<typeof useBreweryPostComments>['mutate'];
}
const BreweryCommentForm: FC<BreweryCommentFormProps> = ({ breweryPost, mutate }) => {
const { register, handleSubmit, formState, watch, reset, setValue } = useForm<
z.infer<typeof CreateCommentValidationSchema>
>({
defaultValues: { rating: 0 },
resolver: zodResolver(CreateCommentValidationSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
const loadingToast = toast.loading('Posting a new comment...');
try {
await sendCreateBreweryCommentRequest({
content: data.content,
rating: data.rating,
breweryPostId: breweryPost.id,
});
reset();
toast.remove(loadingToast);
toast.success('Comment posted successfully.');
await mutate();
} catch (error) {
await mutate();
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (
<CommentForm
handleSubmit={handleSubmit}
onSubmit={onSubmit}
watch={watch}
setValue={setValue}
formState={formState}
register={register}
/>
);
};
export default BreweryCommentForm;

88
Website/src/components/BreweryById/BreweryCommentsSection.tsx Normal file
View File

@@ -0,0 +1,88 @@
import UserContext from '@/contexts/UserContext';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import { FC, MutableRefObject, useContext, useRef } from 'react';
import { z } from 'zod';
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import {
sendDeleteBreweryPostCommentRequest,
sendEditBreweryPostCommentRequest,
} from '@/requests/comments/brewery-comment';
import CommentLoadingComponent from '../Comments/CommentLoadingComponent';
import CommentsComponent from '../Comments/CommentsComponent';
import BreweryCommentForm from './BreweryCommentForm';
interface BreweryBeerSectionProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
}
const BreweryCommentsSection: FC<BreweryBeerSectionProps> = ({ breweryPost }) => {
const { user } = useContext(UserContext);
const PAGE_SIZE = 4;
const {
isLoading,
setSize,
size,
isLoadingMore,
isAtEnd,
mutate,
comments: breweryComments,
} = useBreweryPostComments({ id: breweryPost.id, pageSize: PAGE_SIZE });
const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
return (
<div className="w-full space-y-3" ref={commentSectionRef}>
<div className="card">
<div className="card-body h-full">
{user ? (
<BreweryCommentForm breweryPost={breweryPost} mutate={mutate} />
) : (
<div className="flex h-52 flex-col items-center justify-center">
<div className="text-lg font-bold">Log in to leave a comment.</div>
</div>
)}
</div>
</div>
{
/**
* If the comments are loading, show a loading component. Otherwise, show the
* comments.
*/
isLoading ? (
<div className="card pb-6">
<CommentLoadingComponent length={PAGE_SIZE} />
</div>
) : (
<CommentsComponent
comments={breweryComments}
isLoadingMore={isLoadingMore}
isAtEnd={isAtEnd}
pageSize={PAGE_SIZE}
setSize={setSize}
size={size}
commentSectionRef={commentSectionRef}
mutate={mutate}
handleDeleteCommentRequest={(id) => {
return sendDeleteBreweryPostCommentRequest({
breweryPostId: breweryPost.id,
commentId: id,
});
}}
handleEditCommentRequest={(commentId, data) => {
return sendEditBreweryPostCommentRequest({
breweryPostId: breweryPost.id,
commentId,
body: { content: data.content, rating: data.rating },
});
}}
/>
)
}
</div>
);
};
export default BreweryCommentsSection;

100
Website/src/components/BreweryById/BreweryInfoHeader.tsx Normal file
View File

@@ -0,0 +1,100 @@
import UserContext from '@/contexts/UserContext';
import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import { format } from 'date-fns';
import { FC, useContext } from 'react';
import { FaRegEdit } from 'react-icons/fa';
import { z } from 'zod';
import Link from 'next/link';
import BreweryPostLikeButton from '../BreweryIndex/BreweryPostLikeButton';
interface BreweryInfoHeaderProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
}
const BreweryInfoHeader: FC<BreweryInfoHeaderProps> = ({ breweryPost }) => {
const createdAt = new Date(breweryPost.createdAt);
const timeDistance = useTimeDistance(createdAt);
const { user } = useContext(UserContext);
const idMatches = user && breweryPost.postedBy.id === user.id;
const isPostOwner = !!(user && idMatches);
const { likeCount, mutate } = useGetBreweryPostLikeCount(breweryPost.id);
return (
<article className="card flex flex-col justify-center bg-base-300">
<div className="card-body">
<header className="flex justify-between">
<div className="w-full space-y-2">
<div className="flex w-full flex-row justify-between">
<div>
<h1 className="text-2xl font-bold lg:text-4xl">{breweryPost.name}</h1>
<h2 className="text-lg font-semibold lg:text-2xl">
Located in
{` ${breweryPost.location.city}, ${
breweryPost.location.stateOrProvince || breweryPost.location.country
}`}
</h2>
</div>
</div>
<div>
<h3 className="italic">
{' posted by '}
<Link
href={`/users/${breweryPost.postedBy.id}`}
className="link-hover link"
>
{`${breweryPost.postedBy.username} `}
</Link>
{timeDistance && (
<span
className="tooltip tooltip-bottom"
data-tip={format(createdAt, 'MM/dd/yyyy')}
>{`${timeDistance} ago`}</span>
)}
</h3>
</div>
</div>
{isPostOwner && (
<div className="tooltip tooltip-left" data-tip={`Edit '${breweryPost.name}'`}>
<Link
href={`/breweries/${breweryPost.id}/edit`}
className="btn btn-ghost btn-xs"
>
<FaRegEdit className="text-xl" />
</Link>
</div>
)}
</header>
<div className="space-y-2">
<p>{breweryPost.description}</p>
<div className="flex items-end justify-between">
<div className="space-y-1">
<div>
{(!!likeCount || likeCount === 0) && (
<span>
Liked by {likeCount} {likeCount === 1 ? 'user' : 'users'}
</span>
)}
</div>
</div>
<div className="card-actions">
{user && (
<BreweryPostLikeButton
breweryPostId={breweryPost.id}
mutateCount={mutate}
/>
)}
</div>
</div>
</div>
</div>
</article>
);
};
export default BreweryInfoHeader;

60
Website/src/components/BreweryById/BreweryPostMap.tsx Normal file
View File

@@ -0,0 +1,60 @@
import useMediaQuery from '@/hooks/utilities/useMediaQuery';
import 'mapbox-gl/dist/mapbox-gl.css';
import { FC, useMemo } from 'react';
import Map, { Marker } from 'react-map-gl';
import LocationMarker from '../ui/LocationMarker';
import ControlPanel from '../ui/maps/ControlPanel';
interface BreweryMapProps {
coordinates: { latitude: number; longitude: number };
token: string;
}
type MapStyles = Record<'light' | 'dark', `mapbox://styles/mapbox/${string}`>;
const BreweryPostMap: FC<BreweryMapProps> = ({
coordinates: { latitude, longitude },
token,
}) => {
const isDesktop = useMediaQuery('(min-width: 1024px)');
const windowIsDefined = typeof window !== 'undefined';
const themeIsDefined = windowIsDefined && !!window.localStorage.getItem('theme');
const theme = (
windowIsDefined && themeIsDefined ? window.localStorage.getItem('theme') : 'light'
) as 'light' | 'dark';
const pin = useMemo(
() => (
<Marker latitude={latitude} longitude={longitude}>
<LocationMarker />
</Marker>
),
[latitude, longitude],
);
const mapStyles: MapStyles = {
light: 'mapbox://styles/mapbox/light-v10',
dark: 'mapbox://styles/mapbox/dark-v11',
};
return (
<div className="card">
<div className="card-body">
<Map
initialViewState={{ latitude, longitude, zoom: 17 }}
style={{ width: '100%', height: isDesktop ? 480 : 240 }}
mapStyle={mapStyles[theme]}
mapboxAccessToken={token}
scrollZoom
>
<ControlPanel />
{pin}
</Map>
</div>
</div>
);
};
export default BreweryPostMap;

64
Website/src/components/BreweryIndex/BreweryCard.tsx Normal file
View File

@@ -0,0 +1,64 @@
import UserContext from '@/contexts/UserContext';
import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import { FC, useContext } from 'react';
import Link from 'next/link';
import { z } from 'zod';
import { CldImage } from 'next-cloudinary';
import BreweryPostLikeButton from './BreweryPostLikeButton';
const BreweryCard: FC<{ brewery: z.infer<typeof BreweryPostQueryResult> }> = ({
brewery,
}) => {
const { user } = useContext(UserContext);
const { likeCount, mutate, isLoading } = useGetBreweryPostLikeCount(brewery.id);
return (
<div className="card" key={brewery.id}>
<figure className="card-image h-96">
<Link href={`/breweries/${brewery.id}`} className="h-full object-cover">
{brewery.breweryImages.length > 0 && (
<CldImage
src={brewery.breweryImages[0].path}
alt={brewery.name}
width="1029"
height="1029"
crop="fill"
className="h-full object-cover"
/>
)}
</Link>
</figure>
<div className="card-body justify-between">
<div>
<Link href={`/breweries/${brewery.id}`} className="link-hover link">
<span className="text-lg font-bold lg:text-xl xl:truncate">
{brewery.name}
</span>
</Link>
</div>
<div className="flex w-full items-end justify-between">
<div className="w-9/12">
<h3 className="text-lg font-semibold lg:text-xl xl:truncate">
{brewery.location.city},{' '}
{brewery.location.stateOrProvince || brewery.location.country}
</h3>
<h4 className="text-lg font-semibold lg:text-xl">
est. {brewery.dateEstablished.getFullYear()}
</h4>
<div className="mt-2">
{!isLoading && <span>liked by {likeCount} users</span>}
</div>
</div>
<div>
{!!user && !isLoading && (
<BreweryPostLikeButton breweryPostId={brewery.id} mutateCount={mutate} />
)}
</div>
</div>
</div>
</div>
);
};
export default BreweryCard;

30
Website/src/components/BreweryIndex/BreweryPostLikeButton.tsx Normal file
View File

@@ -0,0 +1,30 @@
import useCheckIfUserLikesBreweryPost from '@/hooks/data-fetching/brewery-likes/useCheckIfUserLikesBreweryPost';
import useGetBreweryPostLikeCount from '@/hooks/data-fetching/brewery-likes/useGetBreweryPostLikeCount';
import sendBreweryPostLikeRequest from '@/requests/likes/brewery-post-like/sendBreweryPostLikeRequest';
import { FC, useState } from 'react';
import LikeButton from '../ui/LikeButton';
const BreweryPostLikeButton: FC<{
breweryPostId: string;
mutateCount: ReturnType<typeof useGetBreweryPostLikeCount>['mutate'];
}> = ({ breweryPostId, mutateCount }) => {
const { isLiked, mutate: mutateLikeStatus } =
useCheckIfUserLikesBreweryPost(breweryPostId);
const [isLoading, setIsLoading] = useState(false);
const handleLike = async () => {
try {
setIsLoading(true);
await sendBreweryPostLikeRequest(breweryPostId);
await Promise.all([mutateCount(), mutateLikeStatus()]);
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
return <LikeButton isLiked={!!isLiked} handleLike={handleLike} loading={isLoading} />;
};
export default BreweryPostLikeButton;

285
Website/src/components/BreweryPost/CreateBreweryPostForm.tsx Normal file
View File

@@ -0,0 +1,285 @@
import sendUploadBreweryImagesRequest from '@/requests/images/brewery-image/sendUploadBreweryImageRequest';
import CreateBreweryPostSchema from '@/services/posts/brewery-post/schema/CreateBreweryPostSchema';
import UploadImageValidationSchema from '@/services/schema/ImageSchema/UploadImageValidationSchema';
import createErrorToast from '@/util/createErrorToast';
import { Tab } from '@headlessui/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { AddressAutofillRetrieveResponse } from '@mapbox/search-js-core';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import { FC, Fragment } from 'react';
import {
useForm,
SubmitHandler,
FieldError,
UseFormRegister,
FieldErrors,
UseFormSetValue,
} from 'react-hook-form';
import toast from 'react-hot-toast';
import { z } from 'zod';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormSegment from '../ui/forms/FormSegment';
import FormTextArea from '../ui/forms/FormTextArea';
import FormTextInput from '../ui/forms/FormTextInput';
import Button from '../ui/forms/Button';
import { sendCreateBreweryPostRequest } from '@/requests/posts/brewery-post';
const AddressAutofill = dynamic(
// @ts-expect-error
() => import('@mapbox/search-js-react').then((mod) => mod.AddressAutofill),
{ ssr: false },
);
const CreateBreweryPostWithImagesSchema = CreateBreweryPostSchema.merge(
UploadImageValidationSchema,
);
const InfoSection: FC<{
register: UseFormRegister<z.infer<typeof CreateBreweryPostWithImagesSchema>>;
errors: FieldErrors<z.infer<typeof CreateBreweryPostWithImagesSchema>>;
isSubmitting: boolean;
}> = ({ register, errors, isSubmitting }) => {
return (
<>
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="Lorem Ipsum Brewing Company"
formValidationSchema={register('name')}
error={!!errors.name}
type="text"
id="name"
disabled={isSubmitting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="description">Description</FormLabel>
<FormError>{errors.description?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
placeholder="We make beer, and we make it good."
formValidationSchema={register('description')}
error={!!errors.description}
rows={4}
id="description"
disabled={isSubmitting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="dateEstablished">Date Established</FormLabel>
<FormError>{errors.dateEstablished?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="2021-01-01"
formValidationSchema={register('dateEstablished')}
error={!!errors.dateEstablished}
type="date"
id="dateEstablished"
disabled={isSubmitting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="images">Images</FormLabel>
<FormError>{(errors.images as FieldError | undefined)?.message}</FormError>
</FormInfo>
<FormSegment>
<input
type="file"
{...register('images')}
multiple
className="file-input file-input-bordered w-full"
disabled={isSubmitting}
/>
</FormSegment>
</>
);
};
const LocationSection: FC<{
register: UseFormRegister<z.infer<typeof CreateBreweryPostWithImagesSchema>>;
errors: FieldErrors<z.infer<typeof CreateBreweryPostWithImagesSchema>>;
isSubmitting: boolean;
setValue: UseFormSetValue<z.infer<typeof CreateBreweryPostWithImagesSchema>>;
mapboxAccessToken: string;
}> = ({ register, errors, isSubmitting, setValue, mapboxAccessToken }) => {
const onAutoCompleteChange = (address: string) => {
setValue('address', address);
};
const onAutoCompleteRetrieve = (address: AddressAutofillRetrieveResponse) => {
const { country, region, place } = address.features[0].properties as unknown as {
country?: string;
region?: string;
place?: string;
};
setValue('country', country);
setValue('region', region);
setValue('city', place!);
};
return (
<>
<FormInfo>
<FormLabel htmlFor="address">Address</FormLabel>
<FormError>{errors.address?.message}</FormError>
</FormInfo>
<FormSegment>
<AddressAutofill
accessToken={mapboxAccessToken}
onRetrieve={onAutoCompleteRetrieve}
onChange={onAutoCompleteChange}
>
<input
id="address"
type="text"
placeholder="1234 Main St"
className={`input input-bordered w-full appearance-none rounded-lg transition ease-in-out ${
errors.address?.message ? 'input-error' : ''
}`}
{...register('address')}
disabled={isSubmitting}
/>
</AddressAutofill>
</FormSegment>
<div className="flex space-x-3">
<div className="w-1/2">
<FormInfo>
<FormLabel htmlFor="city">City</FormLabel>
<FormError>{errors.city?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="Toronto"
formValidationSchema={register('city')}
error={!!errors.city}
type="text"
id="city"
disabled={isSubmitting}
/>
</FormSegment>
</div>
<div className="w-1/2">
<FormInfo>
<FormLabel htmlFor="region">Region</FormLabel>
<FormError>{errors.region?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="Ontario"
formValidationSchema={register('region')}
error={!!errors.region}
type="text"
id="region"
disabled={isSubmitting}
/>
</FormSegment>
</div>
</div>
<FormInfo>
<FormLabel htmlFor="country">Country</FormLabel>
<FormError>{errors.country?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="Canada"
formValidationSchema={register('country')}
error={!!errors.country}
type="text"
id="country"
disabled={isSubmitting}
/>
</FormSegment>
</>
);
};
const CreateBreweryPostForm: FC<{
mapboxAccessToken: string;
}> = ({ mapboxAccessToken }) => {
const {
register,
handleSubmit,
reset,
setValue,
formState: { errors, isSubmitting },
} = useForm<z.infer<typeof CreateBreweryPostWithImagesSchema>>({
resolver: zodResolver(CreateBreweryPostWithImagesSchema),
});
const router = useRouter();
const onSubmit: SubmitHandler<
z.infer<typeof CreateBreweryPostWithImagesSchema>
> = async (data) => {
const loadingToast = toast.loading('Creating brewery...');
try {
if (!(data.images instanceof FileList)) {
return;
}
const breweryPost = await sendCreateBreweryPostRequest({ body: data });
await sendUploadBreweryImagesRequest({ breweryPost, images: data.images });
await router.push(`/breweries/${breweryPost.id}`);
toast.remove(loadingToast);
toast.success('Created brewery.');
} catch (error) {
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (
<form
onSubmit={handleSubmit(onSubmit, (error) => {
const fieldErrors = Object.keys(error).length;
toast.error(`Form submission failed.`);
toast.error(`You have ${fieldErrors} errors in your form.`);
})}
className="form-control"
autoComplete="off"
>
<Tab.Group as={Fragment}>
<Tab.List className="tabs-boxed tabs grid grid-cols-2">
<Tab className="tab uppercase ui-selected:tab-active">Information</Tab>
<Tab className="tab uppercase ui-selected:tab-active">Location</Tab>
</Tab.List>
<Tab.Panels className="mt-4">
<Tab.Panel>
<InfoSection
register={register}
errors={errors}
isSubmitting={isSubmitting}
/>
</Tab.Panel>
<Tab.Panel>
<LocationSection
setValue={setValue}
register={register}
errors={errors}
isSubmitting={isSubmitting}
mapboxAccessToken={mapboxAccessToken}
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
<div className="mt-8">
<Button type="submit" isSubmitting={isSubmitting}>
Create Brewery Post
</Button>
</div>
</form>
);
};
export default CreateBreweryPostForm;

54
Website/src/components/Comments/CommentCardBody.tsx Normal file
View File

@@ -0,0 +1,54 @@
import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
import { FC, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import { z } from 'zod';
import CommentContentBody from './CommentContentBody';
import EditCommentBody from './EditCommentBody';
import UserAvatar from '../Account/UserAvatar';
import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
interface CommentCardProps {
comment: z.infer<typeof CommentQueryResult>;
mutate: ReturnType<typeof useBeerPostComments>['mutate'];
ref?: ReturnType<typeof useInView>['ref'];
handleDeleteCommentRequest: HandleDeleteCommentRequest;
handleEditCommentRequest: HandleEditCommentRequest;
}
const CommentCardBody: FC<CommentCardProps> = ({
comment,
mutate,
ref,
handleDeleteCommentRequest,
handleEditCommentRequest,
}) => {
const [inEditMode, setInEditMode] = useState(false);
return (
<div ref={ref} className="flex items-start">
<div className="mx-3 w-[20%] justify-center sm:w-[12%]">
<div className="h-20 pt-4">
<UserAvatar user={comment.postedBy} />
</div>
</div>
<div className="h-full w-[88%]">
{!inEditMode ? (
<CommentContentBody comment={comment} setInEditMode={setInEditMode} />
) : (
<EditCommentBody
comment={comment}
mutate={mutate}
setInEditMode={setInEditMode}
handleDeleteCommentRequest={handleDeleteCommentRequest}
handleEditCommentRequest={handleEditCommentRequest}
/>
)}
</div>
</div>
);
};
export default CommentCardBody;

55
Website/src/components/Comments/CommentCardDropdown.tsx Normal file
View File

@@ -0,0 +1,55 @@
import UserContext from '@/contexts/UserContext';
import { Dispatch, SetStateAction, FC, useContext } from 'react';
import { FaEllipsisH } from 'react-icons/fa';
import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
import { z } from 'zod';
interface CommentCardDropdownProps {
comment: z.infer<typeof CommentQueryResult>;
setInEditMode: Dispatch<SetStateAction<boolean>>;
}
const CommentCardDropdown: FC<CommentCardDropdownProps> = ({
comment,
setInEditMode,
}) => {
const { user } = useContext(UserContext);
const isCommentOwner = user?.id === comment.postedBy.id;
return (
<div className="dropdown dropdown-end">
<label tabIndex={0} className="btn btn-ghost btn-sm m-1">
<FaEllipsisH />
</label>
<ul
tabIndex={0}
className="menu dropdown-content rounded-box w-52 bg-base-100 p-2 shadow"
>
<li>
{isCommentOwner ? (
<button
type="button"
onClick={() => {
setInEditMode(true);
}}
>
Edit
</button>
) : (
<button
type="button"
onClick={() => {
// eslint-disable-next-line no-alert
alert('This feature is not yet implemented.');
}}
>
Report
</button>
)}
</li>
</ul>
</div>
);
};
export default CommentCardDropdown;

77
Website/src/components/Comments/CommentContentBody.tsx Normal file
View File

@@ -0,0 +1,77 @@
import UserContext from '@/contexts/UserContext';
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
import { format } from 'date-fns';
import { Dispatch, FC, SetStateAction, useContext } from 'react';
import { Rating } from 'react-daisyui';
import Link from 'next/link';
import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
import { z } from 'zod';
import { useInView } from 'react-intersection-observer';
import classNames from 'classnames';
import CommentCardDropdown from './CommentCardDropdown';
interface CommentContentBodyProps {
comment: z.infer<typeof CommentQueryResult>;
setInEditMode: Dispatch<SetStateAction<boolean>>;
}
const CommentContentBody: FC<CommentContentBodyProps> = ({ comment, setInEditMode }) => {
const { user } = useContext(UserContext);
const timeDistance = useTimeDistance(new Date(comment.createdAt));
const [ref, inView] = useInView({ triggerOnce: true });
return (
<div
className={classNames('space-y-1 py-4 pr-3 fade-in-10', {
'opacity-0': !inView,
'animate-fade': inView,
})}
ref={ref}
>
<div className="space-y-2">
<div className="flex flex-row justify-between">
<div>
<p className="font-semibold sm:text-2xl">
<Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
{comment.postedBy.username}
</Link>
</p>
<span className="italic">
posted{' '}
<time
className="tooltip tooltip-bottom"
data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
>
{timeDistance}
</time>{' '}
ago
</span>
</div>
{user && (
<CommentCardDropdown comment={comment} setInEditMode={setInEditMode} />
)}
</div>
<div className="space-y-1">
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
</div>
</div>
<div>
<p className="text-sm">{comment.content}</p>
</div>
</div>
);
};
export default CommentContentBody;

85
Website/src/components/Comments/CommentForm.tsx Normal file
View File

@@ -0,0 +1,85 @@
import { FC } from 'react';
import { Rating } from 'react-daisyui';
import type {
FormState,
SubmitHandler,
UseFormHandleSubmit,
UseFormRegister,
UseFormSetValue,
UseFormWatch,
} from 'react-hook-form';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormSegment from '../ui/forms/FormSegment';
import FormTextArea from '../ui/forms/FormTextArea';
import Button from '../ui/forms/Button';
interface Comment {
content: string;
rating: number;
}
interface CommentFormProps {
handleSubmit: UseFormHandleSubmit<Comment>;
onSubmit: SubmitHandler<Comment>;
watch: UseFormWatch<Comment>;
setValue: UseFormSetValue<Comment>;
formState: FormState<Comment>;
register: UseFormRegister<Comment>;
}
const CommentForm: FC<CommentFormProps> = ({
handleSubmit,
onSubmit,
watch,
setValue,
formState,
register,
}) => {
const { errors } = formState;
return (
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
<div>
<FormInfo>
<FormLabel htmlFor="content">Leave a comment</FormLabel>
<FormError>{errors.content?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
id="content"
formValidationSchema={register('content')}
placeholder="Comment"
rows={5}
error={!!errors.content?.message}
disabled={formState.isSubmitting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="rating">Rating</FormLabel>
<FormError>{errors.rating?.message}</FormError>
</FormInfo>
<Rating
value={watch('rating')}
onChange={(value) => {
setValue('rating', value);
}}
>
<Rating.Item name="rating-1" className="mask mask-star" />
<Rating.Item name="rating-1" className="mask mask-star" />
<Rating.Item name="rating-1" className="mask mask-star" />
<Rating.Item name="rating-1" className="mask mask-star" />
<Rating.Item name="rating-1" className="mask mask-star" />
</Rating>
</div>
<div>
<Button type="submit" isSubmitting={formState.isSubmitting}>
Submit
</Button>
</div>
</form>
);
};
export default CommentForm;

19
Website/src/components/Comments/CommentLoadingCardBody.tsx Normal file
View File

@@ -0,0 +1,19 @@
const CommentLoadingCardBody = () => {
return (
<div className="card-body h-52 fade-in-10">
<div className="flex animate-pulse space-x-4 slide-in-from-top">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 w-3/4 rounded bg-base-100" />
<div className="space-y-2">
<div className="h-4 rounded bg-base-100" />
<div className="h-4 w-11/12 rounded bg-base-100" />
<div className="h-4 w-10/12 rounded bg-base-100" />
<div className="h-4 w-11/12 rounded bg-base-100" />
</div>
</div>
</div>
</div>
);
};
export default CommentLoadingCardBody;

22
Website/src/components/Comments/CommentLoadingComponent.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { FC } from 'react';
import Spinner from '../ui/Spinner';
import CommentLoadingCardBody from './CommentLoadingCardBody';
interface CommentLoadingComponentProps {
length: number;
}
const CommentLoadingComponent: FC<CommentLoadingComponentProps> = ({ length }) => {
return (
<>
{Array.from({ length }).map((_, i) => (
<CommentLoadingCardBody key={i} />
))}
<div className="p-1">
<Spinner size="sm" />
</div>
</>
);
};
export default CommentLoadingComponent;

125
Website/src/components/Comments/CommentsComponent.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { FC, MutableRefObject } from 'react';
import { FaArrowUp } from 'react-icons/fa';
import { useInView } from 'react-intersection-observer';
import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import useBeerStyleComments from '@/hooks/data-fetching/beer-style-comments/useBeerStyleComments';
import NoCommentsCard from './NoCommentsCard';
import CommentLoadingComponent from './CommentLoadingComponent';
import CommentCardBody from './CommentCardBody';
import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
type HookReturnType = ReturnType<
typeof useBeerPostComments | typeof useBreweryPostComments | typeof useBeerStyleComments
>;
interface CommentsComponentProps {
comments: HookReturnType['comments'];
isAtEnd: HookReturnType['isAtEnd'];
isLoadingMore: HookReturnType['isLoadingMore'];
mutate: HookReturnType['mutate'];
setSize: HookReturnType['setSize'];
size: HookReturnType['size'];
commentSectionRef: MutableRefObject<HTMLDivElement | null>;
handleDeleteCommentRequest: HandleDeleteCommentRequest;
handleEditCommentRequest: HandleEditCommentRequest;
pageSize: number;
}
const CommentsComponent: FC<CommentsComponentProps> = ({
comments,
commentSectionRef,
handleDeleteCommentRequest,
handleEditCommentRequest,
isAtEnd,
isLoadingMore,
mutate,
pageSize,
setSize,
size,
}) => {
const { ref: penultimateCommentRef } = useInView({
threshold: 0.1,
/**
* When the last comment comes into view, call setSize from the comment fetching hook
* to load more comments.
*/
onChange: (visible) => {
if (!visible || isAtEnd) return;
setSize(size + 1);
},
});
return (
<>
{!!comments.length && (
<div className="card h-full bg-base-300 pb-6">
{comments.map((comment, index) => {
const isLastComment = index === comments.length - 1;
/**
* Attach a ref to the last comment in the list. When it comes into view, the
* component will call setSize to load more comments.
*/
return (
<div
ref={isLastComment ? penultimateCommentRef : undefined}
key={comment.id}
>
<CommentCardBody
comment={comment}
mutate={mutate}
handleDeleteCommentRequest={handleDeleteCommentRequest}
handleEditCommentRequest={handleEditCommentRequest}
/>
</div>
);
})}
{
/**
* If there are more comments to load, show a loading component with a
* skeleton loader and a loading spinner.
*/
!!isLoadingMore && <CommentLoadingComponent length={pageSize} />
}
{
/**
* If the user has scrolled to the end of the comments, show a button that
* will scroll them back to the top of the comments section.
*/
!!isAtEnd && (
<div className="flex h-20 items-center justify-center text-center">
<div
className="tooltip tooltip-bottom"
data-tip="Scroll back to top of comments."
>
<button
type="button"
className="btn btn-ghost btn-sm"
aria-label="Scroll back to top of comments"
onClick={() => {
commentSectionRef.current?.scrollIntoView({
behavior: 'smooth',
});
}}
>
<FaArrowUp />
</button>
</div>
</div>
)
}
</div>
)}
{!comments.length && <NoCommentsCard />}
</>
);
};
export default CommentsComponent;

168
Website/src/components/Comments/EditCommentBody.tsx Normal file
View File

@@ -0,0 +1,168 @@
import { zodResolver } from '@hookform/resolvers/zod';
import { FC, useState, Dispatch, SetStateAction } from 'react';
import { Rating } from 'react-daisyui';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
import useBeerPostComments from '@/hooks/data-fetching/beer-comments/useBeerPostComments';
import CommentQueryResult from '@/services/schema/CommentSchema/CommentQueryResult';
import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
import useBreweryPostComments from '@/hooks/data-fetching/brewery-comments/useBreweryPostComments';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormSegment from '../ui/forms/FormSegment';
import FormTextArea from '../ui/forms/FormTextArea';
import { HandleDeleteCommentRequest, HandleEditCommentRequest } from './types';
import { useInView } from 'react-intersection-observer';
import classNames from 'classnames';
interface EditCommentBodyProps {
comment: z.infer<typeof CommentQueryResult>;
setInEditMode: Dispatch<SetStateAction<boolean>>;
mutate: ReturnType<
typeof useBeerPostComments | typeof useBreweryPostComments
>['mutate'];
handleDeleteCommentRequest: HandleDeleteCommentRequest;
handleEditCommentRequest: HandleEditCommentRequest;
}
const EditCommentBody: FC<EditCommentBodyProps> = ({
comment,
setInEditMode,
mutate,
handleDeleteCommentRequest,
handleEditCommentRequest,
}) => {
const { register, handleSubmit, formState, setValue, watch } = useForm<
z.infer<typeof CreateCommentValidationSchema>
>({
defaultValues: { content: comment.content, rating: comment.rating },
resolver: zodResolver(CreateCommentValidationSchema),
});
const { errors, isSubmitting } = formState;
const [isDeleting, setIsDeleting] = useState(false);
const onDelete = async () => {
const loadingToast = toast.loading('Deleting comment...');
setIsDeleting(true);
try {
await handleDeleteCommentRequest(comment.id);
await mutate();
toast.remove(loadingToast);
toast.success('Deleted comment.');
} catch (error) {
toast.remove(loadingToast);
createErrorToast(error);
}
};
const onEdit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
data,
) => {
const loadingToast = toast.loading('Submitting comment edits...');
try {
setInEditMode(true);
await handleEditCommentRequest(comment.id, data);
await mutate();
toast.remove(loadingToast);
toast.success('Comment edits submitted successfully.');
setInEditMode(false);
} catch (error) {
toast.remove(loadingToast);
createErrorToast(error);
setInEditMode(false);
}
};
const disableForm = isSubmitting || isDeleting;
const [ref, inView] = useInView({ triggerOnce: true });
return (
<div
className={classNames('py-4 pr-3 animate-in fade-in-10', {
'opacity-0': !inView,
'animate-fade': inView,
})}
ref={ref}
>
<form onSubmit={handleSubmit(onEdit)} className="space-y-3">
<div>
<FormInfo>
<FormLabel htmlFor="content">Edit your comment</FormLabel>
<FormError>{errors.content?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
id="content"
formValidationSchema={register('content')}
placeholder="Comment"
rows={2}
error={!!errors.content?.message}
disabled={disableForm}
/>
</FormSegment>
<div className="flex flex-row items-center justify-between">
<div>
<FormInfo>
<FormLabel htmlFor="rating">Change your rating</FormLabel>
<FormError>{errors.rating?.message}</FormError>
</FormInfo>
<Rating
value={watch('rating')}
onChange={(value) => {
setValue('rating', value);
}}
>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled={disableForm}
aria-disabled={disableForm}
key={index}
/>
))}
</Rating>
</div>
<div className="join">
<button
type="button"
className="btn join-item btn-xs lg:btn-sm"
disabled={disableForm}
onClick={() => {
setInEditMode(false);
}}
>
Cancel
</button>
<button
type="submit"
disabled={disableForm}
className="btn join-item btn-xs lg:btn-sm"
>
Save
</button>
<button
type="button"
className="btn join-item btn-xs lg:btn-sm"
onClick={onDelete}
disabled={disableForm}
>
Delete
</button>
</div>
</div>
</div>
</form>
</div>
);
};
export default EditCommentBody;

13
Website/src/components/Comments/NoCommentsCard.tsx Normal file
View File

@@ -0,0 +1,13 @@
const NoCommentsCard = () => {
return (
<div className="card bg-base-300">
<div className="card-body h-64">
<div className="flex h-full flex-col items-center justify-center">
<span className="text-lg font-bold">No comments yet.</span>
</div>
</div>
</div>
);
};
export default NoCommentsCard;

12
Website/src/components/Comments/types/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import CreateCommentValidationSchema from '@/services/schema/CommentSchema/CreateCommentValidationSchema';
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import { z } from 'zod';
type APIResponse = z.infer<typeof APIResponseValidationSchema>;
export type HandleEditCommentRequest = (
id: string,
data: z.infer<typeof CreateCommentValidationSchema>,
) => Promise<APIResponse>;
export type HandleDeleteCommentRequest = (id: string) => Promise<APIResponse>;

182
Website/src/components/CreateBeerPostForm.tsx Normal file
View File

@@ -0,0 +1,182 @@
import { FunctionComponent } from 'react';
import router from 'next/router';
import { zodResolver } from '@hookform/resolvers/zod';
import { BeerStyle } from '@prisma/client';
import toast from 'react-hot-toast';
import { useForm, SubmitHandler, FieldError } from 'react-hook-form';
import { z } from 'zod';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import CreateBeerPostValidationSchema from '@/services/posts/beer-post/schema/CreateBeerPostValidationSchema';
import UploadImageValidationSchema from '@/services/schema/ImageSchema/UploadImageValidationSchema';
import createErrorToast from '@/util/createErrorToast';
import { sendCreateBeerPostRequest } from '@/requests/posts/beer-post';
import sendUploadBeerImagesRequest from '@/requests/images/beer-image/sendUploadBeerImageRequest';
import Button from './ui/forms/Button';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
import FormLabel from './ui/forms/FormLabel';
import FormSegment from './ui/forms/FormSegment';
import FormSelect from './ui/forms/FormSelect';
import FormTextArea from './ui/forms/FormTextArea';
import FormTextInput from './ui/forms/FormTextInput';
interface BeerFormProps {
brewery: z.infer<typeof BreweryPostQueryResult>;
styles: BeerStyle[];
}
const CreateBeerPostWithImagesValidationSchema = CreateBeerPostValidationSchema.merge(
UploadImageValidationSchema,
);
const CreateBeerPostForm: FunctionComponent<BeerFormProps> = ({
styles = [],
brewery,
}) => {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<z.infer<typeof CreateBeerPostWithImagesValidationSchema>>({
resolver: zodResolver(CreateBeerPostWithImagesValidationSchema),
defaultValues: { breweryId: brewery.id },
});
const onSubmit: SubmitHandler<
z.infer<typeof CreateBeerPostWithImagesValidationSchema>
> = async (data) => {
if (!(data.images instanceof FileList)) {
return;
}
try {
const loadingToast = toast.loading('Creating beer post...');
const beerPost = await sendCreateBeerPostRequest({
body: {
name: data.name,
description: data.description,
abv: data.abv,
ibu: data.ibu,
},
breweryId: data.breweryId,
styleId: data.styleId,
});
await sendUploadBeerImagesRequest({ beerPost, images: data.images });
await router.push(`/beers/${beerPost.id}`);
toast.dismiss(loadingToast);
toast.success('Created beer post.');
} catch (e) {
createErrorToast(e);
}
};
return (
<form className="form-control" onSubmit={handleSubmit(onSubmit)}>
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="Lorem Ipsum Lager"
formValidationSchema={register('name')}
error={!!errors.name}
type="text"
id="name"
disabled={isSubmitting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="typeId">Style</FormLabel>
<FormError>{errors.styleId?.message}</FormError>
</FormInfo>
<FormSegment>
<FormSelect
disabled={isSubmitting}
formRegister={register('styleId')}
error={!!errors.styleId}
id="styleId"
options={styles.map((style) => ({
value: style.id,
text: style.name,
}))}
placeholder="Beer style"
message="Pick a beer style"
/>
</FormSegment>
<div className="flex flex-wrap md:mb-3">
<div className="mb-2 w-full md:mb-0 md:w-1/2 md:pr-3">
<FormInfo>
<FormLabel htmlFor="abv">ABV</FormLabel>
<FormError>{errors.abv?.message}</FormError>
</FormInfo>
<FormTextInput
disabled={isSubmitting}
placeholder="12"
formValidationSchema={register('abv', { valueAsNumber: true })}
error={!!errors.abv}
type="text"
id="abv"
/>
</div>
<div className="mb-2 w-full md:mb-0 md:w-1/2 md:pl-3">
<FormInfo>
<FormLabel htmlFor="ibu">IBU</FormLabel>
<FormError>{errors.ibu?.message}</FormError>
</FormInfo>
<FormTextInput
disabled={isSubmitting}
placeholder="52"
formValidationSchema={register('ibu', { valueAsNumber: true })}
error={!!errors.ibu}
type="text"
id="lastName"
/>
</div>
</div>
<FormInfo>
<FormLabel htmlFor="description">Description</FormLabel>
<FormError>{errors.description?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
disabled={isSubmitting}
placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
error={!!errors.description}
formValidationSchema={register('description')}
id="description"
rows={8}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="images">Images</FormLabel>
<FormError>{(errors.images as FieldError | undefined)?.message}</FormError>
</FormInfo>
<FormSegment>
<input
type="file"
{...register('images')}
multiple
className="file-input file-input-bordered w-full"
disabled={isSubmitting}
/>
</FormSegment>
<div className="mt-6">
<Button type="submit" isSubmitting={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</Button>
</div>
</form>
);
};
export default CreateBeerPostForm;

150
Website/src/components/EditBeerPostForm.tsx Normal file
View File

@@ -0,0 +1,150 @@
import { FC } from 'react';
import { useRouter } from 'next/router';
import toast from 'react-hot-toast';
import { z } from 'zod';
import { useForm, SubmitHandler } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import EditBeerPostValidationSchema from '@/services/posts/beer-post/schema/EditBeerPostValidationSchema';
import createErrorToast from '@/util/createErrorToast';
import {
sendEditBeerPostRequest,
sendDeleteBeerPostRequest,
} from '@/requests/posts/beer-post';
import Button from './ui/forms/Button';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
import FormLabel from './ui/forms/FormLabel';
import FormSegment from './ui/forms/FormSegment';
import FormTextArea from './ui/forms/FormTextArea';
import FormTextInput from './ui/forms/FormTextInput';
type EditBeerPostSchema = z.infer<typeof EditBeerPostValidationSchema>;
interface EditBeerPostFormProps {
previousValues: EditBeerPostSchema;
}
const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
const router = useRouter();
const { register, handleSubmit, formState } = useForm<EditBeerPostSchema>({
resolver: zodResolver(EditBeerPostValidationSchema),
defaultValues: previousValues,
});
const { isSubmitting, errors } = formState;
const onSubmit: SubmitHandler<EditBeerPostSchema> = async (data) => {
try {
const loadingToast = toast.loading('Editing beer post...');
await sendEditBeerPostRequest({
beerPostId: data.id,
body: {
name: data.name,
abv: data.abv,
ibu: data.ibu,
description: data.description,
},
});
await router.push(`/beers/${data.id}`);
toast.success('Edited beer post.');
toast.dismiss(loadingToast);
} catch (e) {
createErrorToast(e);
await router.push(`/beers/${data.id}`);
}
};
const onDelete = async () => {
try {
const loadingToast = toast.loading('Deleting beer post...');
await sendDeleteBeerPostRequest({ beerPostId: previousValues.id });
toast.dismiss(loadingToast);
await router.push('/beers');
toast.success('Deleted beer post.');
} catch (e) {
createErrorToast(e);
await router.push(`/beers`);
}
};
return (
<form className="form-control" onSubmit={handleSubmit(onSubmit)}>
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
placeholder="Lorem Ipsum Lager"
formValidationSchema={register('name')}
error={!!errors.name}
type="text"
id="name"
disabled={isSubmitting}
/>
</FormSegment>
<div className="flex flex-wrap sm:text-xs md:mb-3">
<div className="mb-2 w-full md:mb-0 md:w-1/2 md:pr-3">
<FormInfo>
<FormLabel htmlFor="abv">ABV</FormLabel>
<FormError>{errors.abv?.message}</FormError>
</FormInfo>
<FormTextInput
disabled={isSubmitting}
placeholder="12"
formValidationSchema={register('abv', { valueAsNumber: true })}
error={!!errors.abv}
type="text"
id="abv"
/>
</div>
<div className="mb-2 w-full md:mb-0 md:w-1/2 md:pl-3">
<FormInfo>
<FormLabel htmlFor="ibu">IBU</FormLabel>
<FormError>{errors.ibu?.message}</FormError>
</FormInfo>
<FormTextInput
disabled={isSubmitting}
placeholder="52"
formValidationSchema={register('ibu', { valueAsNumber: true })}
error={!!errors.ibu}
type="text"
id="lastName"
/>
</div>
</div>
<FormInfo>
<FormLabel htmlFor="description">Description</FormLabel>
<FormError>{errors.description?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
disabled={isSubmitting}
placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
error={!!errors.description}
formValidationSchema={register('description')}
id="description"
rows={8}
/>
</FormSegment>
<div className="mt-2 space-y-4">
<Button type="submit" isSubmitting={isSubmitting}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</Button>
<button
className={`btn btn-primary w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
type="button"
onClick={onDelete}
>
Delete
</button>
</div>
</form>
);
};
export default EditBeerPostForm;

106
Website/src/components/EditBreweryPostForm.tsx Normal file
View File

@@ -0,0 +1,106 @@
import EditBreweryPostValidationSchema from '@/services/posts/brewery-post/schema/EditBreweryPostValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { FC, useState } from 'react';
import BreweryPostQueryResult from '@/services/posts/brewery-post/schema/BreweryPostQueryResult';
import {
sendDeleteBreweryPostRequest,
sendEditBreweryPostRequest,
} from '@/requests/posts/brewery-post';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
import FormLabel from './ui/forms/FormLabel';
import FormSegment from './ui/forms/FormSegment';
import FormTextArea from './ui/forms/FormTextArea';
import FormTextInput from './ui/forms/FormTextInput';
interface EditBreweryPostFormProps {
breweryPost: z.infer<typeof BreweryPostQueryResult>;
}
const EditBreweryPostForm: FC<EditBreweryPostFormProps> = ({ breweryPost }) => {
const router = useRouter();
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<z.infer<typeof EditBreweryPostValidationSchema>>({
resolver: zodResolver(EditBreweryPostValidationSchema),
defaultValues: {
name: breweryPost.name,
description: breweryPost.description,
id: breweryPost.id,
dateEstablished: breweryPost.dateEstablished,
},
});
const [isDeleting, setIsDeleting] = useState(false);
const onSubmit = async (data: z.infer<typeof EditBreweryPostValidationSchema>) => {
await sendEditBreweryPostRequest({ breweryPostId: breweryPost.id, body: data });
await router.push(`/breweries/${breweryPost.id}`);
};
const handleDelete = async () => {
setIsDeleting(true);
await sendDeleteBreweryPostRequest({ breweryPostId: breweryPost.id });
await router.push('/breweries');
};
return (
<form className="form-control space-y-4" onSubmit={handleSubmit(onSubmit)}>
<div className="w-full">
<FormInfo>
<FormLabel htmlFor="name">Name</FormLabel>
<FormError>{errors.name?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
id="name"
type="text"
placeholder="Name"
formValidationSchema={register('name')}
error={!!errors.name}
disabled={isSubmitting || isDeleting}
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="description">Description</FormLabel>
<FormError>{errors.description?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextArea
disabled={isSubmitting || isDeleting}
placeholder="Ratione cumque quas quia aut impedit ea culpa facere. Ut in sit et quas reiciendis itaque."
error={!!errors.description}
formValidationSchema={register('description')}
id="description"
rows={8}
/>
</FormSegment>
</div>
<div className="w-full space-y-3">
<button
disabled={isSubmitting || isDeleting}
className="btn btn-primary w-full"
type="submit"
>
{isSubmitting ? 'Saving...' : 'Save'}
</button>
<button
className="btn btn-primary w-full"
type="button"
disabled={isSubmitting || isDeleting}
onClick={handleDelete}
>
Delete Brewery
</button>
</div>
</form>
);
};
export default EditBreweryPostForm;

92
Website/src/components/Login/LoginForm.tsx Normal file
View File

@@ -0,0 +1,92 @@
import LoginValidationSchema from '@/services/users/auth/schema/LoginValidationSchema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { useContext } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import { z } from 'zod';
import UserContext from '@/contexts/UserContext';
import toast from 'react-hot-toast';
import createErrorToast from '@/util/createErrorToast';
import FormError from '../ui/forms/FormError';
import FormInfo from '../ui/forms/FormInfo';
import FormLabel from '../ui/forms/FormLabel';
import FormSegment from '../ui/forms/FormSegment';
import FormTextInput from '../ui/forms/FormTextInput';
import Button from '../ui/forms/Button';
import { sendLoginUserRequest } from '@/requests/users/auth';
type LoginT = z.infer<typeof LoginValidationSchema>;
const LoginForm = () => {
const router = useRouter();
const { register, handleSubmit, formState, reset } = useForm<LoginT>({
resolver: zodResolver(LoginValidationSchema),
defaultValues: {
username: '',
password: '',
},
});
const { errors } = formState;
const { mutate } = useContext(UserContext);
const onSubmit: SubmitHandler<LoginT> = async (data) => {
const loadingToast = toast.loading('Logging in...');
try {
await sendLoginUserRequest(data);
await mutate!();
toast.remove(loadingToast);
toast.success('Logged in!');
await router.push(`/users/current`);
} catch (error) {
toast.remove(loadingToast);
createErrorToast(error);
reset();
}
};
return (
<form className="form-control space-y-5" onSubmit={handleSubmit(onSubmit)}>
<div>
<FormInfo>
<FormLabel htmlFor="username">username</FormLabel>
<FormError>{errors.username?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
id="username"
type="text"
formValidationSchema={register('username')}
disabled={formState.isSubmitting}
error={!!errors.username}
placeholder="username"
/>
</FormSegment>
<FormInfo>
<FormLabel htmlFor="password">password</FormLabel>
<FormError>{errors.password?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="password"
type="password"
formValidationSchema={register('password')}
error={!!errors.password}
placeholder="password"
/>
</FormSegment>
</div>
<div className="w-full">
<Button type="submit" isSubmitting={formState.isSubmitting}>
Login
</Button>
</div>
</form>
);
};
export default LoginForm;

180
Website/src/components/RegisterUserForm.tsx Normal file
View File

@@ -0,0 +1,180 @@
import { CreateUserValidationSchemaWithUsernameAndEmailCheck } from '@/services/users/auth/schema/CreateUserValidationSchemas';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/router';
import { FC } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import createErrorToast from '@/util/createErrorToast';
import toast from 'react-hot-toast';
import { sendRegisterUserRequest } from '@/requests/users/auth';
import Button from './ui/forms/Button';
import FormError from './ui/forms/FormError';
import FormInfo from './ui/forms/FormInfo';
import FormLabel from './ui/forms/FormLabel';
import FormSegment from './ui/forms/FormSegment';
import FormTextInput from './ui/forms/FormTextInput';
const RegisterUserForm: FC = () => {
const router = useRouter();
const { reset, register, handleSubmit, formState } = useForm<
z.infer<typeof CreateUserValidationSchemaWithUsernameAndEmailCheck>
>({ resolver: zodResolver(CreateUserValidationSchemaWithUsernameAndEmailCheck) });
const { errors } = formState;
const onSubmit = async (
data: z.infer<typeof CreateUserValidationSchemaWithUsernameAndEmailCheck>,
) => {
try {
const loadingToast = toast.loading('Registering user...');
await sendRegisterUserRequest(data);
reset();
router.push('/', undefined, { shallow: true });
toast.remove(loadingToast);
toast.success('User registered!');
} catch (error) {
createErrorToast({
toast,
error,
});
}
};
return (
<form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}>
<div className="lg:space-y-5">
<div className="flex flex-col lg:flex-row lg:space-x-5">
<div className="lg:w-[50%]">
<FormInfo>
<FormLabel htmlFor="firstName">First name</FormLabel>
<FormError>{errors.firstName?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="firstName"
type="text"
formValidationSchema={register('firstName')}
error={!!errors.firstName}
placeholder="John"
/>
</FormSegment>
</div>
<div className="lg:w-[50%]">
<FormInfo>
<FormLabel htmlFor="lastName">Last name</FormLabel>
<FormError>{errors.lastName?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="lastName"
type="text"
formValidationSchema={register('lastName')}
error={!!errors.lastName}
placeholder="Doe"
/>
</FormSegment>
</div>
</div>
<div className="flex flex-col lg:flex-row lg:space-x-5">
<div className="lg:w-[50%]">
<FormInfo>
<FormLabel htmlFor="email">email</FormLabel>
<FormError>{errors.email?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="email"
type="email"
formValidationSchema={register('email')}
error={!!errors.email}
placeholder="john.doe@example.com"
/>
</FormSegment>
</div>
<div className="lg:w-[50%]">
<FormInfo>
<FormLabel htmlFor="username">username</FormLabel>
<FormError>{errors.username?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="username"
type="text"
formValidationSchema={register('username')}
error={!!errors.username}
placeholder="johndoe"
/>
</FormSegment>
</div>
</div>
<div className="flex flex-col lg:flex-row lg:space-x-5">
<div className="lg:w-[50%]">
<FormInfo>
<FormLabel htmlFor="password">password</FormLabel>
<FormError>{errors.password?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="password"
type="password"
formValidationSchema={register('password')}
error={!!errors.password}
placeholder="password"
/>
</FormSegment>
</div>
<div className="lg:w-[50%]">
<FormInfo>
<FormLabel htmlFor="confirmPassword">confirm password</FormLabel>
<FormError>{errors.confirmPassword?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
disabled={formState.isSubmitting}
id="confirmPassword"
type="password"
formValidationSchema={register('confirmPassword')}
error={!!errors.confirmPassword}
placeholder="confirm password"
/>
</FormSegment>
</div>
</div>
<div>
<FormInfo>
<FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel>
<FormError>{errors.dateOfBirth?.message}</FormError>
</FormInfo>
<FormSegment>
<FormTextInput
id="dateOfBirth"
disabled={formState.isSubmitting}
type="date"
formValidationSchema={register('dateOfBirth')}
error={!!errors.dateOfBirth}
placeholder="date of birth"
/>
</FormSegment>
</div>
</div>
<div className="mt-10">
<Button type="submit" isSubmitting={formState.isSubmitting}>
Register User
</Button>
</div>
</form>
);
};
export default RegisterUserForm;

67
Website/src/components/UserPage/UserFollowButton.tsx Normal file
View File

@@ -0,0 +1,67 @@
import useFollowStatus from '@/hooks/data-fetching/user-follows/useFollowStatus';
import useGetUsersFollowedByUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowedByUser';
import useGetUsersFollowingUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowingUser';
import { sendUserFollowRequest } from '@/requests/users/auth';
import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
import { FC, useState } from 'react';
import { FaUserCheck, FaUserPlus } from 'react-icons/fa';
import { z } from 'zod';
interface UserFollowButtonProps {
mutateFollowerCount: ReturnType<typeof useGetUsersFollowingUser>['mutate'];
mutateFollowingCount: ReturnType<typeof useGetUsersFollowedByUser>['mutate'];
user: z.infer<typeof GetUserSchema>;
}
const UserFollowButton: FC<UserFollowButtonProps> = ({
user,
mutateFollowerCount,
mutateFollowingCount,
}) => {
const { isFollowed, mutate: mutateFollowStatus } = useFollowStatus(user.id);
const [isLoading, setIsLoading] = useState(false);
const onClick = async () => {
try {
setIsLoading(true);
await sendUserFollowRequest({ userId: user.id });
await Promise.all([
mutateFollowStatus(),
mutateFollowerCount(),
mutateFollowingCount(),
]);
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
return (
<button
type="button"
className={`btn btn-sm gap-2 rounded-2xl lg:btn-md ${
!isFollowed ? 'btn-ghost outline' : 'btn-primary'
}`}
onClick={() => {
onClick();
}}
disabled={isLoading}
>
{isFollowed ? (
<>
<FaUserCheck className="text-xl" />
Followed
</>
) : (
<>
<FaUserPlus className="text-xl" />
Follow
</>
)}
</button>
);
};
export default UserFollowButton;

85
Website/src/components/UserPage/UserHeader.tsx Normal file
View File

@@ -0,0 +1,85 @@
import useTimeDistance from '@/hooks/utilities/useTimeDistance';
import { FC, useContext } from 'react';
import { z } from 'zod';
import { format } from 'date-fns';
import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
import useGetUsersFollowedByUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowedByUser';
import useGetUsersFollowingUser from '@/hooks/data-fetching/user-follows/useGetUsersFollowingUser';
import UserContext from '@/contexts/UserContext';
import Link from 'next/link';
import UserAvatar from '../Account/UserAvatar';
import UserFollowButton from './UserFollowButton';
interface UserHeaderProps {
user: z.infer<typeof GetUserSchema>;
}
const UserHeader: FC<UserHeaderProps> = ({ user }) => {
const timeDistance = useTimeDistance(new Date(user.createdAt));
const { followingCount, mutate: mutateFollowingCount } = useGetUsersFollowedByUser({
userId: user.id,
pageSize: 10,
});
const { followerCount, mutate: mutateFollowerCount } = useGetUsersFollowingUser({
userId: user.id,
pageSize: 10,
});
const { user: currentUser } = useContext(UserContext);
return (
<header className="card items-center text-center">
<div className="card-body w-full items-center justify-center">
<div className="h-40 w-40">
<UserAvatar user={user} />
</div>
<div>
<h1 className="text-2xl font-bold lg:text-4xl">{user.username}</h1>
<div className="flex space-x-3 text-lg font-bold">
<span>{followingCount} Following</span>
<span>{followerCount} Followers</span>
</div>
</div>
<div>
<span className="italic">
joined{' '}
{timeDistance && (
<span
className="tooltip tooltip-bottom"
data-tip={format(new Date(user.createdAt), 'MM/dd/yyyy')}
>
{`${timeDistance} ago`}
</span>
)}
</span>
</div>
{user.bio && (
<div className="my-2 w-6/12">
<p className="text-sm">{user.bio}</p>
</div>
)}
<div className="my-2 flex items-center justify-center">
{currentUser?.id !== user.id ? (
<UserFollowButton
mutateFollowerCount={mutateFollowerCount}
user={user}
mutateFollowingCount={mutateFollowingCount}
/>
) : (
<Link href={`/users/account/edit-profile`} className="btn btn-primary btn-sm">
Edit Profile
</Link>
)}
</div>
</div>
</header>
);
};
export default UserHeader;

56
Website/src/components/ui/CustomToast.tsx Normal file
View File

@@ -0,0 +1,56 @@
import { FC, ReactNode } from 'react';
import toast, { Toast, Toaster, resolveValue } from 'react-hot-toast';
import { FaTimes } from 'react-icons/fa';
const toastToClassName = (toastType: Toast['type']) => {
let className: 'alert-success' | 'alert-error' | 'alert-info';
switch (toastType) {
case 'success':
className = 'alert-success';
break;
case 'error':
className = 'alert-error';
break;
default:
className = 'alert-info';
}
return className;
};
const CustomToast: FC<{ children: ReactNode }> = ({ children }) => {
return (
<>
<Toaster
position="bottom-right"
toastOptions={{
duration: 2500,
}}
>
{(t) => {
const alertType = toastToClassName(t.type);
return (
<div
className={`alert ${alertType} flex w-full items-start justify-between shadow-lg duration-200 animate-in fade-in lg:w-4/12`}
>
<p className="w-full text-left">{resolveValue(t.message, t)}</p>
{t.type !== 'loading' && (
<div>
<button
className="btn btn-circle btn-ghost btn-xs"
onClick={() => toast.dismiss(t.id)}
>
<FaTimes />
</button>
</div>
)}
</div>
);
}}
</Toaster>
{children}
</>
);
};
export default CustomToast;

12
Website/src/components/ui/Layout.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { FC, ReactNode } from 'react';
import Navbar from './Navbar';
const Layout: FC<{ children: ReactNode }> = ({ children }) => {
return (
<div className="flex h-full flex-col" id="app">
<Navbar />
{children}
</div>
);
};
export default Layout;

37
Website/src/components/ui/LikeButton.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { FC } from 'react';
import { FaThumbsUp, FaRegThumbsUp } from 'react-icons/fa';
interface LikeButtonProps {
isLiked: boolean;
handleLike: () => Promise<void>;
loading: boolean;
}
const LikeButton: FC<LikeButtonProps> = ({ isLiked, handleLike, loading }) => {
return (
<button
type="button"
className={`btn btn-sm gap-2 rounded-2xl lg:btn-md ${
!isLiked ? 'btn-ghost outline' : 'btn-primary'
}`}
onClick={() => {
handleLike();
}}
disabled={loading}
>
{isLiked ? (
<>
<FaThumbsUp className="lg:text-2xl" />
Liked
</>
) : (
<>
<FaRegThumbsUp className="lg:text-2xl" />
Like
</>
)}
</button>
);
};
export default LikeButton;

26
Website/src/components/ui/LoadingCard.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { FC } from 'react';
const LoadingCard: FC = () => {
return (
<div className="card bg-base-300">
<figure className="h-96 border-8 border-base-300 bg-base-300">
<div className="h-full w-full animate-pulse rounded-md bg-base-100" />
</figure>
<div className="card-body h-52">
<div className="flex animate-pulse space-x-4">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 w-3/4 rounded bg-base-100" />
<div className="space-y-2">
<div className="h-4 rounded bg-base-100" />
<div className="h-4 w-5/6 rounded bg-base-100" />
<div className="h-4 w-5/6 rounded bg-base-100" />
<div className="h-4 rounded bg-base-100" />
</div>
</div>
</div>
</div>
</div>
);
};
export default LoadingCard;

20
Website/src/components/ui/LocationMarker.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React, { FC } from 'react';
import { HiLocationMarker } from 'react-icons/hi';
interface LocationMarkerProps {
size?: 'sm' | 'md' | 'lg' | 'xl';
color?: 'blue' | 'red' | 'green' | 'yellow';
}
const sizeClasses: Record<NonNullable<LocationMarkerProps['size']>, `text-${string}`> = {
sm: 'text-lg',
md: 'text-xl',
lg: 'text-2xl',
xl: 'text-3xl',
};
const LocationMarker: FC<LocationMarkerProps> = ({ size = 'md', color = 'blue' }) => {
return <HiLocationMarker className={`${sizeClasses[size]} text-${color}-600`} />;
};
export default React.memo(LocationMarker);

138
Website/src/components/ui/Navbar.tsx Normal file
View File

@@ -0,0 +1,138 @@
import useMediaQuery from '@/hooks/utilities/useMediaQuery';
import useNavbar from '@/hooks/utilities/useNavbar';
// import useTheme from '@/hooks/utilities/useTheme';
import Link from 'next/link';
import { FC, useRef } from 'react';
// import { MdDarkMode, MdLightMode } from 'react-icons/md';
import { FaBars } from 'react-icons/fa';
import classNames from 'classnames';
const DesktopLinks: FC = () => {
const { pages, currentURL } = useNavbar();
return (
<div className="block flex-none">
<ul className="menu menu-horizontal menu-sm">
{pages.map((page) => {
return (
<li key={page.slug}>
<Link tabIndex={0} href={page.slug} className="hover:bg-primary-focus">
<span
className={`text-lg uppercase ${
currentURL === page.slug ? 'font-extrabold' : 'font-bold'
} text-base-content`}
>
{page.name}
</span>
</Link>
</li>
);
})}
</ul>
</div>
);
};
const MobileLinks: FC = () => {
const { pages } = useNavbar();
const drawerRef = useRef<HTMLInputElement>(null);
return (
<div className="flex-none lg:hidden">
<div className="drawer drawer-end">
<input id="my-drawer" type="checkbox" className="drawer-toggle" ref={drawerRef} />
<div className="drawer-content">
<label htmlFor="my-drawer" className="btn btn-ghost drawer-button">
<FaBars />
</label>
</div>
<div className="drawer-side">
<label
htmlFor="my-drawer"
aria-label="close sidebar"
className="drawer-overlay"
/>
<ul className="menu min-h-full bg-primary pr-16 text-base-content">
{pages.map((page) => {
return (
<li key={page.slug}>
<Link
href={page.slug}
tabIndex={0}
rel={page.slug === '/resume/main.pdf' ? 'noopener noreferrer' : ''}
target={page.slug === '/resume/main.pdf' ? '_blank' : ''}
onClick={() => {
if (!drawerRef.current) return;
drawerRef.current.checked = false;
}}
>
<span className="text-lg font-bold uppercase">{page.name}</span>
</Link>
</li>
);
})}
</ul>
</div>
</div>
</div>
);
};
const Navbar = () => {
const isDesktopView = useMediaQuery('(min-width: 1024px)');
const { currentURL } = useNavbar();
const backgroundIsTransparent = currentURL === '/';
const isOnHomePage = currentURL === '/';
// const { theme, setTheme } = useTheme();
return (
<div
className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', {
'bg-transparent': backgroundIsTransparent,
'bg-primary': !backgroundIsTransparent,
})}
>
<div className="flex-1">
{isOnHomePage ? null : (
<Link className="btn btn-ghost btn-sm" href="/">
<span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
</Link>
)}
</div>
{/* <div
className="tooltip tooltip-left"
data-tip={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
>
<div>
{theme === 'light' ? (
<button
className="btn btn-circle btn-ghost btn-md"
data-set-theme="dark"
data-act-class="ACTIVECLASS"
onClick={() => setTheme('dark')}
>
<MdLightMode className="text-xl" />
</button>
) : (
<button
className="btn btn-circle btn-ghost btn-md"
data-set-theme="light"
data-act-class="ACTIVECLASS"
onClick={() => setTheme('light')}
>
<MdDarkMode className="text-xl" />
</button>
)}
</div>
</div> */}
<div>{isDesktopView ? <DesktopLinks /> : <MobileLinks />}</div>
</div>
);
};
export default Navbar;

23
Website/src/components/ui/SmLoadingCard.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { FC } from 'react';
const SMLoadingCard: FC = () => {
return (
<div className="card bg-base-300">
<div className="card-body h-52">
<div className="flex animate-pulse space-x-4">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 w-3/4 rounded bg-base-100" />
<div className="space-y-2">
<div className="h-4 rounded bg-base-100" />
<div className="h-4 w-5/6 rounded bg-base-100" />
<div className="h-4 w-5/6 rounded bg-base-100" />
<div className="h-4 rounded bg-base-100" />
</div>
</div>
</div>
</div>
</div>
);
};
export default SMLoadingCard;

44
Website/src/components/ui/Spinner.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { FC } from 'react';
interface SpinnerProps {
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
}
const Spinner: FC<SpinnerProps> = ({ size = 'md' }) => {
const spinnerWidths: Record<NonNullable<SpinnerProps['size']>, `w-[${number}px]`> = {
xs: 'w-[45px]',
sm: 'w-[90px]',
md: 'w-[135px]',
lg: 'w-[180px]',
xl: 'w-[225px]',
};
return (
<div
role="alert"
aria-busy="true"
aria-live="polite"
className="flex flex-col items-center justify-center rounded-3xl text-primary"
>
<svg
aria-hidden="true"
className={`${spinnerWidths[size]} animate-spin fill-base-content`}
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
fill="currentColor"
/>
<path
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
fill="currentFill"
/>
</svg>
<span className="sr-only">Loading...</span>
</div>
);
};
export default Spinner;

24
Website/src/components/ui/forms/Button.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { FunctionComponent } from 'react';
interface FormButtonProps {
children: string;
type: 'button' | 'submit' | 'reset';
isSubmitting?: boolean;
}
const Button: FunctionComponent<FormButtonProps> = ({
children,
type,
isSubmitting = false,
}) => (
// eslint-disable-next-line react/button-has-type
<button
type={type}
className={`btn btn-primary w-full rounded-xl`}
disabled={isSubmitting}
>
{children}
</button>
);
export default Button;

16
Website/src/components/ui/forms/FormError.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { FunctionComponent } from 'react';
/**
* @example
* <FormError>Something went wrong!</FormError>;
*/
const FormError: FunctionComponent<{ children: string | undefined }> = ({ children }) =>
children ? (
<div
className="my-1 h-3 text-xs font-semibold italic text-error-content"
role="alert"
>
{children}
</div>
) : null;
export default FormError;

18
Website/src/components/ui/forms/FormInfo.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { FunctionComponent, ReactNode } from 'react';
interface FormInfoProps {
children: [ReactNode, ReactNode];
}
/**
* @example
* <FormInfo>
* <FormLabel htmlFor="name">Name</FormLabel>
* <FormError>{errors.name?.message}</FormError>
* </FormInfo>;
*/
const FormInfo: FunctionComponent<FormInfoProps> = ({ children }) => (
<div className="flex justify-between">{children}</div>
);
export default FormInfo;

21
Website/src/components/ui/forms/FormLabel.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { FunctionComponent } from 'react';
interface FormLabelProps {
htmlFor: string;
children: string;
}
/**
* @example
* <FormLabel htmlFor="name">Name</FormLabel>;
*/
const FormLabel: FunctionComponent<FormLabelProps> = ({ htmlFor, children }) => (
<label
className="my-1 block text-xs font-extrabold uppercase tracking-wide lg:text-sm"
htmlFor={htmlFor}
>
{children}
</label>
);
export default FormLabel;

39
Website/src/components/ui/forms/FormPageLayout.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { ReactNode, FC } from 'react';
import Link from 'next/link';
import { IconType } from 'react-icons';
import { BiArrowBack } from 'react-icons/bi';
interface FormPageLayoutProps {
children: ReactNode;
headingText: string;
headingIcon: IconType;
backLink: string;
backLinkText: string;
}
const FormPageLayout: FC<FormPageLayoutProps> = ({
children: FormComponent,
headingIcon,
headingText,
backLink,
backLinkText,
}) => {
return (
<div className="my-20 flex flex-col items-center justify-center">
<div className="w-11/12 lg:w-9/12 2xl:w-7/12">
<div className="tooltip tooltip-right" data-tip={backLinkText}>
<Link href={backLink} className="btn btn-ghost btn-sm p-0">
<BiArrowBack className="text-xl" />
</Link>
</div>
<div className="flex flex-col items-center space-y-1">
{headingIcon({ className: 'text-4xl' })}{' '}
<h1 className="text-center text-3xl font-bold">{headingText}</h1>
</div>
<div className="mt-3">{FormComponent}</div>
</div>
</div>
);
};
export default FormPageLayout;

12
Website/src/components/ui/forms/FormSegment.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { FunctionComponent } from 'react';
/** A container for both the form error and form label. */
interface FormInfoProps {
children: Array<JSX.Element> | JSX.Element;
}
const FormSegment: FunctionComponent<FormInfoProps> = ({ children }) => (
<div className="mb-2">{children}</div>
);
export default FormSegment;

64
Website/src/components/ui/forms/FormSelect.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { FunctionComponent } from 'react';
import { UseFormRegisterReturn } from 'react-hook-form';
interface FormSelectProps {
options: readonly { value: string; text: string }[];
id: string;
formRegister: UseFormRegisterReturn<string>;
error: boolean;
placeholder: string;
message: string;
disabled?: boolean;
}
/**
* @example
* <FormSelect
* options={[
* { value: '1', text: 'One' },
* { value: '2', text: 'Two' },
* { value: '3', text: 'Three' },
* ]}
* id="test"
* formRegister={register('test')}
* error={true}
* placeholder="Test"
* message="Select an option"
* />;
*
* @param props
* @param props.options The options to display in the select.
* @param props.id The id of the select.
* @param props.formRegister The form register hook from react-hook-form.
* @param props.error Whether or not the select has an error.
* @param props.placeholder The placeholder text for the select.
* @param props.message The message to display when no option is selected.
*/
const FormSelect: FunctionComponent<FormSelectProps> = ({
options,
id,
error,
formRegister,
placeholder,
message,
disabled = false,
}) => (
<select
id={id}
className={`select select-bordered block w-full rounded-lg ${
error ? 'select-error' : ''
}`}
placeholder={placeholder}
disabled={disabled}
{...formRegister}
>
<option value="">{message}</option>
{options.map(({ value, text }) => (
<option key={value} value={value}>
{text}
</option>
))}
</select>
);
export default FormSelect;

52
Website/src/components/ui/forms/FormTextArea.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { FunctionComponent } from 'react';
import { UseFormRegisterReturn } from 'react-hook-form';
interface FormTextAreaProps {
placeholder?: string;
formValidationSchema: UseFormRegisterReturn<string>;
error: boolean;
id: string;
rows: number;
disabled?: boolean;
}
/**
* @example
* <FormTextArea
* id="test"
* formValidationSchema={register('test')}
* error={true}
* placeholder="Test"
* rows={5}
* disabled
* />;
*
* @param props
* @param props.placeholder The placeholder text for the textarea.
* @param props.formValidationSchema The form register hook from react-hook-form.
* @param props.error Whether or not the textarea has an error.
* @param props.id The id of the textarea.
* @param props.rows The number of rows to display in the textarea.
* @param props.disabled Whether or not the textarea is disabled.
*/
const FormTextArea: FunctionComponent<FormTextAreaProps> = ({
placeholder = '',
formValidationSchema,
error,
id,
rows,
disabled = false,
}) => (
<textarea
id={id}
placeholder={placeholder}
className={`text-md textarea textarea-bordered m-0 w-full resize-none rounded-lg border border-solid transition ease-in-out ${
error ? 'textarea-error' : ''
}`}
{...formValidationSchema}
rows={rows}
disabled={disabled}
/>
);
export default FormTextArea;

59
Website/src/components/ui/forms/FormTextInput.tsx Normal file
View File

@@ -0,0 +1,59 @@
/* eslint-disable react/require-default-props */
import { FunctionComponent } from 'react';
import { UseFormRegisterReturn } from 'react-hook-form';
interface FormInputProps {
placeholder?: string;
formValidationSchema: UseFormRegisterReturn<string>;
error: boolean;
// eslint-disable-next-line react/require-default-props
type: 'email' | 'password' | 'text' | 'date';
id: string;
height?: string;
disabled?: boolean;
autoComplete?: string;
}
/**
* @example
* <FormTextInput
* placeholder="Lorem Ipsum Lager"
* formValidationSchema={register('name')}
* error={!!errors.name}
* type="text"
* id="name"
* disabled
* />;
*
* @param param0 The props for the FormTextInput component
* @param param0.placeholder The placeholder text for the input
* @param param0.formValidationSchema The validation schema for the input, provided by
* react-hook-form.
* @param param0.error Whether or not the input has an error.
* @param param0.type The input type (email, password, text, date).
* @param param0.id The id of the input.
* @param param0.height The height of the input.
* @param param0.disabled Whether or not the input is disabled.
* @param param0.autoComplete The autocomplete value for the input.
*/
const FormTextInput: FunctionComponent<FormInputProps> = ({
placeholder = '',
formValidationSchema,
error,
type,
id,
disabled = false,
}) => (
<input
id={id}
type={type}
placeholder={placeholder}
className={`input input-bordered w-full appearance-none rounded-lg transition ease-in-out ${
error ? 'input-error' : ''
}`}
{...formValidationSchema}
disabled={disabled}
/>
);
export default FormTextInput;

12
Website/src/components/ui/maps/ControlPanel.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { FC, memo } from 'react';
import { FullscreenControl, NavigationControl, ScaleControl } from 'react-map-gl';
const ControlPanel: FC = () => (
<>
<FullscreenControl position="top-left" />
<NavigationControl position="top-left" />
<ScaleControl />
</>
);
export default memo(ControlPanel);

35
Website/src/config/auth/cookie.ts Normal file
View File

@@ -0,0 +1,35 @@
import { NextApiResponse } from 'next';
import { serialize, parse } from 'cookie';
import { SessionRequest } from './types';
import { NODE_ENV, SESSION_MAX_AGE, SESSION_TOKEN_NAME } from '../env';
export function setTokenCookie(res: NextApiResponse, token: string) {
const cookie = serialize(SESSION_TOKEN_NAME, token, {
maxAge: SESSION_MAX_AGE,
httpOnly: false,
secure: NODE_ENV === 'production',
path: '/',
sameSite: 'lax',
});
res.setHeader('Set-Cookie', cookie);
}
export function removeTokenCookie(res: NextApiResponse) {
const cookie = serialize(SESSION_TOKEN_NAME, '', { maxAge: -1, path: '/' });
res.setHeader('Set-Cookie', cookie);
}
export function parseCookies(req: SessionRequest) {
// For API Routes we don't need to parse the cookies.
if (req.cookies) return req.cookies;
// For pages we do need to parse the cookies.
const cookie = req.headers?.cookie;
return parse(cookie || '');
}
export function getTokenCookie(req: SessionRequest) {
const cookies = parseCookies(req);
return cookies[SESSION_TOKEN_NAME];
}

24
Website/src/config/auth/localStrat.ts Normal file
View File

@@ -0,0 +1,24 @@
import Local from 'passport-local';
import { findUserByUsernameService } from '@/services/users/auth';
import ServerError from '../util/ServerError';
import { validatePassword } from './passwordFns';
const localStrat = new Local.Strategy(async (username, password, done) => {
try {
const user = await findUserByUsernameService({ username });
if (!user) {
throw new ServerError('Username or password is incorrect.', 401);
}
const isValidLogin = await validatePassword(user.hash, password);
if (!isValidLogin) {
throw new ServerError('Username or password is incorrect.', 401);
}
done(null, { id: user.id, username: user.username });
} catch (error) {
done(error);
}
});
export default localStrat;

6
Website/src/config/auth/passwordFns.ts Normal file
View File

@@ -0,0 +1,6 @@
import argon2 from 'argon2';
export const hashPassword = async (password: string) => argon2.hash(password);
export const validatePassword = async (hash: string, password: string) =>
argon2.verify(hash, password);

53
Website/src/config/auth/session.ts Normal file
View File

@@ -0,0 +1,53 @@
import { NextApiResponse } from 'next';
import Iron from '@hapi/iron';
import {
SessionRequest,
BasicUserInfoSchema,
UserSessionSchema,
} from '@/config/auth/types';
import { z } from 'zod';
import { SESSION_MAX_AGE, SESSION_SECRET } from '@/config/env';
import { setTokenCookie, getTokenCookie } from './cookie';
import ServerError from '../util/ServerError';
export async function setLoginSession(
res: NextApiResponse,
session: z.infer<typeof BasicUserInfoSchema>,
) {
if (!SESSION_SECRET) {
throw new ServerError('Authentication is not configured.', 500);
}
const createdAt = Date.now();
const obj = { ...session, createdAt, maxAge: SESSION_MAX_AGE };
const token = await Iron.seal(obj, SESSION_SECRET, Iron.defaults);
setTokenCookie(res, token);
}
export async function getLoginSession(req: SessionRequest) {
if (!SESSION_SECRET) {
throw new ServerError('Authentication is not configured.', 500);
}
const token = getTokenCookie(req);
if (!token) {
throw new ServerError('You are not logged in.', 401);
}
const session = await Iron.unseal(token, SESSION_SECRET, Iron.defaults);
const parsed = UserSessionSchema.safeParse(session);
if (!parsed.success) {
throw new ServerError('Session is invalid.', 401);
}
const { createdAt, maxAge } = parsed.data;
const expiresAt = createdAt + maxAge * 1000;
if (Date.now() > expiresAt) {
throw new ServerError('Session expired', 401);
}
return parsed.data;
}

26
Website/src/config/auth/types.ts Normal file
View File

@@ -0,0 +1,26 @@
import GetUserSchema from '@/services/users/auth/schema/GetUserSchema';
import { IncomingMessage } from 'http';
import { NextApiRequest } from 'next';
import { z } from 'zod';
export const BasicUserInfoSchema = z.object({
id: z.string().cuid(),
username: z.string(),
});
export const UserSessionSchema = BasicUserInfoSchema.merge(
z.object({
createdAt: z.number(),
maxAge: z.number(),
}),
);
export interface UserExtendedNextApiRequest extends NextApiRequest {
user?: z.infer<typeof GetUserSchema>;
}
export type SessionRequest = IncomingMessage & {
cookies: Partial<{
[key: string]: string;
}>;
};

95
Website/src/config/cloudinary/CloudinaryStorage.ts Normal file
View File

@@ -0,0 +1,95 @@
/* eslint-disable no-underscore-dangle */
import type { StorageEngine } from 'multer';
import type { UploadApiOptions, UploadApiResponse, v2 as cloudinary } from 'cloudinary';
import type { Request } from 'express';
/**
* Represents a storage engine for uploading files to Cloudinary.
*
* @example
* const storage = new CloudinaryStorage({
* cloudinary,
* params: {
* folder: 'my-folder',
* allowed_formats: ['jpg', 'png'],
* },
* });
*/
class CloudinaryStorage implements StorageEngine {
private cloudinary: typeof cloudinary;
private params: UploadApiOptions;
/**
* Creates an instance of CloudinaryStorage.
*
* @param options - The options for configuring the Cloudinary storage engine.
* @param options.cloudinary - The Cloudinary instance.
* @param options.params - The parameters for uploading files to Cloudinary.
*/
constructor(options: { cloudinary: typeof cloudinary; params: UploadApiOptions }) {
this.cloudinary = options.cloudinary;
this.params = options.params;
}
/**
* Removes the file from Cloudinary.
*
* @param req - The request object.
* @param file - The file to be removed.
* @param callback - The callback function to be called if an error occurs.
*/
_removeFile(req: Request, file: Express.Multer.File, callback: (error: Error) => void) {
this.cloudinary.uploader.destroy(file.filename, { invalidate: true }, callback);
}
/**
* Handles the file upload to Cloudinary.
*
* @param req - The request object.
* @param file - The file to be uploaded.
* @param callback - The callback function to be called after the file is uploaded.
*/
_handleFile(
req: Request,
file: Express.Multer.File,
callback: (error?: unknown, info?: Partial<Express.Multer.File>) => void,
) {
this.uploadFile(file)
.then((cloudResponse) => {
callback(null, {
path: cloudResponse.secure_url,
size: cloudResponse.bytes,
filename: cloudResponse.public_id,
});
})
.catch((error) => {
callback(error);
});
}
/**
* Uploads a file to Cloudinary.
*
* @param file - The file to be uploaded.
* @returns A promise that resolves to the upload response.
*/
private uploadFile(file: Express.Multer.File): Promise<UploadApiResponse> {
return new Promise((resolve, reject) => {
const stream = this.cloudinary.uploader.upload_stream(
this.params,
(err, response) => {
if (err != null) {
return reject(err);
}
return resolve(response!);
},
);
file.stream.pipe(stream);
});
}
}
export default CloudinaryStorage;

11
Website/src/config/cloudinary/helpers/deleteImage.ts Normal file
View File

@@ -0,0 +1,11 @@
import { cloudinary } from '..';
/**
* Deletes an image from Cloudinary.
*
* @param path - The cloudinary path of the image to be deleted.
* @returns A promise that resolves when the image is successfully deleted.
*/
const deleteImage = (path: string) => cloudinary.uploader.destroy(path);
export default deleteImage;

23
Website/src/config/cloudinary/index.ts Normal file
View File

@@ -0,0 +1,23 @@
import { v2 as cloudinary } from 'cloudinary';
import {
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
CLOUDINARY_KEY,
CLOUDINARY_SECRET,
NODE_ENV,
} from '../env';
import CloudinaryStorage from './CloudinaryStorage';
cloudinary.config({
cloud_name: NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
api_key: CLOUDINARY_KEY,
api_secret: CLOUDINARY_SECRET,
});
/** Cloudinary storage instance. */
const storage = new CloudinaryStorage({
cloudinary,
params: { folder: NODE_ENV === 'production' ? 'biergarten' : 'biergarten-dev' },
});
export { cloudinary, storage };

210
Website/src/config/env/index.ts vendored Normal file
View File

@@ -0,0 +1,210 @@
/* eslint-disable prefer-destructuring */
import { z } from 'zod';
import { env } from 'process';
import ServerError from '../util/ServerError';
import 'dotenv/config';
/**
* Environment variables are validated at runtime to ensure that they are present and have
* the correct type. This is done using the zod library.
*/
const envSchema = z.object({
BASE_URL: z.string().url(),
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: z.string(),
CLOUDINARY_KEY: z.string(),
CLOUDINARY_SECRET: z.string(),
RESET_PASSWORD_TOKEN_SECRET: z.string(),
CONFIRMATION_TOKEN_SECRET: z.string(),
SESSION_SECRET: z.string(),
SESSION_TOKEN_NAME: z.string(),
SESSION_MAX_AGE: z.coerce.number().positive(),
POSTGRES_PRISMA_URL: z.string().url(),
POSTGRES_URL_NON_POOLING: z.string().url(),
SHADOW_DATABASE_URL: z.string().url(),
NODE_ENV: z.enum(['development', 'production', 'test']),
SPARKPOST_API_KEY: z.string(),
SPARKPOST_SENDER_ADDRESS: z.string().email(),
MAPBOX_ACCESS_TOKEN: z.string(),
ADMIN_PASSWORD: z.string().regex(/^(?=.*[A-Z])(?=.*[0-9])(?=.*[^a-zA-Z0-9]).{8,}$/),
});
const parsed = envSchema.safeParse(env);
if (!parsed.success) {
throw new ServerError('Invalid environment variables', 500);
}
/**
* Base URL of the application.
*
* @example
* 'https://example.com';
*/
export const BASE_URL = parsed.data.BASE_URL;
/**
* Cloudinary cloud name.
*
* @example
* 'my-cloud';
*
* @see https://cloudinary.com/documentation/cloudinary_references
* @see https://cloudinary.com/console
*/
export const NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME =
parsed.data.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
/**
* Cloudinary API key.
*
* @example
* '123456789012345';
*
* @see https://cloudinary.com/documentation/cloudinary_references
* @see https://cloudinary.com/console
*/
export const CLOUDINARY_KEY = parsed.data.CLOUDINARY_KEY;
/**
* Cloudinary API secret.
*
* @example
* 'abcdefghijklmnopqrstuvwxyz123456';
*
* @see https://cloudinary.com/documentation/cloudinary_references
* @see https://cloudinary.com/console
*/
export const CLOUDINARY_SECRET = parsed.data.CLOUDINARY_SECRET;
/**
* Secret key for signing confirmation tokens.
*
* @example
* 'abcdefghijklmnopqrstuvwxyz123456';
*
* @see README.md for instructions on generating a secret key.
*/
export const CONFIRMATION_TOKEN_SECRET = parsed.data.CONFIRMATION_TOKEN_SECRET;
/**
* Secret key for signing reset password tokens.
*
* @example
* 'abcdefghijklmnopqrstuvwxyz123456';
*
* @see README.md for instructions on generating a secret key.
*/
export const RESET_PASSWORD_TOKEN_SECRET = parsed.data.RESET_PASSWORD_TOKEN_SECRET;
/**
* Secret key for signing session cookies.
*
* @example
* 'abcdefghijklmnopqrstuvwxyz123456';
*
* @see README.md for instructions on generating a secret key.
*/
export const SESSION_SECRET = parsed.data.SESSION_SECRET;
/**
* Name of the session cookie.
*
* @example
* 'my-app-session';
*/
export const SESSION_TOKEN_NAME = parsed.data.SESSION_TOKEN_NAME;
/**
* Maximum age of the session cookie in seconds.
*
* @example
* '86400000'; // 24 hours
*/
export const SESSION_MAX_AGE = parsed.data.SESSION_MAX_AGE;
/**
* PostgreSQL connection URL for Prisma taken from Neon.
*
* @example
* 'postgresql://user:password@host:5432/database';
*
* @see https://neon.tech/docs/guides/prisma
*/
export const POSTGRES_PRISMA_URL = parsed.data.POSTGRES_PRISMA_URL;
/**
* Non-pooling PostgreSQL connection URL taken from Neon.
*
* @example
* 'postgresql://user:password@host:5432/database';
*
* @see https://neon.tech/docs/guides/prisma
*/
export const POSTGRES_URL_NON_POOLING = parsed.data.POSTGRES_URL_NON_POOLING;
/**
* The URL of another Neon PostgreSQL database to shadow for migrations.
*
* @example
* 'postgresql://user:password@host:5432/database';
*
* @see https://neon.tech/docs/guides/prisma-migrate
*/
export const SHADOW_DATABASE_URL = parsed.data.SHADOW_DATABASE_URL;
/**
* Node environment.
*
* @example
* 'production';
*
* @see https://nodejs.org/api/process.html#process_process_env
*/
export const NODE_ENV = parsed.data.NODE_ENV;
/**
* SparkPost API key.
*
* @example
* 'abcdefghijklmnopqrstuvwxyz123456';
*
* @see https://app.sparkpost.com/account/api-keys
*/
export const SPARKPOST_API_KEY = parsed.data.SPARKPOST_API_KEY;
/**
* Sender email address for SparkPost.
*
* @example
* 'noreply@example.com';
*
* @see https://app.sparkpost.com/domains/list/sending
*/
export const SPARKPOST_SENDER_ADDRESS = parsed.data.SPARKPOST_SENDER_ADDRESS;
/**
* Your Mapbox access token.
*
* @example
* 'pk.abcdefghijklmnopqrstuvwxyz123456';
*
* @see https://docs.mapbox.com/help/how-mapbox-works/access-tokens/
*/
export const MAPBOX_ACCESS_TOKEN = parsed.data.MAPBOX_ACCESS_TOKEN;
/**
* Admin password for seeding the database.
*
* @example
* 'abcdefghijklmnopqrstuvwxyz123456';
*
* @see README.md for instructions on generating a secret key.
*/
export const ADMIN_PASSWORD = parsed.data.ADMIN_PASSWORD;

58
Website/src/config/jwt/index.ts Normal file
View File

@@ -0,0 +1,58 @@
import { BasicUserInfoSchema } from '@/config/auth/types';
import jwt, { JsonWebTokenError } from 'jsonwebtoken';
import { z } from 'zod';
import { CONFIRMATION_TOKEN_SECRET, RESET_PASSWORD_TOKEN_SECRET } from '../env';
import ServerError from '../util/ServerError';
export const generateConfirmationToken = (user: z.infer<typeof BasicUserInfoSchema>) => {
return jwt.sign(user, CONFIRMATION_TOKEN_SECRET, { expiresIn: '3m' });
};
export const verifyConfirmationToken = async (token: string) => {
try {
const decoded = jwt.verify(token, CONFIRMATION_TOKEN_SECRET);
const parsed = BasicUserInfoSchema.safeParse(decoded);
if (!parsed.success) {
throw new ServerError('Invalid token.', 401);
}
return parsed.data;
} catch (error) {
if (error instanceof Error && error.message === 'jwt expired') {
throw new ServerError(
'Your confirmation token is expired. Please generate a new one.',
401,
);
}
throw new ServerError('Something went wrong', 500);
}
};
export const generateResetPasswordToken = (user: z.infer<typeof BasicUserInfoSchema>) => {
return jwt.sign(user, RESET_PASSWORD_TOKEN_SECRET, { expiresIn: '5m' });
};
export const verifyResetPasswordToken = async (token: string) => {
try {
const decoded = jwt.verify(token, RESET_PASSWORD_TOKEN_SECRET);
const parsed = BasicUserInfoSchema.safeParse(decoded);
if (!parsed.success) {
throw new Error('Invalid token');
}
return parsed.data;
} catch (error) {
if (error instanceof JsonWebTokenError) {
throw new ServerError(
'Your reset password token is invalid. Please generate a new one.',
401,
);
}
throw new ServerError('Something went wrong', 500);
}
};

12
Website/src/config/mapbox/geocoder.ts Normal file
View File

@@ -0,0 +1,12 @@
import mbxGeocoding from '@mapbox/mapbox-sdk/services/geocoding';
import { MAPBOX_ACCESS_TOKEN } from '../env';
const geocoder = mbxGeocoding({ accessToken: MAPBOX_ACCESS_TOKEN });
const geocode = async (query: string) => {
const geoData = await geocoder.forwardGeocode({ query, limit: 1 }).send();
return geoData.body.features[0];
};
export default geocode;

28
Website/src/config/multer/uploadMiddleware.ts Normal file
View File

@@ -0,0 +1,28 @@
import multer from 'multer';
import { expressWrapper } from 'next-connect';
import { storage } from '../cloudinary';
const fileFilter: multer.Options['fileFilter'] = (req, file, callback) => {
const { mimetype } = file;
const isImage = mimetype.startsWith('image/');
if (!isImage) {
callback(null, false);
}
callback(null, true);
};
export const uploadMiddlewareMultiple = expressWrapper(
multer({ storage, fileFilter, limits: { files: 5, fileSize: 15 * 1024 * 1024 } }).array(
'images',
),
);
export const singleUploadMiddleware = expressWrapper(
multer({
storage,
fileFilter,
limits: { files: 1, fileSize: 15 * 1024 * 1024 },
}).single('image'),
);

41
Website/src/config/nextConnect/NextConnectOptions.ts Normal file
View File

@@ -0,0 +1,41 @@
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
import type { NextApiRequest, NextApiResponse } from 'next';
import type { RequestHandler } from 'next-connect/dist/types/node';
import type { HandlerOptions } from 'next-connect/dist/types/types';
import { z } from 'zod';
import logger from '../pino/logger';
import ServerError from '../util/ServerError';
import { NODE_ENV } from '../env';
type NextConnectOptionsT = HandlerOptions<
RequestHandler<
NextApiRequest,
NextApiResponse<z.infer<typeof APIResponseValidationSchema>>
>
>;
const NextConnectOptions: NextConnectOptionsT = {
onNoMatch(req, res) {
res.status(405).json({
message: 'Method not allowed.',
statusCode: 405,
success: false,
});
},
onError(error, req, res) {
if (NODE_ENV !== 'production') {
logger.error(error);
}
const message = error instanceof Error ? error.message : 'Internal server error.';
const statusCode = error instanceof ServerError ? error.statusCode : 500;
res.status(statusCode).json({
message,
statusCode,
success: false,
});
},
};
export default NextConnectOptions;

26
Website/src/config/nextConnect/middleware/getCurrentUser.ts Normal file
View File

@@ -0,0 +1,26 @@
import { NextApiResponse } from 'next';
import { NextHandler } from 'next-connect';
import ServerError from '@/config/util/ServerError';
import { findUserByIdService } from '@/services/users/auth';
import { getLoginSession } from '@/config/auth/session';
import { UserExtendedNextApiRequest } from '@/config/auth/types';
/** Get the current user from the session. Adds the user to the request object. */
const getCurrentUser = async (
req: UserExtendedNextApiRequest,
res: NextApiResponse,
next: NextHandler,
) => {
const session = await getLoginSession(req);
const user = await findUserByIdService({ userId: session?.id });
if (!user) {
throw new ServerError('User is not logged in.', 401);
}
req.user = user;
return next();
};
export default getCurrentUser;

47
Website/src/config/nextConnect/middleware/validateRequest.ts Normal file
View File

@@ -0,0 +1,47 @@
import ServerError from '@/config/util/ServerError';
import { NextApiRequest, NextApiResponse } from 'next';
import { NextHandler } from 'next-connect';
import { z } from 'zod';
interface ValidateRequestArgs {
bodySchema?: z.ZodSchema<any>;
querySchema?: z.ZodSchema<any>;
}
/**
* Middleware to validate the request body and/or query against a zod schema.
*
* @example
* const handler = nextConnect(NextConnectConfig).post(
* validateRequest({ bodySchema: BeerPostValidationSchema }),
* getCurrentUser,
* createBeerPost,
* );
*
* @param args
* @param args.bodySchema The body schema to validate against.
* @param args.querySchema The query schema to validate against.
* @throws ServerError with status code 400 if the request body or query is invalid.
*/
const validateRequest = ({ bodySchema, querySchema }: ValidateRequestArgs) => {
return (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => {
if (bodySchema) {
const parsed = bodySchema.safeParse(JSON.parse(JSON.stringify(req.body)));
if (!parsed.success) {
throw new ServerError('Invalid request body.', 400);
}
req.body = parsed.data;
}
if (querySchema) {
const parsed = querySchema.safeParse(req.query);
if (!parsed.success) {
throw new ServerError('Invalid request query.', 400);
}
req.query = parsed.data;
}
return next();
};
};
export default validateRequest;

5
Website/src/config/pino/logger.ts Normal file
View File

@@ -0,0 +1,5 @@
import pino from 'pino';
const logger = pino();
export default logger;

35
Website/src/config/sparkpost/sendEmail.ts Normal file
View File

@@ -0,0 +1,35 @@
import { SPARKPOST_API_KEY, SPARKPOST_SENDER_ADDRESS } from '../env';
interface EmailParams {
address: string;
text: string;
html: string;
subject: string;
}
const sendEmail = async ({ address, text, html, subject }: EmailParams) => {
const from = SPARKPOST_SENDER_ADDRESS;
const data = {
recipients: [{ address }],
content: { from, subject, text, html },
};
const transmissionsEndpoint = 'https://api.sparkpost.com/api/v1/transmissions';
const response = await fetch(transmissionsEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
Authorization: SPARKPOST_API_KEY,
},
body: JSON.stringify(data),
});
if (response.status !== 200) {
throw new Error(`Sparkpost API returned status code ${response.status}`);
}
};
export default sendEmail;

11
Website/src/config/util/ServerError.ts Normal file
View File

@@ -0,0 +1,11 @@
class ServerError extends Error {
constructor(
message: string,
public statusCode: number,
) {
super(message);
this.name = 'ServerError';
}
}
export default ServerError;

Some files were not shown because too many files have changed in this diff Show More