DEV Community: George Pamfilis

Handle back-press NextJS navigate to route other than previous - snippet

George Pamfilis — Wed, 20 Mar 2024 14:30:46 +0000

"use client";
import { Box, styled } from "@mui/material";
import ThankYouRequest from "@/_components/thankyourequest";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

const FOOTER_HEIGHT = 60; // Constant for the footer height
const HEADER_HEIGHT = 80; // Adjust this value to control the header height

const SectionContainer = styled(Box)({
  position: "relative",
  height: `calc(100vh - ${HEADER_HEIGHT}px - ${FOOTER_HEIGHT}px)`,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  overflow: "hidden",
});

const useBackButtonDetector = (onBack) => {
  useEffect(() => {
    const handleBackButton = (event) => {
      event.preventDefault();
      onBack(); // Callback function when back button is detected
    };

    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener("popstate", handleBackButton);

    return () => window.removeEventListener("popstate", handleBackButton);
  }, [onBack]);
};

export default function ThankYouPage({
  params,
}: {
  params: { businessName: string; requestID: string };
}) {
  const router = useRouter();

  const handleBack = () => {
    console.log("Back button pressed");
    router.push(`/client/${params.businessName}/book`); // Redirect to the business page
    // Your custom logic here
  };

  useBackButtonDetector(handleBack);

  return (
    <>
      <SectionContainer>
        <ThankYouRequest booking_request_id={params.requestID} />
      </SectionContainer>
    </>
  );
}

Reset IDs postgresql database - snippet

George Pamfilis — Wed, 06 Mar 2024 20:09:53 +0000

I created a copy of a database so i can mutate the data and try things out. I was getting an error on insert.

sqlalchemy.exc.IntegrityError: (raised as a result of Query-invoked autoflush; consider using a session.no_autoflush block if this flush is occurring prematurely)
(psycopg2.errors.UniqueViolation) duplicate key value violates unique constraint "customers_pkey"
DETAIL: Key (id)=(14) already exists.

