feat: changes

OhmRamwala · Jul 14, 2023 · 32f60cf · 32f60cf
1 parent 705f0d0
commit 32f60cf
Show file tree

Hide file tree

Showing 48 changed files with 16,746 additions and 3,662 deletions.
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ Thumbs.db
 
 # Next.js
 .next
+
+.angular
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
 # Add files here to ignore them from prettier formatting
 /dist
-/coverage
+/coverage
+.angular
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -3,6 +3,8 @@
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "vue.volar",
+    "cpylua.language-postcss"
   ]
 }
diff --git a/README.md b/README.md
@@ -9,21 +9,41 @@ Clickvote takes the hassle of building your own reaction components around your
 - Learn about your members through deep analytics.
 - Deal with an unlimited amount of clicks per second.
 
+<h2>Requirements</h2>
+Please make sure you have installed:
+- Redis
+- Mongodb
+
 <h2>Quickstart</h2>
-TBA.
+Clone the project, run:
+```bash
+npm run setup
+```
+It will ask you add your environment variables, in most cases you can just use the default option
+
+To run the backend and frontend, run:
+```bash
+npm run web
+```
+
+To run the websockets and worker, run:
+```bash
+npm run upvotes
+```
 
-<h2>Implementation</h2>
+To modify the react component, run:
+```bash
+npm run dev:react-component
+```
+
+<h2>Add your react component to the client</h2>
 
 You can find examples of how to use the React component here:
 
 https://github.com/clickvote/clickvote/tree/main/libs/react-component/src/lib/examples
 
 ![image](https://github.com/clickvote/clickvote/assets/100117126/4596c634-4924-4e75-957e-e78aa046980f)
 
-<h2>Architecture</h2>
-
-![image](https://github.com/clickvote/clickvote/assets/100117126/24dae662-bf74-4f8b-bc22-b3deaa534209)
-
 You can read the full article here:
 
 https://dev.to/github20k/clickvote-open-source-upvotes-likes-and-reviews-to-any-context-3ef9

diff --git a/apps/backend/.env.example b/apps/backend/.env.example
@@ -1,7 +1,6 @@
-REDIS_URL=
-MONGO_URL=
-JWT_SECRET=
-FRONT_END_URL=
-PASSWORD_ENCRYPTION=
-IV_KEY=
-KAFKA_BROKERS=
+REDIS_URL=redis://localhost:6379
+MONGO_URL=mongodb://localhost/clickvote
+JWT_SECRET=sdlkfjsdsfgdsfgdkljfhfewiehw!?@#!@$!@$asdasd
+FRONT_END_URL=http://localhost:4200
+PASSWORD_ENCRYPTION=sdfgsdgdsgdsfgsdffasdfas
+IV_KEY=a1b2c3d4e5f6g7dsgdsgh8a1b2c3d4e5f6g7h8
diff --git a/apps/backend/src/middleware/auth.middleware.ts b/apps/backend/src/middleware/auth.middleware.ts
@@ -53,6 +53,7 @@ export class AuthMiddleware implements NestMiddleware {
       currentEnv: {
         id: currentEnv._id.toString(),
         name: currentEnv.name,
+        public_key: currentEnv.apiKey
       },
       env: environments.map((e) => ({
         name: e.name,

diff --git a/apps/backend/src/packages/votes/vote.document.ts b/apps/backend/src/packages/votes/vote.document.ts
@@ -27,6 +27,12 @@ export class Votes {
 
   @Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Environment' })
   env: Environment;
+
+  @Prop({ index: true })
+  sum: number;
+
+  @Prop({ index: true })
+  count: number;
 }
 
 export const VotesSchema = SchemaFactory.createForClass(Votes);
diff --git a/apps/consumers/.env.example b/apps/consumers/.env.example
@@ -1,7 +1,2 @@
-KAFKA_BROKERS=
-BIGDATA_DB_HOST=
-BIGDATA_DB_PORT=
-BIGDATA_DB_TYPE=
-BIGDATA_DB_USER=
-BIGDATA_DB_NAME=
-BIGDATA_DB_PASSWORD=
+REDIS_URL=redis://localhost:6379
+MONGO_URL=mongodb://localhost/clickvote
diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
@@ -1 +1,2 @@
-NEXT_PUBLIC_BACKEND_PATH=
+NEXT_PUBLIC_BACKEND_PATH=http://localhost:3000/api
+NEXT_PUBLIC_WEBSOCKETS_URL=localhost:3001
diff --git a/apps/frontend/components/form/button.tsx b/apps/frontend/components/form/button.tsx
@@ -8,7 +8,7 @@ export const Button: FC<
     <button
       {...props}
       className={clsx(
-        'w-full py-2 px-4 font-semibold rounded shadow bg-gradient-to-br from-[#BADC58] to-[#F1C40F] text-black',
+        'text-sm h-8 pl-3 pr-3 rounded-md gap-1 font-semibold bg-white text-black hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:outline-none focus-visible:bg-white/90 disabled:hover:bg-white inline-flex items-center border justify-center select-none disabled:cursor-not-allowed disabled:opacity-70 transition ease-in-out duration-200 cursor-pointer',
         props.className
       )}
     />

diff --git a/apps/frontend/components/form/input.tsx b/apps/frontend/components/form/input.tsx
@@ -37,7 +37,7 @@ export const Input: FC<
         {...allOther}
         {...all}
         onChange={onChangeFunc}
-        className={clsx(`p-2 w-full text-black`, className)}
+        className={clsx(`p-2 w-full bg-[#fff0fd]/10 text-[#EBECED] border border-[#EBECED]/20 rounded-md`, className)}
       />
       <div className="text-red-500">
         {!hideErrors ? (

diff --git a/apps/frontend/components/form/link.button.tsx b/apps/frontend/components/form/link.button.tsx
@@ -0,0 +1,28 @@
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FC,
+} from 'react';
+import clsx from 'clsx';
+import { LinkProps } from 'next/dist/client/link';
+import Link from 'next/link';
+
+export const LinkButton: FC<
+  DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > &
+    LinkProps
+> = (props) => {
+  const { ref, ...theRest } = props;
+  return (
+    <Link
+      {...theRest}
+      className={clsx(
+        'text-sm h-8 pl-3 pr-3 rounded-md gap-1 font-semibold bg-white text-black hover:bg-white/90 focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:outline-none focus-visible:bg-white/90 disabled:hover:bg-white inline-flex items-center border justify-center select-none disabled:cursor-not-allowed disabled:opacity-70 transition ease-in-out duration-200 cursor-pointer',
+        props.className
+      )}
+    />
+  );
+};
diff --git a/apps/frontend/components/form/select.tsx b/apps/frontend/components/form/select.tsx
@@ -47,7 +47,7 @@ export const Select: FC<
         {...allOther}
         {...all}
         onChange={onChangeFunc}
-        className={clsx(`p-2 w-full text-black`, className)}
+        className={clsx(`p-2 w-full bg-[#fff0fd]/10 text-[#EBECED] border border-[#EBECED]/20 rounded-md`, className)}
       >
         {children}
       </select>

diff --git a/apps/frontend/components/layout/layout.tsx b/apps/frontend/components/layout/layout.tsx
@@ -12,8 +12,8 @@ const Layout: FC<{ children: ReactNode; user: UserFromRequest }> = (props) => {
   return (
     <UserContext.Provider value={user}>
       <QueryClientProvider client={queryClient}>
-        <div className="flex min-h-[100vh] flex-col max-w-[1920px] w-full mx-auto">
-          <div className="flex py-4 text-2xl">
+        <div className="bg-[#05050B] flex min-h-[100vh] flex-col max-w-[1920px] w-full mx-auto">
+          <div className="flex py-4 text-2xl p-4">
             <div className="flex-1">ClickVote</div>
             <div className="text-sm flex items-center">
               <div className="flex items-center">
@@ -24,7 +24,7 @@ const Layout: FC<{ children: ReactNode; user: UserFromRequest }> = (props) => {
           </div>
           <div className="flex-1 flex">
             <LeftMenu />
-            <div className="p-4 bg-[#0E0F14] flex-1 border-r border-[#ffffff]/20 border-y">
+            <div className="p-4 bg-[#05050B] flex-1 border-r border-[#ffffff]/20 border-y">
               {children}
             </div>
           </div>

diff --git a/apps/frontend/components/layout/left.menu.tsx b/apps/frontend/components/layout/left.menu.tsx
@@ -33,7 +33,7 @@ const LeftMenu = () => {
   };
 
   return (
-    <div className="border border-[#ffffff]/20 px-4 w-60 bg-gradient-to-r from-[#212226] via-[#212226]/95 to-[#212226]/90 flex flex-col">
+    <div className="border border-[#ffffff]/20 px-4 w-60 bg-gradient-to-r bg-[#05050B] flex flex-col">
       <div className="flex-1 flex flex-col">
         <ActiveLink
           activeClassName="underline font-bold"

diff --git a/apps/frontend/components/votes/add.votes.component.tsx b/apps/frontend/components/votes/add.votes.component.tsx
@@ -8,6 +8,9 @@ import { FormContextRender } from '@clickvote/frontend/components/form/form.cont
 import { useMutation } from '@tanstack/react-query';
 import { axiosInstance } from '@clickvote/frontend/helper/axios';
 import { useRouter } from 'next/router';
+import { Button } from '@clickvote/frontend/components/form/button';
+import { toast } from 'react-toastify';
+import { RenderComponent } from '@clickvote/frontend/components/votes/render.component';
 
 export type VoteValues = {
   _id?: string;
@@ -63,48 +66,61 @@ export const AddVotesComponent: FC<{ initialValues?: VoteValues }> = (
   const handleSubmit = methods.handleSubmit((values) => {
     mutate(values, {
       onSuccess: ({ _id }) => {
+        toast.success(!initialValues ? 'Vote Created!' : 'Vote Updated!');
         !!_id && router.push(`/votes/${_id}`);
       },
     });
   });
 
   return (
     <>
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit}>
-          <Input name="name" label="Name" onChange={changeEvent} />
-          <Select name="type" label="Type">
-            <option value="">--Select--</option>
-            <option value="single">Single</option>
-            <option value="range">Range</option>
-          </Select>
-          <FormContextRender variablesToWatch={['type']}>
-            {({ type }) =>
-              type === 'range' && (
-                <div className="flex space-x-10">
-                  <div className="flex-1">
-                    <Input
-                      name="start"
-                      type="number"
-                      label="Range From"
-                      postChange={() => methods.trigger('end')}
-                    />
-                  </div>
-                  <div className="flex-1">
-                    <Input
-                      name="end"
-                      type="number"
-                      label="Range To"
-                      postChange={() => methods.trigger('start')}
-                    />
-                  </div>
-                </div>
-              )
-            }
-          </FormContextRender>
-          <input type="submit" value="Submit" className="bg-blue-500 p-5" />
-        </form>
-      </FormProvider>
+      <div className="flex">
+        <div className="flex-1">
+          <FormProvider {...methods}>
+            <form onSubmit={handleSubmit}>
+              <Input
+                name="name"
+                label="Name"
+                onChange={changeEvent}
+                disabled={!!initialValues}
+              />
+              <Select name="type" label="Type" disabled={!!initialValues}>
+                <option value="">--Select--</option>
+                <option value="single">Single</option>
+                <option value="range">Range</option>
+              </Select>
+              <FormContextRender variablesToWatch={['type']}>
+                {({ type }) =>
+                  type === 'range' && (
+                    <div className="flex space-x-10">
+                      <div className="flex-1">
+                        <Input
+                          name="start"
+                          type="number"
+                          label="Range From"
+                          disabled={!!initialValues}
+                          postChange={() => methods.trigger('end')}
+                        />
+                      </div>
+                      <div className="flex-1">
+                        <Input
+                          name="end"
+                          type="number"
+                          label="Range To"
+                          disabled={!!initialValues}
+                          postChange={() => methods.trigger('start')}
+                        />
+                      </div>
+                    </div>
+                  )
+                }
+              </FormContextRender>
+              {!initialValues && <Button type="submit">Save!</Button>}
+            </form>
+          </FormProvider>
+        </div>
+        {!!initialValues && <RenderComponent {...initialValues} />}
+      </div>
     </>
   );
 };