adrianhajdin · fatkungfu · Aug 4, 2022 · Aug 4, 2022 · Aug 4, 2022 · Aug 4, 2022
diff --git a/backend_sanity/package.json b/backend_sanity/package.json
@@ -14,12 +14,14 @@
     "sanity"
   ],
   "dependencies": {
-    "@sanity/base": "^2.21.10",
-    "@sanity/core": "^2.21.11",
-    "@sanity/default-layout": "^2.21.10",
-    "@sanity/default-login": "^2.21.10",
-    "@sanity/desk-tool": "^2.21.10",
-    "@sanity/vision": "^2.21.10",
+    "@sanity/base": "^2.30.1",
+    "@sanity/core": "^2.30.2",
+    "@sanity/default-layout": "^2.30.1",
+    "@sanity/default-login": "^2.30.1",
+    "@sanity/desk-tool": "^2.30.1",
+    "@sanity/eslint-config-studio": "^2.0.0",
+    "@sanity/vision": "^2.30.1",
+    "eslint": "^8.6.0",
     "prop-types": "^15.7",
     "react": "^17.0",
     "react-dom": "^17.0",

diff --git a/frontend_sanity/.babelrc b/frontend_sanity/.babelrc
@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-react"]
+  }
+
diff --git a/frontend_sanity/.eslintrc.js b/frontend_sanity/.eslintrc.js
@@ -1,28 +1,21 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true,
-  },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-  ],
-  globals: {
-    Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly',
+    es2021: true,
   },