[SQL: INSERT INTO customers (user_id, first_name, last_name, email, phone_number) VALUES (%(user_id)s, %(first_name)s, %(last_name)s, %(email)s, %(phone_number)s) RETURNING customers.id]
[parameters: {'user_id': 1, 'first_name': 'myname', 'last_name': '', 'email': 'myemail', 'phone_number': ''}]
(Background on this error at: https://sqlalche.me/e/14/gkpj)

Here is a snippet that helped me out.

DO $$
DECLARE
    l_table RECORD;
    column_exists BOOLEAN;
BEGIN
    FOR l_table IN SELECT table_name FROM information_schema.tables WHERE table_schema = 'public' AND table_name != 'alembic_version'
    LOOP
        -- Check if 'id' column exists in the table
        SELECT EXISTS (
            SELECT FROM information_schema.columns 
            WHERE table_schema = 'public' 
            AND table_name = l_table.table_name 
            AND column_name = 'id'
        ) INTO column_exists;

        -- Log the table name and whether the 'id' column exists
        RAISE NOTICE 'Processing table: %, ID column exists: %', l_table.table_name, column_exists;

        -- If 'id' column exists, set the sequence value and log the action
        IF column_exists THEN
            EXECUTE FORMAT('SELECT setval(pg_catalog.quote_ident(''%s_id_seq''), COALESCE(MAX(id), 1)) FROM %I', l_table.table_name, l_table.table_name);
            RAISE NOTICE 'Sequence set for table: %', l_table.table_name;
        ELSE
            RAISE NOTICE 'No ID column for table: %', l_table.table_name;
        END IF;
    END LOOP;
END;
$$;

Trigger Expo Build GitLab CI - Snippet

George Pamfilis — Thu, 29 Feb 2024 15:39:56 +0000

Here is a snippet I use to trigger my apps to build. I have them set to manual because it costs money with Expo.

.gitlab-ci.yml snippet

eas_build_internal_android_developv2:
  stage: build-mobile
  image: node:16.17.0

  script:
    - npm install -g expo-cli
    - npm install -g eas-cli
    - cd mobileapp
    - npm i
    - EXPO_TOKEN=$EXPO_EAS_TOKEN eas build -p android --profile develop --no-wait

  only:
    refs:
      - develop
    changes:
      - mobileapp/**/* 
  when: manual

eas_build_internal_android_productionv2:
  stage: build-mobile
  image: node:16.17.0

  script:
    - npm install -g expo-cli
    - npm install -g eas-cli
    - cd mobileapp
    - npm i
    - EXPO_TOKEN=$EXPO_EAS_TOKEN eas build -p android --profile production --no-wait
  only:
    refs:
      - main
    changes:
      - mobileapp/**/* 
  when: manual

eas.json

{
  "cli": {
    "version": ">= 2.2.1"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "env": {
        "EXPO_PUBLIC_BACKEND_DOMAIN": "https://something.ngrok-free.app"
      },
      "channel": "local",
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "develop": {
      "channel": "develop",
      "env": {
        "EXPO_PUBLIC_BACKEND_DOMAIN": "https://apidev.something.com",
        "EXPO_PUBLIC_GROWTHBOOK_CLIENT_KEY": ""
      },
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "env": {
        "EXPO_PUBLIC_BACKEND_DOMAIN": "https://api.something.com",
        "EXPO_PUBLIC_GROWTHBOOK_CLIENT_KEY": ""
      },
      "channel": "main",
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

Might be also helpfull

app.json


{
  "expo": {
    "name": "mobileapp",
    "slug": "mobileapp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/something.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash_v2.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/splash_v2.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.something.someone"
    },
    "web": {
      "favicon": "./assets/something.png"
    },
    "plugins": ["expo-router"],

    "extra": {
      "router": {
        "origin": false
      },
      "eas": {
        "projectId": "something"
      }
    },
    "runtimeVersion": {
      "policy": "appVersion"
    },
    "updates": {
      "url": "https://u.expo.dev/something"
    }
  }
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

How to connect an external database to Kubernetes for a flask deployment.

George Pamfilis — Thu, 29 Dec 2022 11:32:08 +0000

The Problem.

I created a database on digital ocean and because I do not want to create a Kubernetes postgress database with persistent volumes and claims. I must connect to this External Service.

Digital ocean gave me this connection string for my `SQLALCHEMY_URI`

postgresql://user:password@hostname:25061/databasename?sslmode=require

It works with docker-compose and non docker flask run.

For Kubernetes though it complains that it cannot resolve the hostname.

We will rename the hostnameto digitaloceanpostgress. It can be anything. It must match the service.yml further down though.

So our deployment will look something like this. This is mine, yours could be different.

apiVersion: apps/v1 #  for k8s versions before 1.9.0 use apps/v1beta2  and before 1.8.0 use extensions/v1beta1
kind: Deployment
metadata:
  name: backend-deployment
  labels:
    app: backend-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend-deployment
  template:
    metadata:
      labels:
        app: backend-deployment
    spec:
      containers:
      - name: backend-deployment
        image: username/yourflaskserveretc:latest
        imagePullPolicy: Always
        ports:
        - containerPort: 8080
        env:
        - name: SQLALCHEMY_DATABASE_URI
        # Set this as a secret.
          value: "postgresql://user:password@digitaloceanpostgress:25061/databasename?sslmode=require"

Setting up the service.

Type in your terminal $ nslookup hostname (something.com) and paste the ip in the service.yml bellow.

kind: Service
apiVersion: v1
metadata:
  name: digitaloceanpostgress
spec:
  clusterIP: None
  ports:
  - port: 25061
---
kind: Endpoints
apiVersion: v1
metadata:
  name: digitaloceanpostgress
subsets:
  - addresses:
  # nslookup hostname given by digitalocean database.
      - ip: ip-from-nslookup
    ports:
      - port: 25061
        name: digitaloceanpostgress

Finito.

Disclaimer. Although this works for me it might not be the goto solution for a pro. I am still a newbie.