+  extends: ['plugin:react/recommended', 'airbnb'],
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 2018,
+    ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  parser: 'babel-eslint',
-  plugins: [
-    'react',
-  ],
+  plugins: ['react'],
   rules: {
+    'no-unused-vars': ['warn'],
+    'arrow-body-style': 0,
     'react/function-component-definition': 0,
     'no-nonoctal-decimal-escape': 0,
     'no-unsafe-optional-chaining': 0,
@@ -31,10 +24,7 @@ module.exports = {
     'linebreak-style': 0,
     'react/state-in-constructor': 0,
     'import/prefer-default-export': 0,
-    'max-len': [
-      2,
-      250,
-    ],
+    'max-len': [2, 250],
     'no-multiple-empty-lines': [
       'error',
       {
@@ -45,16 +35,7 @@ module.exports = {
     'no-underscore-dangle': [
       'error',
       {
-        allow: [
-          '_d',
-          '_dh',
-          '_h',
-          '_id',
-          '_m',
-          '_n',
-          '_t',
-          '_text',
-        ],
+        allow: ['_d', '_dh', '_h', '_id', '_m', '_n', '_t', '_text'],
       },
     ],
     'object-curly-newline': 0,
@@ -68,19 +49,9 @@ module.exports = {
     'jsx-a11y/anchor-is-valid': [
       'error',
       {
-        components: [
-          'Link',
-        ],
-        specialLink: [
-          'to',
-          'hrefLeft',
-          'hrefRight',
-        ],
-        aspects: [
-          'noHref',
-          'invalidHref',
-          'preferButton',
-        ],
+        components: ['Link'],
+        specialLink: ['to', 'hrefLeft', 'hrefRight'],
+        aspects: ['noHref', 'invalidHref', 'preferButton'],
       },
     ],
   },

diff --git a/frontend_sanity/package.json b/frontend_sanity/package.json
@@ -3,27 +3,30 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.4.0",
-    "@sanity/client": "^2.21.10",
+    "@craco/craco": "^7.0.0-alpha.7",
+    "@react-oauth/google": "^0.2.6",
+    "@sanity/client": "^3.3.2",
     "@sanity/image-url": "^1.0.1",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-google-login": "^5.2.2",
-    "react-icons": "^4.3.1",
-    "react-loader-spinner": "^4.0.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "autoprefixer": "^10.4.8",
+    "postcss": "^8.4.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "react-loader-spinner": "^5.1.7-beta.1",
     "react-masonry-css": "^1.0.16",
-    "react-router-dom": "^6.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
+    "tailwindcss": "^3.1.7",
     "uuid": "^8.3.2",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
-    "test": "craco test",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -45,14 +48,14 @@
     ]
   },
   "devDependencies": {
-    "autoprefixer": "^9.8.8",
-    "eslint": "^7.11.0",
-    "eslint-config-airbnb": "^19.0.1",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "postcss": "^7.0.39",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
+    "@babel/core": "^7.18.10",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/preset-react": "^7.18.6",
+    "eslint": "^8.21.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }
diff --git a/frontend_sanity/src/components/CreatePin.jsx b/frontend_sanity/src/components/CreatePin.jsx
@@ -78,21 +78,21 @@ const CreatePin = ({ user }) => {
   return (
     <div className="flex flex-col justify-center items-center mt-5 lg:h-4/5">
       {fields && (
-        <p className="text-red-500 mb-5 text-xl transition-all duration-150 ease-in ">Please add all fields.</p>
+      <p className="text-red-500 mb-5 text-xl transition-all duration-150 ease-in ">Please add all fields.</p>
       )}
       <div className=" flex lg:flex-row flex-col justify-center items-center bg-white lg:p-5 p-3 lg:w-4/5  w-full">
         <div className="bg-secondaryColor p-3 flex flex-0.7 w-full">
           <div className=" flex justify-center items-center flex-col border-2 border-dotted border-gray-300 p-3 w-full h-420">
             {loading && (
-              <Spinner />
+            <Spinner />
             )}
             {
-              wrongImageType && (
-                <p>It&apos;s wrong file type.</p>
-              )
-            }
+            wrongImageType && (
+              <p>It&apos;s wrong file type.</p>
+            )
+          }
             {!imageAsset ? (
-              // eslint-disable-next-line jsx-a11y/label-has-associated-control
+            // eslint-disable-next-line jsx-a11y/label-has-associated-control
               <label>
                 <div className="flex flex-col items-center justify-center h-full">
                   <div className="flex flex-col justify-center items-center">
@@ -141,14 +141,14 @@ const CreatePin = ({ user }) => {
             className="outline-none text-2xl sm:text-3xl font-bold border-b-2 border-gray-200 p-2"
           />
           {user && (
-            <div className="flex gap-2 mt-2 mb-2 items-center bg-white rounded-lg ">
-              <img
-                src={user.image}
-                className="w-10 h-10 rounded-full"
-                alt="user-profile"
-              />
-              <p className="font-bold">{user.userName}</p>
-            </div>
+          <div className="flex gap-2 mt-2 mb-2 items-center bg-white rounded-lg ">
+            <img
+              src={user.image}
+              className="w-10 h-10 rounded-full"
+              alt="user-profile"
+            />
+            <p className="font-bold">{user.userName}</p>
+          </div>
           )}
           <input
             type="text"
@@ -159,7 +159,7 @@ const CreatePin = ({ user }) => {
           />
           <input
             type="url"
-            vlaue={destination}
+            value={destination}
             onChange={(e) => setDestination(e.target.value)}
             placeholder="Add a destination link"
             className="outline-none text-base sm:text-lg border-b-2 border-gray-200 p-2"

diff --git a/frontend_sanity/src/components/Feed.jsx b/frontend_sanity/src/components/Feed.jsx
@@ -30,10 +30,9 @@ const Feed = () => {
   }, [categoryId]);
   const ideaName = categoryId || 'new';
   if (loading) {
-    return (
-      <Spinner message={`We are adding ${ideaName} ideas to your feed!`} />
-    );
+    <Spinner message={`We are adding ${ideaName} ideas to your feed!`} />;
   }
+
   return (
     <div>
       {pins && (

diff --git a/frontend_sanity/src/components/Login.jsx b/frontend_sanity/src/components/Login.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import GoogleLogin from 'react-google-login';
 import { useNavigate } from 'react-router-dom';
-import { FcGoogle } from 'react-icons/fc';
+import { GoogleLogin } from '@react-oauth/google';
 import shareVideo from '../assets/share.mp4';
 import logo from '../assets/logowhite.png';
 
@@ -10,19 +9,29 @@ import { client } from '../client';
 const Login = () => {
   const navigate = useNavigate();
   const responseGoogle = (response) => {
-    localStorage.setItem('user', JSON.stringify(response.profileObj));
-    const { name, googleId, imageUrl } = response.profileObj;
+    const base64Url = response.credential.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+      window
+        .atob(base64)
+        .split('')
+        .map((c) => {
+          return `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`;
+        })
+        .join(''),
+    );
+    const { name, sub, picture } = JSON.parse(jsonPayload);
+    localStorage.setItem('user', sub);
     const doc = {
-      _id: googleId,
+      _id: sub,
       _type: 'user',
       userName: name,
-      image: imageUrl,
+      image: picture,
     };
     client.createIfNotExists(doc).then(() => {
       navigate('/', { replace: true });
     });
   };
-
   return (
     <div className="flex justify-start items-center flex-col h-screen">
       <div className=" relative w-full h-full">
@@ -36,27 +45,21 @@ const Login = () => {
           className="w-full h-full object-cover"
         />
 
-        <div className="absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0    bg-blackOverlay">
+        <div className="absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay">
           <div className="p-5">
             <img src={logo} width="130px" />
           </div>
 
           <div className="shadow-2xl">
             <GoogleLogin
-              clientId={`${process.env.REACT_APP_GOOGLE_API_TOKEN}`}
-              render={(renderProps) => (
-                <button
-                  type="button"
-                  className="bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none"
-                  onClick={renderProps.onClick}
-                  disabled={renderProps.disabled}
-                >
-                  <FcGoogle className="mr-4" /> Sign in with google
-                </button>
-              )}
-              onSuccess={responseGoogle}
-              onFailure={responseGoogle}
-              cookiePolicy="single_host_origin"
+              onSuccess={(codeResponse) => responseGoogle(codeResponse)}
+              onError={() => {
+                console.log('Login Failed');
+              }}
+              size="large"
+              text="Sign in with Google"
+              shape="square"
+              width="12px"
             />
           </div>
         </div>